/* Privacy & data control — 4 responsible-handling cards. */
function Privacy() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;
  const [gps, setGps] = React.useState(true);
  const cards = [
    { icon: 'KeyRound', title: 'Your data is yours', desc: 'You own your vehicle data. Export it or delete your account anytime, no questions asked.' },
    { icon: 'EyeOff', title: 'Share only what\u2019s needed', desc: 'A repair request shares the fault and your car \u2014 never your identity until you choose a shop.' },
    { icon: 'Lock', title: 'Encrypted end to end', desc: 'Diagnostic data is encrypted in transit and at rest. We never sell it to advertisers.' },
    { icon: 'BellOff', title: 'No spam, ever', desc: 'We email you about your car and your repairs. That\u2019s it. Unsubscribe in one tap.' },
  ];
  return (
    <section style={{ position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)',
      background: 'var(--surface-section)', borderTop: '1px solid var(--line-100)', borderBottom: '1px solid var(--line-100)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 52 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>Privacy &amp; data control</Badge>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-display-2)',
            letterSpacing: 'var(--ls-snug)', color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 'var(--lh-snug)' }}>
            Built to earn your trust.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 540, margin: '0 auto' }}>
            Your car tells us a lot. Here&rsquo;s our promise on how we handle it.
          </p>
        </Reveal>

        {/* GPS / location control — privacy made tangible: flip it off, keep using ALEROQ. */}
        <style dangerouslySetInnerHTML={{ __html: `
          @keyframes gpsPing { 0%{transform:scale(0.55);opacity:0.55;} 70%{opacity:0;} 100%{transform:scale(1.35);opacity:0;} }
          .gps-ping{ animation: gpsPing 2.6s var(--ease-out) infinite; }
          @media (prefers-reduced-motion: reduce){ .gps-ping{ animation:none; opacity:0; } }
          @media (max-width: 760px){ .gps-panel{ grid-template-columns:1fr !important; } .gps-ctrl{ justify-self:center; } .gps-copy{ align-items:center; text-align:center; } }
        ` }} />
        <Reveal dir="up" style={{ marginBottom: 28 }}>
          <div className="gps-panel" style={{ position: 'relative', overflow: 'hidden', display: 'grid',
            gridTemplateColumns: '1fr auto', gap: 'clamp(24px, 4vw, 56px)', alignItems: 'center',
            background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)',
            padding: 'clamp(26px, 3.4vw, 40px)' }}>
            {/* reactive glow — warms when location is on, fades when off */}
            <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', transition: 'opacity .5s var(--ease-out)',
              opacity: gps ? 1 : 0, background: 'radial-gradient(120% 140% at 88% 50%, rgba(22,214,128,0.10), transparent 60%)' }} />

            <div className="gps-copy" style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 14,
                fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--positive-bright)' }}>
                <Ic name="Navigation" size={14} color="var(--positive-bright)" /> You&rsquo;re in control
              </span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(24px, 3vw, 32px)',
                letterSpacing: 'var(--ls-snug)', color: 'var(--text-strong)', margin: '0 0 12px', lineHeight: 'var(--lh-snug)' }}>
                Turn GPS off whenever you want.
              </h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-body)', margin: 0, maxWidth: 480, textWrap: 'pretty' }}>
                ALEROQ uses your location to surface shops near you and to send help in an emergency. Don&rsquo;t want to share it? Switch it off &mdash; the app keeps working, you just enter your area by hand. No background tracking, no penalty for saying no.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 18, padding: '8px 14px',
                borderRadius: 'var(--radius-pill)', background: 'var(--inset)', border: '1px solid var(--line-100)' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', flex: '0 0 auto', transition: 'background .3s, box-shadow .3s',
                  background: gps ? 'var(--positive)' : 'var(--silver-400)', boxShadow: gps ? '0 0 10px var(--positive)' : 'none' }} />
                <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
                  {gps ? 'Sharing approximate location \u2014 only while you\u2019re using the app.' : 'Location off \u2014 nothing about where you are leaves your phone.'}
                </span>
              </div>
            </div>

            <div className="gps-ctrl" style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, minWidth: 150 }}>
              {/* radar dial */}
              <div style={{ position: 'relative', width: 128, height: 128, display: 'grid', placeItems: 'center' }}>
                {[0, 1, 2].map((i) => (
                  <span key={i} style={{ position: 'absolute', width: 44 + i * 40, height: 44 + i * 40, borderRadius: '50%',
                    border: `1px solid ${gps ? 'rgba(22,214,128,0.34)' : 'var(--line-200)'}`, transition: 'border-color .35s var(--ease-out)' }} />
                ))}
                {gps && <span className="gps-ping" style={{ position: 'absolute', width: 124, height: 124, borderRadius: '50%', border: '1px solid var(--positive)' }} />}
                <span style={{ position: 'relative', width: 40, height: 40, borderRadius: '50%', display: 'grid', placeItems: 'center',
                  transition: 'background .35s, border-color .35s', background: gps ? 'var(--green-tint)' : 'var(--inset)',
                  border: `1px solid ${gps ? 'rgba(22,214,128,0.5)' : 'var(--border)'}` }}>
                  <Ic name={gps ? 'MapPin' : 'MapPinOff'} size={19} color={gps ? 'var(--positive-bright)' : 'var(--text-muted)'} />
                </span>
              </div>
              {/* switch */}
              <button onClick={() => setGps((v) => !v)} role="switch" aria-checked={gps} aria-label="Toggle GPS location sharing"
                style={{ position: 'relative', width: 62, height: 34, padding: 0, cursor: 'pointer', borderRadius: 999,
                  border: '1px solid', borderColor: gps ? 'rgba(22,214,128,0.55)' : 'var(--border)',
                  background: gps ? 'rgba(22,214,128,0.22)' : 'var(--inset)',
                  transition: 'background .3s var(--ease-out), border-color .3s var(--ease-out)' }}>
                <span style={{ position: 'absolute', top: 3, left: gps ? 31 : 3, width: 26, height: 26, borderRadius: '50%',
                  background: gps ? 'var(--positive-bright)' : 'var(--silver-400)',
                  boxShadow: gps ? '0 2px 12px rgba(22,214,128,0.55)' : '0 2px 6px rgba(0,0,0,0.45)',
                  transition: 'left .3s var(--ease-out), background .3s var(--ease-out)' }} />
              </button>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700, letterSpacing: '0.06em',
                  color: gps ? 'var(--positive-bright)' : 'var(--text-muted)', transition: 'color .3s' }}>{gps ? 'GPS ON' : 'GPS OFF'}</div>
                <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 3, maxWidth: 150 }}>{gps ? 'Finding shops near you' : 'You pick the area'}</div>
              </div>
            </div>
          </div>
        </Reveal>

        <div className="privacy-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {cards.map((c, i) => (
            <Reveal key={c.title} delay={(i % 4) * 90} dir="up" style={{ height: '100%' }}>
              <div style={{ height: '100%', boxSizing: 'border-box', background: 'var(--surface)', border: '1px solid var(--border)',
                borderRadius: 'var(--radius-md)', padding: 'clamp(24px, 2.6vw, 30px)' }}>
                <div style={{ width: 46, height: 46, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  borderRadius: 'var(--radius-md)', background: 'var(--green-tint)', border: '1px solid rgba(22,214,128,0.35)', color: 'var(--positive-bright)', marginBottom: 18 }}>
                  <Ic name={c.icon} size={20} color="var(--positive-bright)" />
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-strong)', margin: '0 0 8px', letterSpacing: '-0.01em' }}>{c.title}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', margin: 0, textWrap: 'pretty' }}>{c.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Privacy = Privacy;