/* === Family 04 · Fascettabili (rich) === */

function FamilyFascettabili({ family, navigate, highlightSku }) {
  useHighlightScroll(highlightSku);
  const gallery = [
    { img: 'products/04-fascettabili/tubetti_fascettabili_0.png',  label: 'Galleria · tutte' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_1.png',  label: 'Tipologia 1' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_2.png',  label: 'Tipologia 2' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_3.png',  label: 'Tipologia 3' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_4.png',  label: 'Tipologia 4' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_5.png',  label: 'Tipologia 5' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_7.png',  label: 'Tipologia 7' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_8.png',  label: 'Tipologia 8' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_9.png',  label: 'Tipologia 9' },
    { img: 'products/04-fascettabili/tubetti_fascettabili_10.png', label: 'Tipologia 10' },
    { img: 'products/04-fascettabili/tubetti_fascettabile_clip.png', label: 'Clip' },
  ];

  // Build all the listino tables from the products data
  const cols = [
    { key: "sku", label: "Codice", cls: "code" },
    { key: "ltag", label: "L." },
    { key: "spess", label: "Spess." },
    { key: "largh", label: "Largh." },
    { key: "qta", label: "Q.tà" },
    { key: "cembre", label: "Comp. Cembre" },
    { key: "other", label: "Comp. Brady / Murrplastik" },
  ];

  const filterFasc = (material, shore, largh) =>
    getProducts(p => p.kind === 'fascettabile' && p.material === material && p.shore === shore && p.largh === largh);

  const tables = [
    // PVC FLAT 0.5
    { eyebrow: "FLAT 0,5 mm · PVC · CRISTAL · tag 4 + 9 mm", title: "FLAT 0,5 · Shore 83 · tag 4 mm", sub: "CRISTAL Shore 83 MINI", rows: filterFasc('PVC FLAT 0,5', '83', '4 mm') },
    { title: "FLAT 0,5 · Shore 70 · tag 4 mm", sub: "CRISTAL Shore 70 MINI", rows: filterFasc('PVC FLAT 0,5', '70', '4 mm') },
    { title: "FLAT 0,5 · Shore 70 · tag 9 mm", sub: "CRISTAL Shore 70 MINI", rows: filterFasc('PVC FLAT 0,5', '70', '9 mm') },

    // PVC 2 mm
    { eyebrow: "2 mm · PVC · CRISTAL · tag 4 mm", title: "2 mm · Shore 83 · tag 4 mm", sub: "CRISTAL Shore 83 MINI", rows: filterFasc('PVC 2 mm', '83', '4 mm') },
    { title: "2 mm · Shore 70 · tag 4 mm", sub: "CRISTAL Shore 70 MINI", rows: filterFasc('PVC 2 mm', '70', '4 mm') },

    { eyebrow: "2 mm · PVC · CRISTAL · tag 9 + 15 mm", title: "2 mm · Shore 83 · tag 9 mm", sub: "CRISTAL Shore 83 MINI", rows: filterFasc('PVC 2 mm', '83', '9 mm') },
    { title: "2 mm · Shore 70 · tag 9 mm", sub: "CRISTAL Shore 70 MINI", rows: filterFasc('PVC 2 mm', '70', '9 mm') },
    { title: "2 mm · Shore 83 · tag 15 mm", sub: "CRISTAL Shore 83 MINI", rows: filterFasc('PVC 2 mm', '83', '15 mm') },

    // HF EVA
    { eyebrow: "HF EVA · halogen-free · GUMMY", title: "HF EVA · tag 4 mm", sub: "GUMMY Shore 89 MINI", rows: filterFasc('HF EVA 2 mm', '89', '4 mm') },
    { title: "HF EVA · tag 9 mm", sub: "GUMMY Shore 89 MINI", rows: filterFasc('HF EVA 2 mm', '89', '9 mm') },
    { title: "HF EVA · tag 15 mm", sub: "GUMMY Shore 89 MINI", rows: filterFasc('HF EVA 2 mm', '89', '15 mm') },
  ];

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

      {/* GALLERIA TIPOLOGIE */}
      <section className="section">
        <div className="container">
          <Eyebrow>Galleria — <span className="accent">tipologie 1 → 10 + clip</span></Eyebrow>
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 32 }}>Undici geometrie, una sola famiglia.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
            {gallery.map((g, i) => (
              <div key={i} style={{ background: "var(--c-tile)", borderRadius: 6, padding: 16, 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>

      {/* LISTINI */}
      <section className="section tile">
        <div className="container">
          <Eyebrow>Listini — <span className="accent">PVC + HF EVA</span></Eyebrow>
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 36 }}>Tutti i codici, divisi per materiale e tag.</h2>

          {tables.filter(t => t.rows.length > 0).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.filter(t => t.rows.length > 0).length - 1 ? DISCLAIMER : null}
            />
          ))}
        </div>
      </section>

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

Object.assign(window, { FamilyFascettabili });