/* Reusable section components for the TransDecode site. */

const SERVICES = [
  {
    n: "01",
    title: "Traffic impact & simulation",
    body: "Microsimulation in VISSIM/Aimsun to forecast flows, congestion and the impact of proposed developments — defensible numbers for approvals.",
    art: "flow",
  },
  {
    n: "02",
    title: "Road safety audits",
    body: "IRC SP-88-aligned audits across design, pre-opening and in-service stages. Risk register, cost-of-fix and prioritised remediation.",
    art: "safety",
  },
  {
    n: "03",
    title: "Public transport design",
    body: "Bus route rationalisation, BRT corridors, depot planning and IPT integration for tier-1 and tier-2 cities.",
    art: "transit",
  },
  {
    n: "04",
    title: "Pedestrian impact & analysis",
    body: "Walkability audits, footpath capacity and crossing demand. Designs that put people, not just vehicles, on the section.",
    art: "ped",
  },
  {
    n: "05",
    title: "Traffic surveys",
    body: "Manual + automatic counts, OD studies, speed–delay, parking and video analytics — clean, geo-tagged datasets you can re-use.",
    art: "data",
  },
  {
    n: "06",
    title: "Signal & junction design",
    body: "Phase plans, IRC 93 geometry, channelisation drawings and signal timing optimisation — coordinated corridor plans where needed.",
    art: "signal",
  },
];

function ServiceArt({ kind }) {
  // Simple in-card SVG illustration unique per service
  if (kind === "flow") return (
    <svg viewBox="0 0 200 80" preserveAspectRatio="none" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
      {[...Array(7)].map((_,i)=>(
        <path key={i} d={`M0 ${20 + i*7} Q 60 ${20 + i*7 + (i%2?-12:12)} 120 ${20 + i*7} T 200 ${20 + i*7}`}
              fill="none" stroke="currentColor" strokeOpacity={0.18 + i*0.06} strokeWidth="1" />
      ))}
    </svg>
  );
  if (kind === "safety") return (
    <svg viewBox="0 0 200 80" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
      <path d="M20 60 L100 12 L180 60" stroke="currentColor" strokeWidth="1" fill="none" strokeOpacity="0.4" />
      <circle cx="60" cy="40" r="3" fill="currentColor" />
      <circle cx="100" cy="22" r="3" fill="var(--signal)" />
      <circle cx="140" cy="40" r="3" fill="currentColor" />
      <line x1="20" y1="65" x2="180" y2="65" stroke="currentColor" strokeOpacity="0.3" strokeDasharray="4 4" />
    </svg>
  );
  if (kind === "transit") return (
    <svg viewBox="0 0 200 80" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
      <line x1="10" y1="40" x2="190" y2="40" stroke="currentColor" strokeOpacity="0.4" strokeDasharray="2 6" />
      {[20, 60, 100, 140, 180].map(x=>(
        <g key={x}>
          <rect x={x-6} y="34" width="12" height="12" stroke="currentColor" strokeOpacity="0.6" fill="none" />
          <circle cx={x} cy="40" r="1.5" fill="var(--signal)" />
        </g>
      ))}
    </svg>
  );
  if (kind === "ped") return (
    <svg viewBox="0 0 200 80" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
      {[...Array(12)].map((_,i)=>(
        <rect key={i} x={10+i*16} y="30" width="6" height="20" fill="currentColor" opacity={0.2 + (i%3)*0.2} />
      ))}
      <line x1="0" y1="55" x2="200" y2="55" stroke="var(--signal)" strokeWidth="1" />
    </svg>
  );
  if (kind === "data") return (
    <svg viewBox="0 0 200 80" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
      {[...Array(40)].map((_,i)=>{
        const h = 8 + Math.abs(Math.sin(i*0.7)) * 50;
        return <rect key={i} x={i*5} y={70-h} width="3" height={h} fill="currentColor" opacity={0.2 + (i%4)*0.15} />;
      })}
    </svg>
  );
  if (kind === "signal") return (
    <svg viewBox="0 0 200 80" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
      <line x1="0" y1="40" x2="200" y2="40" stroke="currentColor" strokeOpacity="0.3" />
      <line x1="100" y1="0" x2="100" y2="80" stroke="currentColor" strokeOpacity="0.3" />
      <circle cx="80" cy="20" r="4" fill="var(--green, #3aa766)" />
      <circle cx="120" cy="20" r="4" fill="var(--signal)" />
      <circle cx="80" cy="60" r="4" fill="#e8473a" />
      <circle cx="120" cy="60" r="4" fill="var(--signal)" />
    </svg>
  );
  return null;
}

function ServicesSection() {
  return (
    <section id="services" className="services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Services</div>
            <h2>The work, in six disciplines.</h2>
          </div>
          <p>Each engagement is delivered by a specialist team with clear scope, defensible methodology, and editable outputs in the formats your client expects.</p>
        </div>

        <div className="svc-grid">
          {SERVICES.map(s => (
            <div className="svc" key={s.n}>
              <div className="num">SVC · {s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="ic-art">
                <ServiceArt kind={s.art} />
              </div>
              <div className="svc-foot">
                <span>View brief</span>
                <span className="arrow">↗</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  {
    n: "01",
    title: "Research & data collection",
    body: "On-ground surveys, video analytics and behavioural studies. Geo-tagged, raw, auditable.",
    items: ["Manual + ATC counts", "OD & route choice", "Speed–delay studies", "Parking & pedestrian"],
  },
  {
    n: "02",
    title: "Simulation & analysis",
    body: "Calibrated models in VISSIM, Aimsun and Synchro. Sensitivity tested across scenarios.",
    items: ["Demand modelling", "Microsimulation", "Capacity & LOS", "Scenario library"],
  },
  {
    n: "03",
    title: "Design & recommendations",
    body: "Drawings, signal plans and reports — with phased implementation and a brief your engineer can build from.",
    items: ["Geometric design", "Signal phasing", "Cost & priority", "Stakeholder sign-off"],
  },
];

function ApproachSection() {
  return (
    <section id="approach" className="approach">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Approach</div>
            <h2>From count to corridor plan,<br/>in three rigorous phases.</h2>
          </div>
          <p>We don't lead with opinions. We lead with measured data, calibrated models, and recommendations that survive a design review board.</p>
        </div>

        <div className="steps">
          {STEPS.map((s, i) => (
            <div className="step" key={s.n}>
              <div className="num">PHASE {s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <ul>
                {s.items.map(it => <li key={it}>{it}</li>)}
              </ul>
              <div className="art">
                <StepArt kind={i} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StepArt({ kind }) {
  // Three different schematic illustrations
  if (kind === 0) return (
    <svg viewBox="0 0 300 120" style={{ width: "100%", height: "100%" }}>
      {[...Array(30)].map((_,i)=>(
        <rect key={i} x={10+i*9} y={70 - Math.random()*40} width="4" height={Math.random()*40 + 10}
              fill="oklch(0.82 0.165 85)" opacity={0.3 + Math.random()*0.5}/>
      ))}
      <line x1="0" y1="100" x2="300" y2="100" stroke="oklch(0.62 0.14 200)" strokeOpacity="0.5" />
      <text x="10" y="20" fill="oklch(0.62 0.14 200)" fontSize="9" fontFamily="var(--mono)">VEH/HR</text>
    </svg>
  );
  if (kind === 1) return (
    <svg viewBox="0 0 300 120" style={{ width: "100%", height: "100%" }}>
      {[...Array(8)].map((_,i)=>(
        <path key={i} d={`M0 ${15+i*12} Q 75 ${15+i*12 + (i%2?-8:8)} 150 ${15+i*12} T 300 ${15+i*12}`}
              fill="none" stroke="oklch(0.62 0.14 200)" strokeOpacity={0.2 + i*0.08} strokeWidth="1"/>
      ))}
      <circle cx="150" cy="60" r="3" fill="oklch(0.82 0.165 85)" />
    </svg>
  );
  // 2 — design
  return (
    <svg viewBox="0 0 300 120" style={{ width: "100%", height: "100%" }}>
      <rect x="0" y="50" width="300" height="20" fill="oklch(0.30 0.022 250)" />
      <rect x="140" y="0" width="20" height="120" fill="oklch(0.30 0.022 250)" />
      <line x1="0" y1="60" x2="140" y2="60" stroke="oklch(0.82 0.165 85)" strokeDasharray="3 4" />
      <line x1="160" y1="60" x2="300" y2="60" stroke="oklch(0.82 0.165 85)" strokeDasharray="3 4" />
      <line x1="150" y1="0" x2="150" y2="50" stroke="oklch(0.82 0.165 85)" strokeDasharray="3 4" />
      <line x1="150" y1="70" x2="150" y2="120" stroke="oklch(0.82 0.165 85)" strokeDasharray="3 4" />
      <circle cx="170" cy="38" r="3" fill="#3aa766" />
      <circle cx="130" cy="82" r="3" fill="#e8473a" />
    </svg>
  );
}

function AboutSection() {
  return (
    <section id="about" className="about">
      <div className="container">
        <div className="about-grid">
          <div>
            <div className="eyebrow">About</div>
            <h2>A small, deeply technical team out of <em style={{fontStyle:"normal", borderBottom:"3px solid var(--signal)"}}>IIT Delhi</em>.</h2>
            <p className="body-lg" style={{ marginTop: 14 }}>
              TransDecode was founded by transportation engineers who got tired of slow, opinion-led
              traffic studies. Our work is measured, model-calibrated and accountable —
              built for the design review boards that have to defend it.
            </p>

            <div className="about-points">
              <div className="about-point">
                <div className="k">01</div>
                <div className="t">Standards-aligned</div>
                <div className="v">IRC · MoRTH · ITDP · URDPFI</div>
              </div>
              <div className="about-point">
                <div className="k">02</div>
                <div className="t">Tooling</div>
                <div className="v">VISSIM · Aimsun · Synchro · QGIS</div>
              </div>
              <div className="about-point">
                <div className="k">03</div>
                <div className="t">Deliverables</div>
                <div className="v">Editable PDF + source files</div>
              </div>
              <div className="about-point">
                <div className="k">04</div>
                <div className="t">Turnaround</div>
                <div className="v">Survey 3–7d · TIA 2–4w · RSA 1–3w</div>
              </div>
            </div>

            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="https://calendly.com/transdecodex/30min">Schedule a call <span className="arr">→</span></a>
              <a className="btn btn-ghost" href="#contact">Read about the team</a>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 14 }}>
            <div className="placeholder" data-label="Site survey · drone shot" style={{ aspectRatio: "3/4" }}></div>
            <div style={{ display: "grid", gap: 14 }}>
              <div className="placeholder" data-label="Junction redesign · before/after" style={{ aspectRatio: "1/1" }}></div>
              <div className="placeholder" data-label="VISSIM model · screenshot" style={{ aspectRatio: "1/1" }}></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const TESTIMONIALS = [
  { tag: "Traffic Impact", text: "TransDecode's simulation reports were defensible enough to clear DDA and DUAC reviews in one cycle. We moved from concept to approval without rework.", name: "Rakesh Mehta", role: "Project Manager · Real estate", initials: "RM" },
  { tag: "Road Safety Audit", text: "Their RSA findings were specific, costed and prioritised — not a generic checklist. Two of the recommendations directly cut accident-prone zones on our highway stretch.", name: "Samantha Shastri", role: "Highway Authority Official", initials: "SS" },
  { tag: "Public Transport", text: "Public transport plan for a Tier-2 city. People-focused but engineered. The bus route rationalisation alone improved peak-hour ridership by an estimated 14%.", name: "Jignesh Patel", role: "Urban Development Consultant", initials: "JP" },
];

function TestimonialsSection() {
  return (
    <section className="testimonials">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Voices</div>
            <h2>Clients on the work.</h2>
          </div>
          <p>We're picky about the engagements we take. We're equally picky about the references we share.</p>
        </div>
        <div className="t-grid">
          {TESTIMONIALS.map(t => (
            <div className="t-card" key={t.name}>
              <div className="t-tag">{t.tag}</div>
              <blockquote>{t.text}</blockquote>
              <div className="t-author">
                <div className="av">{t.initials}</div>
                <div className="meta">
                  <div className="n">{t.name}</div>
                  <div className="r">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: "What does TransDecode actually deliver?", a: "Six disciplines: Traffic Impact & Simulation, Road Safety Audits, Public Transport Design, Pedestrian Impact, Traffic Surveys, and Signal/Junction Design. Every engagement ships with editable PDF + source files." },
  { q: "Who do you typically work with?", a: "Real-estate developers, infrastructure consultants and EPC firms, city/municipal bodies, highway authorities, and urban transport agencies. We adapt to client templates when needed." },
  { q: "Which standards do you align to?", a: "IRC, MoRTH, ITDP and URDPFI guidelines, plus city-specific bylaws. Our drawings and signal plans are formatted to clear design review boards on the first cycle." },
  { q: "How long does a typical assignment take?", a: "Survey: 3–7 days. TIA + simulation: 2–4 weeks. Road safety audit: 1–3 weeks per corridor. Signal/junction design: 1–2 weeks per junction. Faster on critical-path engagements." },
  { q: "What inputs do you need from us?", a: "Project location and drawings, land-use and access details, proposed built-up/parking, timelines, and any prior studies or approvals. For audits: chainage and typical sections." },
  { q: "Can you collect traffic data for us?", a: "Yes. Manual and automatic counts, OD surveys, speed–delay, parking, pedestrian counts and video analytics — anywhere in India." },
];

function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="eyebrow">FAQ</div>
            <h2 style={{ fontFamily: "var(--display)", fontWeight: 500, fontSize: "clamp(34px, 4vw, 52px)", letterSpacing: "-0.025em", lineHeight: 1.05, margin: "14px 0 22px" }}>
              Questions, answered straight.
            </h2>
            <p style={{ color: "var(--slate-2)", fontSize: 16, maxWidth: "36ch" }}>
              Don't see what you need? Email us — we read everything.
            </p>
            <div style={{ marginTop: 22, display: "grid", gap: 12 }}>
              <a className="btn btn-primary" href="#contact">Email the team <span className="arr">→</span></a>
              <a className="btn btn-ghost" href="https://calendly.com/transdecodex/30min">Book a 30-min consult</a>
            </div>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <div key={i} className={"faq-item" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span className="num">{String(i + 1).padStart(2, "0")}</span>
                  <span>{f.q}</span>
                  <span className="pm">+</span>
                </div>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FooterSection() {
  return (
    <footer id="contact">
      <div className="container">
        <div className="foot-grid">
          <div className="foot">
            <Logo size={32} mono color="var(--bone)" />
            <p className="intro">
              Decoding traffic. Designing solutions. A boutique transportation engineering studio working
              with cities and infrastructure clients across India.
            </p>
            <div className="foot-contact">
              <div className="l">Studio</div>
              <a>IIT Campus, Hauz Khas, New Delhi 110016</a>
              <div className="l" style={{ marginTop: 6 }}>Reach</div>
              <a href="tel:+919960251525">+91 99602 51525</a>
              <a href="mailto:support@transdecode.com">support@transdecode.com</a>
            </div>
          </div>
          <div className="foot">
            <h4>Services</h4>
            <ul>
              <li><a>Traffic Impact & Simulation</a></li>
              <li><a>Road Safety Audits</a></li>
              <li><a>Public Transport Design</a></li>
              <li><a>Pedestrian Analysis</a></li>
              <li><a>Traffic Surveys</a></li>
              <li><a>Signal & Junction Design</a></li>
            </ul>
          </div>
          <div className="foot">
            <h4>Studio</h4>
            <ul>
              <li><a>About</a></li>
              <li><a>Approach</a></li>
              <li><a>Case studies</a></li>
              <li><a>Careers</a></li>
              <li><a>Press</a></li>
            </ul>
          </div>
          <div className="foot">
            <h4>Resources</h4>
            <ul>
              <li><a>Standards alignment</a></li>
              <li><a>Methodology notes</a></li>
              <li><a>Sample report (PDF)</a></li>
              <li><a>Privacy</a></li>
              <li><a>Terms</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 TRANSDECODE · ALL RIGHTS RESERVED</span>
          <span>MON–FRI · 10:00–18:00 IST</span>
          <span>v.2026.05</span>
        </div>
      </div>
    </footer>
  );
}

window.ServicesSection = ServicesSection;
window.ApproachSection = ApproachSection;
window.AboutSection = AboutSection;
window.TestimonialsSection = TestimonialsSection;
window.FAQSection = FAQSection;
window.FooterSection = FooterSection;