/* ============================================================
   EHBT BATIPRO — App
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;

/* ---------- Image library (Unsplash, façades & chantiers) ---------- */
const IMG = {
  hero: "media/img1.webp",
  whyVisual: "media/XVIIIe.JPEG",
  about1: "media/Entreprise1.jpg",
  about2: "media/Entreprise2.jpg",
  baBefore: "media/avant.jpg",
  baAfter: "media/apres.jpg",
  baBefore2: "https://images.unsplash.com/photo-1518780664697-55e3ad937233?auto=format&fit=crop&w=2000&q=80",
  baAfter2: "https://images.unsplash.com/photo-1577495508048-b635879837f1?auto=format&fit=crop&w=2000&q=80",
  baBefore3: "https://images.unsplash.com/photo-1551503766-ac63dfa6401c?auto=format&fit=crop&w=2000&q=80",
  baAfter3: "https://images.unsplash.com/photo-1602343168117-bb8ffe3e2e9f?auto=format&fit=crop&w=2000&q=80",
  gal: [
    "media/ravalement.jpg",
    "media/rejointement.jpg",
    "media/enduit.jpg",
    "media/ite.JPEG",
    "media/apres.jpg",
    "media/XVIIIe.JPEG",
    "media/nettoyagepeinture.png",
    "media/toiture.png",
  ],
};

/* ---------- Icons (line, stroked) ---------- */
const Icon = ({ name, ...p }) => {
  const s = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    trowel: <g {...s}><path d="M3 21l5-5"/><path d="M8 16l5-5 4 4-5 5-4-4z"/><path d="M14 10l3-3 4 4-3 3"/></g>,
    stones: <g {...s}><rect x="3" y="12" width="6" height="5" rx="1"/><rect x="9.5" y="12" width="5" height="5" rx="1"/><rect x="15" y="12" width="6" height="5" rx="1"/><rect x="5" y="7" width="5" height="5" rx="1"/><rect x="10.5" y="7" width="7" height="5" rx="1"/><rect x="7" y="2.5" width="5" height="4.5" rx="1"/><rect x="12.5" y="2.5" width="6" height="4.5" rx="1"/></g>,
    brush: <g {...s}><path d="M9 14l-4 4a2 2 0 102.8 2.8L12 17"/><path d="M21 3l-9 9 3 3 9-9-3-3z"/><path d="M14 6l4 4"/></g>,
    shield: <g {...s}><path d="M12 3l8 3v5c0 5-3.4 9.2-8 10-4.6-.8-8-5-8-10V6l8-3z"/><path d="M9 12l2 2 4-4"/></g>,
    wall: <g {...s}><rect x="3" y="4" width="18" height="16" rx="1"/><path d="M3 9h18M3 14h18M3 19h18"/><path d="M8 4v5M16 4v5M11 9v5M7 14v5M14 14v5"/></g>,
    drop: <g {...s}><path d="M12 3s7 7 7 12a7 7 0 11-14 0c0-5 7-12 7-12z"/><path d="M9 14a3 3 0 003 3"/></g>,
    arrow: <g {...s}><path d="M5 12h14M13 5l7 7-7 7"/></g>,
    arrowOut: <g {...s}><path d="M7 17L17 7M8 7h9v9"/></g>,
    plus: <g {...s}><path d="M12 5v14M5 12h14"/></g>,
    menu: <g {...s}><path d="M4 7h16M4 17h16"/></g>,
    close: <g {...s}><path d="M6 6l12 12M18 6L6 18"/></g>,
    phone: <g {...s}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></g>,
    check: <g {...s}><path d="M5 13l4 4L19 7"/></g>,
    drag: <g {...s}><path d="M8 7l-4 5 4 5M16 7l4 5-4 5"/></g>,
    chevL: <g {...s}><path d="M15 6l-6 6 6 6"/></g>,
    chevR: <g {...s}><path d="M9 6l6 6-6 6"/></g>,
    pin: <g {...s}><path d="M12 22s7-7 7-13a7 7 0 10-14 0c0 6 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></g>,
    mail: <g {...s}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></g>,
    clock: <g {...s}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></g>,
    star: <g {...s}><path d="M12 3l2.6 5.5 6.1.9-4.4 4.3 1 6.1L12 17l-5.3 2.8 1-6.1L3.3 9.4l6.1-.9L12 3z"/></g>,
    sparkle: <g {...s}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.5 5.5l4 4M14.5 14.5l4 4M18.5 5.5l-4 4M9.5 14.5l-4 4"/></g>,
  };
  return <svg viewBox="0 0 24 24" {...p}>{paths[name]}</svg>;
};

/* ---------- Reveal-on-scroll ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -10% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ============================================================
   HEADER
   ============================================================ */
function Header({ onCta, mobileOpen, setMobileOpen }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`site-header ${scrolled ? "scrolled" : ""}`}>
      <div className="wrap header-inner">
        <a href="#top" className="logo" aria-label="EHBT Batipro">
          <span className="logo-img-wrap">
            <img src="media/ehbt-logo.png" alt="EHBT Batipro" className="logo-img" />
          </span>
        </a>

        <nav className="nav-desktop">
          <a className="nav-link" href="#accueil">Accueil</a>
          <a className="nav-link" href="#services">Services</a>
          <a className="nav-link" href="#realisations">Réalisations</a>
          <a className="nav-link" href="#about">L'entreprise</a>
          <a className="nav-link" href="#contact">Contact</a>
        </nav>

        <div className="header-right">
          <div className="desktop-only">
            <a href="tel:+33767564423" className="phone-pill">
              <Icon name="phone" width="14" height="14" />
              07 67 56 44 23
            </a>
            <button className="btn btn-primary" onClick={onCta}>
              Devis gratuit
              <Icon name="arrow" className="arrow" />
            </button>
          </div>
          <button className="menu-btn" onClick={() => setMobileOpen(true)} aria-label="Menu">
            <Icon name="menu" />
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ open, onClose, onCta }) {
  const items = [
    { l: "Accueil", h: "#accueil", n: "01" },
    { l: "Nos expertises", h: "#services", n: "02" },
    { l: "Réalisations", h: "#realisations", n: "03" },
    { l: "L'entreprise", h: "#about", n: "04" },
    { l: "Contact", h: "#contact", n: "05" },
  ];
  return (
    <div className={`mobile-menu ${open ? "open" : ""}`}>
      <div className="mobile-menu-head">
        <a className="logo" onClick={onClose} href="#top">
          <span className="logo-img-wrap">
            <img src="media/ehbt-logo.png" alt="EHBT Batipro" className="logo-img" />
          </span>
        </a>
        <button className="menu-btn" style={{ color: "var(--off-white)" }} onClick={onClose} aria-label="Fermer">
          <Icon name="close" />
        </button>
      </div>
      <nav>
        {items.map((it) => (
          <a key={it.h} href={it.h} onClick={onClose}>
            {it.l}<span>{it.n}</span>
          </a>
        ))}
      </nav>
      <div className="mobile-menu-foot">
        <a href="tel:+33767564423" className="btn btn-ghost" style={{ justifyContent: "center" }}>
          <Icon name="phone" width="16" height="16" /> 07 67 56 44 23
        </a>
        <button className="btn btn-primary" onClick={() => { onClose(); onCta(); }} style={{ justifyContent: "center" }}>
          Devis gratuit <Icon name="arrow" className="arrow" />
        </button>
      </div>
    </div>
  );
}

/* ============================================================
   HERO
   ============================================================ */
function Hero({ onCta }) {
  return (
    <section className="hero" id="accueil">
      <div className="hero-bg" style={{ backgroundImage: `url(${IMG.hero})` }} />

      <div className="scroll-cue">Scroll · Découvrir</div>

      <div className="wrap hero-content">
        <span className="badge">
          <span className="dot" /> Experts en façades depuis + de 10 ans
        </span>

        <h1>
          Façades <span className="accent">sublimées</span>,<br />
          expertise <span className="stroke">affirmée.</span>
        </h1>

        <p className="hero-sub">
          Ravalement, enduits traditionnels, restauration du bâti ancien. Nous redonnons vie à vos
          façades avec savoir-faire et exigence, dans tout le Loir-et-Cher.
        </p>

        <div className="hero-ctas">
          <button className="btn btn-primary btn-lg" onClick={onCta}>
            Demander un devis gratuit
            <Icon name="arrow" className="arrow" />
          </button>
          <a className="btn btn-ghost btn-lg" href="#realisations">
            Voir nos réalisations
          </a>
        </div>
      </div>

      <div className="hero-strip">
        <div className="wrap hero-strip-inner">
          <div className="hero-stat">
            <div className="num">10<span className="plus">+</span></div>
            <div className="lbl">Années d'expérience</div>
          </div>
          <div className="hero-stat">
            <div className="num">240<span className="plus">+</span></div>
            <div className="lbl">Chantiers livrés</div>
          </div>
          <div className="hero-stat">
            <div className="num">100<span className="plus">%</span></div>
            <div className="lbl">Garantie décennale</div>
          </div>
          <div className="hero-stat">
            <div className="num">5<span className="plus">/5</span></div>
            <div className="lbl">Avis Google clients</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SERVICES
   ============================================================ */
const SERVICES = [
  {
    n: "01",
    icon: "trowel",
    title: "Ravalement de façade",
    desc: "Nettoyage, traitement, enduits & finitions pour redonner éclat et protection à vos murs.",
    tag: "Crépis · Hydrofuge",
  },
  {
    n: "02",
    icon: "stones",
    title: "Rejointement de pierre",
    desc: "Reprise des joints à la chaux dans le respect des techniques traditionnelles du bâti ancien.",
    tag: "Chaux · Patrimoine",
  },
  {
    n: "03",
    icon: "brush",
    title: "Peinture façade",
    desc: "Peintures pliolite et siloxane haute durabilité, choisies avec vous pour un rendu sur-mesure.",
    tag: "Siloxane · Pliolite",
  },
  {
    n: "04",
    icon: "shield",
    title: "Isolation thermique ITE",
    desc: "Isolation par l'extérieur, jusqu'à 30 % d'économies d'énergie et un vrai gain de confort toute l'année.",
    tag: "Performance · Confort",
  },
  {
    n: "05",
    icon: "wall",
    title: "Maçonnerie traditionnelle",
    desc: "Reprise de fissures, ouvertures, encadrements de pierre et travaux de gros œuvre artisanaux.",
    tag: "Pierre · Brique",
  },
  {
    n: "06",
    icon: "drop",
    title: "Nettoyage toiture",
    desc: "Démoussage, traitement hydrofuge et application d'un revêtement protecteur longue durée.",
    tag: "Démoussage · Anti-mousse",
  },
];

function Services() {
  return (
    <section className="services section-pad" id="services">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">02 · Nos expertises</div>
            <h2>Un métier complet,<br /><span className="ital">une exigence unique.</span></h2>
          </div>
          <p className="lead">
            De la simple remise en peinture à la restauration complète d'un bâti ancien. Nous
            maîtrisons l'ensemble des techniques de façade, anciennes comme contemporaines.
          </p>
        </div>
      </div>

      <div className="services-grid reveal">
        {SERVICES.map((s) => (
          <article className="service-card" key={s.n}>
            <div className="service-head">
              <span className="service-num">{s.n} / 06</span>
              <span className="service-icon"><Icon name={s.icon} /></span>
            </div>
            <h3>{s.title}</h3>
            <p>{s.desc}</p>
            <div className="service-foot">
              <span className="service-tag">{s.tag}</span>
              <span className="service-arrow"><Icon name="arrowOut" width="16" height="16" /></span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   WHY US — Accordion list + visual
   ============================================================ */
const WHY = [
  {
    n: "01",
    h: "Plus de 10 ans d'expérience",
    p: "Une équipe artisanale rodée, formée aux techniques anciennes comme aux dernières finitions contemporaines.",
  },
  {
    n: "02",
    h: "Respect du bâti ancien",
    p: "Chaux naturelle, joints traditionnels, pierre apparente. Nous préservons le caractère de votre patrimoine.",
  },
  {
    n: "03",
    h: "Protection durable",
    p: "Traitement hydrofuge, reprise des fissures, isolation thermique : votre façade gagne en performance et en longévité.",
  },
  {
    n: "04",
    h: "Finitions soignées",
    p: "Le détail fait la différence : encadrements nets, raccords invisibles, surfaces régulières, chantier propre.",
  },
  {
    n: "05",
    h: "Engagement local",
    p: "Entreprise familiale basée à Onzain, nous intervenons dans tout le Loir-et-Cher avec une vraie relation de proximité.",
  },
];

function Why() {
  const [active, setActive] = useState(0);
  return (
    <section className="why section-pad">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">03 · Pourquoi nous choisir</div>
            <h2>L'artisanat,<br /><span className="ital">sans compromis.</span></h2>
          </div>
          <p className="lead">
            Cinq raisons qui font la différence sur chacun de nos chantiers. Du diagnostic initial
            à la livraison finale.
          </p>
        </div>

        <div className="why-grid">
          <div className="why-list reveal">
            {WHY.map((w, i) => (
              <div
                key={w.n}
                className={`why-item ${active === i ? "active" : ""}`}
                onMouseEnter={() => setActive(i)}
                onClick={() => setActive(i)}
              >
                <span className="n">{w.n}</span>
                <div>
                  <h3>{w.h}</h3>
                  <p>{w.p}</p>
                </div>
                <span className="ico"><Icon name="plus" width="16" height="16" /></span>
              </div>
            ))}
          </div>

          <div className="why-visual reveal" style={{ backgroundImage: `url(${IMG.whyVisual})` }}>
            <div className="badge-corner">
              <strong>10<small style={{ fontSize: 14, marginLeft: 2 }}>ans</small></strong>
              Garantie décennale
            </div>
            <div className="marker">
              <div>
                <div className="lbl">Chantier · Blois centre</div>
                <div className="ttl">Restauration d'une demeure du XVIIIe</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ABOUT
   ============================================================ */
function About() {
  return (
    <section className="about section-pad" id="about">
      <div className="wrap about-grid">
        <div className="about-visual-stack reveal">
          <div className="about-img about-img-1" style={{ backgroundImage: `url(${IMG.about1})` }} />
          <div className="about-img about-img-2" style={{ backgroundImage: `url(${IMG.about2})` }} />
          <div className="about-stamp" aria-hidden="true">
            <svg viewBox="0 0 140 140">
              <defs>
                <path id="circ" d="M 70,70 m -56,0 a 56,56 0 1,1 112,0 a 56,56 0 1,1 -112,0" />
              </defs>
              <text fill="white" fontSize="10" fontFamily="JetBrains Mono" letterSpacing="2">
                <textPath href="#circ">EHBT BATIPRO · ONZAIN · LOIR-ET-CHER · DEPUIS 2014 · </textPath>
              </text>
            </svg>
            <div className="inner">
              <strong>10+</strong>
              ans
            </div>
          </div>
        </div>

        <div className="about-text reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}>
            <span style={{ display: "inline-block", width: 28, height: 1, background: "var(--orange)", marginRight: 12, verticalAlign: "middle" }} />
            04 · Qui sommes-nous
          </div>
          <h2>Une entreprise familiale,<br /><span className="ital">enracinée à Onzain.</span></h2>
          <p>
            Chez EHBT BATIPRO, on est une entreprise familiale passionnée par la rénovation de façade
            et le travail bien fait. Basés à Blois, nous intervenons dans le Loir-et-Cher (41) pour
            le ravalement de façade, le traitement des fissures, les enduits à la chaux,
            l'imperméabilisation et l'ITE.
          </p>
          <p>
            Chaque chantier est étudié avec sérieux pour proposer une solution durable, adaptée à
            votre façade et à votre bâtiment. Notre priorité : un travail propre, honnête et soigné,
            avec un vrai accompagnement du début à la fin.
          </p>


          <div className="about-meta">
            <div className="about-meta-item">
              <div className="k">Siège</div>
              <div className="v">Onzain <small>(41)</small></div>
            </div>
            <div className="about-meta-item">
              <div className="k">Zone d'intervention</div>
              <div className="v">Loir-et-Cher</div>
            </div>
            <div className="about-meta-item">
              <div className="k">Assurance</div>
              <div className="v">Décennale</div>
            </div>
            <div className="about-meta-item">
              <div className="k">Garantie</div>
              <div className="v">Décennale</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
const BA_PROJECTS = [
  {
    place: "Longère · Amboise",
    title: "Rejointement complet & enduit à la chaux",
    before: IMG.baBefore,
    after: IMG.baAfter,
  },
  {
    place: "Longère · Vendôme",
    title: "Rejointement pierre & restauration patrimoniale",
    before: IMG.baBefore2,
    after: IMG.baAfter2,
  },
  {
    place: "Pavillon · Romorantin",
    title: "Isolation thermique extérieure & finition siloxane",
    before: IMG.baBefore3,
    after: IMG.baAfter3,
  },
];

function BeforeAfter() {
  const [pos, setPos] = useState(50);
  const wrapRef = useRef(null);
  const draggingRef = useRef(false);

  const updateFromEvent = useCallback((clientX) => {
    const el = wrapRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
    setPos(ratio * 100);
  }, []);

  useEffect(() => {
    const onMove = (e) => {
      if (!draggingRef.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      updateFromEvent(x);
    };
    const onUp = () => { draggingRef.current = false; };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("touchmove", onMove, { passive: false });
    window.addEventListener("mouseup", onUp);
    window.addEventListener("touchend", onUp);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchend", onUp);
    };
  }, [updateFromEvent]);

  const startDrag = (e) => {
    draggingRef.current = true;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    updateFromEvent(x);
  };

  const project = BA_PROJECTS[0];

  return (
    <div
      className="ba-wrap"
      ref={wrapRef}
      onMouseDown={startDrag}
      onTouchStart={startDrag}
    >
      <div className="ba-layer before" style={{ backgroundImage: `url(${project.before})` }} />
      <div className="ba-layer after" style={{ backgroundImage: `url(${project.after})`, clipPath: `inset(0 0 0 ${pos}%)` }} />

      <div className="ba-label before">Avant</div>
      <div className="ba-label after">Après</div>

      <div className="ba-handle" style={{ left: `${pos}%` }}>
        <div className="ba-knob" aria-label="Glisser pour comparer">
          <Icon name="drag" />
        </div>
      </div>

      <div className="ba-caption">
        <div className="left">
          <div className="place">{project.place}</div>
          <div className="title">{project.title}</div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   REALISATIONS — Gallery
   ============================================================ */
const GAL_ITEMS = [
  { cls: "gal-a", place: "Blois", name: "Ravalement de façade", tag: "Ravalement", cat: "Ravalement", i: 0 },
  { cls: "gal-b", place: "Blois · Centre", name: "Rejointement de pierre", tag: "Rejointement", cat: "Pierre", i: 1 },
  { cls: "gal-c", place: "Bléré", name: "Enduit taloché", tag: "Enduit", cat: "Ravalement", i: 2 },
  { cls: "gal-d", place: "Tours", name: "Isolation thermique ITE", tag: "ITE", cat: "ITE", i: 3 },
  { cls: "gal-e", place: "Amboise", name: "Façade après travaux", tag: "Restauration", cat: "Restauration", i: 4 },
  { cls: "gal-f", place: "Niort", name: "Restauration bâti ancien", tag: "Restauration", cat: "Restauration", i: 5 },
  { cls: "gal-g", place: "Loches", name: "Nettoyage & peinture", tag: "Peinture", cat: "Ravalement", i: 6 },
  { cls: "gal-h", place: "Blois", name: "Nettoyage toiture", tag: "Toiture", cat: "Toiture", i: 7 },
];

const FILTERS = ["Tous", "Ravalement", "Pierre", "ITE", "Restauration", "Toiture"];

function Realisations() {
  const [filter, setFilter] = useState("Tous");
  const [galVisible, setGalVisible] = useState(false);
  const galRef = useRef(null);
  const filtered = filter === "Tous" ? GAL_ITEMS : GAL_ITEMS.filter(g => g.cat === filter);
  const isFiltered = filter !== "Tous";

  useEffect(() => {
    if (!galRef.current || galVisible) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setGalVisible(true); io.disconnect(); }
    }, { threshold: 0.05 });
    io.observe(galRef.current);
    return () => io.disconnect();
  }, [galVisible]);

  return (
    <section className="realisations section-pad" id="realisations">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">05 · Réalisations</div>
            <h2>Avant / après -<br /><span className="ital">le geste qui transforme.</span></h2>
          </div>
          <div className="real-tabs">
            {FILTERS.map((f) => (
              <button
                key={f}
                className={`real-tab ${filter === f ? "active" : ""}`}
                onClick={() => setFilter(f)}
              >
                {f}
              </button>
            ))}
          </div>
        </div>

        <div className="reveal">
          <BeforeAfter />
        </div>

        <div ref={galRef} className={`gallery${isFiltered ? " gallery-filtered" : ""}${galVisible ? " in" : ""} reveal`}>
          {filtered.map((g) => (
            <div
              key={g.cls}
              className={`gal-item${isFiltered ? "" : " " + g.cls}`}
              style={{ backgroundImage: `url(${IMG.gal[g.i]})` }}
            >
              <span className="tag">{g.tag}</span>
              <div className="meta">
                <div className="place">{g.place}</div>
                <div className="name">{g.name}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PROCESS — Four steps
   ============================================================ */
function Process() {
  const steps = [
    { n: "01", h: "Diagnostic gratuit", p: "Visite sur site, état des lieux de la façade, conseils techniques et estimation budgétaire." },
    { n: "02", h: "Devis détaillé", p: "Proposition transparente, choix des matériaux, planning précis et accompagnement personnalisé sur les aides disponibles." },
    { n: "03", h: "Chantier soigné", p: "Préparation, application, finitions. Un chantier propre, sécurisé et respectueux du voisinage." },
    { n: "04", h: "Livraison & garantie", p: "Réception du chantier, livret d'entretien et garantie décennale sur l'ensemble des travaux." },
  ];
  return (
    <section className="process section-pad">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">06 · Notre méthode</div>
            <h2>De la première visite<br /><span className="ital">à la dernière touche.</span></h2>
          </div>
          <p className="lead">
            Une démarche structurée en quatre temps. Pour que chaque projet avance avec clarté,
            sérénité et un budget maîtrisé.
          </p>
        </div>

        <div className="process-grid reveal">
          <div className="process-line" />
          {steps.map((st) => (
            <div className="proc-item" key={st.n}>
              <div className="circle">{st.n}</div>
              <h4>{st.h}</h4>
              <p>{st.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TRUST BAR
   ============================================================ */
function TrustBar() {
  return (
    <div className="trust-bar">
      <div className="wrap trust-inner">
        <div className="trust-stat">
          <div className="v">240<sup>+</sup></div>
          <div className="l">Façades rénovées en Loir-et-Cher</div>
        </div>
        <div className="trust-stat">
          <div className="v">10<sup>ans</sup></div>
          <div className="l">Au service du patrimoine</div>
        </div>
        <div className="trust-stat">
          <div className="v">5.0<sup>★</sup></div>
          <div className="l">Note moyenne Google · 6 avis</div>
        </div>
        <div className="trust-stat">
          <div className="v" style={{ fontSize: 28, letterSpacing: "-0.01em" }}>Décennale</div>
          <div className="l">Couverture incluse sur tous nos chantiers</div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   CONTACT — Final CTA + form
   ============================================================ */
const SERVICE_OPTIONS = ["Ravalement", "Rejointement", "Peinture", "ITE", "Maçonnerie", "Toiture"];

function Contact({ formRef }) {
  const [chosen, setChosen] = useState(["Ravalement"]);
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);

  const toggle = (s) => {
    setChosen((c) => c.includes(s) ? c.filter((x) => x !== s) : [...c, s]);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    const data = new FormData(e.target);
    data.append("travaux", chosen.join(", "));
    try {
      const res = await fetch("https://formspree.io/f/mredqpzq", {
        method: "POST",
        body: data,
        headers: { Accept: "application/json" },
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        setError("Une erreur est survenue. Veuillez réessayer ou nous appeler directement.");
      }
    } catch {
      setError("Une erreur est survenue. Veuillez réessayer ou nous appeler directement.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="contact section-pad" id="contact" ref={formRef}>
      <div className="wrap contact-grid">
        <div className="reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}>
            <span style={{ display: "inline-block", width: 28, height: 1, background: "var(--orange)", marginRight: 12, verticalAlign: "middle" }} />
            07 · Contact
          </div>
          <h2>Prêt à redonner vie<br /><span className="ital">à votre façade ?</span></h2>
          <p className="lead">
            Contactez-nous pour un diagnostic gratuit et un devis personnalisé. Notre équipe vous
            accompagne de A à Z.
          </p>

          <div className="contact-meta">
            <div className="contact-meta-row">
              <span className="k"><Icon name="phone" width="13" height="13" style={{ marginRight: 8, verticalAlign: "middle" }} />Téléphone</span>
              <span className="v">07 67 56 44 23</span>
            </div>
            <div className="contact-meta-row">
              <span className="k"><Icon name="mail" width="13" height="13" style={{ marginRight: 8, verticalAlign: "middle" }} />Email</span>
              <span className="v">ehbtbatipro@gmail.com</span>
            </div>
            <div className="contact-meta-row">
              <span className="k"><Icon name="pin" width="13" height="13" style={{ marginRight: 8, verticalAlign: "middle" }} />Adresse</span>
              <span className="v">26 rue du Stade · 41150 Onzain</span>
            </div>
            <div className="contact-meta-row">
              <span className="k"><Icon name="clock" width="13" height="13" style={{ marginRight: 8, verticalAlign: "middle" }} />Horaires</span>
              <span className="v">Lun. – Ven. 8h – 18h · Sam. sur rendez-vous</span>
            </div>
          </div>
        </div>

        <form className="devis-form reveal" onSubmit={onSubmit}>
          {!submitted ? (
            <React.Fragment>
              <div className="form-head">
                <h3>Demande de devis</h3>
                <span className="step">Réponse sous 24h</span>
              </div>

              <div className="form-row">
                <div className="field">
                  <label>Prénom *</label>
                  <input type="text" name="prénom" required placeholder="Marie" />
                </div>
                <div className="field">
                  <label>Nom *</label>
                  <input type="text" name="nom" required placeholder="Durand" />
                </div>
              </div>

              <div className="form-row">
                <div className="field">
                  <label>Email *</label>
                  <input type="email" name="email" required placeholder="marie.durand@email.fr" />
                </div>
                <div className="field">
                  <label>Téléphone *</label>
                  <input type="tel" name="téléphone" required placeholder="06 00 00 00 00" />
                </div>
              </div>

              <div className="field">
                <label>Commune du chantier</label>
                <input type="text" name="commune" placeholder="Blois, Vendôme, Romorantin…" />
              </div>

              <div className="field" style={{ borderBottom: "none" }}>
                <label>Type de travaux (cochez plusieurs si besoin)</label>
                <div className="chips">
                  {SERVICE_OPTIONS.map((s) => (
                    <button
                      type="button"
                      key={s}
                      className={`chip ${chosen.includes(s) ? "active" : ""}`}
                      onClick={() => toggle(s)}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Description du projet</label>
                <textarea rows="3" name="description" placeholder="Surface, état actuel, contraintes, délais…" />
              </div>

              <div className="form-foot">
                <label className="consent">
                  <input type="checkbox" required />
                  <span>J'accepte que mes informations soient utilisées pour me recontacter au sujet de ma demande de devis.</span>
                </label>
                {error && <p style={{ color: "var(--orange)", fontSize: 13, margin: 0 }}>{error}</p>}
                <button className="btn btn-primary form-submit" type="submit" disabled={sending}>
                  {sending ? "Envoi en cours…" : <>Envoyer ma demande <Icon name="arrow" className="arrow" /></>}
                </button>
              </div>
            </React.Fragment>
          ) : (
            <div className="form-success">
              <div className="ok"><Icon name="check" /></div>
              <h3>Merci, votre demande est envoyée.</h3>
              <p>Nous revenons vers vous sous 24h ouvrées avec une première proposition et un créneau pour le diagnostic gratuit.</p>
              <button className="btn btn-outline" style={{ borderColor: "var(--off-white)", color: "var(--off-white)" }} type="button" onClick={() => setSubmitted(false)}>
                Envoyer une autre demande
              </button>
            </div>
          )}
        </form>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <a href="#top" className="logo">
              <span className="logo-img-wrap">
                <img src="media/ehbt-logo.png" alt="EHBT Batipro" className="logo-img" />
              </span>
            </a>
            <div className="tagline">Façades sublimées,<br />expertise affirmée.</div>
            <p style={{ fontSize: 13, lineHeight: 1.6, maxWidth: "36ch", margin: 0 }}>
              Entreprise familiale spécialisée dans le ravalement de façade et la restauration du
              bâti ancien, basée à Onzain et intervenant dans tout le Loir-et-Cher.
            </p>
          </div>

          <div>
            <h5>Services</h5>
            <ul>
              <li><a href="#services">Ravalement</a></li>
              <li><a href="#services">Rejointement</a></li>
              <li><a href="#services">Peinture façade</a></li>
              <li><a href="#services">Isolation ITE</a></li>
              <li><a href="#services">Maçonnerie</a></li>
              <li><a href="#services">Nettoyage toiture</a></li>
            </ul>
          </div>

          <div>
            <h5>Entreprise</h5>
            <ul>
              <li><a href="#about">Qui sommes-nous</a></li>
              <li><a href="#realisations">Réalisations</a></li>
              <li><a href="#contact">Devis gratuit</a></li>
              <li><a href="#">Mentions légales</a></li>
              <li><a href="#">Politique de confidentialité</a></li>
            </ul>
          </div>

          <div>
            <h5>Contact</h5>
            <ul>
              <li>26 rue du Stade</li>
              <li>41150 Onzain</li>
              <li><a href="tel:+33767564423">07 67 56 44 23</a></li>
              <li><a href="mailto:ehbtbatipro@gmail.com">ehbtbatipro@gmail.com</a></li>
            </ul>
          </div>
        </div>

        <div className="legal">
          <div>© 2026 EHBT Batipro · SIRET 987 786 118 00016</div>
          <div>Onzain · Loir-et-Cher · France</div>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   APP
   ============================================================ */
function App() {
  useReveal();
  const [mobileOpen, setMobileOpen] = useState(false);
  const formRef = useRef(null);

  const scrollToForm = useCallback(() => {
    const el = document.getElementById("contact");
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: "smooth" });
    }
  }, []);

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
  }, [mobileOpen]);

  return (
    <div id="top">
      <Header onCta={scrollToForm} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />
      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} onCta={scrollToForm} />

      <main>
        <Hero onCta={scrollToForm} />
        <Services />
        <Why />
        <About />
        <Realisations />
        <Process />
        <TrustBar />
        <Contact formRef={formRef} />
      </main>

      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);