// ============================================================
//  CONTACT
// ============================================================

const Contact = () => {
  const { t } = useApp();
  return (
    <Section className="py-10 md:py-12 max-w-3xl mx-auto">
      <div className="text-center mb-8">
        <div className="flex items-center justify-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">Bureau de l'AJC</div>
          <div className="liturgy-underline w-12"></div>
        </div>
        <h1 className="font-display text-4xl font-semibold text-ajc-blueDk">{t.contact.title}</h1>
        <p className="mt-2 text-ajc-mute">{t.contact.lead}</p>
      </div>

      <div className="grid md:grid-cols-3 gap-4 mb-6">
        <ContactCard icon="mapPin" title="Adresse" lines={["IPSCA Saint Camille", "Ouagadougou", "Burkina Faso"]}/>
        <ContactCard icon="mail" title="E-mail" lines={["contact@ajc-saintcamille.org", "bureau@ajc-saintcamille.org"]}/>
        <ContactCard icon="phone" title="Téléphone" lines={["+226 25 36 XX XX", "Lun. — Ven. 8h-17h"]}/>
      </div>

      <div className="bg-white rounded-2xl border border-ajc-blue/10 p-6 shadow-card">
        <FormGrid>
          <FormInput label={t.contact.name} value="" onChange={() => {}}/>
          <FormInput label={t.contact.email} type="email" value="" onChange={() => {}}/>
        </FormGrid>
        <FormTextarea label={t.contact.message} rows={5} value="" onChange={() => {}}/>
        <div className="mt-4 flex justify-end">
          <Btn variant="primary" icon="mail" onClick={() => alert("Message envoyé.")}>{t.contact.send}</Btn>
        </div>
      </div>
    </Section>
  );
};

const ContactCard = ({ icon, title, lines }) => (
  <div className="bg-white rounded-2xl border border-ajc-blue/10 p-5 text-center">
    <div className="w-10 h-10 rounded-full bg-ajc-blue/10 text-ajc-blue mx-auto flex items-center justify-center mb-2">
      <Icon name={icon} size={18}/>
    </div>
    <div className="font-semibold text-ajc-blueDk">{title}</div>
    <div className="text-xs text-ajc-mute mt-1 space-y-0.5">
      {lines.map((l, i) => <div key={i}>{l}</div>)}
    </div>
  </div>
);

window.Contact = Contact;