/* =============================================================
   Simthetica — placeholder brand mark + content sections
   ============================================================= */
const { useState, useEffect, useRef } = React;

/* ---- Brand wordmark logo ------------------------------------ */
function Mark({ size = 52 }) {
  const w = Math.round(size * 464 / 119);
  return (
    <svg width={w} height={size} viewBox="0 0 464 119" fill="none" aria-label="Simthetica">
      <path d="M195.349 41.5455V52.6818H163.158V41.5455H195.349ZM170.466 28.7386H185.291V78.5739C185.291 79.9427 185.5 81.0099 185.918 81.7756C186.335 82.518 186.915 83.04 187.658 83.3416C188.423 83.6432 189.305 83.794 190.303 83.794C190.999 83.794 191.695 83.736 192.391 83.62C193.087 83.4808 193.62 83.3764 193.991 83.3068L196.323 94.3388C195.581 94.5708 194.537 94.8376 193.191 95.1392C191.845 95.464 190.21 95.6612 188.284 95.7308C184.711 95.87 181.579 95.3944 178.888 94.304C176.22 93.2135 174.143 91.5199 172.658 89.223C171.174 86.9261 170.443 84.026 170.466 80.5227V28.7386ZM215.1 64.0966V95H200.274V23.7273H214.682V50.9766H215.309C216.515 47.8213 218.464 45.3504 221.155 43.5639C223.846 41.7543 227.222 40.8494 231.282 40.8494C234.994 40.8494 238.231 41.6615 240.992 43.2855C243.776 44.8864 245.934 47.1948 247.465 50.2109C249.019 53.2038 249.785 56.7884 249.762 60.9645V95H234.936V63.6094C234.96 60.3149 234.124 57.7512 232.431 55.9183C230.76 54.0855 228.417 53.169 225.401 53.169C223.382 53.169 221.596 53.5982 220.042 54.4567C218.51 55.3151 217.304 56.5679 216.422 58.2152C215.564 59.8393 215.123 61.7997 215.1 64.0966ZM279.91 96.044C274.411 96.044 269.678 94.9304 265.711 92.7031C261.767 90.4527 258.727 87.2741 256.593 83.1676C254.458 79.0379 253.391 74.1541 253.391 68.5163C253.391 63.0178 254.458 58.192 256.593 54.0391C258.727 49.8861 261.732 46.6496 265.606 44.3295C269.504 42.0095 274.075 40.8494 279.318 40.8494C282.844 40.8494 286.127 41.4179 289.167 42.5547C292.229 43.6683 294.897 45.3504 297.171 47.6009C299.468 49.8513 301.254 52.6818 302.53 56.0923C303.806 59.4796 304.444 63.447 304.444 67.9943V72.0661H259.307V62.8785H290.489C290.489 60.7441 290.025 58.8532 289.097 57.206C288.169 55.5587 286.881 54.2711 285.234 53.343C283.61 52.3918 281.719 51.9162 279.562 51.9162C277.311 51.9162 275.316 52.4382 273.576 53.4822C271.859 54.5031 270.513 55.8835 269.539 57.6236C268.564 59.3404 268.066 61.2545 268.042 63.3658V72.1009C268.042 74.7457 268.53 77.031 269.504 78.9567C270.502 80.8823 271.905 82.3672 273.715 83.4112C275.525 84.4553 277.671 84.9773 280.153 84.9773C281.8 84.9773 283.308 84.7453 284.677 84.2812C286.046 83.8172 287.218 83.1212 288.192 82.1932C289.167 81.2652 289.909 80.1283 290.42 78.7827L304.131 79.6875C303.435 82.982 302.008 85.8589 299.851 88.3182C297.716 90.7543 294.955 92.6567 291.568 94.0256C288.204 95.3712 284.318 96.044 279.91 96.044ZM336.672 41.5455V52.6818H304.481V41.5455H336.672ZM311.789 28.7386H326.614V78.5739C326.614 79.9427 326.823 81.0099 327.241 81.7756C327.658 82.518 328.238 83.04 328.981 83.3416C329.746 83.6432 330.628 83.794 331.625 83.794C332.321 83.794 333.017 83.736 333.714 83.62C334.41 83.4808 334.943 83.3764 335.314 83.3068L337.646 94.3388C336.904 94.5708 335.86 94.8376 334.514 95.1392C333.168 95.464 331.533 95.6612 329.607 95.7308C326.034 95.87 322.902 95.3944 320.211 94.304C317.543 93.2135 315.466 91.5199 313.981 89.223C312.496 86.9261 311.766 84.026 311.789 80.5227V28.7386ZM385.422 96.044C379.947 96.044 375.237 94.884 371.293 92.5639C367.372 90.2206 364.356 86.9725 362.245 82.8196C360.156 78.6667 359.112 73.8873 359.112 68.4815C359.112 63.0062 360.168 58.2036 362.279 54.0739C364.414 49.9209 367.442 46.6844 371.362 44.3643C375.283 42.0211 379.947 40.8494 385.352 40.8494C390.016 40.8494 394.099 41.6963 397.602 43.3899C401.106 45.0836 403.878 47.4616 405.92 50.5241C407.962 53.5866 409.087 57.1828 409.296 61.3125H395.306C394.911 58.6444 393.867 56.4983 392.174 54.8743C390.503 53.227 388.311 52.4034 385.596 52.4034C383.299 52.4034 381.292 53.0298 379.576 54.2827C377.882 55.5123 376.559 57.3104 375.608 59.6768C374.657 62.0433 374.181 64.9086 374.181 68.2727C374.181 71.6832 374.645 74.5833 375.573 76.973C376.525 79.3627 377.859 81.1839 379.576 82.4368C381.292 83.6896 383.299 84.3161 385.596 84.3161C387.29 84.3161 388.809 83.968 390.155 83.272C391.524 82.576 392.649 81.5668 393.531 80.2443C394.436 78.8987 395.027 77.2862 395.306 75.407H409.296C409.064 79.4903 407.95 83.0864 405.955 86.1953C403.983 89.281 401.257 91.6939 397.776 93.4339C394.296 95.174 390.178 96.044 385.422 96.044ZM428.151 96.0092C424.74 96.0092 421.701 95.4176 419.033 94.2344C416.365 93.0279 414.253 91.2531 412.699 88.9098C411.168 86.5433 410.402 83.5968 410.402 80.0703C410.402 77.1006 410.947 74.6065 412.038 72.5881C413.128 70.5696 414.613 68.9455 416.492 67.7159C418.371 66.4863 420.506 65.5582 422.896 64.9318C425.308 64.3054 427.837 63.8646 430.482 63.6094C433.591 63.2846 436.097 62.983 437.999 62.7045C439.902 62.4029 441.282 61.9621 442.141 61.3821C442.999 60.8021 443.428 59.9437 443.428 58.8068V58.598C443.428 56.3939 442.732 54.6887 441.34 53.4822C439.971 52.2758 438.022 51.6726 435.494 51.6726C432.826 51.6726 430.703 52.2642 429.125 53.4474C427.547 54.6075 426.503 56.0691 425.993 57.8324L412.281 56.7188C412.977 53.4706 414.346 50.6634 416.388 48.2969C418.429 45.9072 421.063 44.0743 424.288 42.7983C427.536 41.4991 431.294 40.8494 435.563 40.8494C438.533 40.8494 441.375 41.1974 444.089 41.8935C446.827 42.5895 449.252 43.6683 451.363 45.13C453.497 46.5916 455.179 48.4709 456.409 50.7678C457.639 53.0414 458.254 55.7675 458.254 58.946V95H444.194V87.5874H443.776C442.918 89.2578 441.769 90.7311 440.331 92.0071C438.893 93.2599 437.164 94.246 435.146 94.9652C433.127 95.6612 430.795 96.0092 428.151 96.0092ZM432.396 85.7777C434.577 85.7777 436.503 85.3485 438.173 84.4901C439.844 83.6084 441.155 82.4252 442.106 80.9403C443.057 79.4555 443.533 77.7734 443.533 75.8942V70.2216C443.069 70.5232 442.431 70.8016 441.619 71.0568C440.83 71.2888 439.937 71.5092 438.939 71.718C437.941 71.9036 436.944 72.0777 435.946 72.2401C434.948 72.3793 434.044 72.5069 433.232 72.6229C431.491 72.8781 429.972 73.2841 428.673 73.8409C427.373 74.3977 426.364 75.1518 425.645 76.103C424.926 77.031 424.566 78.1911 424.566 79.5831C424.566 81.6016 425.297 83.1444 426.759 84.2116C428.243 85.2557 430.123 85.7777 432.396 85.7777Z" fill="white"/>
      <path d="M44.8587 44.2251C44.5803 41.4178 43.3854 39.237 41.2741 37.6825C39.1629 36.1281 36.2976 35.3508 32.6783 35.3508C30.219 35.3508 28.1425 35.6989 26.4489 36.3949C24.7552 37.0677 23.456 38.0073 22.5511 39.2138C21.6695 40.4202 21.2287 41.7891 21.2287 43.3203C21.1823 44.5964 21.4491 45.71 22.0291 46.6612C22.6323 47.6125 23.456 48.4361 24.5 49.1321C25.544 49.8049 26.7505 50.3965 28.1193 50.907C29.4882 51.3942 30.9498 51.8118 32.5043 52.1598L38.9077 53.691C42.0166 54.3871 44.8703 55.3151 47.4688 56.4751C50.0672 57.6352 52.3177 59.062 54.2202 60.7557C56.1226 62.4493 57.5959 64.4446 58.6399 66.7415C59.7072 69.0384 60.2524 71.6716 60.2756 74.6413C60.2524 79.0031 59.1387 82.7848 56.9347 85.9865C54.7538 89.165 51.5985 91.6359 47.4688 93.3991C43.3622 95.1392 38.4089 96.0092 32.6087 96.0092C26.8549 96.0092 21.8435 95.1276 17.5746 93.3643C13.3288 91.6011 10.0111 88.991 7.62145 85.5341C5.25497 82.054 4.01373 77.7502 3.89773 72.6229H18.4794C18.6418 75.0125 19.3262 77.0078 20.5327 78.6087C21.7623 80.1863 23.398 81.3812 25.4396 82.1932C27.5045 82.982 29.8362 83.3764 32.4347 83.3764C34.9867 83.3764 37.2024 83.0052 39.0817 82.2628C40.9841 81.5204 42.4574 80.4879 43.5014 79.1655C44.5455 77.843 45.0675 76.3234 45.0675 74.6065C45.0675 73.0057 44.5919 71.66 43.6406 70.5696C42.7126 69.4792 41.3438 68.5511 39.5341 67.7855C37.7476 67.0199 35.5552 66.3239 32.9567 65.6974L25.196 63.7486C19.187 62.2869 14.4425 60.0017 10.9624 56.8928C7.48224 53.7839 5.75379 49.5961 5.77699 44.3295C5.75379 40.0142 6.90223 36.2441 9.2223 33.0192C11.5656 29.7943 14.7789 27.277 18.8622 25.4673C22.9455 23.6577 27.5857 22.7528 32.7827 22.7528C38.0724 22.7528 42.6894 23.6577 46.6335 25.4673C50.6009 27.277 53.6866 29.7943 55.8906 33.0192C58.0947 36.2441 59.2315 39.9794 59.3011 44.2251H44.8587Z" fill="#0067E5"/>
      <path d="M341 95.4546V42H355.825V95.4546H341Z" fill="white"/>
      <path d="M85.0742 95V41.5454H99.2034V50.9766H99.8298C100.943 47.8445 102.8 45.3736 105.398 43.5639C107.997 41.7543 111.105 40.8494 114.725 40.8494C118.39 40.8494 121.511 41.7659 124.086 43.5987C126.662 45.4084 128.378 47.8677 129.237 50.9766H129.794C130.884 47.9141 132.856 45.4664 135.71 43.6335C138.587 41.7775 141.986 40.8494 145.907 40.8494C150.895 40.8494 154.943 42.4387 158.052 45.6172C161.184 48.7725 162.75 53.2502 162.75 59.0504V95H147.96V61.9737C147.96 59.004 147.171 56.7767 145.593 55.2919C144.016 53.807 142.044 53.0646 139.677 53.0646C136.986 53.0646 134.886 53.9231 133.378 55.6399C131.87 57.3336 131.116 59.5724 131.116 62.3565V95H116.743V61.6605C116.743 59.0388 115.989 56.9507 114.481 55.3963C112.996 53.8418 111.036 53.0646 108.6 53.0646C106.952 53.0646 105.468 53.4822 104.145 54.3175C102.846 55.1295 101.814 56.2779 101.048 57.7628C100.282 59.2244 99.8994 60.9413 99.8994 62.9133V95H85.0742Z" fill="#0067E5"/>
      <path d="M64.253 95V41.5454H79.0783V95H64.253Z" fill="#0067E5"/>
      <path d="M348.8 39L341.5 32.5L348.8 26L356 32.5L348.8 39Z" fill="#FF0099"/>
      <path d="M72.3 39L65 32.5L72.3 26L79.5 32.5L72.3 39Z" fill="#FF0099"/>
    </svg>
  );
}

/* ---- shared: section reveal-on-scroll wrapper -------------- */
function Reveal({ children, className = '', as = 'div', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // reveal immediately if already within (or near) the viewport on mount
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight * 0.92) { el.classList.add('in'); return; }
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); } });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.01 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return <Tag ref={ref} className={'reveal ' + className} {...rest}>{children}</Tag>;
}

/* ---- NAV ---------------------------------------------------- */
function Nav({ onJoin }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const go = (id) => () => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: 'smooth' });
  };
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="wrap">
        <div className="brand" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          <Mark />
        </div>
        <div className="nav-links">
          <button className="nav-link" onClick={go('pilots')}>Pilots</button>
          <button className="nav-link" onClick={go('customers')}>Data customers</button>
          <button className="nav-link" onClick={go('capture')}>What we capture</button>
          <button className="nav-link" onClick={go('how')}>How it works</button>
        </div>
        <div className="nav-right">
          <button className="btn btn-primary" onClick={() => onJoin('pilot')}>Join beta</button>
        </div>
      </div>
    </nav>
  );
}

/* ---- HERO --------------------------------------------------- */
function Hero({ onJoin }) {
  return (
    <header className="hero" id="top">
      <div className="wrap">
        <div className="hero-inner">
          <h1>Turning flight simulation tracks into <span className="glow">structured autonomy data for overlooked + critical flight phases</span></h1>
          <p className="sub">
            Simthetica captures human-flown launch, recovery, and airport-surface scenarios from high-fidelity flight simulators, producing structured data for aviation safety and autonomy applications.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={() => onJoin('pilot')}>
              Join the pilot beta <I.Arrow size={16} />
            </button>
            <button className="btn btn-secondary btn-lg" onClick={() => onJoin('data')}>
              My organization needs this data
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---- BLOCK 1: PILOT VALUE ----------------------------------- */
function PilotValue({ onJoin }) {
  const points = [
    'Complete open missions or assigned data bounties',
    'Capture telemetry, environment, flight state, and optional comms',
    'Build a verified contributor record over time',
    'Qualify for paid data missions as the network grows',
  ];
  return (
    <section className="section" id="pilots">
      <div className="wrap">
        <div className="split">
          <Reveal>
            <p>For pilots</p>
            <h2>Your flight sim procedural experience and skill has value beyond just vanity landing rate metrics.</h2>
            <p className="lede">
              Every realistic flight contains decisions, corrections, procedures, communications,
              and aircraft-state changes that are hard to recreate with scripts
              alone. Simthetica gives serious sim pilots an economically productive way to contribute useful aviation
              data while flying in scenarios they already pursue.
            </p>
            <ul className="feature-list">
              {points.map((p, i) => (
                <li key={i}>
                  <span className="tick"><I.Check size={13} /></span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 'var(--space-8)' }}>
              <button className="btn btn-primary" onClick={() => onJoin('pilot')}>
                Apply for the pilot beta <I.Arrow size={16} />
              </button>
            </div>
          </Reveal>

          <Reveal>
            <div className="logbook">
              <div className="logbook-head">
                <span className="ttl">Session trace · SHB1421</span>
                <span className="pill verified"><span className="glyph"></span>Accepted</span>
              </div>
              {[
                { r: 'EGLL → EGCC', d: 'IFR · A320 · low-vis taxi + departure', p: '1.4h' },
                { r: 'KSEA → KPDX', d: 'Night visual approach · PAPI', p: '0.8h' },
                { r: 'LFPG ground', d: 'Surface movement · hold-short compliance', p: '0.3h' },
                { r: 'KBOS → KJFK', d: 'Unstable approach · go-around', p: '1.1h' },
              ].map((row, i) => (
                <div className="logbook-row" key={i}>
                  <div>
                    <div className="route">{row.r}</div>
                    <div className="desc">{row.d}</div>
                  </div>
                  <div></div>
                  <div className="phase mono">{row.p}</div>
                </div>
              ))}
              <div className="logbook-row" style={{ background: 'rgba(11,183,167,0.04)' }}>
                <div className="desc" style={{ color: 'var(--fg-muted)' }}>Contributor standing</div>
                <div></div>
                <span className="pill info"><span className="glyph"></span>Verified · tier 2</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---- BLOCK 3: WHAT SIMTHETICA CAPTURES ---------------------- */
function Capture() {
  const cats = [
    { ic: 'Gauge', t: 'Flight state', d: 'Position, altitude, attitude, speed, heading, vertical speed, flight phase, and aircraft configuration.' },
    { ic: 'Sliders', t: 'Control & systems', d: 'Throttle, yoke or stick, rudder, trim, gear, flaps, brakes, autopilot, flight-director modes, and avionics interactions.' },
    { ic: 'Cloud', t: 'Environment', d: 'Airport, runway, taxiway, weather, visibility, lighting, wind, traffic, terrain, time of day, and scenery context.' },
    { ic: 'Route', t: 'Pilot behavior', d: 'Procedure execution, timing, corrections, readbacks, deviations, hesitation, error recovery, and scenario outcome.' },
    { ic: 'Radio', t: 'Comms context', d: 'ATC instructions, readbacks, frequency changes, clearance compliance, and phraseology events — when enabled by the pilot.', opt: true },
    { ic: 'Layers', t: 'Synchronized trace', d: 'Every stream time-aligned into one replayable, searchable record of what the pilot saw and what happened next.' },
  ];
  return (
    <section className="section" id="capture">
      <div className="wrap">
        <Reveal className="section-head">
          <p>What we capture</p>
          <h2>Not just frame grabs. Complete aviation scenario traces.</h2>
          <p className="lede">
            A Simthetica session combines frame captures, optional infrared interpretations, vehicle telemetry, and control inputs into one synchronized data record.
          </p>
        </Reveal>
        <Reveal className="capture-grid">
          {cats.map((c, i) => {
            const Ic = I[c.ic];
            return (
              <div className={'cap-card' + (c.opt ? ' optional' : '')} key={i}>
                <div className="ico"><Ic size={19} /></div>
                {c.opt && <span className="pill pending opt-tag"><span className="glyph"></span>Optional · pilot-enabled</span>}
                <h4>{c.t}</h4>
                <p>{c.d}</p>
              </div>
            );
          })}
        </Reveal>
        <Reveal className="capture-foot">
          The result is a structured aviation trace — a replayable, searchable record of what the
          pilot saw, what the aircraft was doing, what the scenario required, and what happened next.
        </Reveal>
      </div>
    </section>
  );
}

/* ---- BLOCK 2: DEMAND-SIDE ----------------------------------- */
function Demand({ onJoin }) {
  const sources = [
    { t: 'Autonomous ground, launch & recovery', d: 'Existing datasets cover enroute and mission phases, overlooking critical start and finish actions. Simthetica specializes in these areas.' },
    { t: 'Airport surface safety', d: 'Taxi, runway crossing, hold-short, low-visibility, and runway-incursion scenarios with movement and clearance context.' },
    { t: 'Aviation AI & world models', d: 'Rights-cleared, state-aligned aviation sequences for training or evaluating models that treat flight as an embodied task.' },
    { t: 'Training & safety analytics', d: 'Human-error, recovery, procedure-following, and workload scenarios for improving instruction and safety systems.' },
  ];
  return (
    <section className="section band" id="customers">
      <div className="wrap">
        <Reveal className="section-head">
          <p style={{ color: 'var(--indigo-200)' }}>For data customers</p>
          <h2>Built for teams that need aviation behavior data they cannot easily collect themselves.</h2>
          <p className="lede">
            Simthetica serves organizations that need realistic, human-in-the-loop aviation traces
            but do not operate their own large network of instrumented sim pilots. Instead of generic
            synthetic screenshots or scripted trajectories, you get scenario-specific data packages
            aligned with aircraft state, pilot behavior, environment, and task context.
          </p>
        </Reveal>
        <Reveal className="demand-grid">
          {sources.map((s, i) => (
            <div className="demand-card" key={i}>
              <span className="num">{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </Reveal>
        <Reveal style={{ marginTop: 'var(--space-10)' }}>
          <button className="btn btn-secondary" onClick={() => onJoin('data')}>
            Discuss your challenging data needs <I.Arrow size={16} />
          </button>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- BLOCK 4: HOW IT WORKS ---------------------------------- */
function HowItWorks() {
  const steps = [
    { t: 'Join the beta', d: 'Create a Simthetica pilot profile and connect supported simulator environments.' },
    { t: 'Install the sidecar', d: 'Run the lightweight capture app alongside Microsoft Flight Simulator 2024.' },
    { t: 'Select a scenario', d: 'Choose open missions or assigned bounties: taxi, approach, landing, comms, weather, or procedural.' },
    { t: 'Fly normally', d: 'Use specified aircraft models, procedures, and flight conditions to fit assigned scenarios.' },
    { t: 'Review & submit', d: 'Review the captured session, confirm consent, and submit the trace.' },
    { t: 'Build standing', d: 'Develop a verified contributor record based on quality, consistency, and accepted submissions.' },
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <Reveal className="section-head">
          <p >How it works · pilots</p>
          <h2>Fly realistic missions. Contribute useful data. Stay in control.</h2>
        </Reveal>
        <Reveal className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="n">{String(i + 1).padStart(2, '0')}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---- BLOCK 5: SCENARIOS (3) --------------------------------- */
function Scenarios() {
  const scn = [
    { code: '1', t: 'Runway incursion', d: 'Capture hold-short compliance, conflicting clearances, and crossing conflicts as a pilot encounters — or narrowly avoids — an unauthorized runway entry.', tags: ['Ground', 'Incursion', 'Prediction'] },
    { code: '2', t: 'Ground unit deconfliction', d: 'React to unexpected vehicle traffic in fluid situations', tags: ['Ground', 'Workload', 'Recovery'] },
    { code: '3', t: 'Night visual approach', d: 'Capture visual cues, runway acquisition, PAPI/VASI interpretation, descent management, and configuration changes.', tags: ['Night', 'Visual', 'PAPI'] },
  ];
  return (
    <section className="section" id="scenarios">
      <div className="wrap">
        <Reveal className="section-head">
          <p>Example data missions</p>
          <h2>A sample of the scenarios pilots may be asked to fly.</h2>
        </Reveal>
        <Reveal className="scn-grid">
          {scn.map((s, i) => (
            <div className="scn-card" key={i}>
              <div className="code mono">{s.code}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <div className="scn-meta">
                {s.tags.map((t) => <span className="scn-tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---- BLOCK 7: WHY HUMAN-FLOWN ------------------------------- */
function WhyHuman() {
  const rows = [
    ['Deterministic', 'Realistic variation'],
    ['Unnatural trajectories', 'Human timing and workload'],
    ['Known outcomes', 'Ambiguity and correction'],
    ['Easy to scale', 'Harder to fake convincingly'],
    ['Useful for baseline coverage', 'Useful for behavioral realism'],
  ];
  return (
    <section className="section band">
      <div className="wrap">
        <Reveal className="section-head">
          <p >Why human-flown</p>
          <h2>Scripts can fly perfect paths. Humans create useful variance.</h2>
          <p className="lede">
            Scripted simulation is useful, but real pilots introduce timing, workload,
            interpretation, uncertainty, correction, and procedural judgment — often the difference
            between a clean synthetic animation and a trace that teaches a model how aviation
            actually unfolds.
          </p>
        </Reveal>
        <Reveal className="contrast">
          <div className="contrast-head">
            <div className="sc">Scripted simulation</div>
            <div className="hu">Human-flown simulation</div>
          </div>
          {rows.map((r, i) => (
            <div className="contrast-row" key={i}>
              <div className="sc">{r[0]}</div>
              <div className="hu"><I.Sparkle size={15} />{r[1]}</div>
            </div>
          ))}
        </Reveal>
        <Reveal>
          <p className="closing-line">
            Simthetica focuses on the layer automation struggles to synthesize:
            <span className="em"> plausible human aviation behavior inside realistic synthetic worlds.</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
}


/* ---- FOOTER ------------------------------------------------- */
function Footer({ onJoin }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div>
          <div className="brand">
            <Mark size={48} />
          </div>
          <p className="tag">Human-flown trace data from synthetic skies.</p>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <h5>Pilots</h5>
            <a onClick={() => onJoin('pilot')}>Join the beta</a>
            <a href="#how">How it works</a>
            <a href="#scenarios">Data missions</a>
          </div>
          <div className="footer-col">
            <h5>Customers</h5>
            <a onClick={() => onJoin('data')}>Request data</a>
            <a href="#capture">What we capture</a>
            <a href="#customers">Use cases</a>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <a href="#trust">Trust & consent</a>
            <a>Contact</a>
          </div>
        </div>
      </div>
      <div className="wrap">
        <div className="footer-legal">
          <span>© 2026 Simthetica.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Mark, Reveal, Nav, Hero, PilotValue, Capture, Demand, HowItWorks, Scenarios, WhyHuman, Footer,
});
