// pages-pricing.jsx — /pricing route
// Anatomy: hero + tier grid (Free Trial · Starter · Pro · Business · Enterprise)
//        + pay-as-you-go table + comparison table + FAQ accordion + final CTA
// Uses design-system tokens: offset shadow, rotated stamps, accent fills, HL.
// Every visible string flows through t(). Mounts NavC + FooterC for shell.

function BillingToggle({ mode, setMode, accent, t }) {
  return (
    <div role="tablist" aria-label={t('pricing.toggle.aria')} style={{
      display: 'inline-flex', alignItems: 'center', gap: 0,
      background: 'var(--paper)', border: '2px solid var(--ink)', borderRadius: 12,
      padding: 4, boxShadow: '3px 3px 0 var(--ink)', position: 'relative',
    }}>
      {[
        { id: 'monthly', label: t('pricing.toggle.monthly'), badge: null },
        { id: 'yearly',  label: t('pricing.toggle.yearly'),  badge: t('pricing.toggle.yearly.badge') },
      ].map((opt) => {
        const active = mode === opt.id;
        return (
          <button key={opt.id} role="tab" aria-selected={active}
            onClick={() => setMode(opt.id)}
            style={{
              position: 'relative',
              padding: '10px 18px', minHeight: 40,
              border: 0, borderRadius: 8, cursor: 'pointer',
              background: active ? 'var(--ink)' : 'transparent',
              color: active ? accent : 'var(--ink)',
              fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600,
              letterSpacing: '0.01em',
              transition: 'background .18s, color .18s',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
            <span>{opt.label}</span>
            {opt.badge && (
              <span style={{
                fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 700,
                padding: '3px 7px', borderRadius: 4,
                background: active ? accent : 'var(--ink)',
                color: active ? 'var(--ink)' : accent,
                letterSpacing: '0.06em',
              }}>{opt.badge}</span>
            )}
          </button>
        );
      })}
    </div>
  );
}

function formatPriceUSD(n) {
  // Whole dollars, no decimals: $0, $15, $47, $159
  return '$' + Math.round(n);
}

function TierCard({ tier, accent, popular = false, t, onCTA, billing = 'monthly' }) {
  // Yearly = 20% off when paid annually.
  const monthly = tier.priceMonthlyUSD;
  const yearlyTotal = monthly == null ? null : Math.round(monthly * 12 * 0.8);
  const effectivePerMonth = monthly == null ? null : (billing === 'yearly' ? monthly * 0.8 : monthly);
  const displayPrice = monthly == null ? tier.priceLabel : formatPriceUSD(effectivePerMonth);

  return (
    <div style={{
      position: 'relative',
      background: tier.dark ? 'var(--ink)' : 'var(--paper)',
      color: tier.dark ? 'var(--paper)' : 'var(--ink)',
      border: '2px solid var(--ink)',
      borderRadius: 16,
      boxShadow: popular ? '8px 8px 0 var(--ink)' : '4px 4px 0 var(--ink)',
      padding: '28px 24px 24px',
      display: 'flex', flexDirection: 'column',
      transform: popular ? 'rotate(-0.4deg) scale(1.02)' : 'rotate(0.2deg)',
      transition: 'transform .25s cubic-bezier(.3,1.2,.4,1)',
      minHeight: 560,
    }}>
      {popular && (
        <span style={{
          position: 'absolute', top: -14, left: 22,
          background: accent, color: 'var(--ink)',
          padding: '6px 12px', border: '2px solid var(--ink)', borderRadius: 6,
          fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 700,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          transform: 'rotate(-3deg)',
        }}>{t('pricing.tier.popular')}</span>
      )}
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: tier.dark ? accent : 'var(--ink-3)' }}>
        {t(tier.kicker)}
      </div>
      <div className="serif" style={{ fontSize: 36, lineHeight: 0.98, letterSpacing: '-0.022em', marginTop: 6, marginBottom: 14 }}>
        {t(tier.name)}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 2 }}>
        <span className="serif" style={{ fontSize: 56, lineHeight: 0.92, color: tier.dark ? accent : 'var(--ink)' }}>{displayPrice}</span>
        <span className="mono" style={{ fontSize: 12, color: tier.dark ? 'rgba(245,243,236,.6)' : 'var(--ink-2)' }}>
          {monthly == null ? t(tier.unit) : t('pricing.unit.per-month')}
        </span>
      </div>
      {/* Yearly mini-line: billed annually $XX */}
      {monthly != null && (
        <div className="mono" style={{
          fontSize: 11, color: tier.dark ? 'rgba(245,243,236,.55)' : 'var(--ink-3)',
          height: 16, marginBottom: 6,
          opacity: billing === 'yearly' ? 1 : 0,
          transition: 'opacity .25s',
        }}>
          {billing === 'yearly' ? t('pricing.billed.yearly') + ' $' + yearlyTotal : ''}
        </div>
      )}
      <p style={{ fontSize: 13, lineHeight: 1.5, color: tier.dark ? 'rgba(245,243,236,.75)' : 'var(--ink-2)', margin: '4px 0 18px' }}>
        {t(tier.tagline)}
      </p>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8, marginBottom: 22, flex: 1 }}>
        {tier.features.map((fk, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, lineHeight: 1.45 }}>
            <span style={{ flexShrink: 0, marginTop: 2, color: accent }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <span>{t(fk)}</span>
          </li>
        ))}
      </ul>
      <button
        onClick={onCTA}
        className={popular ? 'btn btn-accent' : 'btn'}
        style={{
          background: popular ? accent : (tier.dark ? accent : 'var(--ink)'),
          color: popular ? 'var(--ink)' : (tier.dark ? 'var(--ink)' : accent),
          border: '2px solid ' + (tier.dark ? accent : 'var(--ink)'),
          padding: '14px 18px', borderRadius: 10, cursor: 'pointer',
          fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 600,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          boxShadow: '3px 3px 0 var(--ink)', minHeight: 48,
        }}>
        <span>{t(tier.cta)}</span><span>→</span>
      </button>
      {/* Free-trial reassurance line */}
      <div className="mono" style={{
        marginTop: 12, paddingTop: 12,
        borderTop: '1px dashed ' + (tier.dark ? 'rgba(245,243,236,.18)' : 'var(--rule)'),
        fontSize: 10, letterSpacing: '0.04em',
        color: tier.dark ? 'rgba(245,243,236,.55)' : 'var(--ink-3)',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ color: accent, fontSize: 13 }}>✦</span>
        <span>{t('pricing.trial-note')}</span>
      </div>
    </div>
  );
}

function PricingPage({ accent }) {
  const { t } = useT();
  const isMobile = useMobile(960);
  const [billing, setBilling] = React.useState('monthly');

  const tiers = [
    {
      kicker: 'pricing.tier.trial.kicker', name: 'pricing.tier.trial.name',
      priceLabel: '$0', priceMonthlyUSD: null, // free, ignore toggle
      unit: 'pricing.tier.trial.unit', tagline: 'pricing.tier.trial.tag',
      cta: 'pricing.tier.trial.cta',
      features: ['pricing.tier.trial.f1', 'pricing.tier.trial.f2', 'pricing.tier.trial.f3', 'pricing.tier.trial.f4'],
    },
    {
      kicker: 'pricing.tier.starter.kicker', name: 'pricing.tier.starter.name',
      priceMonthlyUSD: 19, tagline: 'pricing.tier.starter.tag',
      cta: 'pricing.tier.starter.cta',
      features: ['pricing.tier.starter.f1', 'pricing.tier.starter.f2', 'pricing.tier.starter.f3', 'pricing.tier.starter.f4', 'pricing.tier.starter.f5'],
    },
    {
      kicker: 'pricing.tier.pro.kicker', name: 'pricing.tier.pro.name',
      priceMonthlyUSD: 59, tagline: 'pricing.tier.pro.tag',
      cta: 'pricing.tier.pro.cta', dark: true,
      features: ['pricing.tier.pro.f1', 'pricing.tier.pro.f2', 'pricing.tier.pro.f3', 'pricing.tier.pro.f4', 'pricing.tier.pro.f5', 'pricing.tier.pro.f6'],
    },
    {
      kicker: 'pricing.tier.business.kicker', name: 'pricing.tier.business.name',
      priceMonthlyUSD: 199, tagline: 'pricing.tier.business.tag',
      cta: 'pricing.tier.business.cta',
      features: ['pricing.tier.business.f1', 'pricing.tier.business.f2', 'pricing.tier.business.f3', 'pricing.tier.business.f4', 'pricing.tier.business.f5', 'pricing.tier.business.f6'],
    },
  ];

  // 1 token ≈ 1 word; 1 article ≈ 1,200 words. PAYG rates discount with size.
  const paygRows = [
    { tokensRaw: 1200,   tokens: '1,200',   usd: '$3'   },
    { tokensRaw: 12000,  tokens: '12,000',  usd: '$20'  },
    { tokensRaw: 60000,  tokens: '60,000',  usd: '$80'  },
    { tokensRaw: 240000, tokens: '240,000', usd: '$280' },
  ];

  const faqs = [
    { q: 'pricing.faq.q1', a: 'pricing.faq.a1' },
    { q: 'pricing.faq.q2', a: 'pricing.faq.a2' },
    { q: 'pricing.faq.q3', a: 'pricing.faq.a3' },
    { q: 'pricing.faq.q4', a: 'pricing.faq.a4' },
    { q: 'pricing.faq.q5', a: 'pricing.faq.a5' },
    { q: 'pricing.faq.q6', a: 'pricing.faq.a6' },
  ];

  return (
    <>
      {/* ━━━ Hero ━━━ */}
      <section style={{ padding: isMobile ? '40px 20px 32px' : '88px 56px 48px', borderBottom: '4px solid var(--ink)', position: 'relative' }}>
        <Reveal>
          <span className="stamp" style={{ background: accent, borderColor: 'var(--ink)' }}>{t('pricing.kicker')}</span>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="serif" style={{ fontSize: 'clamp(48px, 8vw, 128px)', lineHeight: 0.92, letterSpacing: '-0.028em', margin: '20px 0 0', maxWidth: 1100, textWrap: 'balance' }}>
            {t('pricing.hero.title.a')} <span className="ital hl">{t('pricing.hero.title.hl')}</span> {t('pricing.hero.title.b')}
          </h1>
        </Reveal>
        <Reveal delay={260}>
          <p style={{ fontSize: 18, lineHeight: 1.45, color: 'var(--ink-2)', maxWidth: 640, margin: '24px 0 0' }}>
            {t('pricing.hero.sub')}
          </p>
        </Reveal>

        <div style={{ position: isMobile ? 'static' : 'absolute', top: 48, right: 56, marginTop: isMobile ? 18 : 0, transform: isMobile ? 'none' : 'rotate(-4deg)', maxWidth: isMobile ? '100%' : 360 }}>
          <span className="sticky" style={{ fontSize: 13, display: 'inline-block', minHeight: 24, minWidth: isMobile ? 0 : 280, padding: '10px 14px', fontWeight: 600 }}>
            <Typewriter phrases={[t('pricing.hero.sticker.01'), t('pricing.hero.sticker.02'), t('pricing.hero.sticker.03')]} pause={1800} typing={50} deleting={22} />
          </span>
        </div>
      </section>

      {/* ━━━ Tier grid ━━━ */}
      <section style={{ padding: isMobile ? '32px 20px' : '64px 56px', background: 'var(--paper-2)' }}>
        {/* Billing toggle */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <BillingToggle mode={billing} setMode={setBilling} accent={accent} t={t} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: 18 }}>
          {tiers.map((tier, i) => (
            <Reveal key={i} delay={i * 80}>
              <TierCard tier={tier} accent={accent} popular={i === 2} t={t} onCTA={() => navigate('/start')} billing={billing} />
            </Reveal>
          ))}
        </div>

        {/* Enterprise strip */}
        <Reveal delay={400}>
          <div style={{
            marginTop: 24, background: 'var(--ink)', color: 'var(--paper)',
            border: '2px solid var(--ink)', borderRadius: 16,
            boxShadow: '6px 6px 0 var(--ink)',
            padding: isMobile ? '24px 20px' : '32px 36px',
            display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr auto', gap: 18, alignItems: 'center',
          }}>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent, marginBottom: 8 }}>
                {t('pricing.enterprise.kicker')}
              </div>
              <div className="serif" style={{ fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.018em' }}>
                {t('pricing.enterprise.title')}
              </div>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: 'rgba(245,243,236,.78)', margin: '8px 0 0', maxWidth: 720 }}>
                {t('pricing.enterprise.body')}
              </p>
            </div>
            <button
              onClick={() => navigate('/contact')}
              style={{
                background: accent, color: 'var(--ink)', border: '2px solid ' + accent,
                padding: '14px 22px', borderRadius: 10, cursor: 'pointer',
                fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', gap: 8, minHeight: 48,
              }}>
              <span>{t('pricing.enterprise.cta')}</span><span>→</span>
            </button>
          </div>
        </Reveal>
      </section>

      {/* ━━━ Pay-as-you-go ━━━ */}
      <section style={{ padding: isMobile ? '40px 20px' : '88px 56px', borderTop: '4px solid var(--ink)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 36, alignItems: 'end', marginBottom: 32 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(36px, 5vw, 72px)', lineHeight: 0.96, letterSpacing: '-0.022em', margin: 0 }}>
            {t('pricing.payg.title.a')} <span className="ital hl">{t('pricing.payg.title.hl')}</span> {t('pricing.payg.title.b')}
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.5, color: 'var(--ink-2)', margin: 0, maxWidth: 480 }}>
            {t('pricing.payg.sub')}
          </p>
        </div>

        <div style={{ background: 'var(--paper)', border: '2px solid var(--ink)', borderRadius: 16, boxShadow: '5px 5px 0 var(--ink)', overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', padding: '14px 24px', background: 'var(--ink)', color: 'var(--paper)', fontFamily: 'var(--mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
            <span>{t('pricing.payg.col.tokens')}</span>
            <span>{t('pricing.payg.col.articles')}</span>
            <span>{t('pricing.payg.col.price')}</span>
          </div>
          {paygRows.map((r, i) => {
            const articles = Math.round(r.tokensRaw / 1200);
            return (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', padding: '18px 24px', borderTop: i ? '1px solid var(--rule)' : 0, alignItems: 'center', background: i === paygRows.length - 1 ? 'var(--paper-2)' : 'transparent' }}>
                <div>
                  <span className="serif" style={{ fontSize: 26, letterSpacing: '-0.015em' }}>{r.tokens}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginLeft: 8, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{t('pricing.payg.tokens.unit')}</span>
                </div>
                <span className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--ink-2)' }}>
                  <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: accent }}></span>
                  <span><span style={{ color: 'var(--ink)', fontWeight: 600 }}>~{articles}</span> {t(articles === 1 ? 'pricing.payg.articles.one' : 'pricing.payg.articles.many')}<sup>*</sup></span>
                </span>
                <span className="serif" style={{ fontSize: 26, letterSpacing: '-0.015em', color: 'var(--ink)' }}>{r.usd}</span>
              </div>
            );
          })}
        </div>

        <p className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 14, letterSpacing: '0.04em' }}>
          {t('pricing.payg.note')}
        </p>
      </section>

      {/* ━━━ FAQ ━━━ */}
      <section style={{ padding: isMobile ? '40px 20px' : '88px 56px', background: 'var(--paper-2)', borderTop: '4px solid var(--ink)' }}>
        <h2 className="serif" style={{ fontSize: 'clamp(36px, 5vw, 72px)', lineHeight: 0.96, letterSpacing: '-0.022em', margin: '0 0 32px' }}>
          {t('pricing.faq.title.a')} <span className="ital hl">{t('pricing.faq.title.hl')}</span>
        </h2>
        <div style={{ display: 'grid', gap: 12, maxWidth: 920 }}>
          {faqs.map((f, i) => <FAQItem key={i} t={t} q={f.q} a={f.a} accent={accent}/>)}
        </div>
      </section>

      {/* ━━━ Closing CTA ━━━ */}
      <section style={{ padding: isMobile ? '40px 20px' : '88px 56px', background: accent, borderTop: '4px solid var(--ink)' }}>
        <div style={{ maxWidth: 980 }}>
          <span className="stamp" style={{ background: 'var(--ink)', color: accent, borderColor: 'var(--ink)' }}>{t('pricing.closing.stamp')}</span>
          <h2 className="serif" style={{ fontSize: 'clamp(40px, 7vw, 104px)', lineHeight: 0.92, letterSpacing: '-0.025em', margin: '20px 0 18px' }}>
            {t('pricing.closing.title.a')}<br/>
            <span className="ital">{t('pricing.closing.title.b')}</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.5, maxWidth: 540, margin: '0 0 24px' }}>{t('pricing.closing.body')}</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button onClick={() => navigate('/start')} style={{ background: 'var(--ink)', color: accent, border: '2px solid var(--ink)', padding: '14px 22px', borderRadius: 10, cursor: 'pointer', fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 600, boxShadow: '4px 4px 0 rgba(0,0,0,.2)', display: 'inline-flex', gap: 10, minHeight: 52 }}>
              <span>{t('pricing.closing.cta.primary')}</span><span>→</span>
            </button>
            <button onClick={() => navigate('/contact')} style={{ background: 'transparent', color: 'var(--ink)', border: '2px solid var(--ink)', padding: '14px 22px', borderRadius: 10, cursor: 'pointer', fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500, display: 'inline-flex', gap: 10, minHeight: 52 }}>
              <span>{t('pricing.closing.cta.secondary')}</span><span>→</span>
            </button>
          </div>
        </div>
      </section>
    </>
  );
}

function FAQItem({ q, a, t, accent }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      background: 'var(--paper)', border: '2px solid var(--ink)', borderRadius: 12,
      boxShadow: open ? '5px 5px 0 var(--ink)' : '3px 3px 0 var(--ink)',
      overflow: 'hidden', transition: 'box-shadow .2s',
    }}>
      <button onClick={() => setOpen(o => !o)} style={{
        all: 'unset', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        width: '100%', padding: '18px 22px', cursor: 'pointer', boxSizing: 'border-box',
        gap: 16, minHeight: 56,
      }}>
        <span style={{ fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 600, lineHeight: 1.3 }}>{t(q)}</span>
        <span style={{ flexShrink: 0, width: 28, height: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: open ? accent : 'var(--paper-2)', border: '2px solid var(--ink)', borderRadius: 8, fontFamily: 'var(--mono)', fontSize: 14, transition: 'background .2s, transform .25s', transform: open ? 'rotate(45deg)' : 'none' }}>+</span>
      </button>
      {open && (
        <div style={{ padding: '0 22px 22px', fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)', fontFamily: 'var(--sans)', animation: 'ruu-fade-up .25s ease-out' }}>
          {t(a)}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PricingPage });