// PRIVACY

function Privacy() {
  return (
    <section id="privacy" className="rs-section" style={{
      position: 'relative', padding: '120px 0',
      background: 'var(--bg-deep)', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5,
        backgroundImage: `linear-gradient(var(--hair-dk) 1px, transparent 1px)`,
        backgroundSize: '100% 60px',
        maskImage: 'linear-gradient(to bottom, transparent, black 30%, black 70%, transparent)'
      }} />

      <div className="rs-container" style={{ position: 'relative', maxWidth: 980, margin: '0 auto', padding: '0 32px', textAlign: 'center' }}>
        <Reveal style={{ display: 'flex', justifyContent: 'center' }}>
          <SectionMark num="07" label="Privacy by design" />
        </Reveal>
        <Reveal delay={100}>
          <h2 style={{
            fontFamily: 'var(--serif)', fontWeight: 400,
            fontSize: 'clamp(2.4rem, 5vw, 4.4rem)', lineHeight: 1,
            letterSpacing: '-0.03em', margin: '24px 0 24px', textWrap: 'balance'
          }}>
            Your email is <span className="italic" style={{ color: 'var(--accent)' }}>yours.</span>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{
            maxWidth: 580, margin: '0 auto 56px',
            fontSize: 17, lineHeight: 1.65, fontWeight: 300, color: 'var(--ink-mute)',
            textWrap: 'pretty'
          }}>
            Scrub is read-only by default. Encrypted in transit and at rest.
            We extract structure, not secrets.
          </p>
        </Reveal>

        <div className="rs-grid-3 rs-privacy-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          border: '1px solid var(--hair-dk)', borderRadius: 14,
          background: 'rgba(255,255,255,0.02)'
        }}>
          {[
            ['END-TO-END', 'Encrypted in transit + at rest'],
            ['READ-ONLY', 'Scrub never sends from your inbox'],
            ['REVOKABLE', 'Disconnect anytime · data wiped'],
          ].map(([t, s], i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="rs-privacy-cell" style={{
                padding: '28px 22px',
                borderRight: i < 2 ? '1px solid var(--hair-dk)' : 'none',
                textAlign: 'left', height: '100%'
              }}>
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em',
                  color: 'var(--accent)', marginBottom: 14
                }}>{t}</div>
                <div style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--ink)' }}>{s}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Privacy = Privacy;