// Hi-fi Collections index + Collection detail.

const ALL_COLLECTIONS = [
  { img: 'img/c-genesis-terre.jpg',    name: 'GENESIS', finish: 'Terre',           pieces: 36, persons: 6, swatch: '#7a6a4e', material: 'Gres cu email reactiv', use: 'restaurant' },
  { img: 'img/c-genesis-mer.jpg',      name: 'GENESIS', finish: 'Mer',             pieces: 36, persons: 6, swatch: '#3c5e8a', material: 'Gres cu email reactiv', use: 'restaurant' },
  { img: 'img/c-genesis-basalte.jpg',  name: 'GENESIS', finish: 'Basalte',         pieces: 36, persons: 6, swatch: '#3a2a22', material: 'Gres cu email reactiv', use: 'restaurant' },
  { img: 'img/c-genesis-plus-terre.jpg', name: 'GENESIS+', finish: 'Terre · 60',   pieces: 60, persons: 6, swatch: '#7a6a4e', material: 'Gres cu email reactiv', use: 'hotel', badge: 'Plus' },
  { img: 'img/c-iris-marron.jpg',      name: 'IRIS',    finish: 'Marron sauvage',  pieces: 48, persons: 6, swatch: '#7a4c2e', material: 'Gres cu email reactiv', use: 'restaurant' },
  { img: 'img/c-iris-nuit.jpg',        name: 'IRIS',    finish: 'Bleu nuit',       pieces: 48, persons: 6, swatch: '#1a2848', material: 'Gres cu email reactiv', use: 'restaurant' },
  { img: 'img/c-iris-ivoire.jpg',      name: 'IRIS',    finish: 'Blanc ivoire',    pieces: 48, persons: 6, swatch: '#e8dec8', material: 'Gres cu email reactiv', use: 'hotel' },
  { img: 'img/c-magma-cobalt.jpg',     name: 'MAGMA',   finish: 'Cobalt',          pieces: 30, persons: 6, swatch: '#2a4b8c', material: 'Gres cu email reactiv', use: 'cafenea' },
  { img: 'img/c-magma-menthe.jpg',     name: 'MAGMA',   finish: 'Menthe',          pieces: 30, persons: 6, swatch: '#7aa590', material: 'Gres cu email reactiv', use: 'cafenea' },
  { img: 'img/c-scandi-olive.jpg',     name: 'SCANDI',  finish: 'Olive',           pieces: 36, persons: 4, swatch: '#7a8456', material: 'Gres reciclat',         use: 'restaurant' },
  { img: 'img/c-scandi-marine.jpg',    name: 'SCANDI',  finish: 'Marine',          pieces: 36, persons: 4, swatch: '#2a3a52', material: 'Gres reciclat',         use: 'restaurant' },
  { img: 'img/c-scandi-ocre.jpg',      name: 'SCANDI',  finish: 'Ocre',            pieces: 36, persons: 4, swatch: '#c89548', material: 'Gres reciclat',         use: 'cafenea' },
  { img: 'img/c-gourmet-onyx.jpg',     name: 'GOURMET', finish: 'Onyx',            pieces: 36, persons: 4, swatch: '#1a1a1a', material: 'Gres cu email reactiv', use: 'restaurant' },
  { img: 'img/c-oxygen-rose.jpg',      name: 'OXYGEN',  finish: 'Rose poudre',     pieces: 42, persons: 6, swatch: '#d8aea2', material: 'Gres cu email reactiv', use: 'cafenea' },
  { img: 'img/c-oxygen-vert.jpg',      name: 'OXYGEN',  finish: 'Vert de gris',    pieces: 42, persons: 6, swatch: '#8a9888', material: 'Gres cu email reactiv', use: 'cafenea' },
  { img: 'img/c-moon-petrole.jpg',     name: 'MOON',    finish: 'Pétrole',         pieces: 30, persons: 6, swatch: '#1a2a3a', material: 'Gres cu email reactiv', use: 'cafenea' },
  { img: 'img/c-moon-encre.jpg',       name: 'MOON',    finish: 'Encre',           pieces: 30, persons: 6, swatch: '#0a0a0a', material: 'Gres cu email reactiv', use: 'cafenea' },
  { img: 'img/c-zen-natural.jpg',      name: 'ZEN',     finish: 'Natural',         pieces: 48, persons: 6, swatch: '#a8b0b8', material: 'Gres cu email reactiv', use: 'hotel' },
  { img: 'img/c-island.jpg',           name: 'ISLAND',  finish: 'Terre et mer',    pieces: 42, persons: 6, swatch: '#4a6a52', material: 'Gres cu email reactiv', use: 'restaurant' },
  { img: 'img/c-cloud.jpg',            name: 'CLOUD',   finish: 'Gris orage',      pieces: 48, persons: 6, swatch: '#b0b4b8', material: 'Gres cu email reactiv', use: 'hotel' },
  { img: 'img/c-stone.jpg',            name: 'STONE',   finish: 'Gris lune',       pieces: 48, persons: 6, swatch: '#9aa0a4', material: 'Gres cu email reactiv', use: 'hotel' },
  { img: 'img/c-cosmos-azur.jpg',      name: 'COSMOS',  finish: 'Azur',            pieces: 30, persons: 6, swatch: '#5878a8', material: 'Gres cu email reactiv', use: 'cafenea' },
  { img: 'img/c-cosmos-creme.jpg',     name: 'COSMOS',  finish: 'Crème',           pieces: 30, persons: 6, swatch: '#e8dec0', material: 'Gres cu email reactiv', use: 'cafenea' },
  { img: 'img/c-stellar.jpg',          name: 'STELLAR', finish: 'Gris béton',      pieces: 48, persons: 6, swatch: '#5a5e62', material: 'Gres cu email reactiv', use: 'restaurant' },
  { img: 'img/c-napoli.jpg',           name: 'NAPOLI',  finish: 'Agrume',          pieces: 28, persons: 4, swatch: '#e4a838', material: 'Porțelan pictat manual', use: 'cafenea' },
  { img: 'img/c-pure.jpg',             name: 'PURE',    finish: 'Blanc Neige',     pieces: 32, persons: 4, swatch: '#f0ece4', material: 'Gres cu email reactiv', use: 'cafenea' },
];

function ColectiiHi() {
  return (
    <HfPage>
      <HfHeader active="col" />

      {/* HERO */}
      <section style={{ padding: '72px 56px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: hfBody, fontSize: 11, fontWeight: 600,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: HF.ink2, marginBottom: 22,
        }}>
          <span>Acasă</span><span style={{ color: HF.ink3 }}>›</span><span style={{ color: HF.ink }}>Colecții</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'end' }}>
          <div>
            <HfH1 style={{ fontSize: 96, lineHeight: 0.98 }}>
              26 colecții.<br/>
              Toate <em style={{ fontStyle: 'italic', fontWeight: 400 }}>complete</em>.<br/>
              Toate <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>prin ofertă</em>.
            </HfH1>
          </div>
          <div>
            <HfLede dim style={{ maxWidth: 420 }}>
              Servicii complete între 28 și 60 piese, pentru 4-6 persoane. Stoneware cu email reactiv sau porțelan pictat. Niciun preț listat — comanzi prin cerere de ofertă.
            </HfLede>
            <div style={{ marginTop: 22 }}>
              <HfBtn variant="accent" arrow href={HFRoutes.rfq}>Cere recomandare pe locație</HfBtn>
            </div>
          </div>
        </div>
      </section>

      {/* FILTER BAR */}
      <section style={{ padding: '20px 56px', borderBottom: `1px solid ${HF.line}`, background: HF.paper, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', position: 'sticky', top: 0, zIndex: 5 }}>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: HF.ink2 }}>Locație</span>
          <div style={{ display: 'flex', gap: 6 }}>
            {['Toate', 'Restaurante', 'Cafenele', 'Hoteluri'].map((f, i) => (
              <HfBtn key={f} variant={i === 0 ? 'solid' : 'ghost'} size="sm">{f}</HfBtn>
            ))}
          </div>
          <span style={{ width: 1, height: 24, background: HF.line2 }}></span>
          <span style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: HF.ink2 }}>Mărime</span>
          <div style={{ display: 'flex', gap: 6 }}>
            {['28-36 piese', '42-48 piese', '60 piese'].map(f => (
              <HfBtn key={f} variant="ghost" size="sm">{f}</HfBtn>
            ))}
          </div>
          <span style={{ width: 1, height: 24, background: HF.line2 }}></span>
          <span style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: HF.ink2 }}>Material</span>
          <div style={{ display: 'flex', gap: 6 }}>
            {['Gres reactiv', 'Gres reciclat', 'Porțelan'].map(f => (
              <HfBtn key={f} variant="ghost" size="sm">{f}</HfBtn>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center', fontFamily: hfBody, fontSize: 13, color: HF.ink2 }}>
          <span>{ALL_COLLECTIONS.length} colecții</span>
          <span>·</span>
          <span>sortează: <strong style={{ color: HF.ink, fontWeight: 600 }}>relevant</strong> ↓</span>
        </div>
      </section>

      {/* COLOR FAMILY OVERVIEW STRIP */}
      <section style={{ padding: '48px 56px', borderBottom: `1px solid ${HF.line}`, background: HF.paper2 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
          <HfEyebrow num="·">Familii cromatice</HfEyebrow>
          <HfText sm dim>fiecare grup, o atmosferă diferită</HfText>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 16 }}>
          {[
            { l: 'Pământ', swatches: ['#7a6a4e', '#3a2a22', '#7a4c2e', '#c89548'] },
            { l: 'Albastru', swatches: ['#3c5e8a', '#1a2848', '#2a4b8c', '#5878a8'] },
            { l: 'Verde', swatches: ['#7aa590', '#7a8456', '#8a9888', '#4a6a52'] },
            { l: 'Neutru', swatches: ['#a8b0b8', '#b0b4b8', '#9aa0a4', '#5a5e62'] },
            { l: 'Cald', swatches: ['#d8aea2', '#e4a838', '#e8dec0'] },
            { l: 'Luminos', swatches: ['#e8dec8', '#f0ece4'] },
            { l: 'Negru', swatches: ['#1a1a1a', '#0a0a0a'] },
          ].map(g => (
            <div key={g.l} style={{ padding: 16, background: HF.paper, border: `1px solid ${HF.line2}` }}>
              <div style={{ display: 'flex', gap: 4, marginBottom: 12, flexWrap: 'wrap' }}>
                {g.swatches.map((s, i) => (
                  <span key={i} style={{ width: 22, height: 22, background: s, border: `1px solid ${HF.line2}` }}></span>
                ))}
              </div>
              <div style={{ fontFamily: hfBody, fontSize: 13, fontWeight: 600, color: HF.ink }}>{g.l}</div>
              <div style={{ fontFamily: hfBody, fontSize: 11, color: HF.ink2, marginTop: 4 }}>{g.swatches.length} finisaje</div>
            </div>
          ))}
        </div>
      </section>

      {/* GRID */}
      <section style={{ padding: '56px 56px 80px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {ALL_COLLECTIONS.map((c, i) => (
            <HfCollectionCard
              key={i} {...c}
              compat={[
                'mas. spălat',
                'microunde',
                c.material.startsWith('Gres') ? 'cuptor' : null,
              ].filter(Boolean)}
              accent={i === 4}
              compact
            />
          ))}
        </div>
      </section>

      {/* CTA STRIP */}
      <section style={{ background: HF.ink, color: '#fff', padding: '80px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center' }}>
          <HfH2 light style={{ fontSize: 56 }}>
            Nu știi de unde să începi?<br/>
            <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>Spune-ne ce locație ai</em> — îți recomandăm 2-3 colecții.
          </HfH2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
            <HfBtn variant="accent" size="lg" arrow href={HFRoutes.rfq}>Cere recomandare</HfBtn>
            <HfBtn variant="outline" dark size="lg" href="tel:+40700000000">Sună-ne direct</HfBtn>
            <HfText light sm style={{ marginTop: 8, opacity: 0.82 }}>răspuns &lt; 24h</HfText>
          </div>
        </div>
      </section>

      <HfFooter />
    </HfPage>
  );
}

// ─── HfPieceCard — large 50/50 split (alternates L/R) for items INCLUDED in the
// service complet. Image on one side, full piece info + CTA on the other.
function HfPieceCard({ img, num, type, title, dim, qty, desc, reverse, capacity }) {
  return (
    <article style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr',
      border: `1px solid ${HF.line2}`, background: HF.paper,
      minHeight: 440,
    }}>
      <div style={{
        order: reverse ? 2 : 1,
        position: 'relative', minHeight: 440,
      }}>
        <HfImg src={img} alt={title} h="100%" />
        <div style={{
          position: 'absolute', top: 20, left: reverse ? 'auto' : 20, right: reverse ? 20 : 'auto',
          background: 'var(--accent)', color: HF.ink,
          padding: '6px 14px',
          fontFamily: hfBody, fontSize: 11, fontWeight: 700,
          letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>Inclus în set · {qty}</div>
      </div>
      <div style={{
        order: reverse ? 1 : 2,
        padding: '48px 56px', display: 'flex', flexDirection: 'column',
        justifyContent: 'space-between', gap: 24,
      }}>
        <div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            marginBottom: 18,
          }}>
            <span style={{ fontFamily: hfDisplay, fontSize: 22, fontWeight: 500, color: 'var(--accent)' }}>{num}</span>
            <span style={{ width: 22, height: 1, background: HF.line2 }}></span>
            <span style={{
              fontFamily: hfBody, fontSize: 11, fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: HF.ink2,
            }}>{type}</span>
          </div>
          <HfH2 style={{ fontSize: 48, lineHeight: 1.05 }}>{title}</HfH2>
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 18, flexWrap: 'wrap',
            marginTop: 14, paddingBottom: 20,
            borderBottom: `1px solid ${HF.line2}`,
          }}>
            <span style={{ fontFamily: hfDisplay, fontSize: 28, fontWeight: 500, color: HF.ink }}>{dim}</span>
            {capacity && <span style={{ fontFamily: hfDisplay, fontSize: 22, fontStyle: 'italic', color: HF.ink2 }}>{capacity}</span>}
            <span style={{
              fontFamily: hfBody, fontSize: 12, fontWeight: 600,
              letterSpacing: '0.16em', textTransform: 'uppercase',
              color: HF.ink2,
            }}>
              {qty} în service · sau singular la cerere
            </span>
          </div>
          <HfText dim style={{ marginTop: 22, fontSize: 16, lineHeight: 1.6, maxWidth: 520 }}>{desc}</HfText>
        </div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <HfBtn variant="solid" arrow href={HFRoutes.rfq}>Cere ofertă pentru piesă</HfBtn>
          <HfBtn variant="ghost">Specificații complete</HfBtn>
        </div>
      </div>
    </article>
  );
}

// ─── HfPieceCardCompact — for pieces only available separately (not in the
// 36-piece service complet). Image + title + dim + 1-line desc + CTA. Used in
// a 3-up grid below the main piece-by-piece section.
function HfPieceCardCompact({ img, type, title, dim, desc, note }) {
  return (
    <article style={{
      border: `1px solid ${HF.line2}`, background: HF.paper,
      display: 'flex', flexDirection: 'column',
    }}>
      <HfImg src={img} alt={title} h={240} />
      <div style={{
        padding: '24px 28px 26px', borderTop: `1px solid ${HF.line2}`,
        flex: 1, display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          fontFamily: hfBody, fontSize: 11, fontWeight: 700,
          letterSpacing: '0.20em', textTransform: 'uppercase',
          color: HF.ink2, marginBottom: 10,
        }}>{type}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, marginBottom: 10 }}>
          <HfH3 style={{ fontSize: 24, lineHeight: 1.1 }}>{title}</HfH3>
          <span style={{ fontFamily: hfDisplay, fontSize: 20, fontWeight: 500, color: HF.ink, whiteSpace: 'nowrap' }}>{dim}</span>
        </div>
        <HfText dim sm style={{ marginBottom: 18, flex: 1, fontSize: 13, lineHeight: 1.5 }}>{desc}</HfText>
        {note && (
          <div style={{
            fontFamily: hfBody, fontSize: 11, fontWeight: 700,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--accent)', marginBottom: 16,
          }}>{note}</div>
        )}
        <HfBtn variant="outline" size="sm" arrow href={HFRoutes.rfq} style={{ alignSelf: 'flex-start' }}>Cere ofertă</HfBtn>
      </div>
    </article>
  );
}

// ─── COLLECTION_DETAILS — data for the dynamic detail page (site/colectie.html#<slug>).
// 5 collections have full piece-by-piece breakdown ("included" + "separate" arrays).
// The other 21 fall back to summary mode (just hero + composition text + RFQ).
// Slugs are kebab-case of "<name>-<finish>" with diacritics stripped.
const COLLECTION_DETAILS = {

  // ───── GENESIS Terre · 36 piese (FULL) ─────
  'genesis-terre': {
    name: 'GENESIS', finish: 'Terre', swatch: '#7a6a4e',
    pieces: 36, persons: 6, material: 'Gres cu email reactiv',
    colors: 'Degradeu albastru-gri-kaki', warranty: '2 ani · restock anual',
    desc: 'Colecția GENESIS este inspirată din călătorii între pământ și mare. În declinarea TERRE apare un degradeu albastru-gri-kaki care amintește straturile pământului. Linii asimetrice, tăieturi clare — caracter și autenticitate.',
    composition: '12 farfurii (mari + desert) · 12 boluri (medii + mici) · 6 căni · 6 cești',
    hero: 'img/h-genesis-terre.jpg',
    gallery: ['img/c-genesis-terre.jpg', 'img/stack-genesis.jpg', 'img/flat-genesis.jpg', 'img/h-genesis-plus.jpg'],
    included: [
      { img: 'img/p-gen-terre-assiette-27.jpg', num: '01', type: 'Farfurie principală', title: 'Farfurie plată mare', dim: 'Ø 27 cm', qty: '6 buc', desc: 'Farfuria principală — ridicătură centrală și margini ușor înclinate. Se adaptează la orice fel, ideală pentru servire sau prezentare. Fiecare piesă are un degradeu unic.' },
      { img: 'img/p-gen-terre-assiette-20.jpg', num: '02', type: 'Farfurie desert', title: 'Farfurie mică', dim: 'Ø 20,5 cm', qty: '6 buc', desc: 'Versiunea redusă a farfuriei plate. Pentru aperitive, brânzeturi, deserturi sau farfurie de pâine. Stivuibilă peste cea mare pentru depozitare eficientă.' },
      { img: 'img/p-gen-terre-bol-17.jpg', num: '03', type: 'Bol mediu', title: 'Bol Ø 17 cm', dim: 'Ø 17 cm', qty: '6 buc', desc: 'Bol versatil cu formă originală dar practică. Se folosește și ca farfurie adâncă pentru supe, salate, paste. Indispensabil în service-ul zilnic.' },
      { img: 'img/p-gen-terre-bol-11.jpg', num: '04', type: 'Bol mic', title: 'Bol Ø 11 cm', dim: 'Ø 11 cm', qty: '6 buc', desc: 'Bolul mic — pentru biscuiți, fructe uscate, sosuri, dipuri, condimente. Volum redus, prezență mare pe masă.' },
      { img: 'img/p-gen-terre-mug.jpg', num: '05', type: 'Cană mare', title: 'Cană 40 cl', dim: 'Ø 9 cm', capacity: '· 40 cl', qty: '6 buc', desc: 'Cană mare cu toartă largă pentru priză sigură. Perfectă pentru cappuccino, café au lait, ciocolată caldă sau mic-dejun.' },
      { img: 'img/p-gen-terre-tasse-15.jpg', num: '06', type: 'Ceașcă lungo', title: 'Ceașcă 15 cl', dim: 'Ø 7,5 cm', capacity: '· 15 cl', qty: '6 buc', desc: 'Ceașcă perfect dimensionată — nici prea mare, nici prea mică. Pentru cafea, espresso, aperitive sau verrines.' },
    ],
    separate: [
      { img: 'img/p-gen-terre-assiette-creuse.jpg', type: 'Farfurie adâncă', title: 'Assiette creuse', dim: 'Ø 21 cm', desc: 'Pentru supe, paste cu sos, mâncăruri cu garnitură. Marginea înaltă reține lichidul.', note: 'Inclusă în Service Plus 60' },
      { img: 'img/p-gen-terre-bol-8.jpg', type: 'Bol mini · ramequin', title: 'Bol Ø 8 cm', dim: 'Ø 8 cm', desc: 'Ramequin pentru sosuri, condimente, garnituri individuale. Format perfect pentru plating compus.', note: 'doar singular · la cerere' },
      { img: 'img/p-gen-terre-tasse-8.jpg', type: 'Ceașcă espresso', title: 'Tasse 8 cl', dim: '8 cl', desc: 'Format clasic italian. Pentru single shot perfect echilibrat. Stivuibilă cu farfurioara.', note: 'Inclusă în Service Plus 60' },
      { img: 'img/p-gen-terre-saladier.jpg', type: 'Saladier', title: 'Bol salată', dim: 'Ø 22,5 cm', desc: 'Bol generos pentru salate la centrul mesei. Funcționează și ca centerpiece.', note: 'doar singular · la cerere' },
      { img: 'img/p-gen-terre-plateau-33.jpg', type: 'Platou servire', title: 'Plateau Ø 33 cm', dim: 'Ø 33 cm', desc: 'Platou mare pentru aperitive, brânzeturi, charcuterie. Centerpiece-ul mesei.', note: 'doar singular · la cerere' },
      { img: 'img/p-gen-terre-plateau-3.jpg', type: 'Set 3 platouri', title: 'Plateaux × 3', dim: 'trei dimensiuni', desc: 'Set de trei platouri pentru dressage stratificat — aperitive, sushi, brânzeturi.', note: 'doar singular · la cerere' },
    ],
  },

  // ───── IRIS Marron sauvage · 48 piese (FULL) ─────
  'iris-marron-sauvage': {
    name: 'IRIS', finish: 'Marron sauvage', swatch: '#7a4c2e',
    pieces: 48, persons: 6, material: 'Gres cu email reactiv',
    colors: 'Degradeu bej și maron', warranty: '2 ani · restock anual',
    desc: 'Colecția IRIS este un mix subtil între sobrietate și originalitate. Negru elegant la exterior, email reactiv profund la interior. În declinarea MARRON SAUVAGE se dezvăluie un disc pigmentat cu nuanțe infinite — un visual organic eblouitor.',
    composition: '18 farfurii (3 dimensiuni) · 6 farfurii adânci · 12 boluri (2 dimensiuni) · 6 căni · 6 cești',
    hero: 'img/h-iris-marron.jpg',
    gallery: ['img/c-iris-marron.jpg'],
    included: [
      { img: 'img/p-iris-marron-assiette-26.jpg', num: '01', type: 'Farfurie principală', title: 'Farfurie plată mare', dim: 'Ø 26 cm', qty: '6 buc', desc: 'Farfuria principală cu margini negre și interior cu email reactiv. Plating-ul devine spectaculos pe acest fundal organic.' },
      { img: 'img/p-iris-marron-assiette-21.jpg', num: '02', type: 'Farfurie medie', title: 'Farfurie Ø 21,5 cm', dim: 'Ø 21,5 cm', qty: '6 buc', desc: 'Talia intermediară. Pentru aperitive consistente, deserturi de mărime medie sau ca farfurie de fel principal mai discret.' },
      { img: 'img/p-iris-marron-assiette-16.jpg', num: '03', type: 'Farfurie desert', title: 'Farfurie Ø 16 cm', dim: 'Ø 16 cm', qty: '6 buc', desc: 'Cea mai mică farfurie din set. Pentru amuse-bouches, brânză, biscuiți, farfurie de pâine.' },
      { img: 'img/p-iris-marron-assiette-creuse.jpg', num: '04', type: 'Farfurie adâncă', title: 'Assiette creuse Ø 22,5 cm', dim: 'Ø 22,5 cm', qty: '6 buc', desc: 'Pentru supe, paste cu sos abundent, mâncăruri cu lichid. Marginea înaltă pentru servire curată.' },
      { img: 'img/p-iris-marron-bol-16.jpg', num: '05', type: 'Bol mediu', title: 'Bol Ø 16,5 cm', dim: 'Ø 16,5 cm', qty: '6 buc', desc: 'Bol versatil — bowls, paste, salate, deserturi cremoase. Exterior negru, interior pigmentat.' },
      { img: 'img/p-iris-marron-bol-12.jpg', num: '06', type: 'Bol mic', title: 'Bol Ø 12 cm', dim: 'Ø 12 cm', qty: '6 buc', desc: 'Bol mic pentru sosuri, ramequin, dipuri, condimente individuale.' },
      { img: 'img/p-iris-marron-mug.jpg', num: '07', type: 'Cană mare', title: 'Cană 40 cl', dim: 'Ø 9 cm', capacity: '· 40 cl', qty: '6 buc', desc: 'Cană mare cu efect reactiv intens la interior. Pentru cappuccino, café au lait, ciocolată caldă.' },
      { img: 'img/p-iris-marron-tasse.jpg', num: '08', type: 'Ceașcă', title: 'Ceașcă 15 cl', dim: 'Ø 7,5 cm', capacity: '· 15 cl', qty: '6 buc', desc: 'Ceașcă elegantă cu emailul reactiv la interior — pe măsură ce se golește, dezvăluie un visual unic.' },
    ],
    separate: [
      { img: 'img/p-iris-marron-saladier.jpg', type: 'Saladier', title: 'Saladier × 2', dim: 'Ø 24 + Ø 28,5 cm', desc: 'Set de două saladiere de dimensiuni diferite pentru servire la centrul mesei.', note: 'doar singular · la cerere' },
    ],
  },

  // ───── NAPOLI Agrume · 28 piese (FULL) ─────
  'napoli-agrume': {
    name: 'NAPOLI', finish: 'Agrume', swatch: '#e4a838', material: 'Porțelan pictat manual',
    pieces: 28, persons: 4, colors: 'Albastru / portocaliu / verde pe alb',
    warranty: '2 ani',
    desc: 'Colecția NAPOLI se inspiră din livezile însorite din sudul Italiei. Fiecare piesă e pictată manual cu motive de frunze, fructe și agrume de artizani talentați. Atmosferă caldă și primitoare, perfectă pentru cafenele cu personalitate sudică.',
    composition: '4 farfurii mari · 4 farfurii mici · 4 farfurii adânci · 4 cești cu farfurioară · 4 boluri mari · 4 boluri mici',
    hero: 'img/h-napoli.jpg',
    gallery: ['img/c-napoli.jpg'],
    included: [
      { img: 'img/p-napoli-assiette-27.jpg', num: '01', type: 'Farfurie principală', title: 'Farfurie plată mare', dim: 'Ø 27 cm', qty: '4 buc', desc: 'Farfuria principală cu motive de agrume — bordură pictată manual cu portocale, frunze și flori. Atmosferă mediteraneană autentică.' },
      { img: 'img/p-napoli-assiette-20.jpg', num: '02', type: 'Farfurie desert', title: 'Farfurie Ø 20 cm', dim: 'Ø 20 cm', qty: '4 buc', desc: 'Pentru aperitive, brânzeturi, dolce. Motive variate, fiecare piesă unică prin pictura manuală.' },
      { img: 'img/p-napoli-assiette-creuse.jpg', num: '03', type: 'Farfurie adâncă', title: 'Assiette creuse', dim: 'Ø 21,5 cm', qty: '4 buc', desc: 'Pentru paste, supe, risotto. Cu motive interioare pictate care apar pe măsură ce se golește.' },
      { img: 'img/p-napoli-bol-17.jpg', num: '04', type: 'Bol mediu', title: 'Bol Ø 17,5 cm', dim: 'Ø 17,5 cm', qty: '4 buc', desc: 'Bol generos pentru bowls, cereale, fructe. Bordura cu motive de frunze albastre.' },
      { img: 'img/p-napoli-bol-12.jpg', num: '05', type: 'Bol mic', title: 'Bol Ø 12 cm', dim: 'Ø 12 cm', qty: '4 buc', desc: 'Bol mic pentru iaurt, sosuri, dipuri sau espresso freddo.' },
      { img: 'img/p-napoli-tasse.jpg', num: '06', type: 'Ceașcă + farfurioară', title: 'Ceașcă 20 cl', dim: '20 cl', qty: '4 seturi', desc: 'Set de 8 piese — 4 cești și 4 farfurioare. Pentru cappuccino, café au lait, ceai. Motivul agrume pe ambele.' },
    ],
    separate: [
      { img: 'img/p-napoli-saladier.jpg', type: 'Saladier × 2', title: 'Saladiere', dim: 'Ø 23,5 + Ø 28 cm', desc: 'Două saladiere cu motive variate — pentru servire la centrul mesei.', note: 'doar singular · la cerere' },
      { img: 'img/p-napoli-carafe.jpg', type: 'Carafă', title: 'Carafă 170 cl', dim: '170 cl', desc: 'Carafă pictată manual pentru apă sau vin de masă. Centerpiece-ul atmosferei napolitane.', note: 'doar singular · la cerere' },
    ],
  },

  // ───── OXYGEN Rose poudre · 42 piese (FULL) ─────
  'oxygen-rose-poudre': {
    name: 'OXYGEN', finish: 'Rose poudre', swatch: '#d8aea2', material: 'Gres cu email reactiv',
    pieces: 42, persons: 6, colors: 'Degradeu roze pudrat și bej',
    warranty: '2 ani · restock anual',
    desc: 'Colecția OXYGEN se inspiră din respirația naturii. Finisaj bej mat și pestriț la exterior contrastând cu o culoare intensă și strălucitoare la interior. Fiecare piesă e unică prin tehnica de emaillere — stivuirea și dressage-ul aduc singularitate mesei.',
    composition: '12 farfurii · 24 boluri și ramequins · 6 căni · 6 cești cu farfurioare',
    hero: 'img/h-oxygen-rose.jpg',
    gallery: ['img/c-oxygen-rose.jpg'],
    included: [
      { img: 'img/p-oxygen-rose-assiette-27.jpg', num: '01', type: 'Farfurie principală', title: 'Farfurie plată mare', dim: 'Ø 27 cm', qty: '6 buc', desc: 'Farfurie principală cu exterior bej granulat și interior roz pudrat strălucitor. Plating-ul iese în evidență pe contrastul de finisaje.' },
      { img: 'img/p-oxygen-rose-assiette-21.jpg', num: '02', type: 'Farfurie desert', title: 'Farfurie Ø 21,5 cm', dim: 'Ø 21,5 cm', qty: '6 buc', desc: 'Talia mai mică. Pentru aperitive sau deserturi delicate. Fiecare piesă are un degradeu unic.' },
      { img: 'img/p-oxygen-rose-bol-22.jpg', num: '03', type: 'Bol mare', title: 'Bol Ø 22 cm', dim: 'Ø 22 cm', qty: '6 buc', desc: 'Bol mare pentru salate generoase, paste pentru două persoane, sau servire la centrul mesei.' },
      { img: 'img/p-oxygen-rose-bol-17.jpg', num: '04', type: 'Bol mediu', title: 'Bol Ø 17,5 cm', dim: 'Ø 17,5 cm', qty: '6 buc', desc: 'Bol versatil pentru bowls, supe, salate individuale. Interior roz pudrat reactiv.' },
      { img: 'img/p-oxygen-rose-bol-13.jpg', num: '05', type: 'Bol mic', title: 'Bol Ø 13 cm', dim: 'Ø 13 cm', qty: '6 buc', desc: 'Bol mic pentru garnituri, deserturi cremoase, iaurt cu fructe.' },
      { img: 'img/p-oxygen-rose-bol-9.jpg', num: '06', type: 'Ramequin', title: 'Bol mini Ø 9 cm', dim: 'Ø 9 cm', qty: '6 buc', desc: 'Ramequin pentru sosuri, condimente, garnituri individuale fine-dining.' },
      { img: 'img/p-oxygen-rose-mug.jpg', num: '07', type: 'Cană', title: 'Cană 30 cl', dim: '30 cl', qty: '6 buc', desc: 'Cană pentru café au lait, cappuccino, ciocolată caldă. Finisaj reactiv intens.' },
    ],
    separate: [],
  },

  // ───── GOURMET Onyx · 36 piese (FULL) ─────
  'gourmet-onyx': {
    name: 'GOURMET', finish: 'Onyx', swatch: '#1a1a1a', material: 'Gres cu email reactiv',
    pieces: 36, persons: 4, colors: 'Negru onyx granulat / alb granulat',
    warranty: '2 ani · restock anual',
    desc: 'Colecția GOURMET — originală și ultra-modernă prin formele sferice care dau volum mâncării. Inspirată din universul rafinat al restaurației gastronomice, fiecare piesă oferă o experiență culinară unică. Negru mat strălucitor la exterior, alb granulat la interior.',
    composition: '16 farfurii (4 dimensiuni) · 12 cești și căni (3 dimensiuni) · 8 boluri (2 dimensiuni)',
    hero: 'img/h-gourmet.jpg',
    gallery: ['img/c-gourmet-onyx.jpg'],
    included: [
      { img: 'img/p-gourmet-assiette-28.jpg', num: '01', type: 'Farfurie principală', title: 'Farfurie plată Ø 28 cm', dim: 'Ø 28 cm', qty: '4 buc', desc: 'Cea mai mare farfurie din set, negru onyx exterior. Pentru fel principal gastronomic — plating-ul iese ca un astru pe fundal lunar.' },
      { img: 'img/p-gourmet-assiette-21.jpg', num: '02', type: 'Farfurie medie', title: 'Farfurie Ø 21,5 cm', dim: 'Ø 21,5 cm', qty: '4 buc', desc: 'Talia intermediară pentru aperitive consistente, deserturi cu plating elaborate.' },
      { img: 'img/p-gourmet-assiette-15.jpg', num: '03', type: 'Farfurie desert', title: 'Farfurie Ø 15,5 cm', dim: 'Ø 15,5 cm', qty: '4 buc', desc: 'Talia mică pentru amuse-bouches, mignardises, friandises. Format compact pentru menu-uri gastronomice.' },
      { img: 'img/p-gourmet-assiette-creuse.jpg', num: '04', type: 'Farfurie adâncă', title: 'Assiette creuse', dim: 'Ø 21,5 cm', qty: '4 buc', desc: 'Pentru supe-velouté, jus, broths. Interior alb granulat care contrastează cu negrul exterior.' },
      { img: 'img/p-gourmet-bol-15.jpg', num: '05', type: 'Bol mare', title: 'Bol Ø 15 cm', dim: 'Ø 15 cm', qty: '4 buc', desc: 'Formă sferică ce dă volum și prezență. Pentru bowls signature, salate compozite, deserturi cremoase.' },
      { img: 'img/p-gourmet-bol-12.jpg', num: '06', type: 'Bol mic', title: 'Bol Ø 12 cm', dim: 'Ø 12 cm', qty: '4 buc', desc: 'Bol mic sferic pentru garnituri individuale, sosuri-emulsie, deserturi parfumate.' },
      { img: 'img/p-gourmet-mug-70.jpg', num: '07', type: 'Cană mare', title: 'Cană 70 cl', dim: '70 cl', qty: '4 buc', desc: 'Cana mare — singulară prin volum. Pentru chocolat chaud signature, latte XL, ceaiuri infuzate.' },
      { img: 'img/p-gourmet-mug-40.jpg', num: '08', type: 'Cană mediu', title: 'Cană 40 cl', dim: '40 cl', qty: '4 buc', desc: 'Capacitate standard — cappuccino, café au lait, infuzii. Aceleași forme sferice ca restul colecției.' },
      { img: 'img/p-gourmet-tasse.jpg', num: '09', type: 'Ceașcă', title: 'Tasse 12 cl', dim: '12 cl', qty: '4 buc', desc: 'Ceașcă pentru café crème, espresso lung, cortado. Formă rotunjită distinctă.' },
    ],
    separate: [],
  },

  // ───── Summary entries — all other 21 collections ─────
  'genesis-mer': { name: 'GENESIS', finish: 'Mer', swatch: '#3c5e8a', pieces: 36, persons: 6, material: 'Gres cu email reactiv', colors: 'Degradeu albastru marin', desc: 'GENESIS în declinarea MER — degradeu albastru care amintește spuma valurilor. Aceleași forme asimetrice și tăieturi clare ca Terre, dar în paletă marină.', composition: '12 farfurii · 12 boluri · 6 căni · 6 cești', hero: 'img/c-genesis-mer.jpg', gallery: ['img/c-genesis-mer-alt.jpg'] },
  'genesis-basalte': { name: 'GENESIS', finish: 'Basalte', swatch: '#3a2a22', pieces: 36, persons: 6, material: 'Gres cu email reactiv', colors: 'Maron volcanic mineral', desc: 'GENESIS în declinarea BASALTE — degradeu maron volcanic care amintește originea pământului. Touche minerală autentică.', composition: '12 farfurii · 12 boluri · 6 căni · 6 cești', hero: 'img/c-genesis-basalte.jpg', gallery: ['img/c-genesis-basalte-alt.jpg'] },
  'genesis-terre-60': { name: 'GENESIS+', finish: 'Terre · 60', swatch: '#7a6a4e', pieces: 60, persons: 6, material: 'Gres cu email reactiv', colors: 'Degradeu albastru-gri-kaki', desc: 'Service Plus 60 piese — varianta extinsă a GENESIS Terre cu 18 farfurii plate (3 dimensiuni), 18 boluri, 6 farfurii adânci, 12 cești espresso/lungo și 6 căni.', composition: '18 farfurii plate (3 dim.) · 18 boluri · 6 farfurii adânci · 12 cești espresso/lungo · 6 căni', hero: 'img/h-genesis-plus.jpg', gallery: ['img/c-genesis-plus-terre.jpg'], badge: 'Plus' },
  'iris-bleu-nuit': { name: 'IRIS', finish: 'Bleu nuit', swatch: '#1a2848', pieces: 48, persons: 6, material: 'Gres cu email reactiv', colors: 'Bleu nuit profund', desc: 'IRIS în declinarea BLEU NUIT — un cer înstelat astral care creează atmosferă bucolică pentru seri convivivale. Email reactiv care dezvăluie un visual unic.', composition: '18 farfurii (3 dim.) · 6 farfurii adânci · 12 boluri · 6 căni · 6 cești', hero: 'img/c-iris-nuit.jpg', gallery: ['img/c-iris-nuit-alt.jpg'] },
  'iris-blanc-ivoire': { name: 'IRIS', finish: 'Blanc ivoire', swatch: '#e8dec8', pieces: 48, persons: 6, material: 'Gres cu email reactiv', colors: 'Alb ivoriu cu nuanțe', desc: 'IRIS în declinarea BLANC IVOIRE — gradient gri-alb pestrițat. Quintesența veselei zilnice pentru hoteluri și restaurante luminoase.', composition: '18 farfurii (3 dim.) · 6 farfurii adânci · 12 boluri · 6 căni · 6 cești', hero: 'img/h-iris-ivoire.jpg', gallery: ['img/c-iris-ivoire.jpg'] },
  'magma-cobalt': { name: 'MAGMA', finish: 'Cobalt', swatch: '#2a4b8c', pieces: 30, persons: 6, material: 'Gres cu email reactiv', colors: 'Albastru cobalt cu efect craquelé', desc: 'Colecția MAGMA — inspirată din craterul Vulcanului Fuji. Reseaux veinos care desenează craterii, rezultat al șocului termic la cuptor.', composition: '6 farfurii mari + 6 mici · 6 boluri mari + 6 mici · 6 căni/cești', hero: 'img/c-magma-cobalt.jpg', gallery: ['img/c-magma-cobalt-alt.jpg'] },
  'magma-menthe': { name: 'MAGMA', finish: 'Menthe', swatch: '#7aa590', pieces: 30, persons: 6, material: 'Gres cu email reactiv', colors: 'Verde mentă cu efect craquelé', desc: 'MAGMA în declinarea MENTHE — verde fresh cu rețea veinos distinctă. Pentru cafenele cu atmosferă naturală.', composition: '6 farfurii mari + 6 mici · 6 boluri mari + 6 mici · 6 căni/cești', hero: 'img/c-magma-menthe.jpg', gallery: ['img/c-magma-menthe-alt.jpg'] },
  'scandi-olive': { name: 'SCANDI', finish: 'Olive', swatch: '#7a8456', pieces: 36, persons: 4, material: 'Gres reciclat', colors: 'Verde olive mat', desc: 'Colecția SCANDI — elegantă minimalistă și funcțională modernă. Forme geometrice simple, tăieturi drepte, perfectă pentru estetica nordică hygge. Stivuibilă astuto.', composition: '16 farfurii (4 dim.) · 4 cești + farfurioare · 4 căni · 8 boluri (2 dim.)', hero: 'img/c-scandi-olive.jpg', gallery: ['img/c-scandi-olive-alt.jpg'] },
  'scandi-marine': { name: 'SCANDI', finish: 'Marine', swatch: '#2a3a52', pieces: 36, persons: 4, material: 'Gres reciclat', colors: 'Albastru marin mat', desc: 'SCANDI în Marine — albastru profund mat. Pentru restaurante cu identitate maritimă sau bistros bine bornați.', composition: '16 farfurii (4 dim.) · 4 cești + farfurioare · 4 căni · 8 boluri (2 dim.)', hero: 'img/c-scandi-marine.jpg', gallery: ['img/c-scandi-marine-alt.jpg'] },
  'scandi-ocre': { name: 'SCANDI', finish: 'Ocre', swatch: '#c89548', pieces: 36, persons: 4, material: 'Gres reciclat', colors: 'Ocru cald mat', desc: 'SCANDI în Ocre — galben pământ cald. Atmosfera nordică reinterpretată cu un touch mediteranean.', composition: '16 farfurii (4 dim.) · 4 cești + farfurioare · 4 căni · 8 boluri (2 dim.)', hero: 'img/c-scandi-ocre.jpg', gallery: ['img/c-scandi-ocre-alt.jpg'] },
  'oxygen-vert-de-gris': { name: 'OXYGEN', finish: 'Vert de gris', swatch: '#8a9888', pieces: 42, persons: 6, material: 'Gres cu email reactiv', colors: 'Degradeu verde-gri și bej', desc: 'OXYGEN în Vert de gris — contrast bej granulat exterior și verde profund la interior. Atmosferă liniștită, zen.', composition: '12 farfurii · 24 boluri și ramequin · 6 căni', hero: 'img/c-oxygen-vert.jpg', gallery: ['img/c-oxygen-vert-alt.jpg'] },
  'moon-petrole': { name: 'MOON', finish: 'Pétrole', swatch: '#1a2a3a', pieces: 30, persons: 6, material: 'Gres cu email reactiv', colors: 'Bleu petrol cu suprafață bosselată', desc: 'Colecția MOON — inspirată din peisajele lunare. Relief și jocuri de lumini pe suprafață lină ușor bosselată care amintesc craterele.', composition: '6 farfurii mari + 6 mici · 6 boluri mari + 6 mici · 6 căni', hero: 'img/c-moon-petrole.jpg', gallery: ['img/c-moon-petrole-alt.jpg'] },
  'moon-encre': { name: 'MOON', finish: 'Encre', swatch: '#0a0a0a', pieces: 30, persons: 6, material: 'Gres cu email reactiv', colors: 'Negru profund bosselat', desc: 'MOON în Encre — negru intens cu reliefuri lunare. Pentru locații cu plating dramatic și atmosferă minimalistă.', composition: '6 farfurii mari + 6 mici · 6 boluri mari + 6 mici · 6 căni', hero: 'img/c-moon-encre.jpg', gallery: ['img/c-moon-encre-alt.jpg'] },
  'zen-natural': { name: 'ZEN', finish: 'Natural', swatch: '#a8b0b8', pieces: 48, persons: 6, material: 'Gres cu email reactiv', colors: 'Gri bleuté cu trasaj circular', desc: 'Colecția ZEN — trasaj circular perfect și apaisant. Tonuri naturale cu rebordere contrastate care aduc serenitate la masă. Atmosferă propice destinderii și împărtășirii.', composition: '18 farfurii (3 dim.) · 6 farfurii adânci · 6 boluri · 6 coupelles · 6 căni · 6 cești', hero: 'img/h-zen.jpg', gallery: ['img/c-zen-natural.jpg'] },
  'island-terre-et-mer': { name: 'ISLAND', finish: 'Terre et mer', swatch: '#4a6a52', pieces: 42, persons: 6, material: 'Gres cu email reactiv', colors: 'Kaki și albastru', desc: 'Colecția ISLAND — inspirată din insulele Feroe. Lande verzi și faleze stâncoase, atmosfera autentică între pământ și mare.', composition: '12 farfurii · 12 boluri · 6 coupelles · 6 căni · 6 cești', hero: 'img/c-island.jpg', gallery: ['img/c-island-alt.jpg'] },
  'cloud-gris-orage': { name: 'CLOUD', finish: 'Gris orage', swatch: '#b0b4b8', pieces: 48, persons: 6, material: 'Gres cu email reactiv', colors: 'Gri clar cu reflexe albastre', desc: 'Colecția CLOUD — forme originale și asimetrice subliniate de rebordere groase. Email strălucitor care reflectă lumina ca un fulger în cer încărcat.', composition: '18 farfurii (3 dim.) · 6 farfurii adânci · 18 boluri (3 dim.) · 6 căni · 6 cești', hero: 'img/c-cloud.jpg', gallery: ['img/c-cloud-alt.jpg'] },
  'stone-gris-lune': { name: 'STONE', finish: 'Gris lune', swatch: '#9aa0a4', pieces: 48, persons: 6, material: 'Gres cu email reactiv', colors: 'Gri calcaros mineral', desc: 'Colecția STONE — parcă tăiată direct în stânca falezelor Étretat. Atmosferă decontractată mineralizată, stil brut scandinav contemporan.', composition: '12 farfurii · 6 farfurii adânci · 12 boluri · 6 coupelles · 6 căni · 6 cești', hero: 'img/c-stone.jpg', gallery: ['img/c-stone-alt.jpg'] },
  'cosmos-azur': { name: 'COSMOS', finish: 'Azur', swatch: '#5878a8', pieces: 30, persons: 6, material: 'Gres cu email reactiv', colors: 'Albastru și alb nacré', desc: 'Colecția COSMOS — armonie între tradiție și modernitate. Forme rustice simple cu anneluri cosmice reactive. Dressage subtil în atmosferă chic sau decontractată.', composition: '6 farfurii mari + 6 mici · 6 boluri · 6 căni · 6 cești', hero: 'img/c-cosmos-azur.jpg', gallery: ['img/c-cosmos-azur-alt.jpg'] },
  'cosmos-creme': { name: 'COSMOS', finish: 'Crème', swatch: '#e8dec0', pieces: 30, persons: 6, material: 'Gres cu email reactiv', colors: 'Bej cu alb nacré', desc: 'COSMOS în Crème — versiunea caldă cu nuanțe bej și alb nacré. Pentru locații cu atmosferă luminoasă, primitor sudică.', composition: '6 farfurii mari + 6 mici · 6 boluri · 6 căni · 6 cești', hero: 'img/c-cosmos-creme.jpg', gallery: ['img/c-cosmos-creme-alt.jpg'] },
  'stellar-gris-beton': { name: 'STELLAR', finish: 'Gris béton', swatch: '#5a5e62', pieces: 48, persons: 6, material: 'Gres cu email reactiv', colors: 'Gri antracit spatial', desc: 'Colecția STELLAR — eleganță cosmică. Antracit spațial cu efect reactiv puternic ce amintește o nebuloasă. Lumina stelară pe masă.', composition: '18 farfurii (3 dim.) · 6 farfurii adânci · 12 boluri (2 dim.) · 6 căni · 6 cești', hero: 'img/c-stellar.jpg', gallery: ['img/c-stellar-alt.jpg'] },
  'pure-blanc-neige': { name: 'PURE', finish: 'Blanc Neige', swatch: '#f0ece4', pieces: 32, persons: 4, material: 'Ceramică artizanală', colors: 'Alb strălucitor cu liseré negru', desc: 'Colecția PURE — eleganță și autenticitate. Forme ușor asimetrice cu suprafață subtle bosselată, fiecare piesă cu caracter unic. Liseré delicat negru care încadrează ceramica.', composition: '16 farfurii (4 dim.) · 8 cești + căni · 8 boluri (2 dim.)', hero: 'img/c-pure.jpg', gallery: [] },
};

// Helper — slugify name + finish into a URL hash key.
const slugifyCollection = (name, finish) => (name + '-' + finish)
  .toLowerCase()
  .replace(/[ăâ]/g, 'a').replace(/[î]/g, 'i').replace(/[ș]/g, 's').replace(/[ț]/g, 't')
  .replace(/[^a-z0-9]+/g, '-')
  .replace(/^-+|-+$/g, '');

Object.assign(window, { COLLECTION_DETAILS, slugifyCollection });

function ColectieDetailHi() {
  // Hash-based routing — slug from window.location.hash (#genesis-terre etc.).
  // Defaults to 'genesis-terre'. Updates live if hash changes (e.g. user
  // pastes a different URL).
  const [slug, setSlug] = React.useState(() => {
    if (typeof window === 'undefined') return 'genesis-terre';
    return (window.location.hash || '#genesis-terre').slice(1) || 'genesis-terre';
  });
  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    const onHash = () => setSlug((window.location.hash || '#genesis-terre').slice(1) || 'genesis-terre');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const data = COLLECTION_DETAILS[slug] || COLLECTION_DETAILS['genesis-terre'];
  const isDetailed = Array.isArray(data.included) && data.included.length > 0;

  // Other variants in the same family for "alte tonuri" section.
  const sameFamily = Object.entries(COLLECTION_DETAILS)
    .filter(([s, d]) => s !== slug && d.name === data.name)
    .slice(0, 4);

  return (
    <HfPage>
      <HfHeader active="col" />

      {/* BREADCRUMB */}
      <div style={{ padding: '28px 56px 0', display: 'flex', alignItems: 'center', gap: 8, fontFamily: hfBody, fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: HF.ink2 }}>
        <a href={HFRoutes.home} style={{ color: 'inherit', textDecoration: 'none' }}>Acasă</a>
        <span style={{ color: HF.ink3 }}>›</span>
        <a href={HFRoutes.col} style={{ color: 'inherit', textDecoration: 'none' }}>Colecții</a>
        <span style={{ color: HF.ink3 }}>›</span>
        <span>{data.name}</span>
        <span style={{ color: HF.ink3 }}>›</span>
        <span style={{ color: HF.ink }}>{data.finish} · {data.pieces} piese</span>
      </div>

      {/* MAIN */}
      <section style={{ padding: '40px 56px 80px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56 }}>
          {/* GALLERY */}
          <div>
            <HfImg src={data.hero} alt={`${data.name} ${data.finish}`} h={620} />
            {data.gallery && data.gallery.length > 0 && (
              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(4, data.gallery.length)}, 1fr)`, gap: 12, marginTop: 14 }}>
                {data.gallery.slice(0, 4).map((src, i) => (
                  <HfImg key={i} src={src} alt={`detaliu ${i + 1}`} h={130} style={{ border: i === 0 ? '2px solid var(--accent)' : `1px solid ${HF.line}` }} />
                ))}
              </div>
            )}
          </div>

          {/* INFO */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <span style={{ width: 28, height: 28, borderRadius: '50%', background: data.swatch, border: `1px solid ${HF.line2}` }}></span>
              <span style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: HF.ink2 }}>colecție {data.name} · finisaj {data.finish}</span>
            </div>
            <HfH1 style={{ fontSize: 72, lineHeight: 1 }}>
              {data.name}<br/>
              <em style={{ fontStyle: 'italic', fontWeight: 400 }}>{data.finish}</em>
              <span style={{ fontFamily: hfBody, fontSize: 18, fontWeight: 600, marginLeft: 14, letterSpacing: '0.05em', color: HF.ink2 }}>· {data.pieces} piese</span>
            </HfH1>
            <HfLede dim style={{ marginTop: 24 }}>{data.desc}</HfLede>

            <div style={{ marginTop: 36, borderTop: `1px solid ${HF.ink}` }}>
              {[
                { l: 'Piese', v: String(data.pieces) },
                { l: 'Persoane', v: String(data.persons) },
                { l: 'Material', v: data.material },
                { l: 'Culori', v: data.colors },
                { l: 'Garanție', v: data.warranty || '2 ani' },
              ].map(r => (
                <div key={r.l} style={{
                  display: 'grid', gridTemplateColumns: '0.7fr 1fr',
                  borderBottom: `1px solid ${HF.line}`, padding: '16px 0', alignItems: 'baseline',
                }}>
                  <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: HF.ink2 }}>{r.l}</div>
                  <div style={{ fontFamily: hfBody, fontSize: 16, color: HF.ink }}>{r.v}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <HfSpec>Mașină spălat profesională</HfSpec>
              <HfSpec>Microunde</HfSpec>
              {data.material && data.material.startsWith('Gres') && <HfSpec>Cuptor</HfSpec>}
              <HfSpec>Stivuibil · depozitare eficientă</HfSpec>
            </div>

            <div style={{ marginTop: 40, display: 'flex', gap: 14 }}>
              <HfBtn variant="accent" size="lg" arrow href={HFRoutes.rfq}>Cere ofertă pentru această colecție</HfBtn>
              <HfBtn variant="outline" size="lg">Salvează</HfBtn>
            </div>
            <HfText sm dim style={{ marginTop: 14 }}>răspuns în 24h · fără preț listat · demo fizic la cerere</HfText>
          </div>
        </div>
      </section>

      {/* COMPOSITION SECTION — full piece-by-piece if data.included is defined,
          else summary text + RFQ CTA. */}
      {isDetailed ? (
        <>
          <section style={{ padding: '96px 56px 56px', borderBottom: `1px solid ${HF.line}` }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'end', marginBottom: 64 }}>
              <div>
                <HfEyebrow num="01">Compoziție · service complet</HfEyebrow>
                <HfH2 style={{ fontSize: 60, lineHeight: 1.04 }}>
                  {data.included.length} tipuri de piese.<br/>
                  <em style={{ fontStyle: 'italic', fontWeight: 400 }}>{data.persons} persoane · {data.pieces} piese în set.</em>
                </HfH2>
              </div>
              <HfLede dim style={{ maxWidth: 460 }}>
                Setul complet are <strong style={{ color: HF.ink, fontWeight: 600 }}>{data.pieces} piese</strong> distribuite în {data.included.length} tipuri distincte.
                Fiecare piesă e disponibilă și <strong style={{ color: 'var(--accent)', fontWeight: 700 }}>separat la cerere</strong>, pentru completări sau locații care nu au nevoie de tot setul.
              </HfLede>
            </div>
            <div style={{ display: 'grid', gap: 32 }}>
              {data.included.map((p, i) => (
                <HfPieceCard key={p.num} {...p} reverse={i % 2 === 1} />
              ))}
            </div>
          </section>

          {data.separate && data.separate.length > 0 && (
            <section style={{ padding: '96px 56px', borderBottom: `1px solid ${HF.line}`, background: HF.paper2 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'end', marginBottom: 56 }}>
                <div>
                  <HfEyebrow num="02">Disponibile separat · {data.name} {data.finish}</HfEyebrow>
                  <HfH2 style={{ fontSize: 52, lineHeight: 1.05 }}>
                    Nu doar setul.<br/>
                    <em style={{ fontStyle: 'italic', fontWeight: 400 }}>Și piesele singulare.</em>
                  </HfH2>
                </div>
                <HfLede dim style={{ maxWidth: 460 }}>
                  Piese care nu fac parte din service-ul complet — accesorii, plătoaie, saladiere, dimensiuni alternative. Disponibile individual prin cerere de ofertă.
                </HfLede>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
                {data.separate.map((p, i) => <HfPieceCardCompact key={i} {...p} />)}
              </div>
            </section>
          )}
        </>
      ) : (
        // SUMMARY MODE — for collections without piece-by-piece breakdown yet.
        // Still shows composition text, swatch, hero, and a clear "request offer" CTA.
        <section style={{ padding: '96px 56px', borderBottom: `1px solid ${HF.line}`, background: HF.paper2 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
            <div>
              <HfEyebrow num="01">Compoziție · service complet</HfEyebrow>
              <HfH2 style={{ fontSize: 56, lineHeight: 1.04, marginBottom: 24 }}>
                {data.pieces} piese pentru <em style={{ fontStyle: 'italic', fontWeight: 400 }}>{data.persons} persoane</em>.
              </HfH2>
              <HfLede dim style={{ fontSize: 18, marginBottom: 28 }}>{data.composition}</HfLede>
              <div style={{ padding: '20px 24px', background: HF.paper, border: `1px solid ${HF.line2}`, marginBottom: 28 }}>
                <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 10 }}>
                  Detalii piesă-cu-piesă
                </div>
                <HfText sm style={{ fontSize: 14 }}>
                  Breakdown-ul individual al fiecărei piese e disponibil la cerere — trimitem fotografii, specificații complete și dimensiuni pe email în 24h.
                </HfText>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <HfBtn variant="accent" size="lg" arrow href={HFRoutes.rfq}>Cere ofertă · {data.name} {data.finish}</HfBtn>
              </div>
            </div>
            <HfImg src={data.hero} alt={`${data.name} ${data.finish}`} h={520} />
          </div>
        </section>
      )}

      {/* ALTE FINISAJE */}
      {sameFamily.length > 0 && (
        <section style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
            <div>
              <HfEyebrow num="03">Alte finisaje · {data.name}</HfEyebrow>
              <HfH2>Aceeași colecție, <em style={{ fontStyle: 'italic', fontWeight: 400 }}>alte tonuri</em>.</HfH2>
            </div>
            <HfBtn variant="ghost" arrow href={HFRoutes.col}>Vezi toate</HfBtn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(4, sameFamily.length)}, 1fr)`, gap: 24 }}>
            {sameFamily.map(([s, d]) => (
              <a key={s} href={`${HFRoutes.detail}#${s}`} style={{ textDecoration: 'none', color: 'inherit' }}>
                <article style={{ border: `1px solid ${HF.line}`, background: HF.paper, display: 'flex', flexDirection: 'column' }}>
                  <HfImg src={d.hero} alt={d.finish} h={220} />
                  <div style={{ padding: '18px 22px', borderTop: `1px solid ${HF.line}` }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                      <span style={{ width: 18, height: 18, borderRadius: '50%', background: d.swatch, border: `1px solid ${HF.line2}` }}></span>
                      <h3 style={{ fontFamily: hfDisplay, fontWeight: 500, fontSize: 22, margin: 0 }}>{d.finish}</h3>
                    </div>
                    <div style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink2 }}>{d.pieces} piese · {d.persons} persoane</div>
                  </div>
                </article>
              </a>
            ))}
          </div>
        </section>
      )}

      {/* INLINE RFQ */}
      <section style={{ background: HF.ink, color: '#fff', padding: '80px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 56, alignItems: 'center' }}>
          <div>
            <HfEyebrow light num="04">Cerere rapidă</HfEyebrow>
            <HfH2 light style={{ fontSize: 56 }}>
              Cere ofertă<br/>pentru <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>{data.name} {data.finish}</em>.
            </HfH2>
            <HfLede light style={{ marginTop: 20, maxWidth: 460 }}>
              Câteva detalii și revenim cu o ofertă în 24h. Colecția e pre-selectată.
            </HfLede>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)', padding: 32 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
              <HfField dark label="Tip locație" value="Restaurant" />
              <HfField dark label="Oraș" required hint="București" />
              <HfField dark label="Persoană contact" required hint="Maria Popescu" />
              <HfField dark label="Telefon" required hint="07XX XXX XXX" />
              <HfField dark label="Număr locuri" hint="40 locuri" style={{ gridColumn: '1 / -1' }} />
            </div>
            <div style={{ marginTop: 22, padding: '12px 16px', background: 'rgba(232, 185, 64, 0.10)', borderLeft: '3px solid var(--accent)', fontFamily: hfBody, fontSize: 13, color: '#fff' }}>
              Colecție pre-selectată: <strong style={{ color: 'var(--accent)' }}>{data.name} · {data.finish} · {data.pieces} piese</strong>
            </div>
            <div style={{ marginTop: 22, display: 'flex', justifyContent: 'flex-end' }}>
              <HfBtn variant="accent" size="lg" arrow href={HFRoutes.rfq}>Trimite cererea</HfBtn>
            </div>
          </div>
        </div>
      </section>

      <HfFooter />
    </HfPage>
  );
}

Object.assign(window, { ColectiiHi, ColectieDetailHi, ALL_COLLECTIONS });