// Direction B v4
const { PLARROT: P, PlarrotLogo, PlarrotPattern } = window;

const bStyles = {
  page: {
    width: '100%',
    height: '100%',
    overflowY: 'auto',
    overflowX: 'hidden',
    background: P.ink,
    color: P.cream,
    fontFamily: "'Geist', -apple-system, system-ui, sans-serif",
    fontSize: 15,
    lineHeight: 1.5,
    WebkitFontSmoothing: 'antialiased',
    letterSpacing: '-0.005em',
  },
  mono: { fontFamily: "'Geist Mono', ui-monospace, monospace" },
  serif: { fontFamily: "'Instrument Serif', serif" },
};

const INK = P.ink;
const INK_HI = '#12100E';
const INK_LO = '#221B17';
const RUST = P.rust;
const CREAM = P.cream;
const MUTE = 'rgba(245,239,230,0.55)';
const DIM  = 'rgba(245,239,230,0.75)';
const LINE = 'rgba(245,239,230,0.08)';
const LINE2 = 'rgba(245,239,230,0.14)';

function useIsMobile() {
  const [mobile, setMobile] = React.useState(() => window.innerWidth < 768);
  React.useEffect(() => {
    const check = () => setMobile(window.innerWidth < 768);
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);
  return mobile;
}

// Global keyframes / styles once
if (typeof document !== 'undefined' && !document.getElementById('dirb-styles')) {
  const s = document.createElement('style');
  s.id = 'dirb-styles';
  s.textContent = `
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes modalIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
    .dirb-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
    .dirb-reveal.on { opacity: 1; transform: translateY(0); }
    .dirb-input { width: 100%; box-sizing: border-box; background: rgba(245,239,230,0.05); border: 1px solid rgba(245,239,230,0.14); border-radius: 10px; padding: 11px 14px; color: #F5EFE6; font-family: 'Geist', system-ui, sans-serif; font-size: 14.5px; outline: none; transition: border-color .15s; }
    .dirb-input:focus { border-color: rgba(245,239,230,0.35); }
    .dirb-input::placeholder { color: rgba(245,239,230,0.3); }
  `;
  document.head.appendChild(s);
}

// ─── Header ───────────────────────────────────────────────────────────
function HeaderB({ onWaitlist }) {
  const isMobile = useIsMobile();
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(18,16,14,0.72)',
      backdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${LINE}`,
    }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto',
        padding: isMobile ? '14px 20px' : '18px 40px',
        display: 'flex', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <PlarrotLogo size={26} color={RUST} accent={CREAM} />
          <span style={{ fontWeight: 600, fontSize: 18, letterSpacing: '-0.02em' }}>Plarrot</span>
        </div>
        <div style={{ flex: 1 }} />
        <button onClick={onWaitlist} style={{
          background: CREAM, color: INK, border: 'none',
          fontSize: isMobile ? 13 : 14,
          padding: isMobile ? '9px 14px' : '10px 18px',
          borderRadius: 999, cursor: 'pointer', fontWeight: 500,
        }}>Join waitlist →</button>
      </div>
    </div>
  );
}

// ─── Typewriter phrase cycler ─────────────────────────────────────────
function TypewriterPhrase({ isMobile }) {
  const phrases = React.useMemo(() => ([
    { lang: 'English',    text: 'Translate your website.',       rtl: false },
    { lang: 'Français',   text: 'Traduisez votre site.',         rtl: false },
    { lang: 'Deutsch',    text: 'Übersetzen Sie Ihre Website.',  rtl: false },
    { lang: 'Español',    text: 'Traduce tu sitio web.',         rtl: false },
    { lang: '日本語',      text: 'ウェブサイトを翻訳。',           rtl: false },
    { lang: 'العربية',     text: 'ترجم موقعك.',                  rtl: true  },
    { lang: '中文',        text: '翻译您的网站。',                rtl: false },
    { lang: 'Português',  text: 'Traduza seu site.',             rtl: false },
  ]), []);

  const [i, setI] = React.useState(0);
  const [text, setText] = React.useState('');
  const [phase, setPhase] = React.useState('typing');

  React.useEffect(() => {
    const full = phrases[i].text;
    let timer;
    if (phase === 'typing') {
      if (text.length < full.length) {
        timer = setTimeout(() => setText(full.slice(0, text.length + 1)), 55);
      } else {
        timer = setTimeout(() => setPhase('holding'), 1400);
      }
    } else if (phase === 'holding') {
      timer = setTimeout(() => setPhase('deleting'), 900);
    } else {
      if (text.length > 0) {
        timer = setTimeout(() => setText(text.slice(0, -1)), 28);
      } else {
        setI((i + 1) % phrases.length);
        setPhase('typing');
      }
    }
    return () => clearTimeout(timer);
  }, [text, phase, i, phrases]);

  const cur = phrases[i];
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '7px 14px', border: `1px solid ${LINE2}`, borderRadius: 999,
      fontSize: 14, marginBottom: 36, color: CREAM,
      background: 'rgba(245,239,230,0.03)',
    }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: RUST, boxShadow: `0 0 0 4px ${RUST}22` }} />
      <span
        dir={cur.rtl ? 'rtl' : 'ltr'}
        style={{
          ...bStyles.mono, fontSize: 13, letterSpacing: '0.01em',
          minWidth: cur.rtl ? 'auto' : (isMobile ? 140 : 220), display: 'inline-block',
          textAlign: cur.rtl ? 'right' : 'left',
        }}>
        {text}<span style={{ display: 'inline-block', width: 7, height: 14, background: RUST, marginLeft: 2, verticalAlign: -1, animation: 'blink 1s steps(1) infinite' }} />
      </span>
      <span style={{ ...bStyles.mono, fontSize: 11, color: MUTE, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{cur.lang}</span>
    </div>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────
function HeroB({ onWaitlist }) {
  const isMobile = useIsMobile();
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: -140, bottom: -220, width: 560, height: 560, borderRadius: 999, background: RUST, opacity: 0.14, filter: 'blur(110px)' }} />

      <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '40px 20px 32px' : '72px 40px 56px', position: 'relative' }}>
        <TypewriterPhrase isMobile={isMobile} />

        <div style={isMobile ? {
          display: 'flex', flexDirection: 'column', gap: 36,
        } : {
          display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 64, alignItems: 'start',
        }}>
          <div>
            <h1 style={{
              fontSize: isMobile ? 44 : 64, lineHeight: isMobile ? 1.0 : 0.96, letterSpacing: '-0.04em',
              fontWeight: 500, margin: '0 0 24px',
              textWrap: 'balance',
            }}>
              Open your app to<br />
              <span style={{ ...bStyles.serif, fontWeight: 400, fontStyle: 'italic', color: RUST }}>billions</span> of new users.
            </h1>

            <p style={{ fontSize: isMobile ? 17 : 20, color: CREAM, maxWidth: 540, lineHeight: 1.4, margin: '0 0 16px', fontWeight: 400 }}>
              Over <span style={{ color: 'white', fontWeight: 600 }}>10 billion</span> searches daily. AI is adding <span style={{ color: 'white', fontWeight: 600 }}>billions</span> more.<br />
              Both recommend content in the language users search in.
            </p>
            <p style={{ fontSize: 15, color: DIM, maxWidth: 540, lineHeight: 1.6, margin: '0 0 18px' }}>
              So in every market that isn't yours, weaker products win just because they speak the language.
            </p>
            <p style={{ fontSize: 15, color: DIM, maxWidth: 540, lineHeight: 1.6, margin: '0 0 36px' }}>
              You already have the authority, and for less than a cup of coffee, you can unlock your app for <span style={{ ...bStyles.serif, fontWeight: 600, letterSpacing: '0.75px', fontStyle: 'italic', color: RUST }}>billions of users</span> spending in languages you don't support <span style={{ ...bStyles.serif, fontWeight: 600, letterSpacing: '0.75px', fontStyle: 'italic', color: RUST }}>yet</span>.
            </p>

            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <button onClick={onWaitlist} style={{
                background: CREAM, color: INK, border: 'none', fontSize: 15,
                padding: '14px 22px', borderRadius: 999, cursor: 'pointer', fontWeight: 500,
              }}>Join the waitlist →</button>
            </div>
          </div>

          <HeroConfigCard />
        </div>
      </div>

      <FeatureMarquee />
    </div>
  );
}

// ─── Config card ──────────────────────────────────────────────────────
function HeroConfigCard() {
  return (
    <div style={{
      background: INK_HI, border: `1px solid ${LINE2}`, borderRadius: 14,
      padding: '26px 28px', overflow: 'hidden',
      boxShadow: '0 30px 80px -20px rgba(0,0,0,0.5)',
      margin: 'auto',
    }}>
      <div style={{ ...bStyles.mono, fontSize: 13.5, lineHeight: 1.8, whiteSpace: 'pre' }}>
<span style={{ color: '#ffb4a8' }}>plarrot</span>: {'{'}{'\n'}
{'  '}<span style={{ color: '#ffb4a8' }}>apiKey</span>: <span style={{ color: '#f1c991' }}>'my-api-key'</span>,{'\n'}
{'  '}<span style={{ color: '#ffb4a8' }}>sourceLocale</span>: <span style={{ color: '#f1c991' }}>'en'</span>,{'\n'}
{'  '}<span style={{ color: '#ffb4a8' }}>locales</span>: [<span style={{ color: '#f1c991' }}>'es'</span>,<span style={{ color: '#f1c991' }}>'ru'</span>,<span style={{ color: '#f1c991' }}>'fr'</span>]{'\n'}
{'}'}
      </div>
      <div style={{
        marginTop: 20, paddingTop: 16, borderTop: `1px solid ${LINE}`,
        ...bStyles.mono, fontSize: 11, color: MUTE,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <span style={{ color: RUST, fontWeight: 500, letterSpacing: '0.08em' }}>5-MIN SETUP</span>
        <span>·</span>
        <span>100+ Languages</span>
        <span>·</span>
        <span>SSR-native</span>
        <span>·</span>
        <span>No proxy</span>
      </div>
    </div>
  );
}

// ─── Feature marquee ──────────────────────────────────────────────────
function FeatureMarquee() {
  const items = [
    '< 5 minute setup',
    '100+ languages',
    'SSR-native rendering',
    'Localized URL slugs',
    'Automatic hreflang',
    'Glossary & brand terms',
    'Cache pre-warming',
    'No DNS changes',
    'No proxy required',
  ];
  const doubled = [...items, ...items];
  return (
    <div style={{
      borderTop: `1px solid ${LINE}`, borderBottom: `1px solid ${LINE}`,
      padding: '18px 0', overflow: 'hidden', background: INK_HI,
      position: 'relative',
    }}>
      <div style={{ display: 'flex', gap: 0, width: 'max-content', animation: 'marquee 50s linear infinite' }}>
        {doubled.map((it, i) => (
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 18,
            padding: '0 28px', fontSize: 15, color: DIM,
            whiteSpace: 'nowrap', fontWeight: 400,
          }}>
            <span style={{ color: RUST, fontSize: 10 }}>✦</span>
            {it}
          </span>
        ))}
      </div>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 120, background: `linear-gradient(90deg, ${INK_HI}, transparent)`, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 120, background: `linear-gradient(270deg, ${INK_HI}, transparent)`, pointerEvents: 'none' }} />
    </div>
  );
}

// ─── Scroll-reveal helper ─────────────────────────────────────────────
function Reveal({ children, delay = 0 }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let root = el.parentElement;
    while (root && !root.classList.contains('artboard-scroll')) root = root.parentElement;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => setOn(true), delay);
          io.unobserve(el);
        }
      });
    }, { root: root || null, threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <div ref={ref} className={'dirb-reveal' + (on ? ' on' : '')}>
      {children}
    </div>
  );
}

// ─── Install stack — stacked commands fading out ──────────────────────
function InstallStack() {
  const cmds = [
    { cmd: 'npx nuxi module add plarrot',      label: 'Nuxt' },
    { cmd: 'npm install @plarrot/next',         label: 'Next.js' },
    { cmd: 'composer require plarrot/laravel',  label: 'Laravel' },
    { cmd: 'pip install plarrot',               label: 'Django / Flask' },
    { cmd: 'bundle add plarrot',                label: 'Rails' },
    { cmd: 'go get plarrot.dev/go',             label: 'Go' },
  ];
  const opacities = [1, 0.65, 0.4, 0.2, 0.08, 0.04];
  return (
    <div style={{
      background: INK_HI, borderRadius: 10, border: `1px solid ${LINE}`,
      overflow: 'hidden', alignSelf: 'start', overflowX: 'auto',
    }}>
      {cmds.map((c, i) => (
        <div key={c.label} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '11px 18px', gap: 16,
          borderBottom: i < cmds.length - 1 ? `1px solid ${LINE}` : 'none',
          opacity: opacities[i],
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, ...bStyles.mono, fontSize: 12.5, whiteSpace: 'nowrap' }}>
            <span style={{ color: MUTE }}>$</span>
            <span style={{ color: CREAM }}>{c.cmd}</span>
          </div>
          <span style={{ ...bStyles.mono, fontSize: 11, color: RUST, whiteSpace: 'nowrap', flexShrink: 0 }}>{c.label}</span>
        </div>
      ))}
    </div>
  );
}

// ─── Config snippet — for step 02 ────────────────────────────────────
function ConfigSnippet() {
  return (
    <div style={{
      background: INK_HI, border: `1px solid ${LINE}`, borderRadius: 10,
      padding: '18px 20px', alignSelf: 'start',
      ...bStyles.mono, fontSize: 13, lineHeight: 1.8, whiteSpace: 'pre',
    }}>
<span style={{ color: '#ffb4a8' }}>plarrot</span>: {'{'}{'\n'}
{'  '}<span style={{ color: '#ffb4a8' }}>apiKey</span>: <span style={{ color: '#f1c991' }}>'your-api-key'</span>,{'\n'}
{'  '}<span style={{ color: '#ffb4a8' }}>sourceLocale</span>: <span style={{ color: '#f1c991' }}>'en'</span>,{'\n'}
{'  '}<span style={{ color: '#ffb4a8' }}>locales</span>: [{'\n'}
{'    '}<span style={{ color: '#f1c991' }}>'es'</span>, <span style={{ color: '#f1c991' }}>'fr'</span>, <span style={{ color: '#f1c991' }}>'de'</span>,{'\n'}
{'    '}<span style={{ color: '#f1c991' }}>'it'</span>, <span style={{ color: '#f1c991' }}>'pl'</span>,{'\n'}
{'  '}],{'\n'}
{'}'}
    </div>
  );
}

// ─── How it works ─────────────────────────────────────────────────────
function StepsB() {
  const isMobile = useIsMobile();
  const steps = [
    {
      n: '01', label: 'Install',
      title: 'One line. No DNS. No proxy.',
      body: "Plarrot lives inside your framework, not in front of it. Your traffic keeps going where it always went — no route rewrites, no CDN swaps, no 3am proxy outages.",
      panel: 'install',
    },
    {
      n: '02', label: 'Configure',
      title: 'Set your API key. Pick your languages.',
      body: 'Three fields. Add your API key, set your source locale, and list the locales you want. Plarrot builds the routes, generates hreflang tags, and handles canonical URLs — all server-rendered, zero client overhead.',
      panel: 'config',
    },
    {
      n: '03', label: 'Launch',
      title: 'Your users experience it in their language.',
      body: 'On every deploy, Plarrot detects what changed, translates it, and pre-warms every localized URL. Real users always hit a warm cache — translation latency is zero. They just see their language, instantly.',
      mono: '✓ 2,431 pages · 12 locales · 0ms cold',
    },
  ];

  return (
    <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '72px 20px 32px' : '120px 40px 40px', position: 'relative' }}>
      <Reveal>
        <div style={{ ...bStyles.mono, fontSize: 12, color: RUST, marginBottom: 14, letterSpacing: '0.06em', textTransform: 'uppercase' }}>§ how it works</div>
        <h2 style={{ fontSize: isMobile ? 38 : 52, letterSpacing: '-0.03em', fontWeight: 500, lineHeight: 1.02, margin: '0 0 12px', maxWidth: 780, color: CREAM }}>
          Three steps.
        </h2>
        <p style={{ fontSize: isMobile ? 16 : 18, color: DIM, maxWidth: 560, margin: isMobile ? '0 0 48px' : '0 0 72px', lineHeight: 1.5 }}>
          Then never think about it again.
        </p>
      </Reveal>

      <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 0 : 48 }}>
        {steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 80}>
            <div style={isMobile ? {
              display: 'flex', flexDirection: 'column', gap: 20,
              padding: '32px 0', borderTop: `1px solid ${LINE}`,
            } : {
              display: 'grid', gridTemplateColumns: '120px 1fr 1fr', gap: 48,
              alignItems: 'start', padding: '44px 0',
              borderTop: `1px solid ${LINE}`,
            }}>
              <div style={isMobile ? { display: 'flex', alignItems: 'baseline', gap: 12 } : {}}>
                <div style={{ ...bStyles.serif, fontStyle: 'italic', fontSize: isMobile ? 48 : 72, color: RUST, lineHeight: 1, marginBottom: isMobile ? 0 : 10 }}>{s.n}</div>
                <div style={{ ...bStyles.mono, fontSize: 11, color: MUTE, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{s.label}</div>
              </div>
              <div>
                <h3 style={{ fontSize: isMobile ? 22 : 30, letterSpacing: '-0.025em', fontWeight: 500, lineHeight: 1.12, margin: '0 0 12px', color: CREAM }}>
                  {s.title}
                </h3>
                <p style={{ fontSize: isMobile ? 15 : 16.5, color: DIM, lineHeight: 1.6, margin: 0 }}>
                  {s.body}
                </p>
              </div>
              {s.panel === 'install' ? (
                <InstallStack />
              ) : s.panel === 'config' ? (
                <ConfigSnippet />
              ) : (
                <div style={{
                  background: INK_HI, borderRadius: 10, padding: '18px 20px',
                  border: `1px solid ${LINE}`, alignSelf: 'start',
                  ...bStyles.mono, fontSize: isMobile ? 12 : 13, color: CREAM,
                  display: 'flex', alignItems: 'center', overflowX: 'auto',
                }}>
                  <span style={{ color: MUTE, marginRight: 10 }}>$</span>
                  <span style={{ whiteSpace: 'pre-wrap' }}>{s.mono}</span>
                </div>
              )}
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  );
}

// ─── Market calculator + pricing ──────────────────────────────────────
function MarketAndPricingB({ onWaitlist }) {
  const isMobile = useIsMobile();
  const LANGS = [
    { code: 'en',  flag: '🌐', name: 'English',     users: 1456, spend: 1540 },
    { code: 'zh',  flag: '🇨🇳', name: 'Chinese',    users: 1052, spend: 2770 },
    { code: 'es',  flag: '🇪🇸', name: 'Spanish',    users: 594,  spend: 520  },
    { code: 'hi',  flag: '🇮🇳', name: 'Hindi',      users: 362,  spend: 210  },
    { code: 'ar',  flag: '🇸🇦', name: 'Arabic',     users: 444,  spend: 180  },
    { code: 'pt',  flag: '🇧🇷', name: 'Portuguese', users: 289,  spend: 240  },
    { code: 'fr',  flag: '🇫🇷', name: 'French',     users: 336,  spend: 380  },
    { code: 'ru',  flag: '🇷🇺', name: 'Russian',    users: 116,  spend: 95   },
    { code: 'de',  flag: '🇩🇪', name: 'German',     users: 92,   spend: 410  },
    { code: 'ja',  flag: '🇯🇵', name: 'Japanese',   users: 118,  spend: 340  },
    { code: 'ko',  flag: '🇰🇷', name: 'Korean',     users: 77,   spend: 195  },
    { code: 'id',  flag: '🇮🇩', name: 'Indonesian', users: 213,  spend: 85   },
    { code: 'tr',  flag: '🇹🇷', name: 'Turkish',    users: 75,   spend: 62   },
    { code: 'it',  flag: '🇮🇹', name: 'Italian',    users: 58,   spend: 165  },
    { code: 'nl',  flag: '🇳🇱', name: 'Dutch',      users: 24,   spend: 95   },
    { code: 'pl',  flag: '🇵🇱', name: 'Polish',     users: 34,   spend: 55   },
  ];

  const [selected, setSelected] = React.useState(new Set(['es', 'fr', 'de', 'it', 'pl']));
  const toggle = c => {
    const next = new Set(selected);
    next.has(c) ? next.delete(c) : next.add(c);
    setSelected(next);
  };
  const picks = LANGS.filter(l => selected.has(l.code));
  const totalUsers = picks.reduce((a, b) => a + b.users, 0);
  const totalSpend = picks.reduce((a, b) => a + b.spend, 0);

  const [dispUsers, setDispUsers] = React.useState(totalUsers);
  const [dispSpend, setDispSpend] = React.useState(totalSpend);
  React.useEffect(() => {
    const start = performance.now();
    const duration = 500;
    const fromU = dispUsers, fromS = dispSpend;
    let frame;
    const step = t => {
      const p = Math.min(1, (t - start) / duration);
      const e = 1 - Math.pow(1 - p, 3);
      setDispUsers(Math.round(fromU + (totalUsers - fromU) * e));
      setDispSpend(Math.round(fromS + (totalSpend - fromS) * e));
      if (p < 1) frame = requestAnimationFrame(step);
    };
    frame = requestAnimationFrame(step);
    return () => cancelAnimationFrame(frame);
  }, [totalUsers, totalSpend]);

  const fmtUsers = n => n >= 1000 ? (n / 1000).toFixed(2) + 'B' : n + 'M';
  const fmtSpend = n => n >= 1000 ? '$' + (n / 1000).toFixed(2) + 'T' : '$' + n + 'B';
  const maxSpend = Math.max(...LANGS.map(l => l.spend));

  return (
    <div style={{ borderTop: `1px solid ${LINE}`, background: INK_HI, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: -180, top: -180, width: 520, height: 520, opacity: 0.08 }}>
        <PlarrotPattern size={110} fg={RUST} bg={INK_HI} />
      </div>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '72px 20px' : '120px 40px', position: 'relative' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: isMobile ? 'start' : 'end', justifyContent: 'space-between', marginBottom: isMobile ? 32 : 56, gap: 24, flexWrap: 'wrap' }}>
            <div style={{ flex: '1 1 300px' }}>
              <div style={{ ...bStyles.mono, fontSize: 12, color: RUST, marginBottom: 14, letterSpacing: '0.06em', textTransform: 'uppercase' }}>§ the market you're missing</div>
              <h2 style={{ fontSize: isMobile ? 34 : 52, letterSpacing: '-0.03em', fontWeight: 500, lineHeight: 1.06, margin: '0 0 18px', color: CREAM, maxWidth: 620 }}>
                More is spent outside your language <span style={{ ...bStyles.serif, fontStyle: 'italic', color: RUST }}>than inside it.</span>
              </h2>
              <p style={{ fontSize: isMobile ? 15 : 18, color: DIM, lineHeight: 1.6, margin: 0, maxWidth: 540 }}>
                Whatever you shipped in first, the rest of the world is bigger.
                Pick locales below to see who's there — and what they're spending.
              </p>
            </div>
            <div style={{
              ...bStyles.mono, fontSize: 11, color: RUST,
              padding: '5px 11px', border: `1px solid ${RUST}`, borderRadius: 999,
              letterSpacing: '0.1em', fontWeight: 500, flexShrink: 0,
            }}>PRICING · COMING SOON</div>
          </div>
        </Reveal>

        <Reveal delay={100}>
          <div style={isMobile ? {
            display: 'flex', flexDirection: 'column', gap: 16,
          } : {
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24,
          }}>
            <div style={{
              background: INK_LO, border: `1px solid ${LINE2}`, borderRadius: 16,
              padding: '24px 24px',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                <div style={{ ...bStyles.mono, fontSize: 11, color: MUTE, letterSpacing: '0.06em', textTransform: 'uppercase' }}>select locales · {selected.size} active</div>
                <button onClick={() => setSelected(new Set())} style={{ ...bStyles.mono, fontSize: 11, color: MUTE, background: 'transparent', border: 'none', cursor: 'pointer', letterSpacing: '0.06em', textTransform: 'uppercase' }}>clear</button>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 6 }}>
                {LANGS.map(l => {
                  const on = selected.has(l.code);
                  const barW = (l.spend / maxSpend) * 100;
                  return (
                    <button key={l.code} onClick={() => toggle(l.code)}
                      style={{
                        position: 'relative',
                        textAlign: 'left', border: `1px solid ${on ? RUST : LINE}`,
                        background: on ? 'rgba(194,65,12,0.12)' : 'rgba(245,239,230,0.02)',
                        color: on ? CREAM : DIM,
                        padding: '12px 14px', borderRadius: 10, cursor: 'pointer',
                        fontFamily: 'inherit', fontSize: 14,
                        display: 'flex', alignItems: 'center', gap: 10,
                        transition: 'all .15s ease', overflow: 'hidden',
                      }}>
                      <span style={{
                        position: 'absolute', left: 0, bottom: 0, height: 2, width: `${barW}%`,
                        background: on ? RUST : LINE2, transition: 'background .2s',
                      }} />
                      <span style={{ fontSize: 18, lineHeight: 1 }}>{l.flag}</span>
                      <span style={{ flex: 1, fontWeight: 500 }}>{l.name}</span>
                      <span style={{ ...bStyles.mono, fontSize: 11, color: on ? RUST : MUTE }}>{l.users}M</span>
                      <span style={{
                        width: 16, height: 16, borderRadius: 4,
                        border: `1.5px solid ${on ? RUST : LINE2}`,
                        background: on ? RUST : 'transparent',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        flexShrink: 0,
                      }}>
                        {on && <svg width="10" height="10" viewBox="0 0 10 10"><path d="M1.5 5 L4 7.5 L8.5 2.5" stroke={CREAM} strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
                      </span>
                    </button>
                  );
                })}
              </div>
            </div>

            <div style={{
              background: INK_LO, border: `1px solid ${LINE2}`, borderRadius: 16,
              padding: '28px 30px', display: 'flex', flexDirection: 'column', gap: 24,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', right: -80, top: -80, width: 260, height: 260, borderRadius: 999, background: RUST, opacity: 0.1, filter: 'blur(60px)' }} />

              <div style={{ position: 'relative' }}>
                <div style={{ ...bStyles.mono, fontSize: 11, color: MUTE, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 10 }}>internet users you'd reach</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontSize: isMobile ? 48 : 64, fontWeight: 500, letterSpacing: '-0.04em', color: CREAM, lineHeight: 1 }}>
                    {fmtUsers(dispUsers)}
                  </span>
                  <span style={{ fontSize: 15, color: MUTE }}>people online</span>
                </div>
              </div>

              <div style={{ height: 1, background: LINE }} />

              <div style={{ position: 'relative' }}>
                <div style={{ ...bStyles.mono, fontSize: 11, color: MUTE, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 10 }}>annual consumer spend · in-market</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontSize: isMobile ? 48 : 64, fontWeight: 500, letterSpacing: '-0.04em', color: RUST, lineHeight: 1 }}>
                    {fmtSpend(dispSpend)}
                  </span>
                  <span style={{ fontSize: 15, color: MUTE }}>per year</span>
                </div>
              </div>

              <div style={{ position: 'relative', minHeight: 28 }}>
                {picks.length === 0 ? (
                  <div style={{ ...bStyles.serif, fontStyle: 'italic', fontSize: 16, color: MUTE }}>
                    Pick one or more languages to start.
                  </div>
                ) : (
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {picks.map(p => (
                      <span key={p.code} style={{
                        display: 'inline-flex', alignItems: 'center', gap: 6,
                        padding: '5px 10px 5px 8px', borderRadius: 999,
                        background: 'rgba(194,65,12,0.15)', border: `1px solid ${RUST}44`,
                        fontSize: 12.5, color: CREAM,
                      }}>
                        <span>{p.flag}</span>{p.name}
                      </span>
                    ))}
                  </div>
                )}
              </div>

              <div style={{ position: 'relative', paddingTop: 20, borderTop: `1px solid ${LINE}` }}>
                <div style={{ fontSize: 14.5, color: DIM, lineHeight: 1.55, marginBottom: 16 }}>
                  Pricing is coming soon — <span style={{ color: CREAM }}>less than a coffee</span> when it lands. Join the waitlist for early-access rates that stay locked in.
                </div>
                <button onClick={onWaitlist} style={{
                  background: CREAM, color: INK, border: 'none', fontSize: 14,
                  padding: '12px 18px', borderRadius: 999, cursor: 'pointer', fontWeight: 500,
                }}>Join the waitlist →</button>
              </div>
            </div>
          </div>
        </Reveal>

        <div style={{ ...bStyles.mono, fontSize: 11, color: MUTE, marginTop: 18, letterSpacing: '0.04em' }}>
          Users: Statista / Internet World Stats, 2024. Spend: approximate annual B2C online spend by language market. Rounded.
        </div>
      </div>
    </div>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────
function FooterB() {
  const isMobile = useIsMobile();
  return (
    <div style={{ borderTop: `1px solid ${LINE}`, padding: '48px 0 24px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '0 20px' : '0 40px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
          <PlarrotLogo size={24} color={RUST} accent={CREAM} />
          <span style={{ fontWeight: 600, fontSize: 18, letterSpacing: '-0.02em' }}>Plarrot</span>
        </div>
        <div style={{ fontSize: 14, color: MUTE, maxWidth: 520, lineHeight: 1.55, marginBottom: 28 }}>
          Framework-native web localization. Unlock the markets your domain authority already earned.
        </div>
        <div style={{ paddingTop: 22, borderTop: `1px solid ${LINE}`, display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: MUTE, flexWrap: 'wrap', gap: 12 }}>
          <span>© 2026 Plarrot.</span>
        </div>
      </div>
    </div>
  );
}

// ─── Waitlist modal ───────────────────────────────────────────────────
function WaitlistModal({ open, onClose }) {
  const [firstName, setFirstName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  if (!open) return null;

  const handleSubmit = async e => {
    e.preventDefault();
    if (!email) return;
    setLoading(true);
    setError('');
    try {
      const r = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, firstName }),
      });
      if (!r.ok) throw new Error();
      setSubmitted(true);
    } catch {
      setError('Something went wrong — please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 100,
        background: 'rgba(0,0,0,0.72)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: INK_HI, border: `1px solid ${LINE2}`,
          borderRadius: 20, padding: '40px 40px 36px',
          width: '100%', maxWidth: 440,
          position: 'relative',
          animation: 'modalIn .25s cubic-bezier(.2,.8,.3,1) both',
          boxShadow: '0 40px 100px -20px rgba(0,0,0,0.7)',
        }}
      >
        {/* close */}
        <button
          onClick={onClose}
          style={{
            position: 'absolute', top: 16, right: 16,
            background: 'rgba(245,239,230,0.07)', border: 'none',
            color: MUTE, width: 32, height: 32, borderRadius: 999,
            cursor: 'pointer', fontSize: 18, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
        >×</button>

        {/* header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <PlarrotLogo size={24} color={RUST} accent={CREAM} />
          <span style={{ fontWeight: 600, fontSize: 17, letterSpacing: '-0.02em' }}>Plarrot</span>
        </div>

        {!submitted ? (
          <>
            <h2 style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.03em', margin: '16px 0 6px', color: CREAM }}>
              Join the waitlist
            </h2>
            <p style={{ fontSize: 14.5, color: MUTE, margin: '0 0 28px', lineHeight: 1.55 }}>
              Be first when we launch. Early-access pricing locked in.
            </p>

            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <label style={{ display: 'block', ...bStyles.mono, fontSize: 11, color: MUTE, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 7 }}>
                  First name <span style={{ color: 'rgba(245,239,230,0.25)' }}>· optional</span>
                </label>
                <input
                  className="dirb-input"
                  type="text"
                  placeholder="Ada"
                  value={firstName}
                  onChange={e => setFirstName(e.target.value)}
                />
              </div>
              <div>
                <label style={{ display: 'block', ...bStyles.mono, fontSize: 11, color: MUTE, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 7 }}>
                  Email
                </label>
                <input
                  className="dirb-input"
                  type="email"
                  placeholder="ada@example.com"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  required
                />
              </div>
              <button
                type="submit"
                disabled={loading || !email}
                style={{
                  marginTop: 6,
                  background: CREAM, color: INK, border: 'none',
                  fontSize: 15, padding: '14px 0', borderRadius: 999,
                  cursor: loading || !email ? 'not-allowed' : 'pointer', fontWeight: 500, width: '100%',
                  opacity: loading || !email ? 0.5 : 1, transition: 'opacity .15s',
                }}
              >
                {loading ? 'Sending…' : 'Join the waitlist →'}
              </button>
              {error && <p style={{ color: '#E85A1C', fontSize: 13, margin: '8px 0 0', textAlign: 'center' }}>{error}</p>}
            </form>
          </>
        ) : (
          <div style={{ textAlign: 'center', padding: '24px 0 8px' }}>
            <div style={{ fontSize: 36, marginBottom: 16 }}>🎉</div>
            <h2 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.03em', margin: '0 0 10px', color: CREAM }}>
              You're on the list{firstName ? `, ${firstName}` : ''}.
            </h2>
            <p style={{ fontSize: 15, color: MUTE, lineHeight: 1.6, margin: '0 0 28px' }}>
              We'll reach out to <span style={{ color: CREAM }}>{email}</span> when we launch. Early-access pricing will be locked in.
            </p>
            <button
              onClick={onClose}
              style={{
                background: 'rgba(245,239,230,0.08)', color: CREAM,
                border: `1px solid ${LINE2}`, fontSize: 14,
                padding: '11px 22px', borderRadius: 999, cursor: 'pointer',
              }}
            >Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Main ──────────────────────────────────────────────────────────────
function DirectionB() {
  const [waitlistOpen, setWaitlistOpen] = React.useState(false);
  const openWaitlist = () => setWaitlistOpen(true);

  return (
    <div className="artboard-scroll" style={bStyles.page}>
      <HeaderB onWaitlist={openWaitlist} />
      <HeroB onWaitlist={openWaitlist} />
      <MarketAndPricingB onWaitlist={openWaitlist} />
      <StepsB />
      <FooterB />
      <WaitlistModal open={waitlistOpen} onClose={() => setWaitlistOpen(false)} />
    </div>
  );
}

window.DirectionB = DirectionB;