// Legal pages (/legal/terms, /legal/privacy, /legal/cookies).

const LEGAL_DOCS = {
  terms: {
    title: 'Terms of Service',
    sections: [
      ['About the service', 'Venator is a study app that prepares you for the Romanian hunter\'s permit exam. It is an independent product and is not affiliated with any public authority or examination body.'],
      ['Free and Premium', 'The core Daily Quiz is free. Premium is an optional subscription that unlocks explanations, unlimited exam practice and advanced statistics.'],
      ['Subscriptions and billing', 'Premium renews automatically until cancelled. You can cancel anytime from your app store account; access continues until the end of the paid period.'],
      ['Your account', 'The app has no accounts. Everything you do is stored only on your device; there is nothing to register and nothing to log in to.'],
      ['Acceptable use', 'Do not copy, resell or redistribute the question bank, explanations or other content, and do not attempt to disrupt or reverse engineer the service.'],
      ['Intellectual property', 'The app, its design and its original content belong to us or our licensors. Official exam questions remain public information of their respective source.'],
      ['No guarantee of results', 'We help you prepare, but we cannot guarantee that you will pass the exam or obtain a permit. Exam requirements are set by the authorities.'],
      ['Liability', 'The service is provided as is. To the extent permitted by law, we are not liable for indirect damages or for decisions made based on app content.'],
      ['Changes', 'We may update these terms. We will announce significant changes in the app before they take effect.'],
      ['Contact', 'Questions about these terms: legal@hunter.app.'],
    ],
  },
  privacy: {
    title: 'Privacy Policy',
    sections: [
      ['What we collect', 'Nothing. Your study activity (answers, scores, streaks) and setup choices (county, exam date, daily pace) are stored only on your device and are never transmitted to us.'],
      ['How the app uses it', 'Locally, to personalize your study plan, track your progress and remind you to study. Your data never leaves your phone.'],
      ['Legal basis', 'Because no personal data is collected or processed on our servers, most GDPR processing obligations do not arise. What little the app does happens on your device, under your control.'],
      ['Storage and retention', 'All data lives in the app\'s local storage on your device. Deleting the app permanently deletes all of it. There is no copy anywhere else.'],
      ['Third parties', 'We use no analytics or tracking SDKs. Your purchase is handled entirely by Apple through the App Store; we never see your payment details.'],
      ['Your rights', 'You are in full control: your data is on your device, and deleting the app erases everything. For any question, write to privacy@hunter.app.'],
      ['Children', 'The app is intended for users aged 18 and over, matching the legal age for a hunting permit in Romania.'],
      ['Contact', 'Data questions: privacy@hunter.app. You may also complain to the Romanian supervisory authority, ANSPDCP.'],
    ],
  },
  cookies: {
    title: 'Cookie Policy',
    sections: [
      ['We set no cookies', 'This website sets no cookies at all. It stores nothing in your browser, has no analytics, no tracking pixels and no advertising, so there is nothing for you to consent to and no banner to dismiss.'],
      ['What your browser does load', 'Pages load fonts from Google Fonts and the React library from a public code network (unpkg). These providers receive your IP address and browser details in order to send the files, as any website request does. They set no cookies for this site.'],
      ['The app itself', 'The Venator app stores your study data only on your device and sends nothing to us. The Privacy Policy explains that in full.'],
      ['Questions', 'Anything about this page: privacy@hunter.app.'],
    ],
  },
};

// Document only, sized for a phone web view: no chrome, no navigation, and a
// plain background so it sits inside the app's own screen.
function LegalEmbed({ T, doc }) {
  const d = LEGAL_DOCS[doc] || LEGAL_DOCS.terms;
  return (
    <div style={{ fontFamily: T.bf, padding: '22px 20px 44px', maxWidth: 680, margin: '0 auto', background: T.bg, minHeight: '100vh', boxSizing: 'border-box' }}>
      <h1 style={{ margin: 0, fontFamily: T.df, fontSize: 'clamp(22px, 5.6vw, 28px)', fontWeight: 700, color: T.ink, letterSpacing: -0.4, lineHeight: 1.18 }}>{d.title}</h1>
      <p style={{ margin: '8px 0 0', fontSize: 13, fontWeight: 600, color: T.faint }}>Effective date: 1 September 2026</p>
      {d.sections.map(([title, body], i) => (
        <section key={i} style={{ marginTop: 26 }}>
          <h2 style={{ margin: 0, fontFamily: T.df, fontSize: 16.5, fontWeight: 700, color: T.ink, lineHeight: 1.25 }}>{title}</h2>
          <p style={{ margin: '8px 0 0', fontSize: 15, lineHeight: 1.6, color: T.mut, textWrap: 'pretty' }}>{body}</p>
        </section>
      ))}
    </div>
  );
}

function LegalPage({ T, doc, setDoc }) {
  const tabs = [['terms', 'Terms of Service'], ['privacy', 'Privacy Policy'], ['cookies', 'Cookie Policy']];
  const d = LEGAL_DOCS[doc] || LEGAL_DOCS.terms;
  return (
    <SiteSection>
      <SiteH2 T={T} center level={1} sub="The formal stuff, in plain language.">Legal</SiteH2>
      <div className="hb-legal-grid" style={{ display: 'grid', gap: 28, alignItems: 'start', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {tabs.map(([id, l]) => (
            <div key={id} className={`hb-legal${doc === id ? ' on' : ''}`} onClick={() => setDoc(id)} style={{
              padding: '13px 14px', borderRadius: RAD(14), cursor: 'pointer', boxSizing: 'border-box',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
              background: doc === id ? '#fff' : 'transparent',
              border: doc === id ? `1px solid ${T.tint(22)}` : '1px solid transparent',
              boxShadow: doc === id ? '0 6px 18px rgba(10,25,38,0.08)' : 'none',
              fontSize: 15, fontWeight: doc === id ? 750 : 650,
              color: doc === id ? T.deep : T.tint(46, T.ink),
            }}>
              <span>{l}</span>
              {doc === id && <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke={T.accent} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>}
            </div>
          ))}
        </div>
        <div style={{ minWidth: 0, background: T.card, borderRadius: RAD(24), border: `1px solid ${T.line}`, padding: '30px 32px' }}>
          <h3 style={{ margin: 0, fontFamily: T.df, fontSize: 23, fontWeight: 700, color: T.ink, letterSpacing: -0.3 }}>{d.title}</h3>
          <p style={{ margin: '6px 0 0', fontSize: 12.5, fontWeight: 700, color: T.faint }}>Effective date: 1 September 2026</p>
          {d.sections.map(([h, body], i) => (
            <div key={i} style={{ marginTop: 22 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 9 }}>
                <span style={{ fontFamily: T.df, fontSize: 13, fontWeight: 700, color: T.isDark ? T.mut : T.tint(42) }}>{String(i + 1).padStart(2, '0')}</span>
                <h4 style={{ margin: 0, fontSize: 15.5, fontWeight: 750, color: T.ink }}>{h}</h4>
              </div>
              <p style={{ margin: '7px 0 0', fontSize: 14, lineHeight: 1.6, color: T.mut, textWrap: 'pretty' }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </SiteSection>
  );
}

Object.assign(window, { LegalPage, LegalEmbed, LEGAL_DOCS });