/* === Pages: Azienda+Qualità (merged) · Compatibilità · Listini · Contatti === */

function AziendaPage({ navigate }) {
  const norme = [
  { code: "UL94 VØ U.V.", desc: "Autoestinguente, classe massima per materie plastiche secondo Underwriters Laboratories. Test verticale 12 mm, autoestinzione entro 10 s, nessun gocciolamento incendiato." },
  { code: "RoHS", desc: "Restriction of Hazardous Substances (Direttiva 2011/65/UE). Assenza di Pb, Cd, Hg, Cr VI, PBB e PBDE oltre le soglie consentite." },
  { code: "REACH", desc: "Regolamento UE 1907/2006 sulla registrazione, valutazione e autorizzazione delle sostanze chimiche. Compound conformi all'allegato XVII." },
  { code: "CEI EN 60464-2", desc: "Tubi isolanti elettrici flessibili. Test meccanici, elettrici, termici secondo CENELEC. Valida per tubetti FLAT, PVC e HF EVA." },
  { code: "UNI EN ISO 175", desc: "Determinazione degli effetti dell'immersione in liquidi su materie plastiche. Compatibilità con oli minerali, solventi tecnici, lubrificanti industriali." },
  { code: "Halogen-free · Low-smoke", desc: "Compound HF/EVA conformi IEC 61034 (densità del fumo) e IEC 60754 (assenza di alogeni). Per ambienti pubblici: gallerie, ambito navale e ferroviario, infrastrutture." }];


  return (
    <>
      {/* === HERO === */}
      <section className="hero-cover" style={{ background: "var(--c-ink)", color: "#fff", padding: "120px 0 96px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(-22deg, transparent 0, transparent 220px, rgba(255,255,255,0.025) 220px, rgba(255,255,255,0.025) 221px)", pointerEvents: "none" }}></div>
        <div className="container" style={{ position: "relative" }}>
          <div className="page-tag dark"><span className="mute">Azienda · Qualità</span><span className="sep"></span><span>Santena (TO) · Edizione 01 / 2026</span></div>
          <div style={{ marginTop: 36 }} className="grid-2-narrative">
            <div>
              <Eyebrow><span style={{ color: "rgba(255,255,255,0.5)" }}>Made in</span> <span style={{ color: "var(--c-teal)" }}>Santena (TO)</span></Eyebrow>
              <h1 className="h-display" style={{ color: "#fff", marginTop: 18 }}>
                <span style={{ color: "rgba(255,255,255,0.4)", fontWeight: 300 }}>Un produttore</span><br />
                italiano <span style={{ color: "var(--c-teal)" }}>verticale.</span>
              </h1>
              <p className="lead lg" style={{ color: "rgba(255,255,255,0.7)", marginTop: 32, maxWidth: "54ch" }}>
                Compound, estrusione, taglio, controllo qualità — tutto sotto lo stesso tetto. Linee Bausano e Bandera, lotti certificati. PVC UL94 VØ U.V. e HF EVA halogen-free.
              </p>
              <div className="info-pill-row mt-5">
                <span className="info-pill dark">UL94 VØ U.V.</span>
                <span className="info-pill dark">RoHS</span>
                <span className="info-pill dark">REACH</span>
                <span className="info-pill dark">CEI EN 60464-2</span>
                <span className="info-pill dark">UNI EN ISO 175</span>
                <span className="info-pill dark">HF · halogen-free</span>
              </div>
            </div>
            <div style={{ aspectRatio: "4 / 5", overflow: "hidden", borderRadius: 8 }}>
              <img src="assets/factory/fab_02.JPG" alt="Stabilimento Santena" className="fill-img" />
            </div>
          </div>
        </div>
      </section>

      {/* === STATS === */}
      <section className="section" style={{ paddingTop: 48, 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">2008</div><div className="label">Anno di fondazione</div></div>
              <div><div className="num">1.800<span className="unit">m²</span></div><div className="label">Stabilimento</div></div>
              <div><div className="num">3</div><div className="label">Linee di estrusione</div></div>
              <div><div className="num">100<span className="unit">%</span></div><div className="label">Produzione interna</div></div>
            </div>
          </div>
        </div>
      </section>

      {/* === COMPOUND === */}
      <section className="section">
        <div className="container">
          <div className="grid-2-narrative">
            <div>
              <Eyebrow>Compound — <span className="accent">PVC + HF/EVA</span></Eyebrow>
              <h2 className="h1" style={{ marginTop: 14 }}>La materia prima parla per noi.</h2>
              <HRule />
              <p className="lead">PVC autoestinguente classe VØ U.V. (UL94) per le applicazioni standard, compound HF/EVA halogen-free e low-smoke per ambienti dove il fumo deve essere minimo: gallerie, ambito navale e ferroviario, infrastrutture pubbliche.</p>
              <p className="body" style={{ marginTop: 22 }}>Ogni lotto è certificato all'origine; ogni rotolo in uscita passa attraverso controllo dimensionale e visivo manuale.</p>
            </div>
            <div className="factory-solo">
              <img src="assets/factory/fab_13.jpeg" alt="Materia prima" />
            </div>
          </div>
        </div>
      </section>

      {/* === ESTRUSIONE === */}
      <section className="section tile">
        <div className="container">
          <div className="grid-2-narrative flip">
            <div>
              <Eyebrow>Estrusione — <span className="accent">linee Bausano e Bandera</span></Eyebrow>
              <h2 className="h1" style={{ marginTop: 14 }}>Estrusione continua, tolleranze stabili.</h2>
              <HRule />
              <p className="lead">Estrusori Bausano e Bandera con raffreddamento Frigosystem mantengono geometria, durezza Shore e trasparenza costanti su lotti lunghi. Cambio sezione rapido per produzioni piccole.</p>
              <div className="info-pill-row mt-4" style={{ gap: 8 }}>
                <InfoPill variant="tile">Sezione 0 → 6</InfoPill>
                <InfoPill variant="tile">Shore 70 / 83 / 89</InfoPill>
                <InfoPill variant="tile">PVC · HF EVA</InfoPill>
              </div>
            </div>
            <div className="factory-solo">
              <img src="assets/factory/fab_09.JPG" alt="Estrusione" />
            </div>
          </div>
        </div>
      </section>

      {/* === CONTROLLO QUALITÀ === */}
      <section className="section">
        <div className="container">
          <div className="grid-2-narrative">
            <div>
              <Eyebrow>Controllo qualità — <span className="accent">lotto per lotto</span></Eyebrow>
              <h2 className="h1" style={{ marginTop: 14 }}>Ogni tubetto, ogni card, ogni pulsante.</h2>
              <HRule />
              <p className="lead">Controllo dimensionale a campione, prove elettriche su batch, verifica visiva manuale sulla pre-tranciatura. La targhetta deve staccarsi pulita: nessun compromesso.</p>
              <p className="body" style={{ marginTop: 22 }}>Controllo e verifica elettronica delle forze (in Newton) di ingresso delle tesserine (tags) all'interno dei tubetti (sleeves) mediante l'utilizzo di macchine di misura Mecmesin, con il relativo report di qualità sulla scheda di produzione dei prodotti.</p>
              <p className="body" style={{ marginTop: 18 }}>Il controllo avviene ogni 5 confezioni di tubetto (sleeves) estruso. Sulle etichette di vendita applichiamo un codice che ne identifica il lotto di produzione e la scatola in cui esso è stato confezionato, per un elevato controllo della qualità verso i nostri clienti.</p>
              <p className="body" style={{ marginTop: 18 }}>I lotti vengono tracciati dall'estrusore fino al magazzino. Ogni codice ha la sua provenienza e la sua firma di QC.</p>
            </div>
            <div className="factory-solo">
              <img src="assets/factory/fab_12.jpeg" alt="Controllo qualità" />
            </div>
          </div>
        </div>
      </section>

      {/* === NORME APPLICATE === */}
      <section className="section tile">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36, flexWrap: "wrap", gap: 16 }}>
            <div>
              <Eyebrow>Norme & certificazioni — <span className="accent">sei riferimenti</span></Eyebrow>
              <h2 className="h1" style={{ marginTop: 18 }}>Le norme che applichiamo.</h2>
            </div>
            <a className="btn outline" href="mailto:commerciale@mktp.eu?subject=Richiesta%20schede%20tecniche">
              <img src="assets/icons/mail.svg" alt="" /> Richiedi schede tecniche
            </a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18 }}>
            {norme.map((n, i) =>
            <div key={i} className="norm-card">
                <div className="head">
                  <FeatureRing icon="check" size="sm" />
                  <div>
                    <Eyebrow>Norma · {String(i + 1).padStart(2, "0")}</Eyebrow>
                    <div className="code">{n.code}</div>
                  </div>
                </div>
                <p className="desc">{n.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* === SOSTENIBILITÀ === */}
      <section className="section">
        <div className="container">
          <Eyebrow>Sostenibilità — <span className="accent">linea HF/EVA</span></Eyebrow>
          <h2 className="h1" style={{ marginTop: 14, maxWidth: "22ch" }}>Halogen-free per ambienti pubblici.</h2>
          <HRule />
          <div className="grid-3" style={{ marginTop: 40 }}>
            {[
            { eyebrow: "Halogen-free", h: "Zero alogeni", desc: "Compound EVA senza cloro, bromo, fluoro. Conforme IEC 60754. Niente gas tossici in caso di incendio." },
            { eyebrow: "Low-smoke", h: "Visibilità preservata", desc: "Densità di fumo < 60% (IEC 61034). Vie di fuga visibili. Indispensabile in gallerie, ambito navale e ferroviario, ospedali." },
            { eyebrow: "Riciclabilità", h: "Riciclo industriale", desc: "Sfrido di estrusione reimmesso in linea fino al 15%. Imballi in cartone certificato FSC. Niente plastica monouso." }].
            map((b, i) =>
            <div key={i}>
                <Eyebrow><span className="accent">{b.eyebrow}</span></Eyebrow>
                <h3 style={{ fontSize: 26, marginTop: 10, letterSpacing: "-0.015em", fontWeight: 700 }}>{b.h}</h3>
                <hr style={{ width: 32, height: 2, background: "var(--c-teal)", border: 0, margin: "14px 0" }} />
                <p>{b.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* === GALLERY DARK === */}
      <section className="section dark">
        <div className="container">
          <Eyebrow><span style={{ color: "rgba(255,255,255,0.5)" }}>GALLERIA —</span> <span style={{ color: "var(--c-teal)" }}>lo stabilimento</span></Eyebrow>
          <h2 className="h1" style={{ marginTop: 18, color: "#fff" }}>Santena</h2>
          <hr className="h-rule lg" style={{ background: "var(--c-teal)", marginTop: 22 }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginTop: 40 }}>
            {["fab_01.JPG", "fab_02.JPG", "fab_03.JPG", "fab_04.JPG", "fab_05.JPG", "fab_06.JPG", "fab_07.JPG", "fab_08.JPG"].map((f, i) =>
            <div key={i} style={{ aspectRatio: 1, overflow: "hidden", borderRadius: 4 }}>
                <img src={`assets/factory/${f}`} alt="" className="fill-img" />
              </div>
            )}
          </div>
        </div>
      </section>
    </>);

}

/* === Compatibilità — palette table, no Shop col, no brand filter === */
function CompatibilitaPage({ navigate, products, initialQuery }) {
  const [query, setQuery] = React.useState(initialQuery || "");
  const [kindFilter, setKindFilter] = React.useState("all");
  const [limit, setLimit] = React.useState(50);

  React.useEffect(() => {setLimit(50);}, [query, kindFilter]);

  const all = products || [];

  const filtered = React.useMemo(() => {
    return all.filter((p) => {
      if (kindFilter !== "all" && p.kind !== kindFilter) return false;
      if (query.trim()) {
        const q = query.toLowerCase().trim();
        if (!p.sku.toLowerCase().includes(q) && !p.cembre.toLowerCase().includes(q) && !p.other.toLowerCase().includes(q) && !p.desc.toLowerCase().includes(q)) return false;
      }
      return true;
    });
  }, [all, query, kindFilter]);

  const kindLabels = {
    "rotolo": "Rotoli",
    "card": "Card",
    "tubetto": "Tubetti",
    "fascettabile": "Fascettabili",
    "tubetto-adesivo": "Adesivi",
    "tubetto-per-binari": "Per binari",
    "binario": "Binari",
    "pulsante": "Pulsanti"
  };

  return (
    <>
      <section className="hero-cover" style={{ background: "var(--c-ink)", color: "#fff", padding: "80px 0 64px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(-22deg, transparent 0, transparent 220px, rgba(255,255,255,0.025) 220px, rgba(255,255,255,0.025) 221px)", pointerEvents: "none" }}></div>
        <div className="container" style={{ position: "relative" }}>
          <div className="page-tag dark"><span className="mute">Compatibilità</span><span className="sep"></span><span>Cembre · Brady · Murrplastik</span></div>
          <div style={{ marginTop: 32 }} className="grid-2-narrative">
            <div>
              <h1 className="h-display" style={{ color: "#fff" }}>
                <span className="light">Hai un codice.</span><br />
                Cerca <span className="accent">l'equivalente.</span>
              </h1>
              <p className="lead lg" style={{ color: "rgba(255,255,255,0.7)", marginTop: 32, maxWidth: "54ch" }}>
                Inserisci un codice Cembre, Brady o Murrplastik — ti mostriamo l'SKU MarketProtect compatibile. Database completo: <strong style={{ color: "#fff", fontWeight: 600 }}>{all.length.toLocaleString("it")}</strong> prodotti, <strong style={{ color: "#fff", fontWeight: 600 }}>{all.filter((p) => p.cembre || p.other).length.toLocaleString("it")}</strong> codici mappati.
              </p>
              <p style={{ marginTop: 28, fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: "60ch" }}>I marchi citati appartengono ai rispettivi proprietari. La compatibilità è funzionale (rif. C. Cass. Pen. Sez. V 5957/2012).</p>
            </div>
            <div>
              <form className="search-shell" onSubmit={(e) => e.preventDefault()} style={{ marginTop: 0, maxWidth: "none" }}>
                <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, TE7F…"
                  autoFocus />
                
                {query &&
                <button type="button" onClick={() => setQuery("")} style={{ background: "transparent", border: 0, color: "rgba(255,255,255,0.5)", cursor: "pointer", padding: "0 8px", fontSize: 18 }}>×</button>
                }
              </form>
              <div style={{ marginTop: 18, display: "flex", gap: 8, flexWrap: "wrap" }}>
                {[["all", "Tutte le famiglie"], ...Object.entries(kindLabels)].map(([v, l]) =>
                <button key={v} onClick={() => setKindFilter(v)} className="info-pill dark" style={{ background: kindFilter === v ? "var(--c-teal)" : "rgba(255,255,255,0.08)", color: "#fff", border: kindFilter === v ? "1px solid var(--c-teal)" : "1px solid rgba(255,255,255,0.14)", cursor: "pointer", fontSize: 11 }}>{l}</button>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 48 }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, marginBottom: 24 }}>
            <div>
              <Eyebrow>Risultati</Eyebrow>
              <h2 style={{ fontSize: 28, marginTop: 6, letterSpacing: "-0.01em" }}>
                {filtered.length.toLocaleString("it")} <span className="text-light">corrispondenze</span>
              </h2>
            </div>
            <a className="btn primary" href="https://conrad.com" target="_blank" rel="noreferrer">
              Acquista su Conrad <img src="assets/icons/external.svg" alt="" />
            </a>
          </div>

          <div className="spec-table-wrap" style={{ overflowX: "auto" }}>
            <table className="spec-table">
              <thead>
                <tr>
                  <th>MarketProtect</th>
                  <th>Famiglia</th>
                  <th>Cembre</th>
                  <th>Brady / Murrplastik</th>
                  <th>Descrizione</th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0 &&
                <tr><td colSpan={5} style={{ padding: 60, textAlign: "center", color: "var(--c-mute)" }}>Nessun codice trovato per “{query}”. Prova un altro termine o <a href="https://wa.me/393668248457" style={{ color: "var(--c-teal)" }} target="_blank" rel="noreferrer">contattaci via WhatsApp</a>.</td></tr>
                }
                {filtered.slice(0, limit).map((p, i) =>
                <tr key={i} onClick={() => navigate("family", KIND_TO_FAMILY[p.kind] || 1, undefined, p.sku)} style={{ cursor: "pointer" }} data-sku={p.sku}>
                    <td className="code">{p.sku}</td>
                    <td><span className="kind-tag">{kindLabels[p.kind] || p.kind}</span></td>
                    <td>{p.cembre || <span style={{ color: "var(--c-mute)" }}>—</span>}</td>
                    <td>{p.other || <span style={{ color: "var(--c-mute)" }}>—</span>}</td>
                    <td>{p.desc}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>

          {filtered.length > limit &&
          <div style={{ textAlign: "center", marginTop: 32 }}>
              <button className="btn outline" onClick={() => setLimit((l) => l + 50)}>
                Mostra altri {Math.min(50, filtered.length - limit)} · {filtered.length - limit} rimasti
              </button>
            </div>
          }

          <p className="body" style={{ marginTop: 32, fontSize: 12, color: "var(--c-mute)", maxWidth: "80ch" }}>
            Database aggiornato all'Edizione 01 / 2026. I marchi citati appartengono ai rispettivi proprietari. Nessuna affiliazione commerciale è implicita. Per la versione PDF integrale <a href="assets/downloads/catalogo-marketprotect-2026.pdf" target="_blank" rel="noreferrer" style={{ color: "var(--c-teal)" }}>scarica il catalogo</a>.
          </p>
        </div>
      </section>
    </>);

}

function ListiniPage({ navigate, setFamilyId }) {
  return (
    <>
      <section className="hero-cover">
        <div className="container">
          <PageTag pages="LISTINI · DOWNLOAD" label="EDIZIONE 01 / 2026" />
          <div style={{ marginTop: 28 }} className="grid-2-narrative">
            <div>
              <Eyebrow>Documenti & <span className="accent">listini</span></Eyebrow>
              <h1 className="h1" style={{ marginTop: 14 }}><span className="text-light">Edizione,</span> listini, <span className="text-accent">certificati.</span></h1>
              <HRule />
              <p className="lead lg">Tutto in PDF — SKU, lunghezze, quantità, equivalenze, condizioni commerciali. Aggiornati a Maggio 2026.</p>
            </div>
            <div style={{ background: "var(--c-paper)", border: "1px solid var(--c-line)", padding: 28, borderRadius: 8 }}>
              <Eyebrow>Scarica l'edizione completa</Eyebrow>
              <div style={{ marginTop: 16 }}>
                <div style={{ fontSize: 20, fontWeight: 700 }}>Edizione 01 / 2026</div>
                <p style={{ fontSize: 13, color: "var(--c-mute)", marginTop: 6 }}>80 pagine · tutte le famiglie · listini per pagina · disclaimer giuridico.</p>
              </div>
              <a className="btn primary mt-4" href="assets/downloads/catalogo-marketprotect-2026.pdf" target="_blank" rel="noreferrer">
                <img src="assets/icons/download.svg" alt="" /> Scarica edizione PDF · 12.4 MB
              </a>
            </div>
          </div>
        </div>
      </section>
    </>);

}

function ContattiPage() {
  return (
    <section className="section" style={{ paddingBottom: 0 }}>
      <div className="container">
        <div>
          <Eyebrow>Parliamone — <span className="accent">risposta 24h</span></Eyebrow>
          <h1 className="h1" style={{ marginTop: 14 }}><span className="text-light">Quotazioni,</span> campioni, <span className="text-accent">compatibilità.</span></h1>
          <HRule />
          <p className="lead lg" style={{ maxWidth: "60ch" }}>WhatsApp per la velocità, email per il dettaglio, telefono per la trattativa. Rispondiamo entro 24h lavorative.</p>
        </div>
      </div>
      <div className="container" style={{ marginTop: 56 }}>
        <div className="contact-panel">
          <div className="grid" style={{ gridTemplateColumns: "1.2fr 1fr" }}>
            <div>
              <div className="field">
                <div className="label">Azienda</div>
                <div className="value lg">MARKETPROTECT SRL</div>
              </div>
              <div className="col-meta" style={{ marginTop: 32 }}>
                <div className="field">
                  <div className="label">Sede & stabilimento</div>
                  <div className="value">Via Circonvallazione, 178<br />10026 Santena (TO) · Italia</div>
                </div>
                <div className="field">
                  <div className="label">Dati fiscali</div>
                  <div className="value">P. IVA 12986690019</div>
                </div>
              </div>
              <div className="col-meta" style={{ marginTop: 32 }}>
                <div className="field">
                  <div className="label">Orari ufficio</div>
                  <div className="value">Lun — Ven<br />09:00 — 13:00 · 14:00 — 18:00</div>
                </div>
                <div className="field">
                  <div className="label">Lingue</div>
                  <div className="value">IT · EN · FR</div>
                </div>
              </div>
            </div>
            <div>
              <div className="field">
                <div className="label">WhatsApp · risposta veloce</div>
                <div className="value lg"><a href="https://wa.me/393668248457" target="_blank" rel="noreferrer">+39 366 824 8457</a></div>
              </div>
              <div className="field" style={{ marginTop: 28 }}>
                <div className="label">Email · commerciale</div>
                <div className="value"><a href="mailto:commerciale@mktp.eu">commerciale@mktp.eu</a></div>
              </div>
              <div className="field" style={{ marginTop: 22 }}>
                <div className="label">Web</div>
                <div className="value"><a href="https://mkpt.eu">mkpt.eu</a></div>
              </div>
              <div className="field" style={{ marginTop: 22 }}>
                <div className="label">Shop autorizzato</div>
                <div className="value"><a href="https://conrad.com" target="_blank" rel="noreferrer">Conrad ↗</a></div>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.08)", fontSize: 11, color: "var(--c-dark-mute)", letterSpacing: 0.01, lineHeight: 1.6, maxWidth: 720 }}>
            <strong style={{ color: "#fff", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>Marchi e compatibilità</strong> — Tutti i nomi, modelli e codici descritti in questa edizione sono citati unicamente per indicare la compatibilità funzionale dei nostri articoli con i sistemi di altri produttori. I marchi citati appartengono ai rispettivi proprietari. (rif. C. Cass. Pen. Sez. V 5957/2012)
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { AziendaPage, CompatibilitaPage, ListiniPage, ContattiPage });