/* TransDecode root app — composes all sections, nav, hero, stats, CTA, tweaks. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "density": 0.7,
  "navCompact": false,
  "showSimulation": true,
  "tone": "ink",
  "logoVariant": "ligature"
}/*EDITMODE-END*/;

const ACCENTS = {
  amber:  { signal: "oklch(0.82 0.165 85)", deep: "oklch(0.72 0.17 60)" },
  cyan:   { signal: "oklch(0.78 0.15 200)", deep: "oklch(0.62 0.14 200)" },
  green:  { signal: "oklch(0.78 0.15 145)", deep: "oklch(0.62 0.14 150)" },
  red:    { signal: "oklch(0.72 0.18 25)",  deep: "oklch(0.55 0.20 25)" },
};
const TONES = {
  ink:   { ink: "oklch(0.16 0.025 250)", ink2: "oklch(0.22 0.025 250)" },
  black: { ink: "oklch(0.12 0.005 250)", ink2: "oklch(0.18 0.005 250)" },
  forest:{ ink: "oklch(0.20 0.04 160)",  ink2: "oklch(0.26 0.04 160)" },
};

function Nav({ compact, logoVariant }) {
  const [open, setOpen] = React.useState(false);
  return (
    <header className="nav">
      <div className="container nav-inner" style={{ height: compact ? 56 : 68 }}>
        <Logo size={compact ? 26 : 30} variant={logoVariant} />
        <nav className="nav-links">
          <div style={{ position: "relative" }}
               onMouseEnter={() => setOpen(true)}
               onMouseLeave={() => setOpen(false)}>
            <a href="#services" className="nav-link has-menu">Services</a>
            {open && (
              <div className="menu-pop">
                {["Traffic impact & simulation","Road safety audits","Public transport design","Pedestrian impact","Traffic surveys","Signal & junction design"].map((s,i)=>(
                  <a href="#services" key={s}>
                    <span className="ic">·</span>
                    <span>
                      {s}<br/>
                      <small>SVC · {String(i+1).padStart(2,"0")}</small>
                    </span>
                  </a>
                ))}
              </div>
            )}
          </div>
          <a href="#approach" className="nav-link">Approach</a>
          <a href="#about" className="nav-link">About</a>
          <a href="#faq" className="nav-link">FAQ</a>
          <a href="#contact" className="nav-link">Contact</a>
          <a href="https://calendly.com/transdecodex/30min" className="btn btn-primary nav-cta" style={{ padding: "10px 16px", fontSize: 14 }}>
            Get in touch <span className="arr">→</span>
          </a>
        </nav>
      </div>
    </header>
  );
}

function Hero({ density, showSim, logoVariant }) {
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow-row">
            <span className="tag"><span className="dot"></span> Studio · Hauz Khas, New Delhi</span>
            <span className="tag" style={{ background: "transparent" }}>EST. 2022</span>
          </div>
          <h1>
            Decoding traffic.<br/>
            Designing <em>solutions</em>{" "}
            {logoVariant !== "none" && (
              <span style={{ display: "inline-block", verticalAlign: "middle" }}>
                <LogoMark size={48} color="var(--ink)" accent="var(--signal)" variant={logoVariant} />
              </span>
            )}
          </h1>
          <p className="lead">
            A small, technical studio out of IIT Delhi. We build the simulation, the safety case
            and the signal plan that lets your project clear review and ship.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="https://calendly.com/transdecodex/30min">
              Schedule a 30-min consult <span className="arr">→</span>
            </a>
            <a className="btn btn-ghost" href="#services">See the work</a>
          </div>
          <div className="hero-meta">
            <div>
              <div className="num">79<small>+</small></div>
              <div className="lab">Projects shipped</div>
            </div>
            <div>
              <div className="num">8</div>
              <div className="lab">States · India</div>
            </div>
            <div>
              <div className="num">100<small>%</small></div>
              <div className="lab">First-cycle approvals</div>
            </div>
          </div>
        </div>
        {showSim && <JunctionSim density={density} />}
      </div>
    </section>
  );
}

function StripBar() {
  const items = ["IRC SP-88", "MoRTH 2019", "ITDP", "URDPFI", "VISSIM 2024", "AIMSUN NEXT", "SYNCHRO 12", "QGIS", "OPEN STREETS DATA"];
  const dup = [...items, ...items];
  return (
    <div className="strip">
      <div className="strip-inner">
        {dup.map((s, i) => <div className="strip-item" key={i}>{s}</div>)}
      </div>
    </div>
  );
}

function StatsBanner() {
  const stats = [
    { v: "12.4", small: "M", l: "Vehicle-trips modelled", sub: "Across active engagements" },
    { v: "2.1", small: "K KM", l: "Highway corridor audited", sub: "Pan-India · 2022 — 2026" },
    { v: "184", small: "", l: "Signal junctions designed", sub: "Tier-1 + Tier-2 cities" },
    { v: "0", small: "", l: "Reports rejected at review", sub: "First-cycle clearance, every time" },
  ];
  return (
    <section className="stats">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ color: "color-mix(in oklch, var(--bone) 65%, transparent)" }}>Track record</div>
            <h2 style={{ color: "var(--bone)" }}>The numbers, audited.</h2>
          </div>
          <p style={{ color: "color-mix(in oklch, var(--bone) 65%, transparent)" }}>
            We publish these honestly because the work is the work. Every figure is auditable
            against signed deliverables.
          </p>
        </div>
        <div className="stats-grid">
          {stats.map(s => (
            <div className="stat" key={s.l}>
              <div className="v">{s.v}<small>{s.small}</small></div>
              <div className="l">{s.l}</div>
              <div className="sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MapSection() {
  return (
    <section className="map" id="coverage">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Coverage</div>
            <h2>On-ground, where you build.</h2>
          </div>
          <p>
            We deploy survey teams and signal engineers anywhere in India. Hover the list to inspect
            an active region, or talk to us about a corridor we don't yet show.
          </p>
        </div>
        <IndiaMap />
      </div>
    </section>
  );
}

function SignalDemoSection() {
  return (
    <section id="sandbox" className="signal-demo">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Sandbox</div>
            <h2>A working sliver of our signal model.</h2>
          </div>
          <p>
            This is a stripped-down version of the simulation we run for full junction redesigns.
            The full model adds turning movements, saturation flow, pedestrian phases and corridor coordination.
          </p>
        </div>
        <SignalDemo />
      </div>
    </section>
  );
}

function CTABanner() {
  return (
    <section className="cta-banner">
      <div className="container cta-inner">
        <h2>
          <small>Ready when you are</small>
          One call. Survey, simulation,<br/>signal plan — all in motion by Friday.
        </h2>
        <div className="cta-actions">
          <a className="btn btn-primary" href="https://calendly.com/transdecodex/30min">
            Schedule a call <span className="arr">→</span>
          </a>
          <a className="btn btn-ghost" style={{ borderColor: "color-mix(in oklch, var(--ink) 35%, transparent)" }} href="tel:+919960251525">
            +91 99602 51525
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---- Reveal-on-scroll observer ---- */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      }
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    const acc = ACCENTS[tweaks.accent] || ACCENTS.amber;
    root.style.setProperty("--signal", acc.signal);
    root.style.setProperty("--signal-deep", acc.deep);
    const tone = TONES[tweaks.tone] || TONES.ink;
    root.style.setProperty("--ink", tone.ink);
    root.style.setProperty("--ink-2", tone.ink2);
  }, [tweaks.accent, tweaks.tone]);

  return (
    <>
      <Nav compact={tweaks.navCompact} logoVariant={tweaks.logoVariant} />
      <Hero density={tweaks.density} showSim={tweaks.showSimulation} logoVariant={tweaks.logoVariant} />
      <StripBar />
      <ServicesSection />
      <ApproachSection />
      <AboutSection />
      <MapSection />
      <StatsBanner />
      <SignalDemoSection />
      <TestimonialsSection />
      <FAQSection />
      <CTABanner />
      <FooterSection />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Logo">
          <TweakSelect
            label="Mark"
            value={tweaks.logoVariant}
            onChange={v => setTweak("logoVariant", v)}
            options={[
              { value: "ligature", label: "TD ligature (monogram)" },
              { value: "pulse",    label: "Pulse signature" },
              { value: "vector",   label: "Vector arrow" },
              { value: "diamond",  label: "Diamond stack" },
              { value: "slash",    label: "Double slash" },
              { value: "node",     label: "Network node" },
              { value: "aperture", label: "Aperture" },
              { value: "grid",     label: "Decoded grid" },
              { value: "compass",  label: "Compass quad" },
              { value: "merge",    label: "Half-circle merge" },
              { value: "none",     label: "Wordmark only" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Brand">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={v => setTweak("accent", v)}
            options={[
              { value: "amber", color: "oklch(0.82 0.165 85)" },
              { value: "cyan",  color: "oklch(0.78 0.15 200)" },
              { value: "green", color: "oklch(0.78 0.15 145)" },
              { value: "red",   color: "oklch(0.72 0.18 25)" },
            ]}
          />
          <TweakRadio
            label="Tone"
            value={tweaks.tone}
            onChange={v => setTweak("tone", v)}
            options={[
              { value: "ink", label: "Ink-Navy" },
              { value: "black", label: "Pure" },
              { value: "forest", label: "Forest" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakSlider
            label="Traffic density"
            value={tweaks.density}
            onChange={v => setTweak("density", v)}
            min={0.2} max={1.6} step={0.1}
          />
          <TweakToggle
            label="Show live simulation"
            value={tweaks.showSimulation}
            onChange={v => setTweak("showSimulation", v)}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle
            label="Compact navigation"
            value={tweaks.navCompact}
            onChange={v => setTweak("navCompact", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* ---- Custom TweakColor (palette-style) since the imported one expects different shape ---- */
function TweakColor({ label, value, onChange, options }) {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <div style={{ fontFamily: "var(--mono, monospace)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "#666" }}>{label}</div>
      <div style={{ display: "flex", gap: 8 }}>
        {options.map(o => (
          <button key={o.value}
            onClick={() => onChange(o.value)}
            style={{
              width: 36, height: 36, borderRadius: 8,
              background: o.color,
              border: value === o.value ? "2px solid #111" : "2px solid #ddd",
              cursor: "pointer", padding: 0,
              boxShadow: value === o.value ? "0 0 0 2px white inset" : "none",
            }}
            aria-label={o.value}
          />
        ))}
      </div>
    </div>
  );
}
window.TweakColor = TweakColor;

ReactDOM.createRoot(document.getElementById("root")).render(<App />);