// 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" /> {t('privacy.eyebrow')}</div>
          <h2 style={{ marginTop: 18 }}>
            {t('privacy.h2_line1')}<br/>
            <span className="serif" style={{ fontStyle:'italic' }}>{t('privacy.h2_line2')}</span>
          </h2>
          <p className="lede" style={{ marginTop: 22 }}>
            {t('privacy.lede')}
          </p>
        </div>

        <div style={{ marginTop: 60, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 40 }}>
          {/* Diagram: Other apps */}
          <ArchCard
            title={t('privacy.arch_other_title')}
            sub={t('privacy.arch_other_sub')}
            label={t('privacy.arch_other_label')}
            bad
            nodes={[
              { label: t('privacy.arch_other_node1'), sub: t('privacy.arch_other_node1_sub'), color:'#9b94a8' },
              { label: t('privacy.arch_other_node2'), sub: t('privacy.arch_other_node2_sub'), color:'#E5484D', warn: true },
              { label: t('privacy.arch_other_node3'), sub: t('privacy.arch_other_node3_sub'), color:'#9b94a8' },
            ]}
          />
          {/* Diagram: MailTwin */}
          <ArchCard
            title={t('privacy.arch_us_title')}
            sub={t('privacy.arch_us_sub')}
            label={t('privacy.arch_us_label')}
            nodes={[
              { label: t('privacy.arch_us_node1'), sub: t('privacy.arch_us_node1_sub'), color:'var(--purple)' },
              { label: t('privacy.arch_us_node2'), sub: t('privacy.arch_us_node2_sub'), color:'var(--blue)' },
            ]}
          />
        </div>

        <div style={{ marginTop: 60, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 18 }}>
          {[
            { i: <Icons.Shield />,  t: t('privacy.card1_t'), d: t('privacy.card1_d') },
            { i: <Icons.Receipt />, t: t('privacy.card2_t'), d: t('privacy.card2_d') },
            { i: <Icons.Lock />,    t: t('privacy.card3_t'), d: t('privacy.card3_d') },
          ].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, label }) => (
  <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 }}>
        {label}
      </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;