// ============================================================
//  PRIVACY — Paramètres de confidentialité
// ============================================================

const Privacy = () => {
  const { t } = useApp();
  const [s, setS] = React.useState({
    phone: false, email: true, whatsapp: false, birth: false, mentor: true
  });
  return (
    <Section className="py-10 md:py-12 max-w-2xl mx-auto">
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-2">
          <div className="liturgy-underline w-12"></div>
          <div className="text-[11px] uppercase tracking-[0.22em] text-ajc-red font-semibold">Données personnelles</div>
        </div>
        <h1 className="font-display text-4xl font-semibold text-ajc-blueDk">{t.privacy.title}</h1>
        <p className="mt-2 text-ajc-mute">{t.privacy.lead}</p>
      </div>

      <div className="bg-white rounded-2xl border border-ajc-blue/10 p-6 shadow-card">
        <h3 className="font-display text-lg font-semibold text-ajc-blueDk mb-4">{t.privacy.visibility}</h3>
        <div className="space-y-3">
          <ToggleRow label={t.privacy.phone} checked={s.phone} onChange={v => setS({...s, phone: v})}/>
          <ToggleRow label={t.privacy.email} checked={s.email} onChange={v => setS({...s, email: v})}/>
          <ToggleRow label={t.privacy.whatsapp} checked={s.whatsapp} onChange={v => setS({...s, whatsapp: v})}/>
          <ToggleRow label={t.privacy.birth} checked={s.birth} onChange={v => setS({...s, birth: v})}/>
          <div className="border-t border-ajc-blue/10 pt-3"></div>
          <ToggleRow label={t.privacy.contactable} checked={s.mentor} onChange={v => setS({...s, mentor: v})}/>
        </div>
        <div className="mt-6 flex items-center justify-between flex-wrap gap-3 pt-4 border-t border-ajc-blue/10">
          <button className="text-sm text-ajc-red hover:underline font-medium">{t.privacy.delete}</button>
          <Btn variant="primary" icon="check" onClick={() => alert("Paramètres enregistrés.")}>{t.privacy.save}</Btn>
        </div>
      </div>

      <div className="mt-6 bg-ajc-cream rounded-2xl border border-ajc-gold/30 p-5">
        <div className="flex items-center gap-2 mb-2">
          <Icon name="church" size={16} className="text-ajc-blueDk"/>
          <div className="text-[11px] uppercase tracking-wider font-semibold text-ajc-blueDk">Notre engagement</div>
        </div>
        <p className="text-sm text-ajc-ink/80 leading-relaxed">
          L'AJC traite vos données avec le respect dû à chaque ancien. Aucune information ne sera jamais cédée, vendue ou diffusée hors du réseau. Le bureau de l'association reste votre interlocuteur pour toute demande.
        </p>
      </div>
    </Section>
  );
};

window.Privacy = Privacy;