// site-a.jsx — Direction A · "The Quiet Method"
// Editorial, light-led. Type & sound carry the page; the demo sits in a calm field.

(function () {
  const LIGHT = {
    linen: '#F4F2ED', surface: '#FFFFFF', surface2: '#FBFAF6', sunken: '#ECEAE3',
    ink: '#1A2733', sub: 'rgba(26,39,51,0.6)', faint: 'rgba(26,39,51,0.4)', hair: 'rgba(26,39,51,0.09)',
    blue: '#2C5E8C', blueSoft: '#E7EEF5',
    darkBg: '#0E1318', darkSurface: '#171E27', darkInk: '#EAF1F8', darkSub: 'rgba(234,241,248,0.6)', darkFaint: 'rgba(234,241,248,0.38)', darkHair: 'rgba(255,255,255,0.08)', sky: '#6EA8DA',
  };
  const DARK = {
    linen: '#0E1318', surface: '#12181F', surface2: '#141B23', sunken: '#0A0E13',
    ink: '#EAF1F8', sub: 'rgba(234,241,248,0.62)', faint: 'rgba(234,241,248,0.4)', hair: 'rgba(255,255,255,0.09)',
    blue: '#6EA8DA', blueSoft: 'rgba(110,168,218,0.14)',
    darkBg: '#06090D', darkSurface: '#12181F', darkInk: '#EAF1F8', darkSub: 'rgba(234,241,248,0.6)', darkFaint: 'rgba(234,241,248,0.38)', darkHair: 'rgba(255,255,255,0.08)', sky: '#6EA8DA',
  };
  const ThemeCtx = React.createContext({ C: LIGHT, dark: false, toggle: () => {} });
  const useTheme = () => React.useContext(ThemeCtx);

  if (!document.getElementById('site-a-css')) {
    const s = document.createElement('style');
    s.id = 'site-a-css';
    s.textContent = `
      .a-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
      .pp-site { transition: background-color .45s ease; }
      .pp-site section, .pp-site header, .pp-site footer { transition: background-color .45s ease, border-color .45s ease; }
      .a-h1 { font-family: ${SITE_SERIF}; font-weight: 400; font-size: clamp(38px, 8vw, 88px); line-height: 1.0; letter-spacing: -1.5px; }
      .a-h2 { font-family: ${SITE_SERIF}; font-weight: 400; font-size: clamp(28px, 4.8vw, 54px); line-height: 1.06; letter-spacing: -1px; margin: 0; }
      .a-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
      .a-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
      @media (max-width: 920px) {
        .a-split { grid-template-columns: 1fr; gap: 44px; }
        .a-split.rev > .a-phone { order: -1; }
        .a-steps { grid-template-columns: 1fr; gap: 28px; }
        .a-phone { justify-self: center; }
      }
      @media (max-width: 600px) {
        .a-wrap { padding: 0 20px; }
        .pp-site > section { padding-top: 64px !important; padding-bottom: 64px !important; }
      }
      .pp-show-slide { animation: ppShowIn .5s cubic-bezier(.2,.6,.3,1) both; }
      @keyframes ppShowIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
      .pp-show-arrow { transition: background .2s, border-color .2s, transform .15s ease; }
      .pp-show-arrow:hover { border-color: rgba(44,94,140,0.45); transform: translateY(-1px); }
      .pp-show-arrow:active { transform: scale(0.94); }
      @media (prefers-reduced-motion: reduce) { .pp-show-slide { animation: none; } }`;
    document.head.appendChild(s);
  }

  // viewport-width hook for responsive layout decisions
  function useVW() {
    const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1200);
    React.useEffect(() => {
      const f = () => setW(window.innerWidth);
      window.addEventListener('resize', f);
      return () => window.removeEventListener('resize', f);
    }, []);
    return w;
  }

  function Hero() {
    const { C, dark } = useTheme();
    return (
      <section style={{ background: C.linen, paddingTop: 96, paddingBottom: 104, borderBottom: `0.5px solid ${C.hair}` }}>
        <div className="a-wrap">
          <Reveal><Eyebrow dark={dark}>The first 1,000 words · Launching with Latvian</Eyebrow></Reveal>
          <Reveal delay={0.06}>
            <h1 className="a-h1" style={{ color: C.ink, margin: '24px 0 0', maxWidth: 980 }}>
              Learn a language the<br />way you <i style={{ fontWeight: 500, color: C.blue }}>first</i> did.
            </h1>
          </Reveal>
          <Reveal delay={0.12}>
            <p style={{ fontFamily: SITE_UI, fontSize: 'clamp(18px,2.1vw,22px)', lineHeight: 1.5, color: C.sub, maxWidth: 600, margin: '30px 0 0', textWrap: 'pretty' }}>
              Start with the 1,000 words that carry most of everyday speech — learned by listening, choosing, and saying them aloud. A calm, premium way for adults who are serious about it. No streaks. No confetti. Launching with Latvian.
            </p>
          </Reveal>
          <Reveal delay={0.18} style={{ marginTop: 36 }}>
            <WaitlistForm dark={dark} />
          </Reveal>
          <Reveal delay={0.26} style={{ marginTop: 64 }}>
            <Waveform seed="hero-quiet" played={0.42} height={92} count={92} gap={4} theme={ppTheme(dark, {})} />
          </Reveal>
        </div>
      </section>
    );
  }

  function Session() {
    const { C, dark } = useTheme();
    const vw = useVW();
    const demoScale = Math.min(0.78, (vw - 72) / 402);
    return (
      <section style={{ background: C.surface, padding: '104px 0', borderBottom: `0.5px solid ${C.hair}` }}>
        <div className="a-wrap">
          <div className="a-split">
            <div>
              <Reveal><Eyebrow dark={dark}>A demo session</Eyebrow></Reveal>
              <Reveal delay={0.06}><h2 className="a-h2" style={{ color: C.ink, marginTop: 16 }}>Watch a phrase<br />unlock itself.</h2></Reveal>
              <Reveal delay={0.12}>
                <p style={{ fontFamily: SITE_UI, fontSize: 18, lineHeight: 1.55, color: C.sub, maxWidth: 440, marginTop: 22, textWrap: 'pretty' }}>
                  Phrases are earned, not memorised. You already know <i style={{ fontFamily: SITE_SERIF }}>Es</i> and <i style={{ fontFamily: SITE_SERIF }}>kafiju</i> — learn the one word in the middle, and <i style={{ fontFamily: SITE_SERIF }}>“Es dzeru kafiju”</i> opens. Audio first; meaning on request.
                </p>
              </Reveal>
              <Reveal delay={0.18} style={{ marginTop: 28 }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '11px 18px', borderRadius: 99, background: C.blueSoft, border: `1px solid ${hexA(C.blue, 0.28)}` }}>
                  <span style={{ display: 'flex' }}><Icon name="chevR" size={16} color={C.blue} sw={2} /></span>
                  <span style={{ fontFamily: SITE_UI, fontSize: 14.5, fontWeight: 600, color: C.blue }}>Try it — tap through the demo</span>
                </div>
              </Reveal>
              <Reveal delay={0.24} style={{ marginTop: 36 }}>
                <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
                  {[['Listen first', 'meaning follows'], ['Coverage', 'not points'], ['Made for adults', 'never a game']].map(([a, b]) => (
                    <div key={a}>
                      <div style={{ fontFamily: SITE_SERIF, fontSize: 19, fontWeight: 500, color: C.ink }}>{a}</div>
                      <div style={{ fontFamily: SITE_UI, fontSize: 13.5, color: C.faint, marginTop: 2 }}>{b}</div>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
            <Reveal delay={0.1} className="a-phone" style={{ display: 'flex', justifyContent: 'center' }}>
              <div style={{ position: 'relative' }}>
                <div style={{ position: 'absolute', inset: '-7% -10%', background: C.linen, borderRadius: 40, zIndex: 0 }} />
                <div style={{ position: 'relative', zIndex: 1 }}><DemoPhone dark={dark} scale={demoScale} /></div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    );
  }

  function Method() {
    const { C } = useTheme();
    const steps = [
      { n: 'i.', t: 'A thousand words', d: 'The most frequent Latvian words first — taught by ear, not by list. Frequency does the heavy lifting.' },
      { n: 'ii.', t: 'Phrases unlock', d: 'Each phrase opens the moment you know every word inside it. Earned, not handed over.' },
      { n: 'iii.', t: 'Then real speech', d: 'Listening you can actually follow — slowed when you need it, never dumbed down.' },
    ];
    return (
      <section style={{ background: C.darkBg, color: C.darkInk, padding: '108px 0' }}>
        <div className="a-wrap">
          <Reveal><Eyebrow dark>The polyglot method</Eyebrow></Reveal>
          <Reveal delay={0.06}>
            <h2 className="a-h2" style={{ color: C.darkInk, marginTop: 16, maxWidth: 760 }}>
              First, a thousand words.<br /><i style={{ fontWeight: 500, color: C.sky }}>Everything else follows.</i>
            </h2>
          </Reveal>
          <Reveal delay={0.12}>
            <p style={{ fontFamily: SITE_UI, fontSize: 18, lineHeight: 1.55, color: C.darkSub, maxWidth: 560, marginTop: 22, textWrap: 'pretty' }}>
              The 1,000 most common words carry about 80% of everyday Latvian. That&rsquo;s where polyglots start — and where we do.
            </p>
          </Reveal>
          <div className="a-steps" style={{ marginTop: 64, paddingTop: 40, borderTop: `0.5px solid ${C.darkHair}` }}>
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={0.1 + i * 0.08}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  <span style={{ fontFamily: SITE_SERIF, fontSize: 24, fontWeight: 500, color: C.sky }}>{s.n}</span>
                  <span style={{ fontFamily: SITE_SERIF, fontSize: 27, fontWeight: 500, letterSpacing: -0.4, color: C.darkInk }}>{s.t}</span>
                  <span style={{ fontFamily: SITE_UI, fontSize: 15.5, lineHeight: 1.5, color: C.darkSub, textWrap: 'pretty' }}>{s.d}</span>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.2} style={{ marginTop: 56 }}>
            <Waveform seed="method-dark-a" played={0.5} height={56} count={84} gap={4} theme={ppTheme(true, {})} playedColor={C.sky} restColor="rgba(234,241,248,0.16)" />
          </Reveal>
        </div>
      </section>
    );
  }

  function Coverage() {
    const { C, dark } = useTheme();
    const vw = useVW();
    const mob = vw < 600;
    const W = 920, H = 320;
    const path = `M 8 ${H - 14} C 70 130, 150 84, 300 62 C 480 38, 720 30, ${W - 8} 26`;
    const mx = 300, my = 62;
    return (
      <section style={{ background: C.sunken, padding: '108px 0', borderBottom: `0.5px solid ${C.hair}` }}>
        <div className="a-wrap">
          <Reveal><Eyebrow dark={dark}>Coverage, not points</Eyebrow></Reveal>
          <Reveal delay={0.06}>
            <h2 className="a-h2" style={{ color: C.ink, marginTop: 16, maxWidth: 860 }}>
              You don&rsquo;t need the whole dictionary. <i style={{ fontWeight: 500, color: C.blue }}>You need the first 1,000 words.</i>
            </h2>
          </Reveal>
          <Reveal delay={0.14} style={{ marginTop: mob ? 36 : 80 }}>
            <div style={{ position: 'relative', width: '100%' }}>
              <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: 'block', height: 'auto', overflow: 'visible' }}>
                <line x1="8" y1={H - 14} x2={W - 8} y2={H - 14} stroke={C.hair} strokeWidth="2" />
                <line x1={mx} y1={my} x2={mx} y2={H - 14} stroke={C.blue} strokeWidth="2" strokeDasharray="3 9" opacity="0.5" />
                <line x1="8" y1={my} x2={mx} y2={my} stroke={C.blue} strokeWidth="2" strokeDasharray="3 9" opacity="0.5" />
                <path d={path} fill="none" stroke={C.blue} strokeWidth="6.5" strokeLinecap="round" />
                <circle cx={mx} cy={my} r="15" fill={C.sunken} stroke={C.blue} strokeWidth="6.5" />
              </svg>
              {!mob && (
                <>
                  <div style={{ position: 'absolute', left: `${(mx / W) * 100}%`, bottom: '100%', transform: 'translateX(-6px)', marginBottom: 6, fontFamily: SITE_UI, whiteSpace: 'nowrap', pointerEvents: 'none' }}>
                    <div style={{ fontFamily: SITE_SERIF, fontSize: 'clamp(34px,4vw,46px)', fontWeight: 500, color: C.blue, letterSpacing: -1, lineHeight: 1 }}>≈ 80%</div>
                    <div style={{ fontSize: 16, color: C.sub, marginTop: 3 }}>of everyday speech</div>
                  </div>
                  <div style={{ position: 'absolute', left: `${(mx / W) * 100}%`, top: `${((H - 14) / H) * 100}%`, transform: 'translate(-50%, 6px)', fontFamily: SITE_UI, fontSize: 15, fontWeight: 600, color: C.ink, whiteSpace: 'nowrap' }}>1,000 words</div>
                  <div style={{ position: 'absolute', right: 0, top: `${((H - 14) / H) * 100}%`, transform: 'translateY(6px)', fontFamily: SITE_UI, fontSize: 15, color: C.faint, whiteSpace: 'nowrap' }}>the rest of the dictionary →</div>
                </>
              )}
            </div>
            {mob && (
              <div style={{ marginTop: 18, textAlign: 'center', textWrap: 'pretty' }}>
                <span style={{ fontFamily: SITE_SERIF, fontSize: 34, fontWeight: 500, color: C.blue, letterSpacing: -1 }}>≈ 80%</span>
                <span style={{ fontFamily: SITE_UI, fontSize: 15, color: C.sub }}> of everyday speech — from the first <b style={{ color: C.ink, fontWeight: 600 }}>1,000 words</b>.</span>
              </div>
            )}
          </Reveal>
          <Reveal delay={0.2}>
            <p style={{ fontFamily: SITE_UI, fontSize: 17, lineHeight: 1.55, color: C.sub, maxWidth: 720, marginTop: 28, textWrap: 'pretty' }}>
              We teach Latvian in that order — by ear — and show progress as how much everyday speech you can follow. Never as scores or badges.
            </p>
          </Reveal>
        </div>
      </section>
    );
  }

  function CTA() {
    const { C, dark } = useTheme();
    return (
      <section id="waitlist" style={{ background: C.linen, padding: '112px 0' }}>
        <div className="a-wrap" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <Reveal><Wordmark dark={dark} size={26} animated /></Reveal>
          <Reveal delay={0.06}>
            <h2 className="a-h2" style={{ color: C.ink, marginTop: 28, maxWidth: 720 }}>
              The first thousand words.<br /><i style={{ fontWeight: 500, color: C.blue }}>The rest follows.</i>
            </h2>
          </Reveal>
          <Reveal delay={0.12}>
            <p style={{ fontFamily: SITE_UI, fontSize: 18, color: C.sub, marginTop: 20, maxWidth: 500, textWrap: 'pretty' }}>
              PocketPolyglot is in private development. Join the waitlist and we will write when it is ready to listen.
            </p>
          </Reveal>
          <Reveal delay={0.18} style={{ marginTop: 36, width: '100%', display: 'flex', justifyContent: 'center' }}>
            <WaitlistForm dark={dark} />
          </Reveal>
        </div>
      </section>
    );
  }

  // ── App showcase: real screens, each in light + dark, static (non-interactive) ──
  const SHOWCASE = [
    {
      id: 'today', eyebrow: 'Every day', title: 'A daily session.',
      desc: 'One small session a day — a few new words and the ones due to come back. A calm place to begin, never a streak to defend.',
      render: (dark) => <HomeScreen T={ppTheme(dark, {})} t={{}} />,
    },
    {
      id: 'loop', eyebrow: 'The core loop', title: 'Name it, then say it.',
      desc: 'Hear the word, choose what it means, then speak it back. Saying it out loud is what closes the loop — and locks it in.',
      render: (dark) => <WordPicReviewScreen T={ppTheme(dark, {})} t={{}} initialStage="choose" />,
    },
    {
      id: 'podcast', eyebrow: 'Listening', title: 'A podcast made of your words.',
      desc: 'Rīta saruna — a short episode built only from vocabulary you already know, with a transcript you can open line by line.',
      render: (dark) => <PodcastScreen T={ppTheme(dark, {})} t={{}} />,
    },
    {
      id: 'progress', eyebrow: 'Coverage, not points', title: 'Progress you can hear.',
      desc: 'Not scores or badges — just how much everyday speech you can already follow, shown as coverage of the 1,000 core words.',
      render: (dark) => <ProgressScreen T={ppTheme(dark, {})} t={{}} />,
    },
  ];

  function MiniPhone({ dark, scale = 0.5, children }) {
    const W = 402, H = 874;
    return (
      <div style={{ width: W * scale, height: H * scale, position: 'relative', flexShrink: 0 }}>
        <div style={{ position: 'absolute', top: 0, left: 0, width: W, height: H, transform: `scale(${scale})`, transformOrigin: 'top left' }}>
          <IOSDevice dark={dark}>{children}</IOSDevice>
        </div>
      </div>
    );
  }

  function Showcase() {
    const { C, dark } = useTheme();
    const [i, setI] = React.useState(0);
    const vw = useVW();
    const mobile = vw < 760;
    const phoneGap = mobile ? 14 : 30;
    const pad = vw <= 600 ? 20 : 32; // a-wrap horizontal padding at this width
    // On mobile the light + dark phones sit SIDE BY SIDE so the whole pair fits
    // the viewport at once, instead of one oversized phone per row that clips.
    const phoneScale = mobile
      ? Math.min(0.5, (vw - pad * 2 - phoneGap) / 2 / 402)
      : 0.58;
    const n = SHOWCASE.length;
    const go = (d) => setI(p => (p + d + n) % n);
    const s = SHOWCASE[i];
    const arrow = (size) => ({
      width: size, height: size, borderRadius: '50%', flexShrink: 0, cursor: 'pointer', padding: 0,
      background: C.surface, border: `1px solid ${C.hair}`, boxShadow: '0 6px 22px rgba(26,39,51,0.06)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    });
    const Phones = (
      <div style={{ display: 'flex', flexDirection: 'row', gap: phoneGap, marginTop: mobile ? 28 : 42, justifyContent: 'center', alignItems: 'flex-start' }}>
        {[false, true].map(dark => (
          <div key={String(dark)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <div style={{ pointerEvents: 'none', filter: 'drop-shadow(0 30px 52px rgba(26,39,51,0.18))' }}>
              <MiniPhone dark={dark} scale={phoneScale}>{s.render(dark)}</MiniPhone>
            </div>
            <span style={{ fontFamily: SITE_UI, fontSize: 11.5, fontWeight: 600, letterSpacing: 1.6, textTransform: 'uppercase', color: C.faint }}>{dark ? 'Dark' : 'Light'}</span>
          </div>
        ))}
      </div>
    );
    const Slide = (
      <div key={s.id} className="pp-show-slide" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        <div style={{ maxWidth: 600 }}>
          <div style={{ fontFamily: SITE_UI, fontSize: 12.5, fontWeight: 600, letterSpacing: 2.4, textTransform: 'uppercase', color: C.faint }}>{s.eyebrow}</div>
          <div style={{ fontFamily: SITE_SERIF, fontSize: 'clamp(26px,3.2vw,38px)', fontWeight: 500, letterSpacing: -0.6, color: C.ink, marginTop: 12 }}>{s.title}</div>
          <p style={{ fontFamily: SITE_UI, fontSize: 16.5, lineHeight: 1.55, color: C.sub, margin: '14px auto 0', maxWidth: 540, textWrap: 'pretty' }}>{s.desc}</p>
        </div>
        {Phones}
      </div>
    );
    return (
      <section style={{ background: C.surface2, padding: '104px 0', borderBottom: `0.5px solid ${C.hair}` }}>
        <div className="a-wrap">
          <Reveal><Eyebrow dark={dark}>A look inside</Eyebrow></Reveal>
          <Reveal delay={0.06}>
            <h2 className="a-h2" style={{ color: C.ink, marginTop: 16, maxWidth: 760 }}>
              A few screens from the app.<br /><i style={{ fontWeight: 500, color: C.blue }}>Light and dark.</i>
            </h2>
          </Reveal>

          <Reveal delay={0.12} style={{ marginTop: mobile ? 40 : 56 }}>
            {mobile ? Slide : (
              <div className="pp-show-controls" style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
                <button className="pp-show-arrow" aria-label="Previous screen" onClick={() => go(-1)} style={arrow(52)}>
                  <span style={{ display: 'flex', transform: 'scaleX(-1)' }}><Icon name="chevR" size={20} color={C.ink} sw={2} /></span>
                </button>
                <div style={{ flex: 1, overflow: 'hidden' }}>{Slide}</div>
                <button className="pp-show-arrow" aria-label="Next screen" onClick={() => go(1)} style={arrow(52)}>
                  <Icon name="chevR" size={20} color={C.ink} sw={2} />
                </button>
              </div>
            )}
          </Reveal>

          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: mobile ? 18 : 10, marginTop: mobile ? 30 : 38 }}>
            {mobile && (
              <button className="pp-show-arrow" aria-label="Previous screen" onClick={() => go(-1)} style={arrow(44)}>
                <span style={{ display: 'flex', transform: 'scaleX(-1)' }}><Icon name="chevR" size={18} color={C.ink} sw={2} /></span>
              </button>
            )}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {SHOWCASE.map((d, idx) => (
                <button key={d.id} aria-label={d.title} onClick={() => setI(idx)} style={{
                  width: idx === i ? 28 : 9, height: 9, borderRadius: 99, border: 'none', cursor: 'pointer', padding: 0,
                  background: idx === i ? C.blue : C.hair, transition: 'width .3s cubic-bezier(.2,.6,.3,1), background .3s',
                }} />
              ))}
            </div>
            {mobile && (
              <button className="pp-show-arrow" aria-label="Next screen" onClick={() => go(1)} style={arrow(44)}>
                <Icon name="chevR" size={18} color={C.ink} sw={2} />
              </button>
            )}
          </div>
        </div>
      </section>
    );
  }

  function SiteA() {
    const [dark, setDark] = React.useState(() => {
      try { return localStorage.getItem('pp-theme') === 'dark'; } catch (e) { return false; }
    });
    React.useEffect(() => {
      try { localStorage.setItem('pp-theme', dark ? 'dark' : 'light'); } catch (e) {}
    }, [dark]);
    const toggle = React.useCallback(() => setDark(d => !d), []);
    const C = dark ? DARK : LIGHT;
    return (
      <ThemeCtx.Provider value={{ C, dark, toggle }}>
        <div className="pp-site" style={{ background: C.linen, minHeight: '100vh' }}>
          <SiteNav dark={dark} active={null} onToggleTheme={toggle} />
          <Hero />
          <Session />
          <Method />
          <Showcase />
          <Coverage />
          <CTA />
          <SiteFooter dark={dark} />
        </div>
      </ThemeCtx.Provider>
    );
  }

  window.SiteA = SiteA;
  const mount = document.getElementById('root');
  if (mount) ReactDOM.createRoot(mount).render(<SiteA />);
})();