/* BoatsFun — Page FAQ. Expose window.BFPageFaq. */

(function () {
  const { I } = window.BF;

  const CATEGORIES = [
    {
      id: "reservation",
      label: "Réservation",
      items: [
        {
          q: "Comment réserver un bateau sur BoatsFun ?",
          a: "Vous choisissez un bateau, une date, une plage horaire, puis vous suivez les étapes de réservation. Une confirmation vous sera envoyée lorsque la réservation sera validée."
        },
        {
          q: "Est-ce que je peux réserver pour une journée entière ?",
          a: "Oui. Certains bateaux peuvent être disponibles pour une journée entière selon les disponibilités du propriétaire."
        },
        {
          q: "Est-ce que les prix sont fixes ?",
          a: "Les prix affichés peuvent varier selon le bateau, la durée, la saison, la disponibilité et les conditions du propriétaire."
        }
      ]
    },
    {
      id: "offre",
      label: "Faire une offre",
      items: [
        {
          q: "Comment fonctionne « Faire une offre » ?",
          a: "Vous proposez un budget raisonnable pour une date et une plage horaire. Si un propriétaire accepte votre offre, la réservation peut être confirmée."
        },
        {
          q: "Que se passe-t-il si personne n'accepte mon offre ?",
          a: "Si aucune offre n'est acceptée, le dépôt est remboursé. BoatsFun n'est pas responsable d'autres pertes, frais ou garanties liés à une offre non acceptée."
        }
      ]
    },
    {
      id: "depot",
      label: "Dépôt et remboursement",
      items: [
        {
          q: "Est-ce qu'un dépôt est requis ?",
          a: "Oui, un dépôt peut être demandé pour sécuriser une réservation ou une offre. Le montant exact dépend du bateau et du type de demande."
        },
        {
          q: "Quand suis-je remboursé ?",
          a: "Le remboursement dépend de la situation : offre refusée, annulation admissible, indisponibilité du bateau ou autre cas prévu dans les politiques BoatsFun."
        },
        {
          q: "Où consulter les politiques complètes ?",
          a: "Les politiques complètes seront regroupées dans la page Politiques & conditions."
        }
      ]
    },
    {
      id: "meteo",
      label: "Météo et sécurité",
      items: [
        {
          q: "Que se passe-t-il en cas de mauvaise météo ?",
          a: "Selon les conditions et la politique du propriétaire, la sortie peut être reportée, annulée ou évaluée au cas par cas."
        },
        {
          q: "Est-ce que les bateaux sont vérifiés ?",
          a: "Les bateaux doivent être validés avant leur mise en ligne. BoatsFun peut demander des informations sur le bateau, l'assurance, l'emplacement et les conditions de location."
        }
      ]
    },
    {
      id: "permis",
      label: "Permis et chauffeur",
      items: [
        {
          q: "Ai-je besoin d'un permis pour louer un bateau ?",
          a: "Cela dépend du type de bateau, du lieu, de la réglementation applicable et des conditions du propriétaire. Certaines locations peuvent nécessiter un permis ou une preuve d'expérience."
        },
        {
          q: "Est-ce possible de louer avec chauffeur ?",
          a: "La location avec chauffeur dépend du statut du propriétaire, de l'assurance, de l'entreprise et des règles applicables. Cette option peut demander des vérifications additionnelles."
        }
      ]
    },
    {
      id: "hote",
      label: "Devenir hôte",
      items: [
        {
          q: "Comment proposer mon bateau sur BoatsFun ?",
          a: "Vous pouvez remplir le formulaire Devenir hôte avec vos informations et celles de votre bateau. L'équipe BoatsFun vous contactera pour la suite."
        },
        {
          q: "Est-ce que je peux proposer mon bateau même si je suis un particulier ?",
          a: "Oui, mais certaines options peuvent être limitées selon votre statut, votre assurance et les règles applicables."
        }
      ]
    }
  ];

  /* Flatten categories to get a global index per item */
  const FLAT = [];
  CATEGORIES.forEach((cat) => {
    cat.items.forEach((item) => {
      FLAT.push({ catLabel: cat.label, catId: cat.id, ...item });
    });
  });

  const styles = `
/* ===== HERO ===== */
.bf .fq-hero {
  background: #F0F8FF;
  padding: 56px 20px 48px;
  text-align: center;
}
.bf .fq-hero-inner {
  max-width: 640px;
  margin: 0 auto;
}
.bf .fq-hero h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #002244;
  margin: 0 0 14px;
  line-height: 1.15;
}
.bf .fq-hero .fq-sub {
  font-size: 17px;
  color: #6B7A8C;
  margin: 0 0 10px;
  line-height: 1.6;
}
.bf .fq-hero .fq-intro {
  font-size: 14px;
  color: #8A9BAC;
  line-height: 1.7;
}

/* ===== MAIN ===== */
.bf .fq-main {
  background: #F0F8FF;
  padding: 0 20px 80px;
}
.bf .fq-wrap {
  max-width: 800px;
  margin: 0 auto;
}

/* ===== CATEGORY ===== */
.bf .fq-category {
  margin-bottom: 36px;
}
.bf .fq-cat-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #00B5E2;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-left: 4px;
}

/* ===== ACCORDION ===== */
.bf .fq-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px -8px rgba(0,34,68,.10);
  margin-bottom: 8px;
  overflow: hidden;
}
.bf .fq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #002244;
  transition: background .15s;
}
.bf .fq-question:hover {
  background: #F7FBFF;
}
.bf .fq-question.open {
  color: #002244;
  border-bottom: 1px solid #E8F2FF;
}
.bf .fq-chevron {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #EAF6FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #00B5E2;
  font-weight: 700;
  transition: background .15s, transform .2s;
  line-height: 1;
}
.bf .fq-question.open .fq-chevron {
  background: #00B5E2;
  color: #fff;
  transform: rotate(45deg);
}
.bf .fq-answer {
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
}
.bf .fq-answer.open {
  padding: 16px 22px 20px;
  max-height: 500px;
}
.bf .fq-answer p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #4A5C6E;
  line-height: 1.75;
  margin: 0;
}

/* ===== CTA BLOCK ===== */
.bf .fq-cta-block {
  max-width: 800px;
  margin: 48px auto 0;
  background: #002244;
  border-radius: 20px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.bf .fq-cta-block .fq-cta-text h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.bf .fq-cta-block .fq-cta-text p {
  font-size: 14px;
  color: rgba(255,255,255,.72);
  margin: 0;
  line-height: 1.6;
}
.bf .fq-cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.bf .fq-btn-primary {
  display: inline-block;
  background: #FF8200;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 24px;
  border-radius: 40px;
  text-decoration: none;
  transition: background .2s;
  white-space: nowrap;
}
.bf .fq-btn-primary:hover { background: #E56F00; }
.bf .fq-btn-secondary {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 24px;
  border-radius: 40px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .2s;
  white-space: nowrap;
}
.bf .fq-btn-secondary:hover { background: rgba(255,255,255,.22); }

/* ===== RESPONSIVE ===== */
@media (max-width: 720px) {
  .bf .fq-hero h1 { font-size: 28px; }
  .bf .fq-cta-block { padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .bf .fq-question { font-size: 14px; padding: 16px 16px; }
  .bf .fq-answer.open { padding: 14px 16px 18px; }
}
@media (max-width: 500px) {
  .bf .fq-cta-block { padding: 24px 18px; }
  .bf .fq-cta-btns { flex-direction: column; width: 100%; }
  .bf .fq-btn-primary, .bf .fq-btn-secondary { text-align: center; }
}
`;

  function BFPageFaq() {
    const [openIndex, setOpenIndex] = React.useState(null);

    function toggle(idx) {
      setOpenIndex(openIndex === idx ? null : idx);
    }

    /* Build category blocks with correct flat indices */
    let flatIdx = 0;
    const categoryBlocks = CATEGORIES.map((cat) => {
      const items = cat.items.map((item) => {
        const idx = flatIdx++;
        return { ...item, idx };
      });
      return { ...cat, items };
    });

    return (
      <div className="bf">
        <style>{styles}</style>
        <window.BFHeader />

        {/* ===== HERO ===== */}
        <section className="fq-hero">
          <div className="fq-hero-inner">
            <h1>Questions fréquentes</h1>
            <p className="fq-sub">Tout ce qu'il faut savoir avant de réserver, faire une offre ou proposer votre bateau sur BoatsFun.</p>
            <p className="fq-intro">Notre objectif est de rendre la location de bateaux simple, claire et sécuritaire.</p>
          </div>
        </section>

        {/* ===== FAQ ===== */}
        <section className="fq-main">
          <div className="fq-wrap">

            {categoryBlocks.map((cat) => (
              <div className="fq-category" key={cat.id}>
                <div className="fq-cat-label">{cat.label}</div>
                {cat.items.map((item) => (
                  <div className="fq-card" key={item.idx}>
                    <button
                      type="button"
                      className={`fq-question ${openIndex === item.idx ? "open" : ""}`}
                      onClick={() => toggle(item.idx)}
                      aria-expanded={openIndex === item.idx ? "true" : "false"}>
                      <span>{item.q}</span>
                      <span className="fq-chevron" aria-hidden="true">+</span>
                    </button>
                    <div className={`fq-answer ${openIndex === item.idx ? "open" : ""}`} role="region">
                      <p>{item.a}</p>
                    </div>
                  </div>
                ))}
              </div>
            ))}

            {/* ===== CTA FINAL ===== */}
            <div className="fq-cta-block">
              <div className="fq-cta-text">
                <h3>Vous n'avez pas trouvé votre réponse ?</h3>
                <p>Contactez notre équipe et nous vous répondrons rapidement.</p>
              </div>
              <div className="fq-cta-btns">
                <a href="/contact" className="fq-btn-primary">Contactez-nous</a>
                <a href="/devenir-hote" className="fq-btn-secondary">Proposer mon bateau</a>
              </div>
            </div>

          </div>
        </section>

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

  window.BFPageFaq = BFPageFaq;
})();