/* global React, Icon, Button, Kicker, Field, Input, Textarea, Select, Checkbox, ProtectedEmail, Captcha */
// DevisPage — /devis-pro

function DevisPage({ onNav }) {
  const [form, setForm] = React.useState({
    etablissement_type: "", etablissement_nom: "", siret: "", contact_nom: "", contact_role: "",
    phone: "", email: "", address: "",
    services: { ecaillage: false, livraison: false, fournitures: false },
    volume: "", recurrence: "", date_besoin: "", 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; 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">Demande envoyée ✓</h1>
          <p className="lead mt-4 text-mute">Nous vous recontactons sous 48&nbsp;h ouvrées pour préparer votre devis.</p>
          <div className="mt-8"><Button variant="primary" onClick={() => onNav("home")}>Retour à l'accueil</Button></div>
        </div>
      </section>
    );
  }

  // Partner tiles — mix of logos (.png in /press) and photos (.webp in /partners)
  const PARTNERS = [
    { name: "La Déguste",            kind: "logo",  src: "assets/press/la-deguste.png" },
    { name: "Les Fermiers Toqués",   kind: "logo",  src: "assets/press/les-fermiers-toques.png" },
    { name: "Intermarché",           kind: "logo",  src: "assets/press/intermarche.png" },
    { name: "Les Bateaux Bordelais", kind: "logo",  src: "assets/press/les-bateaux-bordelais.png" },
    { name: "La Boîte à Sardines",   kind: "photo", src: "assets/partners/la-boite-a-sardines.webp" },
    { name: "Cabane n°1, Lacanau",  kind: "photo", src: "assets/partners/cabane-n1-lacanau.webp" },
  ];

  return (
    <>
      {/* HERO */}
      <section className="bg-foam pt-16 md:pt-24 pb-12 md:pb-16">
        <div className="container-x max-w-[860px]">
          <Kicker>Pour les pros</Kicker>
          <h1 className="h-display mt-3">Vous êtes <span className="italic text-primary-light">professionnel</span> ?</h1>
          <p className="lead mt-5">
            Restaurant, revendeur, traiteur, organisateur d'évènements&nbsp;: nous travaillons déjà avec une vingtaine d'établissements partenaires en Médoc et à Bordeaux. Demandez un devis adapté à votre activité.
          </p>
        </div>
      </section>

      {/* 3 ARGUMENTS */}
      <section className="py-16 md:py-20 bg-white">
        <div className="container-x grid md:grid-cols-3 gap-8 md:gap-10">
          {[
            { icon: "award",     title: "Qualité maîtrisée",  body: "Affinage en marais médocain sur 6 semaines à 3 mois, purification UV de 36h avant chaque livraison." },
            { icon: "truck",     title: "Logistique adaptée", body: "Volumes ajustés à vos besoins, livraisons régulières possibles en Gironde." },
            { icon: "handshake", title: "Relation directe",   body: "Pas d'intermédiaire, contact direct avec l'exploitation, conseil sur les calibres et les saisons." },
          ].map((b) => (
            <div key={b.title} className="flex flex-col gap-3">
              <span className="w-14 h-14 rounded-card bg-foam text-primary grid place-items-center"><Icon name={b.icon} size={28}/></span>
              <h3 className="font-serif text-primary text-[22px]">{b.title}</h3>
              <p className="body">{b.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* PARTNERS BAND */}
      <section className="py-16 md:py-20 bg-foam">
        <div className="container-x">
          <div className="flex items-end justify-between gap-4 mb-8 flex-wrap">
            <div>
              <Kicker>Ils nous font confiance</Kicker>
              <h2 className="h-section mt-3">Nos partenaires actuels</h2>
            </div>
            <Button variant="tertiary" iconRight="arrow-right" onClick={() => onNav("nos-partenaires")}>Voir la liste complète</Button>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
            {PARTNERS.map((p) => (
              <div key={p.name} className="bg-white rounded-card shadow-soft overflow-hidden flex flex-col">
                <div className="h-28 md:h-32 grid place-items-center overflow-hidden bg-white">
                  {p.kind === "logo" ? (
                    <img src={p.src} alt={p.name} className="max-h-[70%] max-w-[78%] object-contain"/>
                  ) : (
                    <img src={p.src} alt={p.name} className="w-full h-full object-cover"/>
                  )}
                </div>
                <div className="px-3 py-2.5 text-center text-[13px] font-medium text-ink bg-foam/40 truncate">{p.name}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FORM */}
      <section className="py-16 md:py-24 bg-white">
        <div className="container-x grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-4 lg:sticky lg:top-28 self-start">
            <Kicker>Formulaire de devis</Kicker>
            <h2 className="h-section mt-3">Parlez-nous de votre projet</h2>
            <p className="body mt-4">Nous vous recontactons <strong>sous 48&nbsp;h ouvrées</strong> avec une proposition adaptée.</p>
            <div className="panel p-5 mt-6 bg-foam/70">
              <div className="eyebrow mb-3 flex items-center gap-2"><Icon name="info" size={14}/> Besoin urgent&nbsp;?</div>
              <p className="body-sm">Joignez directement Bertrand&nbsp;:</p>
              <ul className="mt-2 space-y-1.5">
                <li><a className="text-primary inline-flex items-center gap-2 no-underline hover:text-primary-dark" href="tel:0556095832"><Icon name="phone" size={14}/>05 56 09 58 32</a></li>
                <li><ProtectedEmail withIcon iconSize={14} className="text-primary inline-flex items-center gap-2 no-underline hover:text-primary-dark" /></li>
              </ul>
            </div>
          </div>

          <form onSubmit={submit} className="lg:col-span-8 panel p-6 md:p-9 space-y-6">
            <div>
              <h3 className="font-serif text-primary text-[22px] mb-3">Votre établissement</h3>
              <div className="grid md:grid-cols-2 gap-4">
                <Field label="Type d'établissement" required full>
                  <Select value={form.etablissement_type} onChange={(e) => setForm({ ...form, etablissement_type: e.target.value })} required>
                    <option value="">Sélectionnez…</option>
                    <option>Restaurant</option>
                    <option>Revendeur</option>
                    <option>Traiteur</option>
                    <option>Évènementiel</option>
                    <option>Autre</option>
                  </Select>
                </Field>
                <Field label="Nom de l'établissement" required>
                  <Input value={form.etablissement_nom} onChange={(e) => setForm({ ...form, etablissement_nom: e.target.value })} required/>
                </Field>
                <Field label="SIRET" hint="14 chiffres, facultatif">
                  <Input value={form.siret} onChange={(e) => setForm({ ...form, siret: e.target.value.replace(/\D/g, '').slice(0, 14) })} placeholder="000 000 000 00000" inputMode="numeric"/>
                </Field>
                <Field label="Adresse" full>
                  <Input value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })}/>
                </Field>
              </div>
            </div>

            <div className="pt-4">
              <h3 className="font-serif text-primary text-[22px] mb-3">Votre contact</h3>
              <div className="grid md:grid-cols-2 gap-4">
                <Field label="Nom et prénom" required>
                  <Input value={form.contact_nom} onChange={(e) => setForm({ ...form, contact_nom: e.target.value })} required/>
                </Field>
                <Field label="Fonction">
                  <Input value={form.contact_role} onChange={(e) => setForm({ ...form, contact_role: e.target.value })} placeholder="Ex. Chef, gérant, acheteur…"/>
                </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>
                  <Input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required/>
                </Field>
              </div>
            </div>

            <div className="pt-4">
              <h3 className="font-serif text-primary text-[22px] mb-3">Votre besoin</h3>
              <div className="space-y-5">
                {/* B2C — produits cuisinés exclus du devis */}
                <div className="rounded-card bg-foam p-4 flex items-start gap-3">
                  <span className="w-10 h-10 rounded-card bg-white text-primary shadow-soft grid place-items-center shrink-0"><Icon name="info" size={18}/></span>
                  <div className="flex-1">
                    <div className="font-semibold text-ink text-[15px] leading-snug">Produit proposé aux professionnels</div>
                    <p className="text-[14px] text-ink/80 leading-snug mt-1">
                      Pour les pros, nous proposons exclusivement nos <strong>huîtres Gigas Meduli</strong> (tous calibres). Nos coquillages purifiés et nos cuissons maison (bigorneaux, bulots, crabes, gambas…) sont réservés à la vente aux particuliers.
                    </p>
                  </div>
                </div>

                <Field label="Prestations souhaitées" full hint="Cochez ce dont vous avez besoin.">
                  <div className="grid sm:grid-cols-3 gap-2 mt-1">
                    {[
                      { k: "ecaillage",   l: "Écaillage",     hint: null },
                      { k: "livraison",   l: "Livraison",     hint: null },
                      { k: "fournitures", l: "Fournitures",   hint: "Assiettes, couteaux, citrons, serviettes" },
                    ].map((o) => (
                      <label key={o.k} className={"flex items-start gap-2 p-3 rounded-btn cursor-pointer transition-colors " + (form.services[o.k] ? "bg-foam shadow-soft" : "bg-white shadow-soft hover:bg-foam/60")}>
                        <input type="checkbox" checked={form.services[o.k]} onChange={(e) => setForm({ ...form, services: { ...form.services, [o.k]: e.target.checked } })} className="accent-primary w-4 h-4 mt-0.5"/>
                        <span className="text-[15px] text-ink leading-tight">
                          {o.l}
                          {o.hint && <span className="block text-[12px] text-mute mt-0.5 font-normal">{o.hint}</span>}
                        </span>
                      </label>
                    ))}
                  </div>
                </Field>

                <div className="grid md:grid-cols-2 gap-4">
                  <Field label="Volume estimé en huîtres" required hint="Ex. 5 kg/semaine, 200 huîtres, 30 douzaines…">
                    <Input value={form.volume} onChange={(e) => setForm({ ...form, volume: e.target.value })} required/>
                  </Field>
                  <Field label="Récurrence du besoin" required>
                    <Select value={form.recurrence} onChange={(e) => setForm({ ...form, recurrence: e.target.value })} required>
                      <option value="">Sélectionnez…</option>
                      <option>Ponctuel (une seule fois)</option>
                      <option>Évènement unique</option>
                      <option>Hebdomadaire</option>
                      <option>Bi-mensuelle (toutes les 2 semaines)</option>
                      <option>Mensuelle</option>
                      <option>Saisonnière (fin d'année, été…)</option>
                      <option>À définir ensemble</option>
                    </Select>
                  </Field>
                  <Field label="Date du besoin" hint="Si évènement ponctuel ou démarrage souhaité" full>
                    <Input type="date" value={form.date_besoin} onChange={(e) => setForm({ ...form, date_besoin: e.target.value })}/>
                  </Field>
                </div>
                <Field label="Message libre" full>
                  <Textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="Précisez votre projet, vos contraintes, vos questions…"/>
                </Field>
              </div>
            </div>

            <div className="pt-4 space-y-5">
              <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="flex items-center justify-between gap-4 flex-wrap">
                <p className="text-mute text-[13px]">Nous vous recontactons sous 48&nbsp;h ouvrées.</p>
                <Button type="submit" variant="primary" size="lg" iconRight="send" disabled={!form.consent || !captchaOk}>Envoyer ma demande</Button>
              </div>
            </div>
          </form>
        </div>
      </section>
    </>
  );
}

window.DevisPage = DevisPage;