/* ══════════ Fideliio — sections (bas de page) ══════════ */

// ── SPLIT / DEUX AUDIENCES ──
function Split() {
  return (
    <section className="split">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow" style={{ color: "rgba(255,255,255,.5)" }}>Deux expériences, une plateforme</span>
          <h2>Simple pour vos clients.<br />Puissant pour vous.</h2>
        </div>
        <div className="aud-grid">
          {DATA.audiences.map((a, i) => (
            <div className={"aud reveal" + (a.variant === "client" ? " client" : "")} key={a.variant} style={{ "--i": i }}>
              <div className="tag">{a.tag}</div>
              <h3>{a.title}</h3>
              <ul>
                {a.items.map((it, i) => (
                  <li key={i}><Icon name="check" size={19} stroke={2.4} /> {it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── PRICING ──
function Pricing() {
  const { open } = React.useContext(RdvContext);
  return (
    <section id="pricing">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow">Tarifs simples</span>
          <h2>Un prix par établissement.<br />Sans commission.</h2>
          <p>Pas de pourcentage sur vos ventes, pas de frais cachés. Vous gardez 100&nbsp;% de votre marge.</p>
        </div>
        <div className="price-grid">
          {DATA.plans.map((p, i) => (
            <div className={"plan reveal " + (p.popular ? "pop" : "classic")} key={p.variant} style={{ "--i": i }}>
              {p.popular && <div className="pop-tag">{p.badge}</div>}
              <div className="pn">{p.name}</div>
              <div className="price"><span className="amt">{p.price}</span><span className="per">{p.per}</span></div>
              <p className="desc">{p.desc}</p>
              <ul>
                {p.features.map((f, i) => (
                  <li key={i}><Icon name="check" size={18} stroke={2.4} /> {f}</li>
                ))}
              </ul>
              <Button variant={p.popular ? "primary" : "ghost"} href={DATA.registerUrl} target="_blank" rel="noopener">{p.cta}</Button>
            </div>
          ))}
        </div>
        <p className="price-note">Essai gratuit de 14 jours sur tous les plans. Sans engagement, résiliable à tout moment.</p>
      </div>
    </section>
  );
}

// ── TESTIMONIAL ──
function Testimonial() {
  const t = DATA.testimonial;
  return (
    <section className="quote-sec">
      <div className="wrap">
        <div className="quote reveal">
          <div className="stars">
            {[0, 1, 2, 3, 4].map((i) => <Icon name="star" size={20} key={i} />)}
          </div>
          <blockquote>« {t.quote} »</blockquote>
          <div className="by">
            <div className="av">{t.initials}</div>
            <div className="meta">
              <div className="nm">{t.name}</div>
              <div className="ro">{t.role}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──
function Faq() {
  return (
    <section id="faq">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow">Questions fréquentes</span>
          <h2>Tout ce qu'il faut savoir.</h2>
        </div>
        <div className="faq-grid">
          {DATA.faq.map((item, i) => (
            <details className="faq reveal" key={i} open={i === 0} style={{ "--i": i }}>
              <summary>
                {item.q}
                <span className="pm"><Icon name="plus" size={14} stroke={2.4} /></span>
              </summary>
              <div className="ans">{item.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FINAL CTA ──
function FinalCta() {
  const { open } = React.useContext(RdvContext);
  return (
    <section className="final" id="rdv">
      <div className="wrap">
        <div className="final-card reveal">
          <h2>Vos meilleurs clients<br />méritent de revenir.</h2>
          <p>Lancez votre programme de fidélité aujourd'hui. 14 jours offerts, sans carte bancaire.</p>
          <div className="cta-row">
            <Button variant="primary" href={DATA.registerUrl} target="_blank" rel="noopener">Créer mon compte</Button>
            <Button variant="ghost" onClick={open}>Parler à l'équipe</Button>
          </div>
          <div className="small">Configuration en 10 minutes · Sans engagement</div>
        </div>
      </div>
    </section>
  );
}

// ── FOOTER ──
function Footer() {
  const { open } = React.useContext(RdvContext);
  const f = DATA.footer;
  const onLink = (e, href) => {
    if (href === "#rdv") { e.preventDefault(); open(); }
  };
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <Brand size={32} />
            <p>{f.tagline}</p>
          </div>
          {f.cols.map((col) => (
            <div className="foot-col" key={col.title}>
              <h4>{col.title}</h4>
              {col.links.map((l) => (
                <a key={l.label} href={l.href} onClick={(e) => onLink(e, l.href)}>{l.label}</a>
              ))}
            </div>
          ))}
        </div>
        <div className="foot-bot">
          <span className="cp">© 2026 Fideliio. Tous droits réservés.</span>
          <span className="made">Hébergé en Europe · Conforme RGPD</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Split, Pricing, Testimonial, Faq, FinalCta, Footer });