// privacy.jsx — Privacy manifesto. Big, bold, no-nonsense.

function Privacy({ motion = true }) {
  return (
    <section id="privacy" className="section" style={{
      position: 'relative',
      background: 'linear-gradient(180deg, transparent 0%, #1B2823 18%, #1B2823 82%, transparent 100%)',
      color: '#F4F8F4',
    }}>
      {/* Subtle stars / spores in the dark */}
      <SporesBackground motion={motion} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 16,
          marginBottom: 'clamp(28px, 4vh, 48px)',
        }}>
          <span className="eyebrow" style={{ color: '#B8D4C2' }}>§ 05 · Privacy manifesto</span>
          <span style={{ flex: 1, height: 1, background: 'rgba(244,248,244,0.15)' }} />
          <span className="lab" style={{ color: 'rgba(244,248,244,0.55)' }}>opt-in only · on-device by default</span>
        </div>

        <h2 className="display-2 text-balance" style={{
          margin: 0, color: '#F4F8F4',
          maxWidth: 1080,
        }}>
          Your face is{' '}
          <span className="serif-italic" style={{ color: '#B8D4C2' }}>not training data.</span>
          <br />
          Your journal is{' '}
          <span className="serif-italic" style={{ color: '#F0DCD0' }}>not behavioural fuel.</span>
        </h2>

        <p className="body-l text-pretty" style={{
          marginTop: 40,
          maxWidth: 720, color: 'rgba(244,248,244,0.78)',
        }}>
          Privacy is a feature here, not a footer link. Photos stay on your device
          with complete file protection. Sync is opt-in and goes to your own iCloud
          private database. We don't run AI on your images. We don't ship analytics
          that touch image bytes or user logs. There is no third-party backend.
        </p>

        {/* commitments grid */}
        <div className="privacy-grid" style={{
          marginTop: 'clamp(48px, 6vh, 72px)',
          display: 'grid',
          gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
          gap: 1,
          background: 'rgba(244,248,244,0.12)',
          borderRadius: 24,
          overflow: 'hidden',
          border: '0.5px solid rgba(244,248,244,0.15)',
        }}>
          {[
            { title: 'Photos',         body: 'Stored on device with complete file protection. Optional iCloud private DB sync.',           glyph: <GlyphLock /> },
            { title: 'AI photo analysis', body: 'None. Ever. Photos are a memory aid with consistent-shot scaffolding — not a diagnostic.', glyph: <GlyphNoEye /> },
            { title: 'Analytics',      body: 'No third-party analytics that touch image bytes or user logs. Anonymous events only, if at all.', glyph: <GlyphChart /> },
            { title: 'Independence',   body: 'No brand deals. No affiliate links. No sponsored ingredients. Subscription revenue only.',     glyph: <GlyphIndep /> },
          ].map((c, i) => (
            <div key={c.title} style={{
              background: '#15211C',
              padding: 28,
              minHeight: 220,
              display: 'flex', flexDirection: 'column',
              transition: 'background .4s ease',
              animation: motion ? `fade-up .6s cubic-bezier(.16,.84,.32,1) ${i*0.08}s both` : 'none',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = '#1A2A23'}
            onMouseLeave={(e) => e.currentTarget.style.background = '#15211C'}>
              <div style={{ marginBottom: 18, color: '#B8D4C2' }}>{c.glyph}</div>
              <h3 style={{
                margin: 0, fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: 28, lineHeight: 1.05, color: '#F4F8F4', letterSpacing: '-0.018em',
              }}>{c.title}</h3>
              <p style={{
                marginTop: 12,
                fontSize: 14, lineHeight: 1.5,
                color: 'rgba(244,248,244,0.7)',
              }}>{c.body}</p>
            </div>
          ))}
        </div>

        {/* Pull quote */}
        <div style={{
          marginTop: 'clamp(60px, 8vh, 96px)',
          maxWidth: 920,
        }}>
          <div className="lab" style={{ color: '#B8D4C2' }}>House rule</div>
          <p style={{
            margin: '10px 0 0',
            fontFamily: 'var(--font-display)',
            fontStyle: 'italic',
            fontSize: 'clamp(28px, 3.5vw, 44px)',
            lineHeight: 1.2,
            letterSpacing: '-0.01em',
            color: '#F4F8F4',
          }}>
            "No streaks. No shame. No FOMO. No 'don't break the chain.'
            <span style={{ color: '#B8D4C2' }}> This audience has been burned by wellness manipulation — Nurtli is the opposite of that.</span>"
          </p>
          <div style={{
            marginTop: 18, fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'rgba(244,248,244,0.55)',
          }}>— from the founding principles</div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1080px) {
          .privacy-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 640px) {
          .privacy-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function GlyphLock() {
  return (
    <svg width="38" height="38" viewBox="0 0 40 40" fill="none">
      <rect x="8" y="18" width="24" height="18" rx="3" stroke="currentColor" strokeWidth="1.4" />
      <path d="M13 18v-4a7 7 0 0114 0v4" stroke="currentColor" strokeWidth="1.4" />
      <circle cx="20" cy="26" r="2" fill="currentColor" />
      <path d="M20 28v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}
function GlyphNoEye() {
  return (
    <svg width="38" height="38" viewBox="0 0 40 40" fill="none">
      <path d="M4 20s5-10 16-10 16 10 16 10-5 10-16 10S4 20 4 20z" stroke="currentColor" strokeWidth="1.4" />
      <circle cx="20" cy="20" r="4" stroke="currentColor" strokeWidth="1.4" />
      <line x1="6" y1="6" x2="34" y2="34" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}
function GlyphChart() {
  return (
    <svg width="38" height="38" viewBox="0 0 40 40" fill="none">
      <rect x="6" y="6" width="28" height="28" rx="3" stroke="currentColor" strokeWidth="1.4" />
      <path d="M11 26l5-6 4 3 9-12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
      <line x1="6" y1="6" x2="34" y2="34" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}
function GlyphIndep() {
  return (
    <svg width="38" height="38" viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="14" stroke="currentColor" strokeWidth="1.4" />
      <path d="M20 8v24M8 20h24" stroke="currentColor" strokeWidth="1.4" />
      <circle cx="20" cy="20" r="4" fill="currentColor" />
    </svg>
  );
}

function SporesBackground({ motion }) {
  const spores = Array.from({ length: 40 }, (_, i) => ({
    x: (i * 173 + 41) % 100,
    y: (i * 89 + 13) % 100,
    s: 1 + (i % 4) * 0.6,
    d: 4 + (i % 5),
    del: (i * 0.7) % 6,
  }));
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      {spores.map((s, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${s.x}%`, top: `${s.y}%`,
          width: s.s, height: s.s, borderRadius: '50%',
          background: i % 5 === 0 ? '#E8B8C5' : (i % 7 === 0 ? '#E8C896' : '#B8D4C2'),
          opacity: 0.45,
          animation: motion ? `shimmer ${s.d}s ease-in-out ${s.del}s infinite` : 'none',
        }} />
      ))}
    </div>
  );
}

Object.assign(window, { Privacy });