// Home page (/) and the privacy panel it shares with the features page.

function HomePage({ T, nav }) {
  const features = [
    { ic: 'flame',   t: 'Daily Quiz',                s: 'One fresh 10-question quiz every day keeps your streak alive.' },
    { ic: 'chart',   t: 'Personalized study plan',   s: 'Paced to your exam date, from the first chapter to exam day.' },
    { ic: 'target',  t: 'Exam practice',             s: 'Full 30-question simulations with real exam timing.' },
    { ic: 'cal',     t: 'County calendar',           s: 'Exam dates and locations for your county.' },
    { ic: 'book',    t: 'Full explanations',         s: 'Understand the why behind every official question.' },
    { ic: 'spark',   t: 'Readiness score',           s: 'Chapter accuracy and trends show you when you are ready.' },
    { ic: 'refresh', t: 'Improvement quizzes',       s: 'Auto-built from your mistakes, so weak spots become strengths.' },
    { ic: 'shield',  t: 'Works offline',             s: 'Questions download to your phone; progress syncs when you are back online.' },
  ];
  const steps = [
    { ic: 'pin',    t: 'Tell us about your exam',      s: 'County, association and target date set your plan.' },
    { ic: 'target', t: 'Take a quick knowledge check', s: 'Eight questions find your level, no pressure.' },
    { ic: 'flame',  t: 'Follow your daily plan',       s: 'Ten minutes a day, paced to reach exam day ready.' },
  ];
  return (
    <React.Fragment>
      <div style={{ background: `radial-gradient(1100px 520px at 78% 0%, ${T.tint(22, T.isDark ? '#0d1317' : '#fff')} 0%, ${T.tint(9, T.isDark ? '#0d1317' : '#fff')} 46%, transparent 100%)` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 28px 68px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 48, alignItems: 'center' }}>
          <div>
            <Tag T={T} icon="spark">For iPhone · Free to start</Tag>
            <h1 style={{ margin: '18px 0 0', fontFamily: T.df, fontSize: 'clamp(30px, 6.6vw, 44px)', lineHeight: 1.08, fontWeight: 700, color: T.ink, letterSpacing: -0.8, textWrap: 'pretty' }}>
              Pass your hunter's exam with confidence.
            </h1>
            <p style={{ margin: '18px 0 0', fontSize: 16.5, lineHeight: 1.55, color: T.mut, textWrap: 'pretty', maxWidth: 460 }}>
              One focused quiz a day from the official 1,000-question bank, plus exam dates and locations for your county.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <Btn T={T} h={50} fs={15.5} icon="download" onClick={openAppStore} style={{ padding: '0 26px' }}>Download for iPhone</Btn>
              <Btn T={T} kind="soft" h={50} fs={15.5} onClick={() => nav('features')} style={{ padding: '0 26px', background: T.isDark ? T.card : '#fff', border: `1.5px solid ${T.tint(26)}`, boxShadow: SH('0 3px 10px rgba(10,25,38,0.08)') }}>See how it works</Btn>
            </div>
            <p style={{ margin: '16px 0 0', fontSize: 13, fontWeight: 600, color: T.mut }}>Free daily quiz · No account needed</p>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <ShotImg src={appShot('dashboard')} alt="Venator app dashboard" height={480} />
          </div>
        </div>
      </div>
      <div style={{ background: '#fff', borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.line}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '38px 28px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 24 }}>
          {[['1,000', 'official exam questions'], ['41', 'counties covered'], ['10', 'minutes a day is enough']].map(([n, l], i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: T.df, fontSize: 38, fontWeight: 800, color: T.deep, letterSpacing: -1, lineHeight: 1 }}>{n}</div>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: T.mut, marginTop: 6 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      <SiteSection bg={`linear-gradient(170deg, ${T.tint(10)} 0%, ${T.tint(4)} 100%)`}>
        <SiteH2 T={T} center sub="From download to exam-ready in three steps.">How it works</SiteH2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 18 }}>
          {steps.map((s, i) => (
            <div key={i} className="hb-card" style={{ background: '#fff', borderRadius: RAD(22), border: `1px solid ${T.line}`, padding: '24px 22px 22px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontFamily: T.df, fontSize: 13, fontWeight: 800, color: T.deep, letterSpacing: 1 }}>{'0' + (i + 1)}</span>
                <div style={{ flex: 1, height: 1, background: T.line }}></div>
                <div style={{ width: IW(38), height: IW(38), borderRadius: RAD(13), background: T.tint(8), border: WSTROKE(`1px solid ${T.tint(22)}`), boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Ic name={s.ic} size={18} c={T.deep} w={1.9} />
                </div>
              </div>
              <div style={{ fontSize: 16, fontWeight: 750, color: T.ink, marginTop: 14, textWrap: 'pretty' }}>{s.t}</div>
              <div style={{ fontSize: 13.5, lineHeight: 1.55, color: T.mut, marginTop: 6, textWrap: 'pretty' }}>{s.s}</div>
            </div>
          ))}
        </div>
      </SiteSection>
      <SiteSection bg="#fff">
        <SiteH2 T={T} center sub="Study, practice and track your readiness in one place.">Everything you need to walk in ready</SiteH2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 14, alignItems: 'stretch' }}>
          {features.map((f, i) => (
            <div key={i} className="hb-card" style={{ background: '#fff', borderRadius: RAD(20), border: `1px solid ${T.line}`, padding: '20px 20px 18px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ flex: 1, fontSize: 15.5, fontWeight: 750, color: T.ink, textWrap: 'pretty' }}>{f.t}</span>
                <div style={{ width: IW(40), height: IW(40), 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={19} c={T.deep} w={1.9} />
                </div>
              </div>
              <div style={{ fontSize: 13.5, lineHeight: 1.55, color: T.mut, marginTop: 10, textWrap: 'pretty' }}>{f.s}</div>
            </div>
          ))}
        </div>
      </SiteSection>
      <SiteSection>
        <div style={{ display: 'flex', gap: 34, alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ flex: '1 1 300px', minWidth: 280 }}>
            <SiteH2 T={T} sub="Cramming the night before fails the 1,000-question bank. Short daily sessions, repeated over weeks, are what make answers stick.">Why a little every day beats a lot at once</SiteH2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { ic: 'flame',   t: 'Streaks keep you honest',    s: 'One quiz a day builds the habit that carries you to exam day.' },
                { ic: 'refresh', t: 'Mistakes come back',          s: 'Missed questions return in improvement quizzes until you get them right.' },
                { ic: 'target',  t: 'The plan does the pacing',    s: 'Your target date sets how much you study, never more than needed.' },
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{ width: IW(40), height: IW(40), borderRadius: RAD(14), background: `linear-gradient(150deg, ${T.heroA} 0%, ${T.heroDeep} 100%)`, boxShadow: SH(`0 6px 14px color-mix(in oklab, ${T.accent} 30%, transparent)`), display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Ic name={r.ic} size={19} c="#fff" w={1.9} />
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 750, color: T.ink }}>{r.t}</div>
                    <div style={{ fontSize: 13.5, lineHeight: 1.5, color: T.mut, marginTop: 3, textWrap: 'pretty' }}>{r.s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16, flex: '0 1 auto', margin: '0 auto' }}>
            <ShotImg src={appShot('study-plan')} alt="Study plan" height="clamp(220px, 26vw, 340px)" />
            <ShotImg src={appShot('improvement')} alt="Improvement quiz" height="clamp(220px, 26vw, 340px)" />
          </div>
        </div>
      </SiteSection>
      <div style={{ borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.line}`, background: T.card }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 28px' }}>
          <div style={{ display: 'flex', gap: 34, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ width: IW(64), height: IW(64), borderRadius: RAD(20), background: T.tint(8), border: WSTROKE(`1px solid ${T.tint(22)}`), boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Ic name="shield" size={30} c={T.deep} w={1.8} />
            </div>
            <div style={{ flex: '1 1 320px', minWidth: 280 }}>
              <h2 style={{ margin: 0, fontFamily: T.df, fontSize: 26, fontWeight: 700, color: T.ink, letterSpacing: -0.3, textWrap: 'pretty' }}>Everything stays on your phone</h2>
              <p style={{ margin: '8px 0 0', fontSize: 14.5, lineHeight: 1.55, color: T.mut, textWrap: 'pretty', maxWidth: 560 }}>Your answers, scores and streaks live only on your device, they are never uploaded anywhere. No account, no ads, no tracking. Delete the app and everything is gone with it.</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: '0 1 300px', minWidth: 260 }}>
              {[
                { ok: true,  t: 'No account needed',      s: 'Install and start, nothing to sign up for.' },
                { 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.' },
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
                  <div style={{ width: IW(30), height: IW(30), borderRadius: RAD(10), background: r.ok ? T.greenSoft : T.redSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Ic name={r.ok ? 'check' : 'x'} size={15} c={r.ok ? T.green : T.red} w={2.4} />
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 750, color: T.ink }}>{r.t}</div>
                    <div style={{ fontSize: 12.5, lineHeight: 1.45, color: T.mut, marginTop: 1 }}>{r.s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <SiteSection style={{ paddingBottom: 32 }}>
        <div style={{ background: `linear-gradient(160deg, ${T.heroA} 0%, ${T.heroDeep} 100%)`, borderRadius: RAD(30), padding: '52px 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' }}>Start with the free plan</h2>
          <p style={{ margin: '10px auto 0', fontSize: 15.5, lineHeight: 1.5, color: 'rgba(255,255,255,0.85)', fontWeight: 550, maxWidth: 520, textWrap: 'pretty' }}>The Daily Quiz, streaks and your county's exam dates, free forever. Premium when you want the rest.</p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
            <Btn T={T} kind="dark" h={50} fs={15.5} icon="download" onClick={openAppStore} style={{ padding: '0 28px' }}>Download for iPhone</Btn>
            <Btn T={T} h={50} fs={15.5} onClick={() => nav('pricing')} style={{ padding: '0 28px', background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.38)', color: '#fff', boxShadow: 'none' }}>Compare plans</Btn>
          </div>
        </div>
      </SiteSection>
      <SiteSection style={{ paddingTop: 32 }}>
        <SiteH2 T={T} center sub="The short version. The full list lives on the Features page.">Common questions</SiteH2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14 }}>
          {[
            ['Is the free plan enough to pass?', 'It covers the Daily Quiz and your county exam dates. Most people who pass pair it with Premium study lessons and simulations.'],
            ['Are these the real exam questions?', 'Yes, the app uses the official 1,000-question bank published for the Romanian hunter permit exam.'],
            ['Do I need an internet connection?', 'Only for the first download. Questions live on your phone, so you can practice anywhere.'],
          ].map(([q, a], i) => (
            <div key={i} className="hb-card" style={{ background: T.card, borderRadius: RAD(20), border: `1px solid ${T.line}`, padding: '20px 20px 18px' }}>
              <div style={{ fontSize: 15, fontWeight: 750, color: T.ink, textWrap: 'pretty' }}>{q}</div>
              <div style={{ fontSize: 13.5, lineHeight: 1.55, color: T.mut, marginTop: 7, textAlign: 'justify', hyphens: 'auto' }}>{a}</div>
            </div>
          ))}
        </div>
      </SiteSection>
    </React.Fragment>
  );
}

function PrivacyPanel({ T, nav }) {
  const rows = [
    { 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 (
    <div style={{ background: T.card, borderRadius: RAD(26), border: `1px solid ${T.line}`, padding: '34px 34px 30px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(290px, 1fr))', gap: 34, alignItems: 'center' }}>
      <div>
        <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.3, textTransform: 'uppercase', color: T.deep }}>Privacy</span>
        <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' }}>Your data stays yours</h3>
        <p style={{ margin: '12px 0 0', fontSize: 14.5, lineHeight: 1.6, color: T.mut, textWrap: 'pretty' }}>Your answers, scores and streaks live only on your device, they are never uploaded anywhere. Delete the app and everything is gone with it.</p>
        <span className="hb-link" onClick={() => nav('legal', 'privacy')} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 13.5, fontWeight: 750, color: T.deep, cursor: 'pointer' }}>Read the Privacy Policy <Ic name="arrowR" size={14} c={T.deep} w={2.2} /></span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ width: IW(34), height: IW(34), borderRadius: RAD(11), background: r.ok ? T.greenSoft : T.redSoft, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Ic name={r.ok ? 'check' : 'x'} size={16} c={r.ok ? T.green : T.red} w={2.4} />
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 14.5, fontWeight: 750, color: T.ink }}>{r.t}</div>
              <div style={{ fontSize: 13, color: T.mut, marginTop: 2 }}>{r.s}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, PrivacyPanel });