/* ===== FUNNEL — rassurer, prouver, lever les objections, convertir (en douceur) ===== */

/* 1 — COMMENT ÇA SE PASSE : on enlève la peur avant de demander quoi que ce soit */
const STEPS = [
  ["Tu nous appelles (ou on te rappelle)",
    "Tu expliques ton souci avec tes mots à toi. Pas besoin de connaître les termes techniques — c'est notre métier, pas le tien."],
  ["On regarde, et le diagnostic est gratuit",
    "On te dit clairement ce qui cloche, combien ça coûte et combien de temps ça prend. Tu décides ensuite, tranquillement, sans aucune pression."],
  ["On répare, et on t'explique tout",
    "On remet tout d'aplomb — et on prend le temps de te montrer, pour que tu sois plus serein qu'avant qu'on arrive."],
];

function Process({ onCall }) {
  return (
    <section className="section" id="process">
      <div className="wrap">
        <Reveal className="center" style={{ maxWidth: 680, margin: "0 auto 48px" }}>
          <span className="eyebrow">Comment ça se passe</span>
          <h2 style={{ fontSize: "clamp(2rem,4vw,2.9rem)", margin: ".5rem 0 .7rem" }}>Simple, et sans stress.</h2>
          <p style={{ color: "var(--muted)", fontSize: "1.1rem" }}>
            On sait qu'un ordi qui plante, ça angoisse. Alors on a fait en sorte que tout
            soit clair de bout en bout — trois étapes, et c'est réglé.
          </p>
        </Reveal>
        <div className="process-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "28px 24px" }}>
          {STEPS.map(([t, d], i) => (
            <Reveal key={t} delay={i * 90} className="step-card" style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
              <div className="step-num">{i + 1}</div>
              <div style={{ display: "grid", gap: 7 }}>
                <h3 style={{ fontSize: "1.22rem" }}>{t}</h3>
                <p style={{ color: "var(--muted)", fontSize: "1.02rem" }}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal className="center" delay={120} style={{ marginTop: 44 }}>
          <button className="btn btn-primary btn-lg shine" onClick={onCall}>
            <Icon name="phone" size={18} color="#fff" /> On commence ? Être rappelé gratuitement
          </button>
          <p className="mono" style={{ fontSize: ".78rem", color: "var(--muted)", marginTop: 14 }}>
            Sans engagement · on rappelle le soir même, entre 17h et 22h
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* 2 — TÉMOIGNAGES : la preuve sociale, centrée sur l'humain (patience, zéro jugement) */
const QUOTES = [
  { q: "J'avais un peu honte de poser des questions « bêtes ». En fait il n'y en a pas avec lui — il m'a tout réexpliqué calmement, deux fois s'il le fallait.",
    n: "Monique", d: "71 ans · Hérouville", i: "M" },
  { q: "Ordi planté la veille d'un dossier important. Réglé le soir même, et en plus il m'a montré comment éviter que ça recommence. Un vrai soulagement.",
    n: "Karim", d: "Caen centre", i: "K" },
  { q: "Mon PC gamer monté pièce par pièce, pile dans mon budget. Propre, puissant, et zéro prise de tête. Je recommande les yeux fermés.",
    n: "Théo", d: "Mondeville", i: "T" },
];

function Stars({ color = "var(--accent)" }) {
  return (
    <span className="stars" aria-label="5 sur 5" style={{ color }}>
      {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={17} color={color} />)}
    </span>
  );
}

function Testimonials() {
  return (
    <section className="section" id="avis" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <Reveal style={{ maxWidth: 700, marginBottom: 44, display: "grid", gap: 12 }}>
          <span className="eyebrow">Ils nous ont appelés</span>
          <h2 style={{ fontSize: "clamp(2rem,4vw,2.9rem)" }}>On ne juge jamais.<br />On explique toujours.</h2>
          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <Stars />
            <span style={{ color: "var(--muted)", fontWeight: 600 }}>Ce qui revient le plus : patient, clair, et humain.</span>
          </div>
        </Reveal>
        <div className="quote-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
          {QUOTES.map((c, i) => (
            <Reveal key={c.n} delay={(i % 3) * 90} className="quote-card">
              <Stars />
              <p style={{ fontSize: "1.06rem", lineHeight: 1.55, color: "var(--ink)" }}>« {c.q} »</p>
              <div style={{ display: "flex", alignItems: "center", gap: 13, marginTop: 4 }}>
                <span className="avatar">{c.i}</span>
                <div style={{ lineHeight: 1.25 }}>
                  <div style={{ fontFamily: "Space Grotesk", fontWeight: 700 }}>{c.n}</div>
                  <div className="mono" style={{ fontSize: ".78rem", color: "var(--muted)" }}>{c.d}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* 3 — ENGAGEMENTS : on lève les dernières objections, juste avant de demander le contact */
const VOWS = [
  ["shield", "Diagnostic & devis gratuits", "Tu sais toujours combien ça coûte avant qu'on commence quoi que ce soit."],
  ["chat", "Zéro jargon, zéro jugement", "On parle simplement, à ton rythme. Et on ne te fera jamais sentir « nul »."],
  ["heart", "Satisfait, ou on revient", "Si ce n'est pas réglé, on repasse — sans te recompter le déplacement."],
  ["grad", "On te rend autonome", "Notre but, ce n'est pas que tu rappelles : c'est que tu te débrouilles."],
];

function Engagements({ onCall }) {
  return (
    <section className="section" id="engagements">
      <div className="wrap">
        <Reveal className="center" style={{ maxWidth: 660, margin: "0 auto 46px" }}>
          <span className="eyebrow">Nos engagements</span>
          <h2 style={{ fontSize: "clamp(2rem,4vw,2.9rem)", margin: ".5rem 0 .7rem" }}>Des promesses, tenues à chaque visite</h2>
          <p style={{ color: "var(--muted)", fontSize: "1.1rem" }}>
            Faire appel à quelqu'un pour son informatique, ça demande de la confiance.
            Voilà ce sur quoi tu peux compter, à chaque fois.
          </p>
        </Reveal>
        <div className="vow-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22 }}>
          {VOWS.map(([ic, t, d], i) => (
            <Reveal key={t} delay={(i % 4) * 80} className="vow">
              <div className="ico"><Icon name={ic} size={26} color="var(--brand)" /></div>
              <h3 style={{ fontSize: "1.18rem", marginTop: 4 }}>{t}</h3>
              <p style={{ color: "var(--muted)", fontSize: "1rem" }}>{d}</p>
            </Reveal>
          ))}
        </div>
        <Reveal className="center" delay={120} style={{ marginTop: 46, background: "var(--brand-tint)", border: "1px solid var(--brand-300)", borderRadius: "var(--radius)", padding: "30px 32px", display: "grid", gap: 16, justifyItems: "center" }}>
          <span style={{ fontSize: "1.25rem", fontWeight: 700, fontFamily: "Space Grotesk", color: "var(--brand)", maxWidth: 560 }}>
            Un doute, une question, un truc qui t'embête depuis des semaines ? Parlons-en, c'est gratuit.
          </span>
          <button className="btn btn-primary btn-lg shine" onClick={onCall}>
            <Icon name="phone" size={18} color="#fff" /> Être rappelé gratuitement
          </button>
        </Reveal>
      </div>
    </section>
  );
}

/* 4 — BARRE FLOTTANTE : on garde l'action à portée de main, sans agresser */
function StickyCTA({ onCall, enabled = true }) {
  const [show, setShow] = useState(false);
  const [closed, setClosed] = useState(false);
  useEffect(() => {
    if (!enabled) { setShow(false); return; }
    const onScroll = () => {
      const sc = window.scrollY || document.documentElement.scrollTop || 0;
      const vh = window.innerHeight;
      const past = sc > vh * 0.9;
      const contact = document.getElementById("contact");
      const near = contact ? contact.getBoundingClientRect().top < vh * 0.9 : false;
      setShow(past && !near);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, [enabled]);
  if (!enabled || closed) return null;
  return (
    <div className={"sticky-cta" + (show ? " show" : "")} role="region" aria-label="Être rappelé">
      <div className="wrap sticky-in">
        <div className="sticky-msg">
          <span className="sticky-ico" style={{ flex: "0 0 auto", width: 42, height: 42, borderRadius: 12, background: "var(--brand-tint)", display: "grid", placeItems: "center" }}>
            <Icon name="heart" size={22} color="var(--brand)" />
          </span>
          <div style={{ minWidth: 0 }}>
            <div className="t1">Une question ? On t'écoute, gratuitement.</div>
            <div className="t2">On te rappelle le soir même, sans engagement · 7j/7</div>
          </div>
        </div>
        <div className="sticky-actions">
          <a className="btn btn-ghost sticky-phone" href="tel:+33658665493">
            <Icon name="phone" size={17} color="var(--brand)" /> <span className="sticky-phone-txt">06 58 66 54 93</span>
          </a>
          <button className="btn btn-primary shine" onClick={onCall}>Être rappelé</button>
          <button className="sticky-x" aria-label="Masquer" onClick={() => setClosed(true)}>✕</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Process, Testimonials, Engagements, StickyCTA, Stars });