/* ============================================================================
   KN CLEANING — Hero + bande de confiance
   ============================================================================ */

function Hero() {
  const H = window.KN.hero;
  const go = (id) => (e) => { e.preventDefault(); window.scrollToId(id); };
  // Met en valeur la 2ᵉ partie du titre en bleu, sur une nouvelle ligne
  const renderTitle = () => {
    const w = H.highlight;
    if (!w || !H.title.includes(w)) return H.title;
    const [before, after] = H.title.split(w);
    return (<>{before.trim()}<br /><span className="hl">{w}{after}</span></>);
  };
  const proofIcons = ["home", "sparkles", "zap"];
  return (
    <section className="hero" id="accueil">
      {/* 👉 Photo hero : camionnette KN Cleaning — service à domicile (data.js) */}
      <div className="hero-photo">
        <img src={H.image} alt="Camionnette KN Cleaning stationnée devant une maison — service de nettoyage à domicile partout en Belgique" />
      </div>
      <div className="container hero-inner">
        <div className="hero-copy reveal">
          <span className="hero-eyebrow">{H.eyebrow}</span>
          <h1 className="hero-title">{renderTitle()}</h1>
          <p className="hero-sub">{H.subtitle}</p>
          {H.servicesLine ? <p className="hero-services-line"><Icon name="sparkles" /> {H.servicesLine}</p> : null}

          <div className="hero-proofs">
            {H.proofs.map((p, i) => (
              <span className="proof-chip" key={i}><Icon name={proofIcons[i] || "check"} /> {p}</span>
            ))}
          </div>

          <div className="hero-cta">
            <a className="btn btn-primary" href="#reservation" onClick={go("reservation")}>
              <Icon name="calendar-check" /> Réserver un nettoyage
            </a>
            <a className="btn btn-ghost on-dark" href="#services" onClick={go("services")}>
              Voir nos services <Icon name="arrow-right" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
    { ico: "hand-helping", t: "Lavage à la main", s: "Soin minutieux, sans rayures" },
    { ico: "sparkles", t: "Produits premium", s: "Adaptés à chaque surface" },
    { ico: "map-pin", t: window.KN.contact.zone, s: "Déplacement sur demande" },
    { ico: "calendar-check", t: "Réservation rapide", s: "Site ou WhatsApp en 2 min" },
  ];
  return (
    <div className="trust-strip">
      <div className="container">
        <div className="trust-row">
          {items.map((it, i) => (
            <div className="trust-item reveal" key={i}>
              <span className="ti-ico"><Icon name={it.ico} /></span>
              <span>
                <span className="ti-t" style={{ display: "block" }}>{it.t}</span>
                <span className="ti-s">{it.s}</span>
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, TrustStrip });