/* BoatsFun — Page locale Montréal (/location-bateau/montreal).
   Cible SEO locale principale pour les recherches « location bateau Montréal »
   depuis que la homepage est devenue générale. UNIQUEMENT des informations
   confirmées du projet : bateaux actifs de data/boats.js, lieux de départ réels
   (Marina de Pointe-aux-Trembles, Marina de Boucherville, option Repentigny),
   règles déjà publiées (Interac, 48 h, permis selon fiche, capitaine sur demande).
   Expose window.BFPageVilleMontreal. */

(function () {
  const { I } = window.BF;
  const { BOATS } = window.BFBoats;
  const { t, localize, startingPriceLabel, LANG } = window.BFI18N;

  // FAQ locale — reprend mot pour mot des réponses déjà confirmées ailleurs sur le site.
  const LOCAL_FAQ = [
    {
      q: "D'où partent les bateaux à Montréal ?",
      a: "Les départs se font depuis Montréal (Marina de Pointe-aux-Trembles) et la Rive-Sud (Marina de Boucherville). Certains bateaux offrent aussi un départ depuis la Marina de Repentigny — le lieu exact est indiqué sur la fiche du bateau."
    },
    {
      q: "Faut-il un permis pour louer un bateau ?",
      a: "Les exigences varient selon le bateau. La fiche du bateau indique si une carte de conducteur, une expérience particulière ou une autre condition est requise."
    },
    {
      q: "Un capitaine est-il disponible ?",
      a: "La location est offerte sans capitaine inclus. Un capitaine peut être disponible sur demande selon le bateau et les disponibilités."
    },
    {
      q: "Comment effectuer le paiement ?",
      a: "Le dépôt est payé par virement Interac. La réservation est confirmée après vérification du paiement et de la disponibilité."
    },
    {
      q: "Puis-je modifier ou annuler ma réservation ?",
      a: "Vous pouvez demander un changement de date ou une annulation au moins 48 heures avant la location. L'acceptation dépend des conditions applicables et des disponibilités."
    }
  ];

  const styles = `
.bf .vm-hero { background:linear-gradient(180deg, #002244 0%, #003a66 100%); color:#fff; padding:64px 0 56px; }
.bf .vm-hero .eyebrow { color:var(--teal); }
.bf .vm-hero h1 { font-family:'Poppins', sans-serif; font-size:44px; line-height:1.12; font-weight:800; color:#fff; margin:14px 0 14px; letter-spacing:-1.1px; }
.bf .vm-hero p.lead { font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.85); max-width:680px; }
.bf .vm-hero .vm-places { display:flex; gap:16px 22px; margin-top:20px; flex-wrap:wrap; color:rgba(255,255,255,.75); font-size:13.5px; }
.bf .vm-hero .vm-places span { display:inline-flex; align-items:center; gap:7px; }
.bf .vm-hero .vm-places svg { color:var(--teal); width:15px; height:15px; }
.bf .vm-section { padding:56px 0 0; }
.bf .vm-section h2 { font-family:'Poppins', sans-serif; font-size:28px; font-weight:700; color:var(--navy); letter-spacing:-.5px; margin:0 0 8px; }
.bf .vm-section .vm-sub { font-size:15.5px; color:var(--body); line-height:1.6; margin:0 0 26px; max-width:640px; }
.bf .vm-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.bf .vm-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--hair); border-radius:16px; overflow:hidden; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.bf .vm-card:hover { transform:translateY(-3px); box-shadow:0 22px 44px -22px rgba(0,34,68,.3); }
.bf .vm-card:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.bf .vm-card-img { aspect-ratio:16/10; background:linear-gradient(135deg,#002244,#00B5E2); position:relative; overflow:hidden; }
.bf .vm-card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bf .vm-card-body { padding:16px 16px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.bf .vm-card-body h3 { font-family:'Poppins', sans-serif; font-size:16px; font-weight:700; color:var(--navy); margin:0; }
.bf .vm-card-meta { font-size:13px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; }
.bf .vm-card-meta span { display:inline-flex; align-items:center; gap:5px; }
.bf .vm-card-price { margin-top:auto; padding-top:10px; font-family:'Poppins', sans-serif; font-weight:800; font-size:16px; color:var(--navy); }
.bf .vm-ctas { display:flex; gap:14px; margin:32px 0 0; flex-wrap:wrap; }
.bf .vm-faq { max-width:820px; margin:0 auto; }
.bf .vm-faq-item { background:#fff; border-radius:14px; box-shadow:0 4px 20px -8px rgba(0,34,68,.1); margin-bottom:8px; overflow:hidden; }
.bf .vm-faq-q { width:100%; background:none; border:none; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; text-align:left; font-family:'Poppins', sans-serif; font-size:15px; font-weight:600; color:var(--navy); }
.bf .vm-faq-q:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; border-radius:14px; }
.bf .vm-faq-q .plus { flex-shrink:0; color:var(--teal); font-weight:700; }
.bf .vm-faq-a { padding:0 20px 16px; font-size:14.5px; line-height:1.7; color:#4A5C6E; }
.bf .vm-end { padding:48px 0 72px; }
@media (max-width: 900px) { .bf .vm-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px) {
  .bf .vm-hero h1 { font-size:30px; }
  .bf .vm-grid { grid-template-columns:1fr; }
  .bf .vm-section h2 { font-size:23px; }
}
`;

  function BFPageVilleMontreal() {
    const [openFaq, setOpenFaq] = React.useState(-1);

    return (
      <div className="bf" data-screen-label="Location bateau Montréal">
        <style>{styles}</style>
        <window.BFHeader />

        {/* ===== HERO LOCAL ===== */}
        <section className="vm-hero">
          <div className="container">
            <span className="eyebrow">{t("Marché actuel")}</span>
            <h1>{t("Location de bateaux à Montréal")}</h1>
            <p className="lead">
              {t("Louez un ponton, un cruiser ou un yacht sur le fleuve Saint-Laurent : départs de la Marina de Pointe-aux-Trembles (Montréal) et de la Marina de Boucherville (Rive-Sud), avec option de départ à Repentigny selon le bateau. Réservation en ligne, dépôt par virement Interac vérifié par notre équipe.")}
            </p>
            <div className="vm-places">
              <span><I.pin /> Marina de Pointe-aux-Trembles</span>
              <span><I.pin /> Marina de Boucherville</span>
              <span><I.pin /> {t("Option Repentigny")}</span>
              <span><I.wave /> {t("Navigation : Vieux-Port, Boucherville et îles de Varennes")}</span>
            </div>
          </div>
        </section>

        {/* ===== BATEAUX DU MARCHÉ ===== */}
        <section className="vm-section">
          <div className="container">
            <h2>{t("Les bateaux disponibles à Montréal et dans les environs")}</h2>
            <p className="vm-sub">
              {t("Chaque fiche indique le lieu de départ, la capacité, les équipements et les conditions du bateau.")}
            </p>
            <div className="vm-grid">
              {BOATS.map((b) => (
                <a key={b.slug} className="vm-card" href={localize(`/bateau/${encodeURIComponent(b.slug)}`)}>
                  <div className="vm-card-img">
                    <img src={b.img} alt={b.name} loading="lazy" />
                  </div>
                  <div className="vm-card-body">
                    <h3>{b.name}</h3>
                    <div className="vm-card-meta">
                      <span><I.pin width="12" /> {b.loc}</span>
                      <span><I.users width="13" /> {LANG === 'en' ? `Up to ${b.pers} people` : `Jusqu'à ${b.pers} pers.`}</span>
                    </div>
                    <div className="vm-card-price">{startingPriceLabel(b.lowestPricePerHour)}</div>
                  </div>
                </a>
              ))}
            </div>
            <div className="vm-ctas">
              <a href={localize("/bateaux")} className="offer-cta">{t("Voir tout le catalogue")} <I.arrowR width="15" /></a>
              <a href={localize("/offres-du-moment")} className="btn-outline">{t("Offres du moment")}</a>
            </div>
          </div>
        </section>

        {/* ===== FAQ LOCALE ===== */}
        <section className="vm-section vm-end">
          <div className="container">
            <div className="vm-faq">
              <h2>{t("Questions fréquentes — location de bateau à Montréal")}</h2>
              <p className="vm-sub">{t("Les règles complètes sont détaillées dans la FAQ et les politiques.")}</p>
              {LOCAL_FAQ.map((item, i) => (
                <div className="vm-faq-item" key={i}>
                  <button
                    type="button"
                    className="vm-faq-q"
                    aria-expanded={openFaq === i ? "true" : "false"}
                    aria-controls={`vm-faq-a-${i}`}
                    onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <span>{t(item.q)}</span>
                    <span className="plus" aria-hidden="true">{openFaq === i ? "−" : "+"}</span>
                  </button>
                  {openFaq === i && (
                    <div className="vm-faq-a" id={`vm-faq-a-${i}`} role="region">{t(item.a)}</div>
                  )}
                </div>
              ))}
              <div className="vm-ctas">
                <a href={localize("/faq")} className="btn-outline">{t("Voir toute la FAQ")} <I.arrowR width="14" /></a>
              </div>
            </div>
          </div>
        </section>

        <window.BFFooter />
      </div>
    );
  }

  window.BFPageVilleMontreal = BFPageVilleMontreal;
})();