/* NEKTAR — Section 04 · Livraison & commandes
   3 options : Commande en direct / UberEats / Deliveroo */
const { useState } = React;

/* -------------------------------------------------------
   OPTIONS
------------------------------------------------------- */
const OPTIONS = [
  {
    id: 'direct',
    num: 'I',
    name: 'Commande en direct',
    desc: 'Commande spéciale sur mesure',
    action: 'form',
  },
  {
    id: 'ubereats',
    num: 'II',
    name: 'Uber Eats',
    desc: 'Livraison à domicile',
    action: 'https://www.ubereats.com',
  },
  {
    id: 'deliveroo',
    num: 'III',
    name: 'Deliveroo',
    desc: 'Livraison à domicile',
    action: 'https://deliveroo.fr',
  },
];

/* -------------------------------------------------------
   Formulaire commande en direct
------------------------------------------------------- */
function DrawerForm({ open, onClose }) {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({
    nom: '', email: '', date: '', type: '', message: '',
  });

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const handleSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <>
      {/* Backdrop */}
      <div
        className={"livraison__backdrop" + (open ? " is-open" : "")}
        onClick={onClose}
        aria-hidden="true"
      />

      {/* Drawer */}
      <div
        className={"livraison__drawer" + (open ? " is-open" : "")}
        role="dialog"
        aria-modal="true"
        aria-label="Commande en direct"
      >
        <div className="livraison__drawer-head">
          <h2 className="livraison__drawer-title">
            Commande en direct
          </h2>
          <button className="livraison__close" onClick={onClose} aria-label="Fermer">
            Fermer
          </button>
        </div>

        {sent ? (
          <p className="livraison__confirm">
            Votre demande a bien été reçue. Nous vous répondrons sous 24&nbsp;h.
          </p>
        ) : (
          <form className="livraison__form" onSubmit={handleSubmit}>

            <div>
              <label className="livraison__label" htmlFor="lr-nom">Nom & prénom</label>
              <input
                id="lr-nom" className="livraison__input" type="text"
                required autoComplete="name"
                value={form.nom} onChange={e => set('nom', e.target.value)}
              />
            </div>

            <div>
              <label className="livraison__label" htmlFor="lr-email">Téléphone ou e-mail</label>
              <input
                id="lr-email" className="livraison__input" type="text"
                required autoComplete="email"
                value={form.email} onChange={e => set('email', e.target.value)}
              />
            </div>

            <div>
              <label className="livraison__label" htmlFor="lr-date">Date souhaitée</label>
              <input
                id="lr-date" className="livraison__input" type="date"
                value={form.date} onChange={e => set('date', e.target.value)}
              />
            </div>

            <div>
              <label className="livraison__label" htmlFor="lr-type">Type de commande</label>
              <input
                id="lr-type" className="livraison__input" type="text"
                placeholder="Bouteille particulière, coffret, événement…"
                value={form.type} onChange={e => set('type', e.target.value)}
              />
            </div>

            <div className="livraison__field--full">
              <label className="livraison__label" htmlFor="lr-msg">Message</label>
              <textarea
                id="lr-msg" className="livraison__textarea"
                placeholder="Décrivez votre demande…"
                value={form.message} onChange={e => set('message', e.target.value)}
              />
            </div>

            <button type="submit" className="livraison__submit">
              Envoyer la demande
            </button>

          </form>
        )}
      </div>
    </>
  );
}

/* -------------------------------------------------------
   App
------------------------------------------------------- */
function App() {
  const [formOpen, setFormOpen] = useState(false);

  const handleOption = (opt) => {
    if (opt.action === 'form') {
      setFormOpen(true);
    } else {
      window.open(opt.action, '_blank', 'noopener');
    }
  };

  return (
    <>
      <main className="livraison" aria-label="Livraison et commandes">

        <h1 className="livraison__hero-title">
          <span className="livraison__hero-or">Nektar</span>
          <span className="livraison__hero-creme"> chez vous&nbsp;!</span>
        </h1>

        <div className="livraison__options" role="list">
          {OPTIONS.map(opt => (
            <button
              key={opt.id}
              className="livraison__option"
              role="listitem"
              onClick={() => handleOption(opt)}
              aria-label={opt.name}
            >
              <div className="livraison__opt-label">
                <span className="livraison__opt-num">{opt.num}</span>
                <span className="livraison__opt-name">{opt.name}</span>
              </div>
              <span className="livraison__opt-desc">{opt.desc}</span>
            </button>
          ))}
        </div>

      </main>

      <DrawerForm open={formOpen} onClose={() => setFormOpen(false)} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);