/* global React, Icon, Button, Kicker, Field, Input, Textarea, Select, Checkbox, MapMock, ProtectedEmail, Captcha */
// ContactPage — /contact

function ContactPage({ onNav }) {
  const [form, setForm] = React.useState({
    fullname: "", phone: "", email: "", subject: "", message: "", consent: false,
  });
  const [captchaOk, setCaptchaOk] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!form.consent || !captchaOk) return;
    // → POST to /api/contact, which calls Resend's /emails endpoint server-side.
    setSent(true);
  };

  if (sent) {
    return (
      <section className="py-24 md:py-36 bg-foam">
        <div className="container-x max-w-[640px] text-center">
          <div className="w-16 h-16 rounded-full bg-success text-white grid place-items-center mx-auto mb-6">
            <Icon name="check" size={28}/>
          </div>
          <h1 className="h-display">Message envoyé ✓</h1>
          <p className="lead mt-4 text-mute">Merci&nbsp;! Nous vous répondrons rapidement, généralement sous 48&nbsp;h ouvrées.</p>
          <div className="mt-8 flex gap-3 justify-center">
            <Button variant="primary" onClick={() => onNav("home")}>Retour à l'accueil</Button>
            <Button variant="tertiary" onClick={() => { setSent(false); setForm({ fullname: "", phone: "", email: "", subject: "", message: "", consent: false }); }}>Envoyer un autre message</Button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <>
      {/* HERO */}
      <section className="bg-foam pt-16 md:pt-24 pb-10">
        <div className="container-x max-w-[820px]">
          <Kicker>Nous joindre</Kicker>
          <h1 className="h-display mt-3">Contact</h1>
          <p className="lead mt-5">Une question, une demande particulière, un projet d'évènement&nbsp;? Écrivez-nous, nous vous répondrons rapidement.</p>
        </div>
      </section>

      {/* GRID */}
      <section className="py-16 md:py-24 bg-white">
        <div className="container-x grid lg:grid-cols-12 gap-10 md:gap-14">
          {/* LEFT — Coordinates */}
          <aside className="lg:col-span-5 space-y-8">
            <h2 className="h-block">Nous joindre</h2>
            <ul className="space-y-6">
              <li className="flex items-start gap-4">
                <span className="w-11 h-11 rounded-card bg-foam text-primary grid place-items-center shrink-0"><Icon name="mail" size={18}/></span>
                <div>
                  <div className="eyebrow mb-0.5">Email</div>
                  <ProtectedEmail className="text-primary text-[17px] font-medium no-underline hover:text-primary-dark" />
                  <div className="text-mute text-[13px] mt-0.5">À l'attention de Bertrand Iung</div>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <span className="w-11 h-11 rounded-card bg-foam text-primary grid place-items-center shrink-0"><Icon name="phone" size={18}/></span>
                <div>
                  <div className="eyebrow mb-0.5">Téléphone</div>
                  <a href="tel:0556095832" className="text-primary text-[17px] font-medium no-underline hover:text-primary-dark">05 56 09 58 32</a>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <span className="w-11 h-11 rounded-card bg-foam text-primary grid place-items-center shrink-0"><Icon name="map-pin" size={18}/></span>
                <div>
                  <div className="eyebrow mb-0.5">Adresse</div>
                  <div className="text-ink">Ferme Eau Médoc<br/>1 La Petite Canau<br/>33590 Saint-Vivien-de-Médoc</div>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <span className="w-11 h-11 rounded-card bg-foam text-primary grid place-items-center shrink-0"><Icon name="clock" size={18}/></span>
                <div>
                  <div className="eyebrow mb-0.5">Horaires boutique</div>
                  <div className="text-ink">Vendredi&nbsp;: 9h-12h<br/>Samedi&nbsp;: 9h-12h et 15h-18h</div>
                </div>
              </li>
            </ul>
          </aside>

          {/* RIGHT — Form */}
          <div className="lg:col-span-7">
            <form onSubmit={submit} className="panel p-6 md:p-9 space-y-5">
              <h2 className="h-block">Écrivez-nous</h2>
              <div className="grid md:grid-cols-2 gap-4">
                <Field label="Nom et prénom" required>
                  <Input value={form.fullname} onChange={(e) => setForm({ ...form, fullname: e.target.value })} required/>
                </Field>
                <Field label="Téléphone" required>
                  <Input type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} required/>
                </Field>
                <Field label="Email" required full>
                  <Input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required/>
                </Field>
                <Field label="Sujet" required full>
                  <Select value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} required>
                    <option value="">Sélectionnez un sujet…</option>
                    <option>Question générale</option>
                    <option>Commande</option>
                    <option>Évènementiel</option>
                    <option>Visite de groupe</option>
                    <option>Autre</option>
                  </Select>
                  <p className="text-[13px] text-mute mt-1.5 leading-snug">
                    Besoin d'un devis professionnel&nbsp;? <a onClick={(e) => { e.preventDefault(); onNav("devis-pro"); }} href="#" className="text-primary hover:text-primary-dark cursor-pointer">Remplissez notre formulaire dédié →</a>
                  </p>
                </Field>
                <Field label="Message" required full>
                  <Textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} rows={6} required/>
                </Field>
              </div>
              <Checkbox checked={form.consent} onChange={(e) => setForm({ ...form, consent: e.target.checked })}>
                J'accepte que mes données soient utilisées pour me recontacter. <span className="text-danger">*</span>
              </Checkbox>
              <Captcha onValidChange={setCaptchaOk} />
              <div className="pt-2 flex items-center justify-between gap-3 flex-wrap">
                <Button type="submit" variant="primary" size="lg" iconRight="send" disabled={!form.consent || !captchaOk}>Envoyer</Button>
                {!captchaOk && form.consent && <span className="text-mute text-[13px] italic">Validez la question anti-robot pour envoyer.</span>}
              </div>
            </form>
          </div>
        </div>
      </section>

      {/* MAP */}
      <section className="py-16 md:py-20 bg-foam">
        <div className="container-x">
          <h3 className="font-serif text-primary text-[24px] md:text-[28px] mb-6">Nous trouver</h3>
          <MapMock height={420} markers={[{
            x: 22,
            y: 28,
            label: "Ferme Eau Médoc",
            name: "Ferme Eau Médoc",
            kind: "Boutique de l'exploitation",
            address: "1 La Petite Canau, 33590 Saint-Vivien-de-Médoc",
            hours: "Ven. 9h-12h · Sam. 9h-12h et 15h-18h",
            phone: "05 56 09 58 32",
            photo: "assets/photos/boutique-facade.webp",
          }]}/>
        </div>
      </section>
    </>
  );
}

window.ContactPage = ContactPage;