// =====================================================
// PAGE — Contact
// =====================================================

const ContactPage = ({ navigate }) => {
  const contactEmail = (typeof CONFIG !== "undefined" && CONFIG.CONTACT_EMAIL)
    ? CONFIG.CONTACT_EMAIL
    : "dvpt@tourisme.gov.mg";
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    nom: "", organisation: "", fonction: "", typeActeur: "",
    escaleInteret: "", objet: "", message: "", email: ""
  });

  const set = (key) => (e) => setForm(f => ({ ...f, [key]: e.target.value }));

  const submit = (ev) => {
    ev.preventDefault();
    const escale = ESCALES.find(e => e.id === form.escaleInteret);
    const subject = form.objet || "Demande institutionnelle - Catalogue Croisieres Madagascar 2026";
    const body = [
      "Demande preparee depuis le site Croisieres Madagascar 2026",
      "",
      `Nom : ${form.nom}`,
      `Email : ${form.email}`,
      form.organisation ? `Organisation : ${form.organisation}` : null,
      form.fonction ? `Fonction : ${form.fonction}` : null,
      form.typeActeur ? `Type d'acteur : ${form.typeActeur}` : null,
      escale ? `Escale d'interet : ${escale.nom} - ${escale.nomAlt}` : "Escale d'interet : Toutes les escales",
      "",
      "Message :",
      form.message
    ].filter(Boolean).join("\n");
    window.location.href = `mailto:${contactEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const reset = () => {
    setSubmitted(false);
    setForm({ nom: "", organisation: "", fonction: "", typeActeur: "", escaleInteret: "", objet: "", message: "", email: "" });
  };

  if (submitted) {
    return (
      <main className="app-main">
        <section className="section">
          <div className="container" style={{ maxWidth: 640, textAlign: "center", padding: "64px 24px" }}>
            <div style={{ width: 72, height: 72, borderRadius: "50%", background: "rgba(127,181,57,.12)", border: "2px solid rgba(127,181,57,.35)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 28px", color: "#4F7826" }}>
              <Icon name="check" size={32} stroke={2.2}/>
            </div>
            <h1 className="h-section" style={{ marginBottom: 16 }}>Message <em>préparé</em></h1>
            <p className="lede" style={{ marginBottom: 8 }}>
              Votre demande est prête dans votre messagerie.
            </p>
            <p style={{ fontSize: 14, color: "var(--c-ink-soft)", lineHeight: 1.6, marginBottom: 32 }}>
              Le site n'enregistre pas encore les demandes automatiquement. Vérifiez le brouillon
              ouvert par votre messagerie, puis envoyez-le à <strong>{contactEmail}</strong>.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={reset}>
                <Icon name="mail" size={15}/>Nouvelle demande
              </button>
              <button className="btn btn-ghost" onClick={() => navigate("#/")}>
                <Icon name="arrow-left" size={15}/>Retour à l'accueil
              </button>
            </div>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main className="app-main">
      <section className="section">
        <div className="container container-wide">
          <div className="section-head">
            <span className="h-eyebrow">Demande institutionnelle</span>
            <h1 className="h-section">Nous <em>contacter</em></h1>
            <p className="lede">
              Formulaire de demande pour les compagnies de croisières, armateurs,
              tour-opérateurs, agences réceptives, agents maritimes, investisseurs,
              partenaires institutionnels et passagers. Une équipe dédiée du Ministère
              du Tourisme et de l'Artisanat traite chaque demande reçue par email.
            </p>
          </div>

          <div className="contact-grid">
            <form className="card" style={{ padding: 32 }} onSubmit={submit}>
              <div className="contact-form">

                <div className="field">
                  <label htmlFor="c-nom">Nom</label>
                  <input id="c-nom" value={form.nom} onChange={set("nom")} placeholder="Nom et prénom" required autoComplete="name"/>
                </div>

                <div className="field">
                  <label htmlFor="c-email">Email</label>
                  <input id="c-email" type="email" value={form.email} onChange={set("email")} placeholder="vous@organisation.com" required autoComplete="email"/>
                </div>

                <div className="field">
                  <label htmlFor="c-organisation">Organisation</label>
                  <input id="c-organisation" value={form.organisation} onChange={set("organisation")} placeholder="Nom de l'entreprise / institution" autoComplete="organization"/>
                </div>

                <div className="field">
                  <label htmlFor="c-fonction">Fonction</label>
                  <input id="c-fonction" value={form.fonction} onChange={set("fonction")} placeholder="Votre poste" autoComplete="organization-title"/>
                </div>

                <div className="field">
                  <label htmlFor="c-type">Type d'acteur</label>
                  <select id="c-type" value={form.typeActeur} onChange={set("typeActeur")}>
                    <option value="">— Sélectionner —</option>
                    <option>Compagnie de croisière</option>
                    <option>Armateur</option>
                    <option>Tour-opérateur</option>
                    <option>Agence réceptive</option>
                    <option>Agent maritime</option>
                    <option>Institution</option>
                    <option>Investisseur</option>
                    <option>Voyageur</option>
                    <option>Autre</option>
                  </select>
                </div>

                <div className="field">
                  <label htmlFor="c-escale">Escale d'intérêt</label>
                  <select id="c-escale" value={form.escaleInteret} onChange={set("escaleInteret")}>
                    <option value="">Toutes les escales</option>
                    {ESCALES.map(e => <option key={e.id} value={e.id}>{e.nom} — {e.nomAlt}</option>)}
                  </select>
                </div>

                <div className="field field-full">
                  <label htmlFor="c-objet">Objet de la demande</label>
                  <input id="c-objet" value={form.objet} onChange={set("objet")} placeholder="Ex. Faisabilité d'un turnaround à Fort-Dauphin"/>
                </div>

                <div className="field field-full">
                  <label htmlFor="c-message">Message <span style={{ color: "var(--c-terra)", fontWeight: 400 }}>*</span></label>
                  <textarea id="c-message" value={form.message} onChange={set("message")} placeholder="Précisez votre besoin, votre calendrier prévisionnel et toute information utile au traitement de la demande." required/>
                </div>

                <div className="field-full" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
                  <p className="note" style={{ margin: 0, maxWidth: 380 }}>
                    Le bouton prépare un email à envoyer depuis votre messagerie. Aucune donnée
                    n'est enregistrée par le site tant que cet email n'est pas envoyé.
                  </p>
                  <button className="btn btn-primary btn-lg" type="submit">
                    <Icon name="mail" size={15}/>Préparer l'email
                  </button>
                </div>

              </div>
            </form>

            {/* Sidebar */}
            <div className="col" style={{ gap: 16 }}>

              <div className="contact-info">
                <h3>Ministère du Tourisme<br/>et de l'Artisanat</h3>
                <p>Interlocuteur institutionnel pour la coordination des escales croisière à Madagascar.</p>
                <div className="ci-row">
                  <Icon name="pin" size={16} stroke={2}/>
                  23, Rue Fernand Kasanga, Tsimbazaza, Antananarivo, Madagascar
                </div>
                <div className="ci-row">
                  <Icon name="mail" size={16} stroke={2}/>
                  <a href={`mailto:${contactEmail}`} style={{ color: "rgba(255,255,255,.85)", textDecoration: "underline", textUnderlineOffset: 3 }}>
                    {contactEmail}
                  </a>
                </div>
              </div>

              <div className="card" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <h4 className="h-eyebrow" style={{ marginBottom: 0, color: "var(--c-navy)" }}>Catalogue 2026</h4>
                <p style={{ fontSize: 13, color: "var(--c-ink-soft)", margin: 0, lineHeight: 1.5 }}>
                  Téléchargez la version PDF complète du catalogue des escales croisière de Madagascar.
                </p>
                <a
                  href="assets/catalogue-croisieres-2026.pdf"
                  download
                  className="btn btn-ghost btn-sm"
                  style={{ alignSelf: "flex-start" }}
                >
                  <Icon name="download" size={14}/>Télécharger le PDF
                </a>
              </div>

              <div className="card">
                <h4 className="h-eyebrow" style={{ marginBottom: 10, color: "var(--c-navy)" }}>Partenaires institutionnels</h4>
                <ul style={{ margin: 0, paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8, fontSize: 13.5 }}>
                  <li><strong style={{ color: "var(--c-navy)" }}>APMF</strong> — Agence Portuaire, Maritime et Fluviale</li>
                  <li><strong style={{ color: "var(--c-navy)" }}>Capitaineries</strong> des dix ports recensés</li>
                  <li><strong style={{ color: "var(--c-navy)" }}>Office National du Tourisme</strong></li>
                  <li><strong style={{ color: "var(--c-navy)" }}>Agences réceptives</strong> et agents maritimes</li>
                </ul>
              </div>

              <div className="card card-flat">
                <h4 className="h-eyebrow" style={{ marginBottom: 8, color: "var(--c-navy)" }}>Délais de traitement</h4>
                <p className="note" style={{ fontSize: 13, color: "var(--c-ink-soft)" }}>
                  Demandes opérationnelles&nbsp;: 48 à 72 heures ouvrées.<br/>
                  Demandes institutionnelles&nbsp;: jusqu'à 10 jours.
                </p>
              </div>

            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

window.ContactPage = ContactPage;