// screens-privacy.jsx — public Privacy Policy page.
const { useState: useStatePV } = React;

function PrivacyScreen({ go }) {
  const updated = 'August 21, 2026';

  const sections = [
    { id: 'collect', h: 'Information we collect', b: [
      'Account details you give us — name, creator/display name, email, social handles, and profile content when you sign up or apply for Studio.',
      'Content you create — outfits, boards, product links, notes, and the products you import from retailer URLs.',
      'Usage data — pages viewed, outfits opened, and outbound Shop clicks, so we can attribute sales and pay creators.',
      'Device and technical data — browser type, approximate location from IP, and cookies needed to keep you signed in.',
    ]},
    { id: 'use', h: 'How we use your information', b: [
      'To run modaBoard — publishing your outfits, resolving product links, and keeping your account secure.',
      'To attribute affiliate sales to the right creator through our /go/ redirect, and to calculate and pay commissions.',
      'To improve the product — understanding which outfits, brands, and features perform.',
      'To communicate with you about your account, earnings, and — only if you opt in — product news.',
    ]},
    { id: 'affiliate', h: 'Affiliate tracking', b: [
      'When a visitor clicks Shop, we create a first-party click record and pass an anonymous click ID to the retailer’s affiliate network so a resulting sale can be credited to the creator.',
      'We do not sell your personal data. Affiliate networks receive only the anonymous click reference — not your identity.',
    ]},
    { id: 'share', h: 'When we share data', b: [
      'With service providers who host our infrastructure, process payments, and send email — under contract and only as needed.',
      'With affiliate networks, limited to the anonymous tracking reference required to confirm a sale.',
      'For legal reasons, if required by law or to protect the rights and safety of our users.',
    ]},
    { id: 'rights', h: 'Your rights', b: [
      'You can access, correct, export, or delete your personal data at any time from Studio settings or by emailing us.',
      'You can object to or restrict certain processing, and withdraw marketing consent whenever you like.',
      'If you’re in the EU/EEA, we process data under the GDPR; modaBoard AB is the data controller.',
    ]},
    { id: 'retention', h: 'Data retention', b: [
      'We keep account and earnings records for as long as your account is active and as required for tax and accounting.',
      'Click and transaction data is retained to resolve affiliate payouts and disputes, then anonymised or deleted.',
    ]},
    { id: 'cookies', h: 'Cookies', b: [
      'We use essential cookies to keep you signed in and to remember your click for sale attribution.',
      'Analytics cookies help us understand usage; you can control non-essential cookies in your browser.',
    ]},
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ padding: '72px 40px 24px' }}>
        <div style={{ maxWidth: 900, marginInline: 'auto' }}>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8a8580' }}>Legal</div>
          <h1 style={{ margin: '12px 0 0', fontSize: 'clamp(40px, 5.5vw, 72px)', lineHeight: 0.98, letterSpacing: '-0.035em', fontWeight: 400 }}>
            Privacy <em style={{ fontFamily: "'Instrument Serif',serif", fontStyle: 'italic', fontWeight: 400 }}>policy</em>
          </h1>
          <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.55, maxWidth: '56ch', color: '#3a3a36' }}>
            How modaBoard collects, uses, and protects your data — in plain language. Creators paste normal retailer links; we handle attribution and never sell your personal information.
          </p>
          <div style={{ marginTop: 18, fontSize: 12, letterSpacing: '0.06em', color: '#8a8580' }}>Last updated {updated}</div>
        </div>
      </section>

      {/* Body */}
      <section style={{ padding: '24px 40px 8px' }}>
        <div style={{ maxWidth: 900, marginInline: 'auto', display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, alignItems: 'start' }} className="dc-privacy-grid">
          {/* Contents rail */}
          <nav style={{ position: 'sticky', top: 88, display: 'flex', flexDirection: 'column', gap: 8 }} className="dc-privacy-toc">
            <div style={{ fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#8a8580', marginBottom: 4 }}>Contents</div>
            {sections.map(s => (
              <a key={s.id} onClick={() => { const el = document.getElementById('pv-' + s.id); el && window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); }}
                 style={{ fontSize: 12.5, color: '#5a5a54', cursor: 'pointer', lineHeight: 1.4 }}>{s.h}</a>
            ))}
          </nav>

          {/* Sections */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 40, maxWidth: '64ch' }}>
            {sections.map(s => (
              <div key={s.id} id={'pv-' + s.id}>
                <h2 style={{ margin: 0, fontSize: 24, fontWeight: 400, letterSpacing: '-0.02em' }}>{s.h}</h2>
                <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {s.b.map((line, i) => (
                    <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14.5, lineHeight: 1.6, color: '#3a3a36' }}>
                      <span style={{ flexShrink: 0, width: 5, height: 5, borderRadius: '50%', background: '#1a1a18', marginTop: 9 }}/>
                      <span>{line}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}

            {/* Contact block */}
            <div style={{ marginTop: 8, padding: 24, background: '#F2EFE7', borderRadius: 14 }}>
              <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#5a5550', marginBottom: 8 }}>Questions about your data?</div>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: '#3a3a36' }}>
                Email <a href="mailto:hi@modaboard.com" style={{ color: '#1a1a18', fontFamily: 'ui-monospace, monospace' }}>hi@modaboard.com</a> or write to modaBoard AB, Åsögatan 144, 118 24 Stockholm, Sweden. You can also reach us via the{' '}
                <a onClick={() => go({ name: 'contact' })} style={{ color: '#1a1a18', cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 2 }}>contact page</a>.
              </p>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 820px) {
          .dc-privacy-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .dc-privacy-toc { position: static !important; }
        }
      `}</style>

      <Footer/>
    </div>
  );
}

Object.assign(window, { PrivacyScreen });