/* ============================================== */
/* Page FAQ — Accordéon                            */
/* ============================================== */

function FAQ() {
  const [filter, setFilter] = useState("Tout");

  const cats = ["Tout", "Tarifs", "Livraison", "Matériel", "Paiement", "Chantier"];

  const items = [
    {
      cat: "Tarifs",
      q: "Quel est le tarif d'un étai par jour ?",
      a: "1 000 XOF par étai et par jour pour les particuliers. 900 XOF pour les pros (entreprises, artisans, BTP). Le tarif est forfaitaire — pas de palier de quantité, pas de surcharge week-end."
    },
    {
      cat: "Tarifs",
      q: "Y a-t-il une durée minimum de location ?",
      a: "Oui, 7 jours. Au-delà, vous restituez quand vous voulez et le solde est calculé sur le nombre de jours effectivement utilisés."
    },
    {
      cat: "Tarifs",
      q: "Comment obtenir un devis ?",
      a: "Via le formulaire en ligne (devis instantané) ou par WhatsApp au +221 78 923 06 00. Confirmation par contrat sous 1h ouvrée."
    },
    {
      cat: "Livraison",
      q: "Livrez-vous sur tout le Sénégal ?",
      a: "Nous livrons principalement sur la Petite Côte : Mbour, Saly, Nguékhokh, Somone et environs. Pour les chantiers plus lointains (Dakar, Thiès, Kaolack), un devis transport est établi au cas par cas."
    },
    {
      cat: "Livraison",
      q: "En combien de temps recevrai-je les étais ?",
      a: "En J+1 sur la Petite Côte si votre commande est validée avant 18h. Au-delà, livraison à J+2. Confirmation du créneau par WhatsApp la veille."
    },
    {
      cat: "Livraison",
      q: "Combien coûte la livraison par camion plateau ?",
      a: "À partir de 25 000 XOF aller-retour sur Mbour & Saly. Le tarif dépend de la zone et du volume. Vous pouvez aussi venir retirer au dépôt (Route de Saly, Mbour) — c'est gratuit."
    },
    {
      cat: "Matériel",
      q: "Les étais sont-ils certifiés ?",
      a: "Tous nos étais sont conformes aux normes de coffrage. Une fiche de contrôle est remise à chaque livraison. Si un étai présente un défaut, il est remplacé immédiatement."
    },
    {
      cat: "Matériel",
      q: "Quelles hauteurs sont disponibles ?",
      a: "Trois gammes : Standard (1,8 – 3,0 m · 1,8 t), Mi-lourd (2,5 – 4,0 m · 2,2 t), Lourd (3,5 – 5,5 m · 3,0 t). Si vous ne savez pas lequel choisir, notre équipe vous conseille gratuitement."
    },
    {
      cat: "Matériel",
      q: "Que se passe-t-il si un étai est endommagé sur mon chantier ?",
      a: "Pour un défaut d'usage normal, aucun frais. Pour une casse manifeste (chute, soudure forcée, etc.), un forfait de remise en état est facturé selon le devis du contrat."
    },
    {
      cat: "Paiement",
      q: "Quels modes de paiement acceptez-vous ?",
      a: "Wave, Orange Mobile (Orange Money) et virement bancaire. L'acompte de 30% est dû à la validation de la réservation. Le solde au retour du matériel."
    },
    {
      cat: "Paiement",
      q: "Pourquoi un acompte de 30% ?",
      a: "L'acompte couvre la réservation effective du stock et la préparation logistique. Il est intégralement déduit de la facture finale. Aucun frais caché."
    },
    {
      cat: "Paiement",
      q: "Délivrez-vous une facture officielle ?",
      a: "Oui, facture NINEA à votre nom pour les pros. Pour les particuliers, reçu détaillé. Tout est envoyé par email après paiement du solde."
    },
    {
      cat: "Chantier",
      q: "Proposez-vous des conseils de pose ?",
      a: "Oui. Notre équipe peut passer sur site pour le calage initial (gratuit dans un rayon de 15 km). Pour la mise en œuvre courante, support WhatsApp 24/7 avec photos."
    },
    {
      cat: "Chantier",
      q: "Puis-je prolonger ma location ?",
      a: "Bien sûr. Un message WhatsApp 24h avant la fin de période suffit. La prolongation se fait au même tarif unitaire — pas de surcoût."
    },
    {
      cat: "Chantier",
      q: "Que faire si je rends en avance ?",
      a: "Aucune pénalité. Vous payez uniquement les jours d'utilisation au-delà du minimum de 7 jours. Trop simple."
    },
  ];

  const filtered = filter === "Tout" ? items : items.filter(i => i.cat === filter);

  return (
    <Page>
      <FAQHero />
      <section data-screen-label="FAQ" style={{ background: "var(--fond)", padding: "96px 0" }}>
        <div className="wrap">
          <div className="ibd-faq-grid" style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 56, alignItems: "start" }}>
            {/* sidebar filters */}
            <aside style={{ position: "sticky", top: 100 }}>
              <span className="tag tag--marin">Filtrer par sujet</span>
              <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 22 }}>
                {cats.map(c => {
                  const active = filter === c;
                  const n = c === "Tout" ? items.length : items.filter(i => i.cat === c).length;
                  return (
                    <button key={c} onClick={() => setFilter(c)}
                      style={{
                        display: "flex", justifyContent: "space-between", alignItems: "center",
                        padding: "12px 16px",
                        background: active ? "var(--marin)" : "transparent",
                        border: "1px solid",
                        borderColor: active ? "var(--marin)" : "var(--acier-soft)",
                        color: active ? "#fff" : "var(--marin)",
                        fontFamily: "var(--ff-title)",
                        fontWeight: 700,
                        fontSize: 16,
                        textTransform: "uppercase",
                        letterSpacing: .5,
                        transition: "all .15s ease-out",
                      }}>
                      <span>{c}</span>
                      <span className="mono" style={{
                        fontSize: 11,
                        color: active ? "var(--sable)" : "#7E8B96",
                        letterSpacing: 1,
                      }}>{String(n).padStart(2,"0")}</span>
                    </button>
                  );
                })}
              </div>

              <div style={{ marginTop: 28, padding: 22, background: "var(--marin)", color: "#fff" }}>
                <span className="label" style={{ color: "var(--sable)" }}>Pas de réponse ?</span>
                <h4 className="h3" style={{ fontSize: 22, marginTop: 10, color: "#fff" }}>
                  Demandez direct.
                </h4>
                <p style={{ marginTop: 10, fontSize: 13, color: "var(--acier)", lineHeight: 1.55 }}>
                  Réponse WhatsApp en moyenne sous 15 minutes en heures ouvrées.
                </p>
                <a href="https://wa.me/221789230600" className="btn btn--orange btn--sm" style={{ marginTop: 16, width: "100%", justifyContent: "center" }}>
                  WhatsApp <span className="arr">→</span>
                </a>
              </div>
            </aside>

            {/* questions */}
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
                <h2 className="h2" style={{ fontSize: 32, color: "var(--marin)" }}>
                  {filter === "Tout" ? "Toutes les questions" : filter}
                </h2>
                <span className="mono" style={{ fontSize: 11, color: "#7E8B96", letterSpacing: 2 }}>
                  {filtered.length} QUESTION{filtered.length > 1 ? "S" : ""}
                </span>
              </div>

              <div className="ibd-acc-list">
                {filtered.map((it, i) => (
                  <details key={`${filter}-${i}`} className="ibd-acc" open={i === 0}>
                    <summary>
                      <div style={{ display: "flex", alignItems: "center", gap: 18, flex: 1 }}>
                        <span className="mono" style={{ fontSize: 11, color: "var(--orange)", letterSpacing: 2, minWidth: 38 }}>
                          {String(i+1).padStart(2,"0")}
                        </span>
                        <span className="h3" style={{ fontSize: 20, color: "var(--marin)", textTransform: "none", letterSpacing: 0 }}>
                          {it.q}
                        </span>
                      </div>
                      <span className="ibd-acc-icon">+</span>
                    </summary>
                    <div className="ibd-acc-body">
                      <span className="label" style={{ color: "var(--orange)", display: "block", marginBottom: 12 }}>
                        Catégorie · {it.cat}
                      </span>
                      {it.a}
                    </div>
                  </details>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

function FAQHero() {
  return (
    <section data-screen-label="FAQ Hero" style={{
      background: "var(--marin)", color: "#fff",
      position: "relative", overflow: "hidden",
      borderBottom: "1px solid #14294A",
    }}>
      <div className="wrap" style={{ position: "relative", padding: "56px 32px 48px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
          <span className="tag">FAQ · Foire aux questions</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 56, alignItems: "end" }} className="ibd-section-head">
          <h1 className="h1" style={{ fontSize: "clamp(36px, 4.5vw, 80px)", color: "#fff" }}>
            On répond<br/>
            <span style={{ color: "var(--orange)" }}>en clair.</span>
          </h1>
          <p style={{ fontSize: 17, color: "var(--sable)", lineHeight: 1.55, maxWidth: 420, fontWeight: 500 }}>
            Tarifs, livraison, matériel, paiement, chantier. Si une question manque,
            on y répond sous 15 minutes par WhatsApp.
          </p>
        </div>
      </div>
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 8,
        background: "repeating-linear-gradient(90deg, var(--marin-line) 0 1px, transparent 1px 40px)",
      }}/>
    </section>
  );
}

function FAQContactStrip() {
  return (
    <section style={{ background: "var(--orange)", color: "#fff", padding: "64px 0", position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 18px, transparent 18px 36px)",
      }}/>
      <div className="wrap" style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
        <div>
          <span className="tag" style={{ color: "var(--marin)" }}>
            <span style={{ background: "var(--marin)" }} /> 
            Toujours en doute ?
          </span>
          <h3 className="h1" style={{ fontSize: "clamp(32px, 4vw, 52px)", marginTop: 14 }}>
            Un appel suffit.
          </h3>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="tel:+221789230600" className="btn btn--white">
            +221 78 923 06 00 <span className="arr">→</span>
          </a>
          <a href="#/contact" className="btn btn--marin">
            Formulaire <span className="arr">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;
