/* === Simple family pages: Rotoli, Card, Tubetti per binari === */

function FamilyRotoli({ family, navigate, highlightSku }) {
  useHighlightScroll(highlightSku);
  const rows = getProducts(p => p.kind === 'rotolo');
  return (
    <>
      <FamilyHero family={family} navigate={navigate} />
      <section className="section">
        <div className="container">
          <div className="grid-4" style={{ marginBottom: 64 }}>
            {family.features.map((f, i) => (
              <div key={i} style={{ borderTop: "2px solid var(--c-teal)", paddingTop: 22 }}>
                <FeatureRing icon={f.icon} size="sm" />
                <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginTop: 18 }}>{f.label}</div>
                <div style={{ fontSize: 22, fontWeight: 700, marginTop: 6, letterSpacing: "-0.01em" }}>{f.value}</div>
                {f.note && <p className="body" style={{ marginTop: 10, fontSize: 13 }}>{f.note}</p>}
              </div>
            ))}
          </div>
          <DataTable
            eyebrow="Listino — 12 codici"
            title="Rotoli FLAT 0,5"
            columns={[
              { key: "sku", label: "Codice", cls: "code" },
              { key: "larg", label: "Larg." },
              { key: "lung", label: "Lung." },
              { key: "qta", label: "Q.tà / rotolo" },
              { key: "colore", label: "Colore" },
              { key: "hrotolo", label: "h rotolo" },
              { key: "cembre", label: "Comp. Cembre" },
            ]}
            rows={rows}
            highlightSku={highlightSku}
            footer={DISCLAIMER}
          />
        </div>
      </section>
      <FamilyCallout navigate={navigate} />
    </>
  );
}

function FamilyCard({ family, navigate, highlightSku }) {
  useHighlightScroll(highlightSku);
  const industrial = getProducts(p => p.kind === 'card' && /^TEFPW.*5600|TEFPW.*4000|TEFPW.*1200|TEFPW.*800|TEFPY/.test(p.sku) && (parseInt(p.cardpack) === 50 || parseInt(p.cardpack) === 25 && /TEFPW4(30|40)/.test(p.sku) || parseInt(p.cardpack) === 25 && /TEFPY4(30|40)/.test(p.sku)));
  // Simpler: industrial = pack 50 OR (pack 25 AND sigla 4×30 / 4×40)
  const ind = getProducts(p => p.kind === 'card' && p.sub === 'pvc' && (p.cardpack === '50' || (p.cardpack === '25' && (p.sigla === '4 × 30' || p.sigla === '4 × 40'))));
  const red = getProducts(p => p.kind === 'card' && p.sub === 'pvc' && !(p.cardpack === '50' || (p.cardpack === '25' && (p.sigla === '4 × 30' || p.sigla === '4 × 40'))));
  const eva = getProducts(p => p.kind === 'card' && p.sub === 'eva');

  // Industrial: include all TEFP rows in fact (since the catalog Industrial Pack lists 50/25 mix)
  const industrialAll = getProducts(p => p.kind === 'card' && p.sub === 'pvc' && (
    p.sku.endsWith('5600') || p.sku.endsWith('4000') || p.sku.endsWith('1200') || p.sku.endsWith('800')
  ));
  const reducedAll = getProducts(p => p.kind === 'card' && p.sub === 'pvc' && !(
    p.sku.endsWith('5600') || p.sku.endsWith('4000')
  ) && (p.sku.includes('2800') || p.sku.includes('2000')));

  const cardColumns = [
    { key: "sku", label: "Codice", cls: "code" },
    { key: "tipo", label: "Tipo" },
    { key: "sigla", label: "Sigla" },
    { key: "tagpack", label: "Tag/pack" },
    { key: "tagcard", label: "Tag/card" },
    { key: "cardpack", label: "Card/pack" },
    { key: "colore", label: "Colore" },
    { key: "cembre", label: "Comp. Cembre" },
  ];

  return (
    <>
      <FamilyHero family={family} navigate={navigate} />
      <section className="section">
        <div className="container">
          <DataTable
            eyebrow="Listino A — PVC FLAT 0,5 · termotrasferimento"
            title="Industrial packaging — pack 50 / 25 card"
            subtitle="Confezione industriale: 50 card per misura sigla 4 × 10/12/15 mm e 25 card per le misure 4 × 30/40 mm. Doppia versione cromatica White / Yellow."
            columns={cardColumns}
            rows={industrialAll}
            highlightSku={highlightSku}
          />
          <DataTable
            eyebrow="Listino B — PVC FLAT · pack ridotto"
            title="Reduced packaging — PVC · 25 card"
            subtitle="Confezione ridotta per piccoli lotti, prototipi e dispenser. Stesso PVC FLAT 0,5 mm dell'industrial, gamma completa, codici dedicati."
            columns={cardColumns.filter(c => c.key !== 'cembre')}
            rows={reducedAll}
            highlightSku={highlightSku}
            footer="Compatibilità Cembre: nessuna — codice esclusivo MarketProtect."
          />
          <DataTable
            eyebrow="Listino C — Halogen-free EVA · pack ridotto"
            title="Halogen-free EVA — termotrasferimento · 25 card"
            subtitle="Compound halogen-free, low-smoke, per gallerie, navale e ambienti chiusi dove è richiesta la classificazione HF. Solo White, gamma completa 4 × 10/12/15/30/40 mm."
            columns={cardColumns}
            rows={eva}
            highlightSku={highlightSku}
            footer={DISCLAIMER}
          />
        </div>
      </section>
      <FamilyCallout navigate={navigate} />
    </>
  );
}

function FamilyPerBinari({ family, navigate, highlightSku }) {
  useHighlightScroll(highlightSku);
  const rows = getProducts(p => p.kind === 'tubetto-per-binari');
  return (
    <>
      <FamilyHero family={family} navigate={navigate} />
      <section className="section">
        <div className="container">
          <div className="grid-4" style={{ marginBottom: 64 }}>
            <div style={{ borderTop: "2px solid var(--c-teal)", paddingTop: 22 }}>
              <FeatureRing icon="check" size="sm" />
              <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginTop: 18 }}>Materiale</div>
              <div style={{ fontSize: 22, fontWeight: 700, marginTop: 6, letterSpacing: "-0.01em" }}>PVC VØ trasparente</div>
            </div>
            <div style={{ borderTop: "2px solid var(--c-teal)", paddingTop: 22 }}>
              <FeatureRing icon="insert" size="sm" />
              <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginTop: 18 }}>Fissaggio</div>
              <div style={{ fontSize: 22, fontWeight: 700, marginTop: 6, letterSpacing: "-0.01em" }}>Snap-in su binario 9 mm</div>
            </div>
            <div style={{ borderTop: "2px solid var(--c-teal)", paddingTop: 22 }}>
              <FeatureRing icon="check" size="sm" />
              <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginTop: 18 }}>Tag</div>
              <div style={{ fontSize: 22, fontWeight: 700, marginTop: 6, letterSpacing: "-0.01em" }}>4 mm</div>
            </div>
            <div style={{ borderTop: "2px solid var(--c-teal)", paddingTop: 22 }}>
              <FeatureRing icon="check" size="sm" />
              <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginTop: 18 }}>Pack</div>
              <div style={{ fontSize: 22, fontWeight: 700, marginTop: 6, letterSpacing: "-0.01em" }}>Mini · dispenser</div>
            </div>
          </div>
          <DataTable
            eyebrow="Listino — Tag holder per binario 9 mm"
            title="Tubetti snap-in"
            columns={[
              { key: "sku", label: "Codice", cls: "code" },
              { key: "tipo", label: "Tipo" },
              { key: "ltag", label: "L. tag" },
              { key: "spess", label: "Spess." },
              { key: "largh", label: "Largh." },
              { key: "cembre", label: "Comp. Cembre" },
              { key: "other", label: "Comp. Brady" },
            ]}
            rows={rows}
            highlightSku={highlightSku}
            footer={DISCLAIMER}
          />
        </div>
      </section>
      <FamilyCallout navigate={navigate} />
    </>
  );
}

Object.assign(window, { FamilyRotoli, FamilyCard, FamilyPerBinari });