// Features page (/features) and the FAQ block.

const FEAT_CARDS = [
  { ic: 'flame',  t: 'Daily Quiz',               s: 'One fresh 10-question quiz every day keeps your streak alive.' },
  { ic: 'chart',  t: 'Streaks & progress',       s: 'Daily streaks and progress tracking keep the habit alive.' },
  { ic: 'cal',    t: 'County exam dates',        s: 'Dates and locations for your county, updated as they are announced.' },
  { ic: 'target', t: 'Knowledge check',          s: 'Eight questions find your level and set your starting point.' },
  { ic: 'book',   t: 'Full explanations',        s: 'Understand the why behind every official question.', pro: true },
  { ic: 'refresh',t: 'Improvement quizzes',      s: 'Auto-built from your mistakes, so weak spots become strengths.', pro: true },
  { ic: 'clock',  t: 'Unlimited exam practice',  s: 'Full 30-question simulations with real exam timing.', pro: true },
  { ic: 'spark',  t: 'Readiness score',          s: 'Chapter accuracy and trends show you when you are ready.', pro: true },
  { ic: 'leaf',   t: 'Personalized study plan',  s: 'Paced to your exam date, from the first chapter to exam day.', pro: true },
];

function FeaturesPage({ T, nav }) {
  const trio = [
    { src: appShot('dashboard'), cap: 'Your day at a glance' },
    { src: appShot('daily-quiz'), cap: 'One quiz, every day' },
    { src: appShot('study'), cap: 'Study chapter by chapter' },
    { src: appShot('stats'), cap: 'Know when you are ready' },
  ];
  const duo = [
    { src: appShot('improvement'), cap: 'Improvement quiz' },
    { src: appShot('custom-quiz'), cap: 'Custom quiz builder' },
    { src: appShot('study-plan'), cap: 'Your study plan' },
  ];
  const insights = [
    { src: appShot('stats'), cap: 'Detailed stats' },
    { src: appShot('mistakes'), cap: 'Review your mistakes' },
    { src: appShot('explanation'), cap: 'Every answer explained' },
  ];
  const privRows = [
    { ok: true,  t: 'Everything stays on your device', s: 'Your progress never leaves your phone.' },
    { ok: false, t: 'We never sell your data',        s: 'There is nothing to sell, we do not have it.' },
    { ok: false, t: 'No ads, ever',                   s: 'You are the customer, not the product.' },
  ];
  return (
    <SiteSection>
      <PageIntro T={T} title="Built around one goal: exam day" sub="Real screens from the app: every feature exists to get you from your first quiz to a passing score." />
      <div style={{ display: 'flex', justifyContent: 'center', gap: 28, flexWrap: 'wrap' }}>
        {trio.map((s, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <ShotImg src={s.src} alt={s.cap} height={380} />
            <span style={{ fontSize: 13.5, fontWeight: 650, color: T.mut }}>{s.cap}</span>
          </div>
        ))}
      </div>
      <div style={{ height: 72 }}></div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(270px, 1fr))', gap: 20 }}>
        {FEAT_CARDS.map((f, i) => {
          const pro = !!f.pro;
          return (
            <div key={i} className="hb-card" style={{
              borderRadius: RAD(20), padding: '20px 20px 18px', boxSizing: 'border-box',
              background: pro ? `linear-gradient(160deg, ${T.heroA} 0%, ${T.heroDeep} 100%)` : T.card,
              border: pro ? 'none' : `1px solid ${T.line}`,
              boxShadow: pro ? SH(`0 10px 24px color-mix(in oklab, ${T.accent} 22%, transparent)`) : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
                  <span style={{ fontSize: 15.5, fontWeight: 750, color: pro ? '#fff' : T.ink }}>{f.t}</span>
                  {pro && <span style={{ fontSize: 9.5, fontWeight: 800, letterSpacing: 0.9, padding: '3.5px 8px', borderRadius: 99, background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.32)', color: '#fff', flexShrink: 0 }}>PREMIUM</span>}
                </div>
                <div style={{ width: IW(46), height: IW(46), borderRadius: RAD(15), background: pro ? 'rgba(255,255,255,0.14)' : T.tint(8), border: WSTROKE(pro ? '1px solid rgba(255,255,255,0.26)' : `1px solid ${T.tint(22)}`), boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Ic name={f.ic} size={21} c={pro ? '#fff' : T.deep} w={1.9} />
                </div>
              </div>
              <div style={{ fontSize: 14.5, lineHeight: 1.5, color: pro ? 'rgba(255,255,255,0.82)' : T.mut, marginTop: 10, textWrap: 'pretty' }}>{f.s}</div>
            </div>
          );
        })}
      </div>
      <div style={{ height: 72 }}></div>
      <div style={{ background: T.card, borderRadius: RAD(26), border: `1px solid ${T.line}`, padding: '38px 34px', display: 'flex', gap: 34, alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ flex: '1 1 280px', minWidth: 260 }}>
          <Eyebrow T={T}>Go deeper</Eyebrow>
          <h3 style={{ margin: '10px 0 0', fontFamily: T.df, fontSize: 'clamp(24px, 4.8vw, 32px)', fontWeight: 700, color: T.ink, letterSpacing: -0.5, lineHeight: 1.12, textWrap: 'pretty' }}>Quiz your way</h3>
          <p style={{ margin: '12px 0 0', fontSize: 14.5, lineHeight: 1.6, color: T.mut, textWrap: 'pretty' }}>Way beyond the Daily Quiz: improvement quizzes built from your mistakes, chapter quizzes after every lesson, and a custom builder where you pick topic, length and difficulty. All paced by a plan that carries you to exam day.</p>
          <span className="hb-link" onClick={() => nav('pricing')} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 13.5, fontWeight: 750, color: T.deep, cursor: 'pointer' }}>See what Premium unlocks <Ic name="arrowR" size={14} c={T.deep} w={2.2} /></span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', maxWidth: '100%', gap: 16, flex: '0 1 auto' }}>
          {duo.map((s, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
              <ShotImg src={s.src} alt={s.cap} height="clamp(200px, 24vw, 290px)" />
              <span style={{ fontSize: 13, fontWeight: 650, color: T.mut }}>{s.cap}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ height: 72 }}></div>
      <div style={{ background: T.card, borderRadius: RAD(26), border: `1px solid ${T.line}`, padding: '38px 34px', display: 'flex', gap: 34, alignItems: 'center', flexWrap: 'wrap-reverse' }}>
        <div style={{ flex: '1 1 280px', minWidth: 260, order: 2 }}>
          <Eyebrow T={T}>Learn from mistakes</Eyebrow>
          <h3 style={{ margin: '10px 0 0', fontFamily: T.df, fontSize: 'clamp(24px, 4.8vw, 32px)', fontWeight: 700, color: T.ink, letterSpacing: -0.5, lineHeight: 1.12, textWrap: 'pretty' }}>Know exactly where you stand</h3>
          <p style={{ margin: '12px 0 0', fontSize: 14.5, lineHeight: 1.6, color: T.mut, textWrap: 'pretty' }}>Detailed stats by chapter, a full history of every question you answered, instant review of the ones you got wrong, and a clear explanation for each answer. Nothing slips through.</p>
          <span className="hb-link" onClick={() => nav('pricing')} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 13.5, fontWeight: 750, color: T.deep, cursor: 'pointer' }}>See what Premium unlocks <Ic name="arrowR" size={14} c={T.deep} w={2.2} /></span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', maxWidth: '100%', gap: 16, flex: '0 1 auto', order: 1 }}>
          {insights.map((s, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
              <ShotImg src={s.src} alt={s.cap} height="clamp(200px, 24vw, 290px)" />
              <span style={{ fontSize: 13, fontWeight: 650, color: T.mut }}>{s.cap}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ height: 72 }}></div>
      <PrivacyPanel T={T} nav={nav} />
      <div style={{ height: 72 }}></div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20 }}>
        {[
          { ic: 'shield', t: 'Works offline', s: 'Everything lives on your device.' },
          { ic: 'book', t: 'Romanian & English', s: 'Switch languages anytime in settings.' },
          { ic: 'pin', t: 'All 41 counties', s: 'Exam dates and seasons, wherever you are.' },
        ].map((f, i) => (
          <div key={i} className="hb-card" style={{ background: T.card, borderRadius: RAD(20), border: `1px solid ${T.line}`, padding: '20px 22px', display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: IW(42), height: IW(42), borderRadius: RAD(14), background: T.tint(8), border: WSTROKE(`1px solid ${T.tint(22)}`), boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Ic name={f.ic} size={20} c={T.deep} w={1.9} />
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 14.5, fontWeight: 750, color: T.ink }}>{f.t}</div>
              <div style={{ fontSize: 13, color: T.mut, marginTop: 2, textWrap: 'pretty' }}>{f.s}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ height: 72 }}></div>
      <SiteFAQ T={T} nav={nav} />
    </SiteSection>
  );
}

const SITE_FAQ = [
  { q: 'Are these the real exam questions?', a: 'Yes. The question bank mirrors the official set of 1,000 questions published for the Romanian hunter\'s permit exam, organized by chapter and kept up to date.' },
  { q: 'Do I need an account?', a: 'No. There are no accounts. You download the app and start studying; everything is stored on your device.' },
  { q: 'Does the app work offline?', a: 'Yes. Questions and study content live on your device, so you can practice without a connection. Only exam dates need an occasional refresh.' },
  { q: 'Where do exam dates come from?', a: 'From county hunting associations and public announcements. We update dates as counties publish them; always confirm the final date with your association.' },
  { q: 'Can I change my county or exam date later?', a: 'Yes, anytime in settings. Your study plan re-paces itself automatically.' },
  { q: 'How do I delete my data?', a: 'Just delete the app. Your data lives only on your device, so removing the app removes everything with it.' },
];

function SiteFAQ({ T, nav }) {
  const [open, setOpen] = React.useState(-1);
  return (
    <div>
      <SiteH2 T={T} center>Frequently asked questions</SiteH2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(420px, 100%), 1fr))', gap: 12, alignItems: 'start' }}>
        {SITE_FAQ.map((f, 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 }}>{f.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, textWrap: 'pretty' }}>{f.a}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { FeaturesPage, SiteFAQ, FEAT_CARDS, SITE_FAQ });