/* ============================================================================
   KN CLEANING — Entreprises, Pourquoi nous, Avant/Après, À propos, Avis, FAQ
   ============================================================================ */

function Business() {
  const B = window.KN.business;
  return (
    <section className="section section--dark" id="entreprises">
      <div className="container">
        <div className="biz-grid">
          <div className="reveal">
            <span className="eyebrow on-dark"><Icon name="briefcase" /> Professionnels & flottes</span>
            <h2 className="section-title" style={{ marginTop: "var(--space-3)" }}>{B.title}</h2>
            <p className="lead" style={{ color: "rgba(234,241,251,0.72)", marginTop: "var(--space-4)" }}>{B.text}</p>
            <div className="biz-items">
              {B.items.map((it, i) => (
                <span className="biz-item" key={i}><Icon name="check-circle" /> {it}</span>
              ))}
            </div>
            <a className="btn btn-primary" href={window.waLink("Bonjour KN Cleaning, je représente une entreprise et je souhaite un devis pour plusieurs véhicules / une flotte.")} target="_blank" rel="noopener">
              <Icon name="file-text" /> {B.cta}
            </a>
          </div>

          <div className="biz-visual reveal">
            {/* 👉 Image entreprise : assets/r-side.png */}
            <img src="assets/r-side.png" alt="Véhicule professionnel nettoyé par KN Cleaning" />
            <div className="biz-stat">
              <div className="bs"><div className="bs-n">Flexible</div><div className="bs-l">Nettoyage régulier sur demande</div></div>
              <div className="bs"><div className="bs-n">Sur devis</div><div className="bs-l">Tarif adapté au volume</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Why() {
  const W = window.KN.why;
  return (
    <section className="section" id="pourquoi">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow"><Icon name="award" /> Nos engagements</span>
          <h2 className="section-title">Pourquoi choisir KN Cleaning ?</h2>
          <p className="lead">{W.intro}</p>
        </div>
        <div className="why-grid">
          {W.items.map((it, i) => (
            <article className="why-card reveal" key={i}>
              <span className="why-ico"><Icon name={it.icon} /></span>
              <h4>{it.title}</h4>
              <p>{it.text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Carte vidéo — lecture directe au clic (une seule à la fois) */
function VideoCard({ item }) {
  const ref = useRef(null);
  const [playing, setPlaying] = useState(false);

  const toggle = () => {
    const v = ref.current; if (!v) return;
    if (v.paused) {
      document.querySelectorAll("video.kn-video").forEach((o) => { if (o !== v) o.pause(); });
      v.play();
    } else {
      v.pause();
    }
  };

  return (
    <article className="video-card reveal">
      <div className="video-shell" onClick={toggle}>
        {/* 👉 Vidéo d'intervention (data.js → videos.items) */}
        <video
          ref={ref}
          className="kn-video"
          src={item.src}
          playsInline
          preload="metadata"
          controls={playing}
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
          onEnded={() => setPlaying(false)}
        ></video>
        {!playing ? (
          <div className="video-overlay">
            <span className="video-play"><Icon name="play" /></span>
            <span className="video-label">{item.label}</span>
          </div>
        ) : null}
      </div>
    </article>
  );
}

/* Section dédiée — KN Cleaning en action (4 vidéos) */
function Videos() {
  const V = window.KN.videos;
  return (
    <section className="section section--dark" id="videos">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow on-dark"><Icon name="video" /> En vidéo</span>
          <h2 className="section-title">KN Cleaning en action</h2>
          <p className="lead" style={{ color: "rgba(234,241,251,0.74)" }}>{V.subtitle}</p>
        </div>

        <div className="videos-grid">
          {V.items.map((it, i) => <VideoCard key={i} item={it} />)}
        </div>
      </div>
    </section>
  );
}

/* Galerie "Nos réalisations" — 6 cartes photos premium */
function BeforeAfter() {
  const G = window.KN.gallery;
  return (
    <section className="section section--mist" id="avant-apres">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow"><Icon name="images" /> Nos réalisations</span>
          <h2 className="section-title">Nos réalisations</h2>
          <p className="lead">{G.subtitle}</p>
        </div>

        <div className="real-grid">
          {G.items.map((it, i) => (
            <article className="real-card reveal" key={i}>
              {/* 👉 Photo de réalisation (data.js → gallery.items) */}
              <img src={it.img} alt={it.title} loading="lazy" />
              <div className="real-overlay">
                <h3 className="real-title">{it.title}</h3>
                <p className="real-desc">{it.text}</p>
              </div>
            </article>
          ))}
        </div>

        <div className="real-cta reveal">
          <button className="btn btn-primary" onClick={() => window.prefillBooking({ note: "Je souhaite un résultat comme vos réalisations." })}>
            <Icon name="sparkles" /> Demander un résultat comme celui-ci
          </button>
        </div>
      </div>
    </section>
  );
}

function About() {
  const A = window.KN.about;
  return (
    <section className="section" id="apropos">
      <div className="container">
        <div className="about-grid">
          <div className="about-visual reveal">
            {/* 👉 Visuel à propos : assets/r-interieur.png */}
            <img src="assets/r-interieur.png" alt="Intérieur premium nettoyé par KN Cleaning" />
          </div>
          <div className="reveal">
            <span className="about-logo">
              <img src="assets/logo-kn.png" alt="KN Cleaning" />
            </span>
            <span className="eyebrow" style={{ display: "block", marginBottom: "var(--space-3)" }}><Icon name="info" /> À propos</span>
            <h2 className="section-title">Un vrai soin pour votre véhicule</h2>
            <p className="lead" style={{ marginTop: "var(--space-4)" }}>{A.text}</p>
            <blockquote className="about-statement">{A.statement}</blockquote>
          </div>
        </div>
      </div>
    </section>
  );
}

function Reviews() {
  const R = window.KN.reviews;
  return (
    <section className="section section--mist" id="avis">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow"><Icon name="star" /> Avis clients</span>
          <h2 className="section-title">Ils nous font confiance</h2>
          <p className="lead">Des clients satisfaits, un résultat propre et professionnel à chaque passage.</p>
        </div>
        <div className="reviews-grid">
          {R.map((r, i) => (
            <article className="review-card reveal" key={i}>
              <div className="review-stars">
                {Array.from({ length: r.stars }).map((_, k) => <Icon key={k} name="star" />)}
              </div>
              <p className="review-text">« {r.text} »</p>
              <div className="review-meta">
                <span className="review-avatar">{(r.name || "?").charAt(0)}</span>
                <span>
                  <span className="rm-n" style={{ display: "block" }}>{r.name}</span>
                  <span className="rm-c">{r.car}</span>
                </span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const list = window.KN.faq;
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow"><Icon name="help-circle" /> Questions fréquentes</span>
          <h2 className="section-title">Tout ce qu'il faut savoir</h2>
        </div>
        <div className="faq-list">
          {list.map((f, i) => {
            const isOpen = open === i;
            return (
              <div className={"faq-item reveal" + (isOpen ? " open" : "")} key={i}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{f.q}</span>
                  <span className="faq-ico"><Icon name="plus" /></span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? "320px" : "0" }}>
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* Section dédiée — Polissage carrosserie (avant/après + tarif) */
function Polish() {
  const P = window.KN.polish;
  const [split, setSplit] = useState(52);
  const stageRef = useRef(null);
  const dragging = useRef(false);

  const setFromX = (clientX) => {
    const el = stageRef.current; if (!el) return;
    const r = el.getBoundingClientRect();
    let pct = ((clientX - r.left) / r.width) * 100;
    setSplit(Math.max(3, Math.min(97, pct)));
  };
  useEffect(() => {
    const move = (e) => { if (dragging.current) { if (e.cancelable && e.touches) e.preventDefault(); setFromX(e.touches ? e.touches[0].clientX : e.clientX); } };
    const up = () => { dragging.current = false; };
    window.addEventListener("mousemove", move);
    window.addEventListener("touchmove", move, { passive: false });
    window.addEventListener("mouseup", up);
    window.addEventListener("touchend", up);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("touchmove", move);
      window.removeEventListener("mouseup", up);
      window.removeEventListener("touchend", up);
    };
  }, []);

  return (
    <section className="section section--dark" id="polissage">
      <div className="container">
        <div className="polish-grid">
          <div className="reveal">
            <span className="eyebrow on-dark"><Icon name="sun" /> {P.eyebrow}</span>
            <h2 className="section-title" style={{ marginTop: "var(--space-3)" }}>{P.title}</h2>
            <p className="lead" style={{ color: "rgba(234,241,251,0.74)", marginTop: "var(--space-4)" }}>{P.text}</p>

            <ul className="polish-points">
              {P.points.map((pt, i) => (
                <li key={i}><span className="pp-ico"><Icon name={pt.icon} /></span> {pt.t}</li>
              ))}
            </ul>

            <div className="polish-price">
              {/* 👉 Tarif modifiable dans data.js (polish.price) */}
              <div className="pprice-row"><Icon name="badge-check" /> <span>Polissage carrosserie</span></div>
              <div className="pprice-row pprice-amount"><Icon name="sparkles" /> <span>{P.price}</span></div>
            </div>

            <div className="polish-cta">
              <button className="btn btn-primary" onClick={() => window.prefillBooking({ service: "Polissage carrosserie", note: "Demande de devis : Polissage carrosserie." })}>
                <Icon name="file-text" /> Demander un devis polissage
              </button>
              <a className="btn btn-wa" href={window.waLink("Bonjour KN Cleaning, je souhaite un devis pour un polissage carrosserie.")} target="_blank" rel="noopener">
                <WhatsAppGlyph style={{ width: 18, height: 18 }} /> Réserver via WhatsApp
              </a>
            </div>
          </div>

          <div className="reveal">
            <div className="polish-ba" ref={stageRef} style={{ "--split": split + "%" }}
                 onMouseDown={(e) => { dragging.current = true; setFromX(e.clientX); }}
                 onTouchStart={(e) => { dragging.current = true; setFromX(e.touches[0].clientX); }}>
              {/* 👉 Images avant / après (data.js → polish.before / polish.after) */}
              <img className="ba-img" src={P.after} alt="Carrosserie après polissage — effet miroir" draggable="false" />
              <img className="ba-img ba-before-img" src={P.before} alt="Carrosserie avant polissage" draggable="false"
                   style={{ clipPath: `inset(0 ${100 - split}% 0 0)` }} />
              <span className="ba-tagline tag-before">Avant</span>
              <span className="ba-tagline tag-after">Après</span>
              <div className="ba-divider" style={{ left: split + "%" }}></div>
              <div className="ba-handle" style={{ left: split + "%" }}><Icon name="chevrons-left-right" /></div>
            </div>
            <p className="polish-hint"><Icon name="move-horizontal" /> Faites glisser pour comparer avant / après</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Business, Why, Polish, BeforeAfter, Videos, About, Reviews, FAQ });