// Pricing page (/pricing): plan cards, comparison table, billing FAQ.

function BillingFAQ({ T }) {
  const items = [
    ['How does the free trial work?', 'Yearly starts with 7 days free. Cancel before it ends and you pay nothing.'],
    ['How do I cancel Premium?', 'From your App Store subscriptions, in two taps. You keep Premium until the end of the period you paid for.'],
    ['What stays free forever?', 'The Daily Quiz, streaks and your county\'s exam dates. No time limit.'],
    ['Can I switch between plans?', 'Yes, anytime from your App Store subscriptions. The change applies at the next renewal.'],
  ];
  const [open, setOpen] = React.useState(-1);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(420px, 100%), 1fr))', gap: 12, alignItems: 'start' }}>
      {items.map(([q, a], i) => {
        const isOpen = open === i;
        return (
          <div key={i} className="hb-card" onClick={() => setOpen(isOpen ? -1 : i)} style={{
            background: T.card, borderRadius: RAD(18), cursor: 'pointer',
            border: isOpen ? `1.5px solid ${T.tint(30)}` : `1px solid ${T.line}`,
            padding: '17px 20px', boxSizing: 'border-box',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ flex: 1, fontSize: 15.5, fontWeight: 750, color: T.ink }}>{q}</span>
              <Ic name="chevD" size={16} c={T.faint} w={2.2} style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.22s', flexShrink: 0 }} />
            </div>
            <div style={{ display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr', transition: 'grid-template-rows 0.28s ease' }}>
              <div style={{ overflow: 'hidden' }}>
                <p style={{ margin: '10px 0 0', fontSize: 14, lineHeight: 1.55, color: T.mut, textAlign: 'justify', hyphens: 'auto' }}>{a}</p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function PlanCTA({ T, dark = false, children }) {
  return (
    <div className="hb-btn" onClick={openAppStore} style={{ height: 46, borderRadius: 99, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontSize: 14.5, fontWeight: 700, cursor: 'pointer', marginTop: 20, background: dark ? '#fff' : T.tint(7), color: dark ? T.heroDeep : T.deep, boxSizing: 'border-box', border: dark ? 'none' : `1px solid ${T.tint(18)}` }}>{children}</div>
  );
}

function CompareGlyph({ T, v }) {
  if (v === true) return <Ic name="check" size={17} c={T.green} w={2.5} />;
  if (v === false) return <Ic name="x" size={15} c={T.faint} w={2.2} style={{ opacity: 0.55 }} />;
  return <span style={{ fontSize: 13.5, fontWeight: 750, color: T.ink }}>{v}</span>;
}

function PricingPage({ T, nav }) {
  const groups = [
    ['Study', [
      ['Daily Quiz', true, true],
      ['Chapter lessons', '2 of 10 chapters', 'All 10 chapters'],
      ['Answer explanations', false, true],
      ['Knowledge check', true, true],
      ['Personalized study plan', false, true],
    ]],
    ['Practice & exams', [
      ['Exam simulations', '1 per day', 'Unlimited'],
      ['Exam timing & scoring', true, true],
      ['Improvement quizzes', false, true],
      ['Custom quiz builder', false, true],
      ['Chapter quizzes', false, true],
      ['Mistake review', false, true],
    ]],
    ['Progress', [
      ['Streaks & basic stats', true, true],
      ['Readiness score', false, true],
      ['Chapter accuracy breakdown', false, true],
      ['Progress trends over time', false, true],
    ]],
    ['App & extras', [
      ['County exam dates', true, true],
      ['App customization & themes', false, true],
      ['Romanian & English', true, true],
      ['Works offline', true, true],
    ]],
  ];
  const darkBg = `color-mix(in oklab, ${T.accent} 24%, #0d141c)`;
  const wCard = { background: T.card, border: `1px solid ${T.line}`, borderRadius: RAD(24), padding: '24px 22px 22px', flex: '1 1 220px', minWidth: 220, boxSizing: 'border-box', display: 'flex', flexDirection: 'column' };
  return (
    <SiteSection>
      <PageIntro T={T} eyebrow="Pricing" title="Simple pricing" sub="Start free. Upgrade when you want the full toolkit." />
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: -18, marginBottom: 34 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: T.greenSoft, border: `1px solid color-mix(in oklab, ${T.green} 32%, transparent)`, borderRadius: 99, padding: '9px 16px' }}>
          <Ic name="spark" size={16} c={T.green} w={2} />
          <span style={{ fontSize: 13.5, fontWeight: 750, color: T.greenInk }}>Launch pricing, up to 31% off</span>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 16, alignItems: 'stretch', flexWrap: 'wrap' }}>
        <div className="hb-card" style={wCard}>
          <span style={{ fontFamily: T.df, fontSize: 16.5, fontWeight: 700, color: T.ink }}>Free</span>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 14 }}>
            <span style={{ fontFamily: T.df, fontSize: 40, fontWeight: 800, color: T.ink, letterSpacing: -1, lineHeight: 1 }}>€0</span>
            <span style={{ fontSize: 13, fontWeight: 650, color: T.mut }}>forever</span>
          </div>
          <p style={{ margin: '12px 0 0', fontSize: 13, lineHeight: 1.45, color: T.mut, fontWeight: 550 }}>The Daily Quiz, free forever. No account needed.</p>
        </div>
        <div className="hb-card" style={wCard}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <span style={{ fontFamily: T.df, fontSize: 16.5, fontWeight: 700, color: T.ink }}>Monthly</span>
            <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.8, padding: '4px 9px', borderRadius: 99, background: T.tint(10), border: `1px solid ${T.tint(24)}`, color: T.deep }}>3 DAYS FREE</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 14 }}>
            <span style={{ fontFamily: T.df, fontSize: 40, fontWeight: 800, color: T.ink, letterSpacing: -1, lineHeight: 1 }}>€6</span>
            <span style={{ fontSize: 13, fontWeight: 650, color: T.mut }}>/ month</span>
          </div>
          <p style={{ margin: '12px 0 0', fontSize: 13, lineHeight: 1.45, color: T.mut, fontWeight: 550 }}>All Premium features. Billed monthly, cancel anytime.</p>
        </div>
        <div className="hb-card" style={{ background: `linear-gradient(160deg, ${T.heroA} 0%, ${T.heroDeep} 100%)`, borderRadius: RAD(24), padding: '24px 22px 22px', flex: '1.12 1 245px', minWidth: 245, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden', boxShadow: SH(`0 18px 44px color-mix(in oklab, ${T.accent} 34%, transparent)`) }}>
          <div style={{ position: 'absolute', top: -90, right: -70, width: 240, height: 240, borderRadius: '50%', background: `radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 70%)`, pointerEvents: 'none' }}></div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <span style={{ fontFamily: T.df, fontSize: 16.5, fontWeight: 700, color: '#fff' }}>Yearly</span>
            <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.8, padding: '4px 9px', borderRadius: 99, background: T.green, color: '#fff' }}>BEST VALUE</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
            <span style={{ fontSize: 13.5, fontWeight: 700, color: 'rgba(255,255,255,0.6)', textDecoration: 'line-through' }}>€72</span>
            <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: 0.5, padding: '3px 8px', borderRadius: 99, background: 'rgba(255,255,255,0.18)', color: '#fff', whiteSpace: 'nowrap' }}>Save 31%</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 2, flexWrap: 'nowrap' }}>
            <span style={{ fontFamily: T.df, fontSize: 40, fontWeight: 800, color: '#fff', letterSpacing: -1, lineHeight: 1, whiteSpace: 'nowrap' }}>€50</span>
            <span style={{ fontSize: 13, fontWeight: 650, color: 'rgba(255,255,255,0.72)', whiteSpace: 'nowrap' }}>/ year</span>
          </div>
          <p style={{ margin: '12px 0 0', fontSize: 13, lineHeight: 1.45, color: 'rgba(255,255,255,0.78)', fontWeight: 550 }}>€4.17 per month, billed once a year. Starts with 7 days free.</p>
        </div>
        <div className="hb-card" style={wCard}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <span style={{ fontFamily: T.df, fontSize: 16.5, fontWeight: 700, color: T.ink }}>Lifetime</span>
            <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.8, padding: '4px 9px', borderRadius: 99, background: T.tint(10), border: `1px solid ${T.tint(24)}`, color: T.deep }}>PAY ONCE</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 14 }}>
            <span style={{ fontFamily: T.df, fontSize: 40, fontWeight: 800, color: T.ink, letterSpacing: -1, lineHeight: 1 }}>€100</span>
            <span style={{ fontSize: 13, fontWeight: 650, color: T.mut }}>one-time</span>
          </div>
          <p style={{ margin: '12px 0 0', fontSize: 13, lineHeight: 1.45, color: T.mut, fontWeight: 550 }}>Everything in Premium, forever. No renewals.</p>
        </div>
      </div>
      <div style={{ height: 64 }}></div>
      <SiteH2 T={T} center>Free vs Premium</SiteH2>
      <div style={{ background: T.card, borderRadius: RAD(24), border: `1px solid ${T.line}`, overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', padding: '17px 26px', background: `linear-gradient(90deg, ${T.heroA} 0%, ${T.heroDeep} 100%)` }}>
          <span style={{ flex: 1, fontSize: 12, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)' }}>What you get</span>
          <span style={{ width: 130, textAlign: 'center', fontSize: 12.5, fontWeight: 800, letterSpacing: 0.8, color: 'rgba(255,255,255,0.85)' }}>FREE</span>
          <span style={{ width: 130, textAlign: 'center', fontSize: 12.5, fontWeight: 800, letterSpacing: 0.8, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}><Ic name="spark" size={14} c="#fff" w={2} /> PREMIUM</span>
        </div>
        {groups.map(([g, rows], gi) => (
          <React.Fragment key={gi}>
            <div style={{ padding: '11px 26px', background: T.tint(6), borderBottom: `1px solid ${T.line}`, borderTop: gi > 0 ? `1px solid ${T.line}` : 'none' }}>
              <span style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase', color: T.deep }}>{g}</span>
            </div>
            {rows.map(([l, a, b], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '16px 26px', borderBottom: i < rows.length - 1 ? `1px solid ${T.tint(5)}` : 'none' }}>
                <span style={{ flex: 1, fontSize: 14.5, fontWeight: 650, color: T.ink }}>{l}</span>
                <span style={{ width: 130, display: 'flex', justifyContent: 'center' }}><CompareGlyph T={T} v={a} /></span>
                <span style={{ width: 130, display: 'flex', justifyContent: 'center' }}><CompareGlyph T={T} v={b} /></span>
              </div>
            ))}
          </React.Fragment>
        ))}
      </div>
      <div style={{ height: 64 }}></div>
      <SiteH2 T={T} center>Billing questions</SiteH2>
      <BillingFAQ T={T} />
      <div style={{ height: 64 }}></div>
      <div style={{ background: `linear-gradient(160deg, ${T.heroA} 0%, ${T.heroDeep} 100%)`, borderRadius: RAD(30), padding: '46px 32px', textAlign: 'center', boxShadow: SH(`0 16px 36px color-mix(in oklab, ${T.accent} 26%, transparent)`) }}>
        <h2 style={{ margin: 0, fontFamily: T.df, fontSize: 'clamp(23px, 4.6vw, 30px)', fontWeight: 700, color: '#fff', letterSpacing: -0.4, textWrap: 'pretty' }}>Install first, decide later</h2>
        <p style={{ margin: '10px auto 0', fontSize: 15.5, lineHeight: 1.5, color: 'rgba(255,255,255,0.85)', fontWeight: 550, maxWidth: 540, textWrap: 'pretty' }}>The free plan needs no card and no account. Plans are chosen inside the app, so you can try the Daily Quiz before paying for anything.</p>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 26 }}>
          <Btn T={T} kind="dark" h={50} fs={15.5} icon="download" onClick={openAppStore} style={{ padding: '0 28px' }}>Download for iPhone</Btn>
        </div>
        <p style={{ margin: '14px 0 0', fontSize: 12.5, fontWeight: 600, color: 'rgba(255,255,255,0.7)' }}>Subscriptions renew automatically · cancel anytime</p>
      </div>
    </SiteSection>
  );
}

Object.assign(window, { PricingPage, BillingFAQ, PlanCTA, CompareGlyph });