// Privacy section — the moat. Architecture diagram showing no backend in path.
const PrivacySection = () => {
  return (
    <section id="privacy" style={{ background:'var(--bg)' }}>
      <div className="container">
        <div style={{ textAlign:'center', maxWidth: 760, margin:'0 auto' }}>
          <div className="eyebrow" style={{ justifyContent:'center', display:'inline-flex' }}><span className="dot" /> Privacy by architecture</div>
          <h2 style={{ marginTop: 18 }}>
            We can't read your mail.<br/>
            <span className="serif" style={{ fontStyle:'italic' }}>By design — not by promise.</span>
          </h2>
          <p className="lede" style={{ marginTop: 22 }}>
            Almost every "AI for Mail" SaaS is a proxy. Your email content goes through their server first.
            MailTwin is different: there's no MailTwin server in the AI path.
          </p>
        </div>

        <div style={{ marginTop: 60, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 40 }}>
          {/* Diagram: Other apps */}
          <ArchCard
            title="Most AI mail apps"
            sub="Your content passes through their backend. They could log everything."
            bad
            nodes={[
              { label: 'Your Mac', sub: 'mail.app', color:'#9b94a8' },
              { label: 'Their backend', sub: 'sees subject + body', color:'#E5484D', warn: true },
              { label: 'AI provider', sub: 'OpenAI / etc.', color:'#9b94a8' },
            ]}
          />
          {/* Diagram: MailTwin */}
          <ArchCard
            title="MailTwin"
            sub="Prompts go straight from your Mac to the provider. We never see them."
            nodes={[
              { label: 'Your Mac', sub: 'MailTwin', color:'var(--purple)' },
              { label: 'AI provider', sub: 'with your key', color:'var(--blue)' },
            ]}
          />
        </div>

        <div style={{ marginTop: 60, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 18 }}>
          {[
            { i: <Icons.Shield />, t: 'Two TCC grants, not three', d: 'CGEvent-based paste pipeline bypasses System Events. Smaller permission surface than most Mail extensions.' },
            { i: <Icons.Receipt />, t: 'Cost caps + redacted log', d: 'Daily and monthly soft caps. Per-request audit log with content redacted by default.' },
            { i: <Icons.Lock />, t: 'Apple-grade signing', d: 'Signed, notarized, stapled DMG. Sparkle 2 with EdDSA-signed updates. Single-instance enforced.' },
          ].map(c => (
            <div key={c.t} className="card" style={{ padding: 26 }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background:'rgba(155,111,224,0.12)', color:'var(--purple)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom: 16 }}>{c.i}</div>
              <div style={{ fontWeight: 600, fontSize: 16 }}>{c.t}</div>
              <div style={{ color:'var(--muted)', fontSize: 14, marginTop: 6, lineHeight: 1.55 }}>{c.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ArchCard = ({ title, sub, nodes, bad }) => (
  <div className="card" style={{ padding: 30, position:'relative', borderColor: bad ? 'rgba(229,72,77,0.2)' : undefined }}>
    <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 6 }}>
      <span style={{ fontSize: 11, padding:'3px 9px', borderRadius: 999, background: bad ? 'rgba(229,72,77,0.12)' : 'rgba(40,200,64,0.12)', color: bad ? '#E5484D' : '#1f8c3a', fontWeight: 600 }}>
        {bad ? 'They see your mail' : 'Zero-knowledge'}
      </span>
    </div>
    <div style={{ fontWeight: 600, fontSize: 20, marginTop: 6 }}>{title}</div>
    <div style={{ color:'var(--muted)', fontSize: 14, marginTop: 6 }}>{sub}</div>

    <div style={{ marginTop: 32, display:'flex', alignItems:'center', justifyContent:'space-between', gap: 8 }}>
      {nodes.map((n, i) => (
        <React.Fragment key={i}>
          <div style={{ flex: 1, textAlign:'center' }}>
            <div style={{
              margin:'0 auto', width: 64, height: 64, borderRadius: 14,
              background: n.warn ? 'rgba(229,72,77,0.1)' : 'rgba(155,111,224,0.08)',
              border: `1.5px ${n.warn ? 'solid' : 'dashed'} ${n.warn ? '#E5484D' : 'var(--line)'}`,
              display:'flex', alignItems:'center', justifyContent:'center', color: n.color, fontWeight: 600,
              position:'relative',
            }}>
              {n.warn ? <span style={{ fontSize: 24 }}>⚠</span> : (
                i === 0 ? <Icons.Mail size={26} /> : i === nodes.length - 1 ? <Icons.Sparkle size={26} /> : <Icons.Globe size={26} />
              )}
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, marginTop: 10 }}>{n.label}</div>
            <div style={{ fontSize: 11, color:'var(--muted)', marginTop: 2 }}>{n.sub}</div>
          </div>
          {i < nodes.length - 1 && (
            <div style={{ flex: '0 0 36px', display:'flex', alignItems:'center', justifyContent:'center', marginTop: -36, color: bad ? '#E5484D' : 'var(--purple)' }}>
              <Icons.ArrowRight size={22} stroke={2} />
            </div>
          )}
        </React.Fragment>
      ))}
    </div>
  </div>
);

window.PrivacySection = PrivacySection;