/* === HOME · Rotating hero + Compat finder + Families inside · Conrad CTA · Factory === */

const HERO_SLIDES = [
{
  kind: "catalog",
  eyebrow: <>Edizione <span className="accent">01 / 2026</span></>,
  title: { line1: "Sistema", line2: "MarketProtect.", accent: true },
  lead: "Targhette, tubetti, fascettabili, binari e supporti. PVC autoestinguente UL94 VØ U.V. e HF EVA halogen-free.",
  cta: { label: "Scarica edizione 2026", href: "assets/downloads/catalogo-marketprotect-2026.pdf", icon: "download", primary: true, target: "_blank" },
  cta2: { label: "Esplora le famiglie", action: "home", scrollTo: "famiglie", icon: "arrow-right" },
  visual: { src: "assets/cover/cat_aperto.png", contain: true }
},
{
  kind: "compat",
  eyebrow: <>Compatibilità — <span className="accent">Cembre · Brady · Murrplastik</span></>,
  title: { line1Light: "Hai un codice.", line2: "Cerca l'equivalente." },
  lead: "Inserisci un codice originale e ti diciamo qual è l'SKU MarketProtect compatibile. 877 codici mappati.",
  cta: { label: "Cerca un codice", action: "compatibilita", icon: "search", primary: true },
  cta2: { label: "Vedi tabella completa", action: "compatibilita", icon: "arrow-right" },
  visual: { src: "assets/products/03-tubetti/tubetti_sezione_da0-a6.png", contain: true }
},
{
  kind: "conrad",
  eyebrow: <>Shop — <span className="accent">disponibili su Conrad</span></>,
  title: { line1Light: "Comprali subito,", line2: "spediti in 24h." },
  lead: "Tutti i prodotti MarketProtect sono disponibili sullo shop Conrad. Stesse quantità, fatturazione UE, consegna 24/48h.",
  cta: { label: "Vai allo shop Conrad", href: "https://conrad.com", icon: "external", primary: true, target: "_blank" },
  cta2: { label: "WhatsApp", href: "https://wa.me/393668248457", icon: "whatsapp", target: "_blank" },
  visual: { src: "assets/products/01-targhette-rotoli/rotolo_yellow_1.png", contain: true }
},
{
  kind: "made-in",
  eyebrow: <>Made in Santena (TO) — <span className="accent">dal 2014</span></>,
  title: { line1Light: "Produzione", line2: "verticale, italiana.", accent: true },
  lead: "Compound, estrusione, taglio (tranciatura e punzonatura) e controllo qualità — tutto in un solo stabilimento. Linee Bausano e Bandera, lotti certificati.",
  cta: { label: "Visita lo stabilimento", action: "azienda", icon: "arrow-right", primary: true },
  cta2: { label: "Azienda & Qualità", action: "azienda", icon: "arrow-right" },
  visual: { src: "assets/factory/fab_02.JPG", contain: false }
}];


function HeroRotator({ navigate }) {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const timer = React.useRef(null);

  React.useEffect(() => {
    if (paused) return;
    timer.current = setTimeout(() => setIdx((i) => (i + 1) % HERO_SLIDES.length), 7000);
    return () => clearTimeout(timer.current);
  }, [idx, paused]);

  const renderCTA = (cta, primary = false) => {
    if (!cta) return null;
    const cls = "btn " + (primary ? "teal" : "invert");
    const inner = <>{cta.label}{cta.icon && <img src={`assets/icons/${cta.icon}.svg`} alt="" style={{ filter: primary ? "invert(1)" : "none" }} />}</>;
    if (cta.href) return <a className={cls} href={cta.href} target={cta.target} rel="noreferrer">{inner}</a>;
    return <button className={cls} onClick={() => {
      navigate(cta.action);
      if (cta.scrollTo) {
        setTimeout(() => {
          const el = document.getElementById(cta.scrollTo);
          if (el) {
            const rect = el.getBoundingClientRect();
            window.scrollTo({ top: window.scrollY + rect.top - 64, behavior: "smooth" });
          }
        }, 80);
      }
    }}>{inner}</button>;
  };

  return (
    <div className="hero-rotator" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      {HERO_SLIDES.map((s, i) =>
      <div key={i} className={"hero-slide" + (i === idx ? " active" : "")}>
          <div className="copy">
            <span className="eyebrow">{s.eyebrow}</span>
            <h1 className="hero-title">
              {s.title.line1 && <>{s.title.line1}<br /></>}
              {s.title.line1Light && <><span className="light">{s.title.line1Light}</span><br /></>}
              <span className={s.title.accent ? "accent" : ""}>{s.title.line2}</span>
            </h1>
            <p className="hero-lead">{s.lead}</p>
            <div className="row lg">
              {renderCTA(s.cta, true)}
              {renderCTA(s.cta2, false)}
            </div>
          </div>
          <div className={"visual" + (s.visual.contain ? " contain" : "")}>
            <img src={s.visual.src} alt="" style={{ width: "880px" }} />
          </div>
        </div>
      )}
      <div className="hero-controls" key={idx}>
        <button className="arrow" onClick={() => setIdx((idx + HERO_SLIDES.length - 1) % HERO_SLIDES.length)} aria-label="Prev">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M10 12L6 8l4-4" /></svg>
        </button>
        {HERO_SLIDES.map((s, i) =>
        <button key={i} className={"dot" + (i === idx ? " active" : "")} onClick={() => setIdx(i)} aria-label={`Slide ${i + 1}`}>
            <span className="fill"></span>
          </button>
        )}
        <div className="counter">{String(idx + 1).padStart(2, "0")} / {String(HERO_SLIDES.length).padStart(2, "0")}</div>
        <button className="arrow" onClick={() => setIdx((idx + 1) % HERO_SLIDES.length)} aria-label="Next">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M6 4l4 4-4 4" /></svg>
        </button>
      </div>
    </div>);

}

/* === Compatibility finder (home prominent block) === */
const KIND_TO_FAMILY = {
  'rotolo': 1, 'card': 2, 'tubetto': 3, 'fascettabile': 4,
  'tubetto-adesivo': 5, 'tubetto-per-binari': 6, 'binario': 7, 'pulsante': 8
};

function CompatFinderHome({ navigate, products }) {
  const [query, setQuery] = React.useState("");
  const matches = React.useMemo(() => {
    if (!query.trim() || !products) return [];
    const q = query.toLowerCase().trim();
    return products.filter((p) =>
    p.cembre.toLowerCase().includes(q) ||
    p.other.toLowerCase().includes(q) ||
    p.sku.toLowerCase().includes(q)
    ).slice(0, 4);
  }, [query, products]);

  const suggestions = ["44090B", "53010", "990454", "34002", "90020"];
  const total = products ? products.length : 0;
  const withCodes = products ? products.filter((p) => p.cembre || p.other).length : 0;

  const goToProduct = (m) => {
    const famId = KIND_TO_FAMILY[m.kind] || 1;
    navigate("family", famId, undefined, m.sku);
  };

  const submit = (e) => {
    if (e) e.preventDefault();
    if (matches.length === 1) goToProduct(matches[0]);else
    navigate("compatibilita", null, query);
  };

  return (
    <section className="section">
      <div className="container">
        <div className="compat-finder">
          <Eyebrow><span style={{ color: "rgba(255,255,255,0.5)" }}>Compatibilità —</span> <span style={{ color: "var(--c-teal)" }}>Cembre · Brady · Murrplastik</span></Eyebrow>
          <h2 className="h-display" style={{ marginTop: 24 }}>
            <span className="light">Hai un codice.</span><br />
            Cerca <span className="accent">l'equivalente.</span>
          </h2>
          <p style={{ fontSize: 18, color: "rgba(255,255,255,0.7)", maxWidth: "60ch", marginTop: 24, lineHeight: 1.55 }}>
            Inserisci un codice <strong style={{ color: "#fff", fontWeight: 600 }}>Cembre, Brady o Murrplastik</strong> — ti mostriamo l'SKU MarketProtect compatibile. <strong style={{ color: "#fff", fontWeight: 600 }}>{withCodes.toLocaleString("it")}</strong> codici mappati su {total.toLocaleString("it")} prodotti.
          </p>

          <form className="search-shell" onSubmit={submit}>
            <img className="search-ic" src="assets/icons/search.svg" alt="" />
            <input
              type="text"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="es. 44090B, 53010, 990454…"
              autoComplete="off" />
            
            <button type="submit" className="btn">
              Cerca <img src="assets/icons/arrow-right.svg" alt="" style={{ filter: "invert(1)" }} />
            </button>
          </form>

          {matches.length > 0 &&
          <div className="search-results-preview">
              {matches.map((m, i) =>
            <div key={i} className="row clickable" onClick={() => goToProduct(m)} role="button" tabIndex={0}>
                  <div className="mkpt">{m.sku}</div>
                  <div className="original">
                    {m.cembre && <span>Cembre {m.cembre}</span>}
                    {m.other && <span> · {m.other}</span>}
                    {!m.cembre && !m.other && <span style={{ color: "rgba(255,255,255,0.4)" }}>—</span>}
                  </div>
                  <div className="desc">{m.desc} <span style={{ color: "var(--c-teal)", fontWeight: 700, marginLeft: 6 }}>→</span></div>
                </div>
            )}
              {matches.length === 4 &&
            <div className="row" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
                  <div style={{ gridColumn: "1 / -1", textAlign: "center" }}>
                    <button onClick={() => navigate("compatibilita", null, query)} style={{ background: "transparent", border: 0, color: "var(--c-teal)", fontWeight: 700, cursor: "pointer", fontSize: 13, padding: 4 }}>
                      Mostra tutti i risultati →
                    </button>
                  </div>
                </div>
            }
            </div>
          }

          {query.trim() && matches.length === 0 &&
          <div className="search-results-preview">
              <div className="row empty">Nessun codice trovato. <a href="https://wa.me/393668248457" target="_blank" rel="noreferrer" style={{ color: "var(--c-teal)", textDecoration: "underline", marginLeft: 8 }}>Scrivi su WhatsApp ↗</a></div>
            </div>
          }

          <div className="suggested-codes">
            <span className="label">Prova:</span>
            {suggestions.map((s) =>
            <button key={s} onClick={() => setQuery(s)}>{s}</button>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* === Tre Gesti — modern === */
function TreGesti() {
  const gesti = [
  { icon: "print", num: "01", name: "Stampa", desc: "Trasferimento termico su targhetta in rotolo o card." },
  { icon: "peel", num: "02", name: "Distacca", desc: "Una pressione: la targhetta si stacca pulita dallo stelo, senza sbavature." },
  { icon: "insert", num: "03", name: "Inserisci", desc: "Inserimento nel binario, tubetto, supporto o clip — pronta in pochi secondi." }];

  return (
    <section className="section">
      <div className="container">
        <div className="grid-2-narrative tight" style={{ marginBottom: 56 }}>
          <div>
            <Eyebrow>Il sistema — <span className="accent">tre gesti</span></Eyebrow>
          </div>
          <p className="lead">Un workflow ripetibile pensato per quadristi e installatori che siglano centinaia di cavi al giorno. Sei famiglie, una sequenza.</p>
        </div>
        <div className="gesti-ribbon">
          {gesti.map((g) =>
          <div key={g.num}>
              <FeatureRing icon={g.icon} />
              <div className="num">{g.num}</div>
              <h3 className="h2" style={{ fontSize: 26 }}>{g.name}</h3>
              <p className="body" style={{ maxWidth: "32ch" }}>{g.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* === Stats === */
function StatsBlock() {
  return (
    <section className="section" style={{ paddingTop: 0, paddingBottom: 48 }}>
      <div className="container">
        <div style={{ borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)", padding: "40px 0" }}>
          <div className="stats-strip">
            <div>
              <div className="num">8</div>
              <div className="label">Famiglie di prodotto</div>
            </div>
            <div>
              <div className="num">1.062</div>
              <div className="label">SKU a listino</div>
            </div>
            <div>
              <div className="num">877</div>
              <div className="label">Codici equivalenti mappati</div>
            </div>
            <div>
              <div className="num">24<span className="unit">h</span></div>
              <div className="label">Risposta commerciale</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* === Le sei famiglie — Sistema home === */
function FamilyGrid({ navigate, families }) {
  const skuCounts = { 1: 12, 2: 25, 3: 756, 4: 51, 5: 30, 6: 6, 7: 168, 8: 14 };
  const enriched = Object.values(families).map((f) => ({
    ...f,
    skus: skuCounts[parseInt(f.num)] || 0
  }));
  return (
    <section className="section" id="famiglie">
      <div className="container">
        <div className="grid-2-narrative tight" style={{ marginBottom: 56 }}>
          <div>
            <Eyebrow>Le otto famiglie — <span className="accent">il sistema in dettaglio</span></Eyebrow>
            <h2 className="h1" style={{ marginTop: 18 }}>Otto famiglie, <span className="text-light">un solo linguaggio tecnico.</span></h2>
          </div>
          <p className="lead">Ogni famiglia ha la sua scheda con galleria, varianti dimensionali, listini completi e tabella di compatibilità con i codici di riferimento del settore.</p>
        </div>
        <div className="families-grid">
          {enriched.map((f) =>
          <a key={f.num} className="fam-card" href="#" onClick={(e) => {e.preventDefault();navigate("family", parseInt(f.num));}}>
              <div className="img-area">
                <img src={`assets/${f.img}`} alt={f.label} />
                <div className="num-badge">
                  <span className="num">{f.num}</span>
                  <span>Famiglia</span>
                </div>
              </div>
              <div className="body">
                <div className="title">{f.title.pre} <span className="text-accent">{f.title.accent}</span></div>
                <div className="sub">{f.lead}</div>
                <div className="meta">
                  <span className="skus">{f.skus.toLocaleString("it")} SKU</span>
                  <span className="more">Apri scheda →</span>
                </div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* === Conrad CTA Block === */
function ConradBlock() {
  return (
    <section className="section">
      <div className="container">
        <div className="grid-2-narrative tight">
          <div>
            <Eyebrow>Shop autorizzato — <span className="accent">Conrad.com</span></Eyebrow>
            <h2 className="h1" style={{ marginTop: 18 }}>Vuoi <span className="text-light">comprare?</span> <br />Trovi tutto su <span className="text-accent">Conrad.</span></h2>
            <HRule />
            <p className="lead">I prodotti MarketProtect sono disponibili sullo shop Conrad — il distributore tecnico europeo. Per ordini in volume e quotazioni dedicate, contattaci direttamente.</p>
            <div className="row mt-5">
              <a className="btn primary" href="https://conrad.com" target="_blank" rel="noreferrer">
                Vai allo shop Conrad <img src="assets/icons/external.svg" alt="" />
              </a>
              <a className="btn outline" href="https://wa.me/393668248457" target="_blank" rel="noreferrer">
                <img src="assets/icons/whatsapp.svg" alt="" /> WhatsApp
              </a>
            </div>
          </div>
          <div className="conrad-card">
            <div className="label">Disponibile su</div>
            <h3 style={{ fontSize: 64, lineHeight: 1, letterSpacing: "-0.03em", fontWeight: 800 }}>Conrad</h3>
            <p>Distributore tecnico europeo. Catalogo MarketProtect online, fatturazione B2B, spedizione 24/48h in UE.</p>
            <a className="btn invert" href="https://conrad.com" target="_blank" rel="noreferrer">
              Apri shop <img src="assets/icons/external.svg" alt="" />
            </a>
            <div className="badge">↗</div>
          </div>
        </div>
      </div>
    </section>);

}

/* === Factory strip === */
function FactoryStrip({ navigate }) {
  return (
    <section className="section tile">
      <div className="container">
        <div className="grid-2-narrative">
          <div>
            <Eyebrow>Dentro la fabbrica — <span className="accent">Santena (TO)</span></Eyebrow>
            <HRule />
            <p className="lead">PVC autoestinguente UL94 V-0 e compound HF/EVA halogen-free, low-smoke. Linea estrusione Bausano, raffreddamento Frigosystem, controllo dimensionale lotto per lotto.</p>
            <div className="row mt-5">
              <button className="btn primary" onClick={() => navigate("azienda")}>
                Visita lo stabilimento <img src="assets/icons/arrow-right.svg" alt="" />
              </button>
            </div>
          </div>
          <div className="factory-grid">
            <img src="assets/factory/fab_01.JPG" alt="Linea estrusione Bausano" />
            <img src="assets/factory/fab_03.JPG" alt="Testa estrusore" />
            <img src="assets/factory/fab_05.JPG" alt="Materia prima" />
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  HeroRotator, CompatFinderHome, TreGesti, StatsBlock,
  FamilyGrid, ConradBlock, FactoryStrip, HERO_SLIDES, KIND_TO_FAMILY
});