/* === Family 05 · Tubetti adesivi · Family 07 · Binari · Family 08 · Pulsanti === */

function FamilyAdesivi({ family, navigate, highlightSku }) {
  useHighlightScroll(highlightSku);
  const cols = [
    { key: "sku", label: "Codice", cls: "code" },
    { key: "ltag", label: "L. tag" },
    { key: "spess", label: "Spess." },
    { key: "largh", label: "Largh." },
    { key: "cembre", label: "Comp. Cembre" },
    { key: "other", label: "Comp. Brady / Murrplastik" },
  ];

  const filt = (material, adesivo) =>
    getProducts(p => p.kind === 'tubetto-adesivo' && p.material === material && p.adesivo === adesivo);

  const tables = [
    { eyebrow: "Versione 2 mm — adesivi · spessore 2 mm", title: "Slim adhesive", sub: "FLAT — PVC adesivo — slim — 2 mm. Adesivo sottile per superfici lisce e componenti.", rows: filt('PVC 2 mm', 'SLIM') },
    { title: "HP adhesive", sub: "FLAT — PVC adesivo — HP — 2 mm. Adesivo gommoso per superfici goffrate / uso esterno quadro.", rows: filt('PVC 2 mm', 'HP') },
    { eyebrow: "Versione FLAT 0,5 mm — adesivi · spessore 0,5 mm", title: "Slim adhesive · FLAT 0,5 mm", sub: "FLAT — PVC adesivo — slim — 0,5 mm.", rows: filt('PVC FLAT 0,5', 'SLIM') },
    { title: "HP adhesive · FLAT 0,5 mm", sub: "FLAT — PVC adesivo — HP — 0,5 mm.", rows: filt('PVC FLAT 0,5', 'HP') },
  ];

  return (
    <>
      <FamilyHero family={family} navigate={navigate} />
      <section className="section">
        <div className="container">
          <div className="grid-2-narrative tight" style={{ marginBottom: 56, alignItems: "start" }}>
            <div>
              <Eyebrow>Scheda — <span className="accent">tubetti adesivi</span></Eyebrow>
              <h2 className="h1" style={{ marginTop: 18 }}>Identificazione adesiva, <span className="text-light">su qualsiasi superficie.</span></h2>
              <HRule />
              <p className="lead">Portatarghette in PVC VØ trasparente con biadesivo strutturale. Per identificare componenti, superfici lisce o goffrate, dove non è possibile usare binario o fascetta.</p>
            </div>
            <div style={{ display: "grid", gap: 14 }}>
              {[
                { label: "Utilizzo",      value: "Identificazione adesiva su componenti, superfici lisce o goffrate" },
                { label: "Materiale",     value: "PVC VØ trasparente" },
                { label: "Formati",       value: "4 mm per targhetta 2 mm · 4 mm per FLAT 0,5 mm" },
                { label: "Tipo adesivo",  value: "Slim adhesive · HP adhesive" },
                { label: "Slim",          value: "Adesivo sottile per superfici lisce e componenti" },
                { label: "HP",            value: "Adesivo gommoso per superfici goffrate / esterno quadro" },
              ].map((r, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, padding: "12px 0", borderBottom: i < 5 ? "1px solid var(--c-line-2)" : "none" }}>
                  <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, alignSelf: "center" }}>{r.label}</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{r.value}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section tile">
        <div className="container">
          <Eyebrow>Listini — <span className="accent">30 SKU · Slim + HP</span></Eyebrow>
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 36 }}>Quattro listini, due adesivi, due spessori.</h2>
          {tables.map((t, i) => (
            <DataTable
              key={i}
              eyebrow={t.eyebrow}
              title={t.title}
              subtitle={t.sub}
              columns={cols}
              rows={t.rows}
              highlightSku={highlightSku}
              footer={i === tables.length - 1 ? DISCLAIMER : null}
            />
          ))}
        </div>
      </section>

      <FamilyCallout navigate={navigate} />
    </>
  );
}

/* ============================================ */

function FamilyBinari({ family, navigate, highlightSku }) {
  useHighlightScroll(highlightSku);
  const gallery = [
    { img: 'products/05-binari/binario_portatarghetta_0.png', label: '9 mm — 15 mm' },
    { img: 'products/05-binari/binario_portatarghetta_black_1.png', label: '9 mm · Nero · senza fori' },
    { img: 'products/05-binari/binario_portatarghetta_grey_1.png', label: '9 mm · Grigio · senza fori' },
    { img: 'products/05-binari/binario_portatarghetta_black_2.png', label: '9 mm · Nero · con fori' },
    { img: 'products/05-binari/binario_portatarghetta_grey_2.png', label: '9 mm · Grigio · con fori' },
    { img: 'products/05-binari/binario_portatarghetta_black_3.png', label: '15 mm · Nero · senza fori' },
    { img: 'products/05-binari/binario_portatarghetta_grey_3.png', label: '15 mm · Grigio · senza fori' },
    { img: 'products/05-binari/binario_portatarghetta_black_4.png', label: '15 mm · Nero · con fori' },
    { img: 'products/05-binari/binario_portatarghetta_grey_4.png', label: '15 mm · Grigio · con fori' },
    { img: 'products/05-binari/binario_portatarghetta_black_adesivo_1.png', label: 'Adesivo HP · Nero' },
    { img: 'products/05-binari/binario_portatarghetta_black_adesivo_2.png', label: 'Adesivo 3M Slim · Nero' },
    { img: 'products/05-binari/binario_portatarghetta_black_adesivo_3.png', label: 'Adesivo HP · Nero · pre-forato' },
    { img: 'products/05-binari/binario_portatarghetta_grey_adesivo_1.png', label: 'Adesivo HP · Grigio' },
    { img: 'products/05-binari/binario_portatarghetta_grey_adesivo_2.png', label: 'Adesivo 3M Slim · Grigio' },
    { img: 'products/05-binari/binario_portatarghetta_grey_adesivo_3.png', label: 'Adesivo HP · Grigio · pre-forato' },
    { img: 'products/05-binari/binario_portatarghetta_white_5.png', label: 'Coperchio trasparente' },
  ];

  const cols = [
    { key: "sku", label: "Codice", cls: "code" },
    { key: "tipo", label: "Tipo" },
    { key: "lung", label: "Lung. mm" },
    { key: "colore", label: "Colore" },
    { key: "qta", label: "Q.tà" },
    { key: "cembre", label: "Comp. Cembre" },
    { key: "other", label: "Comp. Brady / Murrplastik" },
  ];

  const filt = (largPattern, material) =>
    getProducts(p => p.kind === 'binario' && p.larg === largPattern && p.material === material);

  const tables = [
    { eyebrow: "9 × 2 mm — policarbonato", title: "Binario 9 · 2 mm · policarbonato", sub: "Quattro tipi (NO HOLES / WITH HOLES / HP ADHES / 3M SLIM) × due colori (Black / Grey)", rows: filt('9', 'Policarbonato 2 mm') },
    { eyebrow: "9 × 0,5 mm — PVC FLAT", title: "Binario 9 · FLAT 0,5", sub: "Variante FLAT 0,5 mm in PVC del binario 9 mm.", rows: filt('9', 'PVC FLAT 0,5') },
    { eyebrow: "15 × 2 mm — policarbonato", title: "Binario 15 · 2 mm · policarbonato", sub: "Binario porta-targhetta 15 × 2 mm in policarbonato per targhette larghe.", rows: filt('15', 'Policarbonato 2 mm') },
    { eyebrow: "15 × 0,5 mm — PVC FLAT", title: "Binario 15 · FLAT 0,5", sub: "Variante FLAT 0,5 mm in PVC del binario largo.", rows: filt('15', 'PVC FLAT 0,5') },
    { eyebrow: "Coperture trasparenti", title: "Cover per binari", sub: "Cover trasparenti per binari 9 e 15 mm.", rows: getProducts(p => p.kind === 'binario' && p.sku.startsWith('TE6CV')) },
    { eyebrow: "Binario alto 9 mm", title: "High rail 9 mm", sub: "Versione alta del binario 9 mm, per applicazioni con cavo profondo.", rows: filt('9', 'PVC ALTO 2 mm') },
  ];

  return (
    <>
      <FamilyHero family={family} navigate={navigate} />

      <section className="section">
        <div className="container">
          <div className="grid-2-narrative tight" style={{ marginBottom: 56, alignItems: "start" }}>
            <div>
              <Eyebrow>Scheda — <span className="accent">binari porta-targhetta</span></Eyebrow>
              <h2 className="h1" style={{ marginTop: 18 }}>Fissaggio professionale, <span className="text-light">su qualsiasi quadro.</span></h2>
              <HRule />
              <p className="lead">Profili in PVC VØ U.V. per il fissaggio delle targhette FLAT in quadro elettrico. Disponibili senza fori, pre-forati, adesivi (3M Slim o HP) e con cover trasparenti.</p>
            </div>
            <div style={{ display: "grid", gap: 14 }}>
              {[
                { label: "Materiale", value: "PVC VØ U.V. · policarbonato" },
                { label: "Tipologia", value: "DIN TOP-HAT · C-RAIL · snap-in" },
                { label: "Spessori",  value: "0,5 mm FLAT · 2 mm policarbonato" },
                { label: "Lunghezze", value: "430 · 500 · 650 · 1000 mm" },
                { label: "Colori",    value: "BLACK · GREY · cover trasparente" },
                { label: "Adesivi",   value: "Senza · HP adhesive · 3M Slim" },
              ].map((r, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, padding: "12px 0", borderBottom: i < 5 ? "1px solid var(--c-line-2)" : "none" }}>
                  <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, alignSelf: "center" }}>{r.label}</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{r.value}</div>
                </div>
              ))}
            </div>
          </div>

          <Eyebrow>Galleria — <span className="accent">tutte le configurazioni</span></Eyebrow>
          <h3 style={{ fontSize: 22, fontWeight: 700, marginTop: 6, marginBottom: 24, letterSpacing: "-0.01em" }}>Sedici configurazioni · 9 / 15 mm · nero / grigio · senza fori / con fori / adesivi / coperchi.</h3>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {gallery.map((g, i) => (
              <div key={i} style={{ background: "var(--c-tile)", borderRadius: 6, padding: 18, textAlign: "center" }}>
                <div style={{ aspectRatio: 4/3, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <img src={`assets/${g.img}`} alt={g.label} style={{ width: "100%", height: "100%", objectFit: "contain" }} />
                </div>
                <div style={{ marginTop: 12, fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 700 }}>{g.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section tile">
        <div className="container">
          <Eyebrow>Listini — <span className="accent">168 SKU · sei tabelle</span></Eyebrow>
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 36 }}>Tutte le combinazioni width × material × tipo.</h2>
          {tables.map((t, i) => (
            <DataTable
              key={i}
              eyebrow={t.eyebrow}
              title={t.title}
              subtitle={t.sub}
              columns={cols}
              rows={t.rows}
              highlightSku={highlightSku}
              footer={i === tables.length - 1 ? DISCLAIMER : null}
            />
          ))}
        </div>
      </section>

      <FamilyCallout navigate={navigate} />
    </>
  );
}

/* ============================================ */

function FamilyPulsanti({ family, navigate, highlightSku }) {
  useHighlightScroll(highlightSku);
  const gallery = [
    { img: 'products/06-pulsanti/pulsanti_0.png', label: 'Rectangular · D 22' },
    { img: 'products/06-pulsanti/pulsanti_1.png', label: 'Round · D 22' },
    { img: 'products/06-pulsanti/pulsanti_2.png', label: 'Rectangular · 17 × N' },
    { img: 'products/06-pulsanti/pulsanti_3.png', label: 'Adesivo · biadesivo' },
    { img: 'products/06-pulsanti/pulsanti_4.png', label: 'Kit completo · targhetta + vetro' },
  ];

  const cols = [
    { key: "sku", label: "Codice", cls: "code" },
    { key: "geom", label: "Geom." },
    { key: "diam", label: "Ø" },
    { key: "dimA", label: "Dim. A" },
    { key: "dimB", label: "Dim. B" },
    { key: "colore", label: "Colore" },
    { key: "adesivo", label: "Adesivo" },
    { key: "cembre", label: "Comp. Cembre" },
    { key: "other", label: "Comp. Brady / Murrplastik" },
  ];

  const all = getProducts(p => p.kind === 'pulsante');

  const groups = [
    { label: "Rectangular · NO adhesive · D 22", rows: all.filter(p => p.geom === 'RETT' && p.format === 'D 22' && p.adesivo === 'NO') },
    { label: "Rectangular · with adhesive · D 22", rows: all.filter(p => p.geom === 'RETT' && p.format === 'D 22' && p.adesivo === 'Sì') },
    { label: "Round · NO adhesive · D 22", rows: all.filter(p => p.geom === 'ROUND' && p.format === 'D 22' && p.adesivo === 'NO') },
    { label: "Round · with adhesive · D 22", rows: all.filter(p => p.geom === 'ROUND' && p.format === 'D 22' && p.adesivo === 'Sì') },
    { label: "Rectangular · NO adhesive · 17 × N", rows: all.filter(p => p.geom === 'RETT' && p.format === '17 × N' && p.adesivo === 'NO') },
    { label: "Rectangular · with adhesive · 17 × N", rows: all.filter(p => p.geom === 'RETT' && p.format === '17 × N' && p.adesivo === 'Sì') },
    { label: "Kit · portatarghetta + targhette + vetro", rows: all.filter(p => p.sku.endsWith('KIT')) },
  ].filter(g => g.rows.length > 0);

  return (
    <>
      <FamilyHero family={family} navigate={navigate} />

      <section className="section">
        <div className="container">
          <div className="grid-2-narrative tight" style={{ marginBottom: 56, alignItems: "start" }}>
            <div>
              <Eyebrow>Scheda — <span className="accent">supporti pulsanti</span></Eyebrow>
              <h2 className="h1" style={{ marginTop: 18 }}>Geometria <span className="text-light">e fissaggio,</span> a tua scelta.</h2>
              <HRule />
              <p className="lead">Porta-targhette per pulsanti Ø 22 e formato 17 × N. Geometria rettangolare o arrotondata, versione adesiva o senza adesivo, kit completi con targhetta + vetro.</p>
            </div>
            <div style={{ display: "grid", gap: 14 }}>
              {[
                { label: "Materiale",  value: "PVC VØ U.V." },
                { label: "Ø standard", value: "D 22" },
                { label: "Sede targh.", value: "30 × 48 mm" },
                { label: "Pack",       value: "30 pz" },
                { label: "Geometria",  value: "Rectangular · Rounded · sigla orizzontale 48 × 30 mm" },
                { label: "Fissaggio",  value: "NO adhesive (meccanico) · Adhesive (biadesivo strutturale)" },
              ].map((r, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, padding: "12px 0", borderBottom: i < 5 ? "1px solid var(--c-line-2)" : "none" }}>
                  <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, alignSelf: "center" }}>{r.label}</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{r.value}</div>
                </div>
              ))}
            </div>
          </div>

          <Eyebrow>Galleria — <span className="accent">quattro varianti + kit</span></Eyebrow>
          <h3 style={{ fontSize: 22, fontWeight: 700, marginTop: 6, marginBottom: 24, letterSpacing: "-0.01em" }}>Le varianti in figura.</h3>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
            {gallery.map((g, i) => (
              <div key={i} style={{ background: "var(--c-tile)", borderRadius: 6, padding: 18, textAlign: "center" }}>
                <div style={{ aspectRatio: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <img src={`assets/${g.img}`} alt={g.label} style={{ width: "100%", height: "100%", objectFit: "contain" }} />
                </div>
                <div style={{ marginTop: 12, fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>{g.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section tile">
        <div className="container">
          <GroupedTable
            eyebrow="Listino — 14 articoli in 7 famiglie"
            title="Supporti per pulsanti · D 22 + 17 × N · BLACK"
            subtitle="Tutte le geometrie e versioni adesive, più i kit completi."
            columns={cols}
            groups={groups}
            highlightSku={highlightSku}
            footer={DISCLAIMER}
          />
        </div>
      </section>

      <FamilyCallout navigate={navigate} />
    </>
  );
}

Object.assign(window, { FamilyAdesivi, FamilyBinari, FamilyPulsanti });