// Home page
const { useState: useStateH, useEffect: useEffectH } = React;

const HEADLINES = [
  { key: "primary",    t: <>Evidence-grade<br/>flight <em>reconstruction.</em></> },
  { key: "alt1",       t: <>Flight Data Reconstruction.<br/><em>Events Visualization with Precision.</em></> },
  { key: "alt2",       t: <>When the record<br/>must hold up to <em>scrutiny.</em></> },
  { key: "alt3",       t: <>The flight, as it<br/><em>actually occurred.</em></> },
];

function Home({ go }) {
  const [hl, setHl] = useStateH(0);
  const [panel, setPanel] = useStateH(false);

  return (
    <main>
      {/* ========== HERO ========== */}
      <section className="hero">
        <div className="hero-bg">
          <HeroImage/>
        </div>

        <div className="hero-inner fade-in">
          <div>
            <span className="eyebrow" style={{marginBottom: 40, display:'inline-flex'}}>
              Aviation Reconstruction & Analysis · Est. 2018
            </span>
            <h1 className="hero-headline">{HEADLINES[hl].t}</h1>
            <div className="hero-meta">
              <div>
                <p className="hero-meta-text">
                  Evidence-grade flight reconstruction, parameter analysis, and
                  technical visualisation for incidents of public and legal consequence.
                </p>
              </div>
              <div>
                <p className="hero-meta-text">
                  Retained by counsel, investigating authorities, operators, insurers,
                  and broadcasters under mutual non-disclosure.
                </p>
              </div>
              <div>
                <div className="hero-cta-row" style={{marginTop: 6}}>
                  <button className="btn btn-primary" onClick={() => go("contact")}>
                    Initiate inquiry <span className="btn-arrow">→</span>
                  </button>
                  <button className="btn btn-ghost" onClick={() => go("work")}>
                    View work
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== CREDIBILITY STRIP ========== */}
      <section className="cred">
        <span className="mono" style={{letterSpacing:'0.16em'}}>Retained by / Consulted for</span>
        <div className="cred-list">
          {[
            "International law firms",
            "State investigation bureaus",
            "Scheduled operators",
            "Business & rotorcraft fleets",
            "Aviation insurers & reinsurers",
            "Broadcast & documentary producers",
            "Regulatory authorities",
            "Defence counsel & plaintiff firms",
          ].map((c, i) => (
            <span key={i} className="cred-item">
              <span className="cred-item-tick"/>{c}
            </span>
          ))}
        </div>
      </section>

      {/* ========== SERVICES ========== */}
      <section className="section" style={{paddingTop: 'clamp(48px, 5.5vw, 80px)', paddingBottom: 0}}>
        <header className="section-head-centered">
          <span className="section-eyebrow">
            <span className="section-eyebrow-rule"/>Capabilities<span className="section-eyebrow-rule"/>
          </span>
          <h2 className="section-head-centered-title">
            Six disciplines.<br/><em>One continuous record.</em>
          </h2>
          <p className="section-head-centered-sub">
            Each engagement pairs primary flight data with independent source
            material — radar, ATC audio, imagery, meteorological archives — to
            produce a defensible technical narrative of what occurred.
          </p>
        </header>

        <div className="svc-grid">
          {[
            ["01", "Flight Animation & Reconstruction",
             "Time-synchronous 3D reconstruction from FDR, QAR, ADS-B, and derived sources. Frame-accurate, coordinate-true.",
             "Primary"],
            ["02", "Flight Data Analysis & Plotting",
             "Decoding review, parameter validation, cross-correlation, and plot production at publication standard.",
             "Primary"],
            ["03", "Litigation Support Visuals",
             "Exhibits engineered to withstand cross-examination. Methodology documented; sources disclosed.",
             "Expert"],
            ["04", "Investigation Support",
             "Independent technical assistance to authorities, counsel, and internal safety departments.",
             "Advisory"],
            ["05", "Safety & Operational Analysis",
             "Fleet-wide flight data monitoring review, exceedance analysis, and operational trend reporting.",
             "Analysis"],
            ["06", "Media & Documentary Graphics",
             "Technically accurate visuals for long-form journalism and factual broadcast, under editorial review.",
             "Editorial"],
          ].map(([num, title, desc, kind]) => (
            <div className="svc-card" key={num} onClick={() => go("services")}>
              <span className="svc-card-accent"/>
              <div className="svc-card-head">
                <span className="svc-card-num">§ {num}</span>
                <span className="svc-card-pill">
                  <span className="svc-card-pill-dot"/>{kind}
                </span>
              </div>
              <h3 className="svc-card-title">{title}</h3>
              <p className="svc-card-desc">{desc}</p>
              <span className="svc-card-cta">
                View capability <span className="svc-card-cta-arrow">→</span>
              </span>
            </div>
          ))}
        </div>
      </section>

      {/* ========== FEATURED WORK ========== */}
      <section className="section">
        <header className="section-head-centered">
          <span className="section-eyebrow">
            <span className="section-eyebrow-rule"/>Selected work<span className="section-eyebrow-rule"/>
          </span>
          <h2 className="section-head-centered-title">
            Selected reconstructions,<br/><em>redacted for discretion.</em>
          </h2>
          <p className="section-head-centered-sub">
            Engagements are discussed only in general terms and with permission.
            Identifying details — operator, registration, location — are withheld
            unless already part of the public record.
          </p>
        </header>

        <div className="work-featured">
          {/* Row 1 — wide left */}
          <div className="work-row wide-left">
            <WorkCard
              id="W-001" tag="Reconstruction / CAT"
              title="Commercial Air Transport Event"
              meta={["00:04:12 RUNTIME", "1920×1080 · 60P", "CINE-MASTER"]}
              visual={<img src="media/svc-04-weather.png" alt="Commercial Air Transport Event" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>}
              ratio="21 / 11"
            />
            <WorkCard
              id="W-002" tag="Reconstruction / Rotorcraft"
              title="Rotorcraft Occurrence Reconstruction and Analysis"
              meta={["00:02:48", "4K"]}
              visual={<img src="media/work-rotorcraft.png" alt="Rotorcraft Occurrence Reconstruction and Analysis" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>}
              ratio="21 / 11"
            />
          </div>

          {/* Row 2 — wide right */}
          <div className="work-row wide-right">
            <WorkCard
              id="W-003" tag="Litigation / Exhibit"
              title="Detailed FlightPath"
              meta={["07 EXHIBIT FRAMES", "COURTROOM DISPLAY"]}
              visual={<img src="media/work-flightpath.png" alt="Detailed FlightPath" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>}
              ratio="4 / 5"
              tall
            />
            <WorkCard
              id="W-004" tag="Data / Plotting"
              title="Flight Parameter Readout — FDR Decode"
              meta={["128 PARAMETERS", "4 TRACES PLOTTED"]}
              visual={<img src="media/work-fdr.png" alt="Flight Parameter Readout — FDR Decode" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>}
              ratio="1537 / 777"
            />
          </div>

          {/* Row 3 — full */}
          <div className="work-row single">
            <WorkCard
              id="W-005" tag="Broadcast / Documentary"
              title="Full Flight Path Reconstruction Animation"
              meta={["18 × SEQUENCES", "BROADCAST DELIVERY", "CINE-MASTER + PROXY"]}
              visual={<img src="media/svc-03-litigation.png" alt="Full Flight Path Reconstruction Animation" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>}
              ratio="2555 / 1337"
              wide
            />
          </div>
        </div>

        <div style={{display:'flex', justifyContent:'flex-end', marginTop: 40}}>
          <button className="btn btn-ghost" onClick={() => go("work")}>
            Full index of work <span className="btn-arrow">→</span>
          </button>
        </div>
      </section>

      {/* ========== PROCESS ========== */}
      <section className="section" style={{background:'rgba(238,236,230,0.025)', borderTop:'1px solid var(--hair)', borderBottom:'1px solid var(--hair)'}}>
        <div className="section-header">
          <div className="section-index">§ 03 / Method</div>
          <div>
            <h2 className="section-title">A defensible record,<br/><em>produced in five phases.</em></h2>
            <p className="section-kicker">
              The same workflow applies whether the deliverable is a broadcast
              sequence or a courtroom exhibit. Nothing is reconstructed without
              provenance; nothing is rendered without review.
            </p>
          </div>
        </div>

        <div className="proc-list">
          {[
            ["01", "Brief & data review", "Scope, timeline, constraints. Data inventory and chain-of-custody established on intake.", ["FDR · QAR", "RADAR · ADS-B", "ATC · METAR"]],
            ["02", "Source validation",   "Time base alignment, parameter integrity checks, cross-referencing against independent sources.", ["UTC sync", "Parameter audit"]],
            ["03", "Reconstruction & analysis", "Trajectory reconstruction; parameter plots; annotated findings. Methodology documented throughout.", ["Geodesic model", "6-DoF trajectory"]],
            ["04", "Visual production",    "Animation, graphics, and exhibit layouts produced to publication, courtroom, or broadcast standard.", ["4K / UHD", "Courtroom display"]],
            ["05", "Review & delivery",    "Internal QA, client review cycles, and delivery with full source disclosure and revision history.", ["QA pass", "Signed deliverable"]],
          ].map(([n, name, desc, tags]) => (
            <div className="proc-row" key={n}>
              <div className="proc-num">§ {n}</div>
              <div className="proc-name">{name}</div>
              <div className="proc-desc">{desc}</div>
              <div className="proc-tags">
                {tags.map(t => <span key={t} className="mono" style={{fontSize:9.5}}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ========== CTA BAND ========== */}
      <section className="cta-band">
        <div style={{position:'absolute', inset:0, opacity:0.35}}>
          <PlottingGrid/>
        </div>
        <div className="cta-band-inner">
          <div>
            <span className="eyebrow" style={{marginBottom: 28, display:'inline-flex'}}>§ 04 · Engagement</span>
            <h2 className="cta-band-title">
              Consult on a matter<br/><em>in confidence.</em>
            </h2>
            <p style={{color:'var(--paper-dim)', marginTop:24, maxWidth:'48ch', fontSize:15, lineHeight:1.6}}>
              Initial discussions are conducted under mutual non-disclosure.
              A response is returned within two working days, typically with a
              short list of clarifying questions.
            </p>
          </div>
          <button className="btn btn-primary" onClick={() => go("contact")}>
            Initiate inquiry <span className="btn-arrow">→</span>
          </button>
        </div>
      </section>
    </main>
  );
}

function WorkCard({ id, tag, title, meta = [], visual, ratio, tall, wide }) {
  return (
    <div className={`work-card ${tall ? 'tall' : ''} ${wide ? 'wide' : ''}`}
         style={ratio ? { aspectRatio: ratio } : undefined}>
      <div className="work-card-media">
        {visual}
      </div>
      <div className="work-card-corner">
        <span className="mono">▸ {id}</span>
      </div>
      <div className="work-card-overlay">
        <div className="work-card-meta">
          <span className="mono accent" style={{color:'var(--paper-dim)'}}>{tag}</span>
          <span className="work-card-title">{title}</span>
        </div>
        <div style={{display:'flex', flexDirection:'column', alignItems:'flex-end', gap:4}}>
          {meta.map(m => <span key={m} className="mono" style={{fontSize:9.5}}>{m}</span>)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Home, WorkCard });