// Hi-fi landing pages — Restaurants / Cafés / Hotels.
// Shared skeleton via SegmentHero + SegmentValues + FeaturedCollections +
// + UseCases + RFQ at the bottom.

function SegmentBreadcrumb({ segment }) {
  return (
    <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 }}>{segment}</span>
    </div>
  );
}

// ─── HERO SCROLL SIGNATURE — animație unică de scroll, „semnătura" vizuală a
// fiecărei pagini de locație. Confinată în hero, fără librării: progresul de
// scroll (0→1 pe primii ~420px) e scris ca variabilă CSS (--sig) printr-un
// listener pasiv + rAF; formele (pur CSS) își derivă transform/opacity cu
// calc(var(--sig) …). prefers-reduced-motion → stare finală statică, fără
// listener. Debug/QA: ?hfsig=0.5 fixează progresul.
function useHfSigProgress(len = 420) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return undefined;
    try {
      const forced = new URLSearchParams(window.location.search).get('hfsig');
      if (forced !== null) { el.style.setProperty('--sig', String(Math.min(1, Math.max(0, parseFloat(forced) || 0)))); return undefined; }
    } catch (e) {}
    if (typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches) {
      el.style.setProperty('--sig', '1'); // fallback static: motivul „așezat"
      return undefined;
    }
    let raf = 0;
    const update = () => {
      raf = 0;
      const p = Math.min(1, Math.max(0, window.scrollY / len));
      el.style.setProperty('--sig', p.toFixed(4));
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [len]);
  return ref;
}

const SIG_COFFEE_BROWN = '#52341f';

// Restaurante — farfurie văzută de sus pe care „se așază" garnish-ul
// (presărare tip parmezan) pe măsură ce cobori în pagină.
function SigPlate() {
  const dots = [
    { x: -22, y: -14, s: 5, fall: 52, m: 1.8, rot: 40, a: true },
    { x: -6,  y: -24, s: 4, fall: 64, m: 1.4, rot: -30 },
    { x: 12,  y: -16, s: 6, fall: 46, m: 2.2, rot: 60, a: true },
    { x: 22,  y: -2,  s: 4, fall: 58, m: 1.5, rot: -45 },
    { x: 14,  y: 14,  s: 5, fall: 50, m: 1.9, rot: 25 },
    { x: -2,  y: 20,  s: 4, fall: 66, m: 1.3, rot: -60, a: true },
    { x: -18, y: 10,  s: 5, fall: 56, m: 1.6, rot: 35 },
    { x: 2,   y: -4,  s: 7, fall: 42, m: 2.5, rot: 80 },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      <div style={{
        position: 'absolute', left: '50%', top: '47%', width: 96, height: 96,
        marginLeft: -48, marginTop: -48, borderRadius: '50%',
        border: `1.5px solid ${HF.line2}`, background: '#fff',
        boxShadow: 'inset 0 0 0 14px rgba(13,13,13,0.03)',
        transform: 'scale(calc(0.94 + var(--sig) * 0.06))',
      }}></div>
      <div style={{
        position: 'absolute', left: '50%', top: '47%', width: 64, height: 64,
        marginLeft: -32, marginTop: -32, borderRadius: '50%',
        border: '1px solid var(--accent)', opacity: 'calc(0.35 + var(--sig) * 0.65)',
      }}></div>
      {dots.map((d, i) => (
        <span key={i} style={{
          position: 'absolute', left: `calc(50% + ${d.x}px)`, top: `calc(47% + ${d.y}px)`,
          width: d.s, height: d.s, borderRadius: 1.5,
          background: d.a ? 'var(--accent)' : HF.ink,
          opacity: `calc(var(--sig) * ${d.m} - 0.12)`,
          transform: `translateY(calc((1 - var(--sig)) * -${d.fall}px)) rotate(calc(var(--sig) * ${d.rot}deg))`,
        }}></span>
      ))}
    </div>
  );
}

// Cafenele — ceașcă ce se îndreaptă și „se umple" cu cafea la scroll;
// jetul apare la mijlocul turnării, aburul abia la final.
function SigCoffee() {
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      {/* jet de cafea — vizibil doar în timpul turnării (parabolă sig·(1−sig)) */}
      <span style={{
        position: 'absolute', left: '50%', top: 24, width: 3, height: 36, marginLeft: -7,
        background: SIG_COFFEE_BROWN, borderRadius: 2,
        transformOrigin: 'top center',
        transform: 'scaleY(calc(var(--sig) * 4 * (1 - var(--sig))))',
        opacity: 'calc(var(--sig) * 6 * (1 - var(--sig)) - 0.25)',
      }}></span>
      {/* abur — apare când ceașca e plină */}
      {[-14, 0].map((dx, i) => (
        <span key={i} style={{
          position: 'absolute', left: `calc(50% + ${dx}px)`, top: 34 + i * 4, width: 9, height: 18,
          border: `1.5px solid ${HF.ink3}`, borderLeft: 'none', borderBottom: 'none', borderTopRightRadius: 9,
          opacity: `calc(var(--sig) * 2.4 - ${1.5 + i * 0.3})`,
          transform: 'translateY(calc((1 - var(--sig)) * 8px))',
        }}></span>
      ))}
      {/* grup ceașcă — se îndreaptă din înclinare pe măsură ce se umple */}
      <div style={{
        position: 'absolute', left: '50%', top: 62, width: 58, height: 40, marginLeft: -34,
        transformOrigin: '50% 100%',
        transform: 'rotate(calc((1 - var(--sig)) * -8deg))',
      }}>
        <div style={{
          position: 'absolute', inset: 0, background: '#fff',
          border: `2px solid ${HF.ink}`, borderRadius: '3px 3px 24px 24px',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0, top: 5,
            background: SIG_COFFEE_BROWN,
            transformOrigin: 'bottom center', transform: 'scaleY(var(--sig))',
          }}></div>
          <div style={{
            position: 'absolute', left: 0, right: 0, top: 5, height: 3,
            background: 'var(--accent)', opacity: 'calc(var(--sig) * 2 - 1)',
          }}></div>
        </div>
        <span style={{
          position: 'absolute', right: -14, top: 8, width: 14, height: 17,
          border: `2px solid ${HF.ink}`, borderLeft: 'none', borderRadius: '0 9px 9px 0',
        }}></span>
        <span style={{
          position: 'absolute', left: -9, right: -9, bottom: -9, height: 5,
          background: HF.ink, borderRadius: 3,
        }}></span>
      </div>
    </div>
  );
}

// Hoteluri — masa de mic dejun văzută de sus: farfuria, ceașca pe farfurioară
// și tacâmul „plutesc" discret la locul lor pe măsură ce cobori.
function SigHotel() {
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      {/* farfuria mare — vine dinspre stânga */}
      <div style={{
        position: 'absolute', left: 24, top: 36, width: 62, height: 62, borderRadius: '50%',
        border: `1.5px solid ${HF.ink}`, background: '#fff',
        opacity: 'calc(0.2 + var(--sig) * 0.8)',
        transform: 'translateX(calc((1 - var(--sig)) * -24px)) rotate(calc((1 - var(--sig)) * -16deg))',
      }}>
        <span style={{
          position: 'absolute', inset: 9, borderRadius: '50%',
          border: `1px solid ${HF.line2}`, display: 'block',
        }}></span>
        {/* croissant-ul — punct accent pe farfurie, „aterizează" ultimul */}
        <span style={{
          position: 'absolute', left: 19, top: 22, width: 22, height: 13,
          borderRadius: '50% 50% 46% 46%', background: 'var(--accent)',
          opacity: 'calc(var(--sig) * 2.2 - 0.9)',
          transform: 'translateY(calc((1 - var(--sig)) * -16px))',
        }}></span>
      </div>
      {/* farfurioara + ceașca — vin dinspre dreapta-sus */}
      <div style={{
        position: 'absolute', right: 22, top: 28, width: 36, height: 36, borderRadius: '50%',
        border: `1.5px solid ${HF.ink}`, background: '#fff',
        opacity: 'calc(0.15 + var(--sig) * 0.85)',
        transform: 'translate(calc((1 - var(--sig)) * 22px), calc((1 - var(--sig)) * -14px))',
      }}>
        <span style={{
          position: 'absolute', inset: 7, borderRadius: '50%',
          border: '1.5px solid var(--accent)', background: 'rgba(232,185,64,0.16)', display: 'block',
        }}></span>
      </div>
      {/* tacâmul — alunecă de jos, lângă farfurie */}
      {[0, 6].map((dx, i) => (
        <span key={i} style={{
          position: 'absolute', right: 34 + dx, bottom: 30, width: 2.5, height: 34,
          background: HF.ink, borderRadius: 2,
          opacity: `calc(var(--sig) * ${1.6 - i * 0.3} - 0.15)`,
          transform: `translateY(calc((1 - var(--sig)) * ${22 + i * 10}px))`,
        }}></span>
      ))}
    </div>
  );
}

const SIG_KINDS = { plate: SigPlate, coffee: SigCoffee, hotel: SigHotel };

function HeroSignature({ kind, label }) {
  const ref = useHfSigProgress(420);
  const Motif = SIG_KINDS[kind];
  if (!Motif) return null;
  return (
    <div ref={ref} aria-hidden="true" style={{
      '--sig': 0,
      position: 'absolute', top: 18, right: 18, zIndex: 2,
      width: 152, height: 152, borderRadius: '50%',
      background: 'rgba(250,250,247,0.92)',
      backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
      boxShadow: '0 12px 38px rgba(0,0,0,0.16)',
      pointerEvents: 'none', overflow: 'hidden',
    }}>
      <Motif />
      {label && (
        <div style={{
          position: 'absolute', bottom: 12, left: 0, right: 0, textAlign: 'center',
          fontFamily: hfBody, fontSize: 8.5, fontWeight: 700,
          letterSpacing: '0.24em', textTransform: 'uppercase', color: HF.ink3,
        }}>{label}</div>
      )}
    </div>
  );
}

function SegmentHero({ segment, title, lede, heroImg, captionTitle, captionMeta, statCards, signature }) {
  return (
    <section style={{ padding: '72px 56px 80px', borderBottom: `1px solid ${HF.line}` }}>
      <SegmentBreadcrumb segment={`Soluții ${segment}`} />
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'end' }}>
        <div>
          <HfH1 style={{ fontSize: 92, lineHeight: 0.98 }}>{title}</HfH1>
          <HfLede style={{ marginTop: 28, maxWidth: 540 }}>{lede}</HfLede>
          <div style={{ display: 'flex', gap: 14, marginTop: 36 }}>
            <HfBtn variant="accent" size="lg" arrow href={HFRoutes.rfq}>Cere ofertă pentru {segment.toLowerCase()}</HfBtn>
            <HfBtn variant="ghost" size="lg" arrow href={HFRoutes.col}>Vezi colecțiile</HfBtn>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <HfImg src={heroImg} alt={captionTitle} h={580} />
          {signature}
          <div style={{
            position: 'absolute', bottom: 20, left: 20,
            background: HF.paper, padding: '14px 18px',
            borderLeft: '3px solid var(--accent)',
            boxShadow: '0 8px 30px rgba(0,0,0,0.08)', maxWidth: 280,
          }}>
            <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: HF.ink2 }}>În imagine</div>
            <div style={{ fontFamily: hfDisplay, fontSize: 22, fontWeight: 500, marginTop: 4, color: HF.ink }}>{captionTitle}</div>
            <div style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink2, marginTop: 4 }}>{captionMeta}</div>
          </div>
        </div>
      </div>
      {statCards && (
        <div style={{
          marginTop: 56, paddingTop: 28, borderTop: `1px solid ${HF.line}`,
          display: 'grid', gridTemplateColumns: `repeat(${statCards.length}, 1fr)`, gap: 32,
        }}>
          {statCards.map(s => <HfStat key={s.t} n={s.n} t={s.t} sub={s.sub} />)}
        </div>
      )}
    </section>
  );
}

function SegmentValueRow({ items }) {
  return (
    <section style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}` }}>
      <HfEyebrow num="02">Argument · pentru segmentul tău</HfEyebrow>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
        {items.map((v, i) => (
          <div key={i} style={{ paddingRight: 24, borderRight: i < items.length - 1 ? `1px solid ${HF.line}` : 'none' }}>
            <div style={{
              fontFamily: hfBody, fontSize: 11, fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--accent)', marginBottom: 14,
            }}>0{i + 1} · {v.t}</div>
            <HfH3 style={{ marginBottom: 16, fontSize: 30 }}>{v.h}</HfH3>
            <HfText dim>{v.d}</HfText>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── DESTINAȚII PRODUSE — 3 module per pagină de locație, în limbajul
// segmentului (à la carte / espresso / breakfast …). Înlocuiesc lista
// literală de produse/colecții: poză de context + titlu + paragraf +
// 2 butoane („Cere ofertă" → cere-oferta.html, „Vezi colecțiile" →
// colectii.html NEFILTRAT — clientul vrea catalogul complet vizibil).
// Modulele alternează stânga/dreapta și sunt intercalate cu o bandă
// marquee de cuvinte din vocabularul segmentului — ritm vizual, nu listă.
function DestinationModule({ num, img, alt, kicker, title, text, reverse }) {
  return (
    <article style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr',
      border: `1px solid ${HF.line}`, background: HF.paper,
    }}>
      <div style={{ order: reverse ? 2 : 1, position: 'relative', minHeight: 440 }}>
        <HfImg src={img} alt={alt || title} h="100%" fill style={{ minHeight: 440 }} />
        <div style={{
          position: 'absolute', top: 18, left: reverse ? 'auto' : 18, right: reverse ? 18 : 'auto',
          background: 'var(--accent)', color: HF.ink, padding: '6px 13px',
          fontFamily: hfBody, fontSize: 11, fontWeight: 700,
          letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>{kicker}</div>
      </div>
      <div style={{
        order: reverse ? 1 : 2,
        padding: '52px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <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,
          }}>destinație</span>
        </div>
        <HfH2 style={{ fontSize: 44, lineHeight: 1.06 }}>{title}</HfH2>
        <HfText dim style={{ marginTop: 20, maxWidth: 480, fontSize: 16, lineHeight: 1.6 }}>{text}</HfText>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
          <HfBtn variant="accent" arrow href={HFRoutes.rfq}>Cere ofertă</HfBtn>
          <HfBtn variant="outline" arrow href={HFRoutes.col}>Vezi colecțiile</HfBtn>
        </div>
      </div>
    </article>
  );
}

function SegmentDestinations({ eyebrow, title, intro, items, words }) {
  return (
    <section style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}`, background: HF.paper }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
        <div>
          <HfEyebrow num="03">{eyebrow}</HfEyebrow>
          <HfH2 style={{ maxWidth: 760 }}>{title}</HfH2>
          {intro && <HfLede dim style={{ marginTop: 18, maxWidth: 560 }}>{intro}</HfLede>}
        </div>
        <HfBtn variant="ghost" arrow href={HFRoutes.col}>Vezi toate colecțiile</HfBtn>
      </div>
      <div style={{ display: 'grid', gap: 28 }}>
        <DestinationModule num="01" {...items[0]} />
        <DestinationModule num="02" {...items[1]} reverse />
        {words && (
          <div style={{ borderTop: `1px solid ${HF.line}`, borderBottom: `1px solid ${HF.line}`, padding: '18px 0' }}>
            <HfMarquee duration={38}>
              {words.map((w, i) => (
                <span key={i} style={{ display: 'inline-flex', alignItems: 'center' }}>
                  <span style={{
                    fontFamily: hfDisplay, fontStyle: i % 2 ? 'italic' : 'normal',
                    fontSize: 26, fontWeight: 500, color: HF.ink, whiteSpace: 'nowrap',
                  }}>{w}</span>
                  <span aria-hidden style={{ color: 'var(--accent)', fontSize: 22, lineHeight: 1, margin: '0 26px', fontWeight: 700 }}>·</span>
                </span>
              ))}
            </HfMarquee>
          </div>
        )}
        <DestinationModule num="03" {...items[2]} />
      </div>
    </section>
  );
}

function RfqSection({ segment, segmentValue, extraField, suggestions, leftTitle, leftLede }) {
  return (
    <section style={{ background: HF.ink, color: '#fff', padding: '96px 56px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'start' }}>
        <div>
          <HfEyebrow light num="06">Cere ofertă · {segment}</HfEyebrow>
          <HfH1 light style={{ fontSize: 72 }}>{leftTitle}</HfH1>
          <HfLede light style={{ marginTop: 22, maxWidth: 480 }}>{leftLede}</HfLede>
          <div style={{ marginTop: 36, display: 'grid', gap: 22 }}>
            {[
              'Confirmare instant pe email',
              '2-3 recomandări de colecții',
              'Estimare piese pentru capacitate',
              'Ofertă comercială în 24h',
            ].map((r, i) => (
              <div key={r} style={{ display: 'flex', gap: 16 }}>
                <span style={{ fontFamily: hfDisplay, fontSize: 22, fontWeight: 400, color: 'var(--accent)', minWidth: 28 }}>0{i + 1}</span>
                <HfText light style={{ fontSize: 15 }}>{r}</HfText>
              </div>
            ))}
          </div>
        </div>
        <HfRfqForm segment={segment} segmentValue={segmentValue} extraField={extraField} suggestions={suggestions} dark />
      </div>
    </section>
  );
}

// ─── RESTAURANTE ────────────────────────────────────────────────────────────
function RestauranteHi() {
  return (
    <HfPage>
      <HfHeader active="rest" />
      <SegmentHero
        segment="Restaurante"
        title={<>Vesela cu <em style={{ fontStyle: 'italic', fontWeight: 400 }}>caracter</em>,<br/>rezistentă la zi.</>}
        lede="Soluții de veselă pentru restaurante care vor o prezentare unitară, rezistentă și ușor de întreținut. Servicii complete de 30-60 piese din gres cu email reactiv, compatibile cu mașina de spălat profesională."
        heroImg="img/h-iris-marron.jpg"
        captionTitle="IRIS · Marron sauvage"
        captionMeta="48 piese · finisaj reactiv"
        statCards={HF_HORECA_STATS}
        signature={<HeroSignature kind="plate" label="plating" />}
      />
      <SegmentValueRow items={[
        { t: 'coerent', h: 'Dressage unitar', d: 'Toate piesele dintr-o singură colecție — farfurii plate, adânci, boluri, căni, cești. Sala arată ca o singură decizie editorială.' },
        { t: 'durabil', h: 'Uzură zilnică', d: 'Gres de înaltă temperatură cu email reactiv. Rezistă la șocuri termice repetate și manipulare intensă în service.' },
        { t: 'simplu', h: 'Întreținere ușoară', d: 'Compatibil cu mașina de spălat profesională, microunde și cuptor. Forme stivuibile pentru depozitare eficientă.' },
      ]} />
      <SegmentDestinations
        eyebrow="Destinații în restaurant"
        title={<>Unde ajunge vesela <em style={{ fontStyle: 'italic', fontWeight: 400 }}>în restaurantul{' '}tău</em>.</>}
        intro="Trei momente de servire, trei limbaje de masă. Pentru fiecare îți recomandăm colecțiile potrivite — catalogul complet rămâne mereu la un click."
        words={['à la carte', 'mise en place', 'plating', 'dressage', 'service de seară', 'banchete', 'fine dining']}
        items={[
          {
            img: 'img/h-genesis-terre.jpg', alt: 'Masă à la carte · GENESIS Terre', kicker: 'Servirea zilnică',
            title: <>Servire <em style={{ fontStyle: 'italic', fontWeight: 400 }}>à la carte</em>.</>,
            text: 'Ritmul sălii, seară de seară: farfuria principală, bolul și farfuria de desert care trec prin sute de acoperiri pe service. Gres ars la temperatură înaltă, forme stivuibile, finisaje care iartă uzura — masa rămâne coerentă de la primul fel la cafea.',
          },
          {
            img: 'img/h-gourmet.jpg', alt: 'Plating gastronomic · GOURMET Onyx', kicker: 'Bucătăria de autor',
            title: <>Fine dining & <em style={{ fontStyle: 'italic', fontWeight: 400 }}>plating</em>.</>,
            text: 'Farfuria e pânza bucătarului. Negru mat, alb granit, degradeuri reactive — fundaluri care dau adâncime fiecărei compoziții. Forme sferice și margini ridicate care pun garniturile în scenă, nu în umbră.',
          },
          {
            img: 'img/h-genesis-plus.jpg', alt: 'Volum pentru evenimente · GENESIS Plus', kicker: 'Sala de evenimente',
            title: <>Evenimente & <em style={{ fontStyle: 'italic', fontWeight: 400 }}>banchete</em>.</>,
            text: 'O nuntă de 200 de locuri se servește cu același finisaj la fiecare masă. Servicii extinse, stivuire eficientă în depozit și completări rapide din aceleași loturi — volumul nu mai e un compromis estetic.',
          },
        ]}
      />

      {/* USE CASES */}
      <section style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <HfEyebrow num="04">Pe stil de restaurant</HfEyebrow>
        <HfH2 style={{ marginBottom: 48, maxWidth: 720 }}>Colecții care merg cu meniul tău.</HfH2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {[
            { img: 'img/c-genesis-mer.jpg', t: 'Bistro · fine-dining casual', d: 'Granité-uri și reflexe organice — plating-ul iese în evidență. Tonalități pământoase și marine.', tag: 'GENESIS · IRIS', col: 'Terre, Mer, Marron sauvage' },
            { img: 'img/c-gourmet-onyx.jpg', t: 'Steakhouse · gastronomic', d: 'Negru mat la exterior, alb granit la interior. Forme sferice care dau volum mâncării.', tag: 'GOURMET · IRIS', col: 'Onyx, Bleu nuit' },
            { img: 'img/c-scandi-marine.jpg', t: 'Mediterranean · minimal', d: 'Forme drepte, mate, ușor de stivuit. Tonuri naturale, gri și beton.', tag: 'SCANDI · STELLAR', col: 'Olive, Marine, Gris béton' },
          ].map(u => (
            <article key={u.t} style={{ border: `1px solid ${HF.line}`, display: 'flex', flexDirection: 'column', background: HF.paper }}>
              <HfImg src={u.img} alt={u.t} h={220} />
              <div style={{ padding: 28, borderTop: `1px solid ${HF.line}`, flex: 1, display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>{u.tag}</span>
                <HfH3 style={{ marginBottom: 12, fontSize: 24 }}>{u.t}</HfH3>
                <HfText dim style={{ fontSize: 14, marginBottom: 18 }}>{u.d}</HfText>
                <div style={{ fontFamily: hfBody, fontSize: 12, color: HF.ink2, marginBottom: 16 }}>Finisaje: {u.col}</div>
                <HfBtn variant="ghost" size="sm" arrow href={HFRoutes.col} style={{ alignSelf: 'flex-start', marginTop: 'auto', padding: '6px 0' }}>Vezi colecțiile</HfBtn>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* SPECS EDITORIAL */}
      <section style={{ padding: '96px 56px', background: HF.paper2, borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
          <div>
            <HfEyebrow num="05">Standard pe colecții</HfEyebrow>
            <HfH2 style={{ marginBottom: 24 }}>Ce e <em style={{ fontStyle: 'italic', fontWeight: 400 }}>inclus</em> în fiecare service complet.</HfH2>
            <HfLede dim>Detaliile diferă pe colecție — baza tehnică este aceeași. Toate piesele intră în programul de restock anual.</HfLede>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
            {[
              'Compatibil mașina de spălat profesională',
              'Compatibil microunde și cuptor',
              'Stivuibil pentru depozitare',
              'Gres / stoneware cu email reactiv',
              'Gres ars la temperatură înaltă · rezistent la șocuri termice',
              'Demo fizic la cerere',
              '30 — 60 piese / colecție',
              'Restock anual previzibil',
            ].map(s => <HfSpec key={s}>{s}</HfSpec>)}
          </div>
        </div>
      </section>

      {/* SECȚIUNE FINALĂ — modul reutilizabil: poză largă + text inspirațional
          (slotul de testimonial e pregătit în HfClosingVista, încă nefolosit) */}
      <HfClosingVista
        img="img/flat-genesis.jpg"
        eyebrow="Înainte de primul fel"
        title={<>Oaspeții își amintesc masa <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>înainte să guste</em>.</>}
        text="Prima impresie dintr-un restaurant nu e gustul — e masa pusă. O farfurie aleasă cu intenție spune povestea bucătăriei înainte ca primul fel să iasă din pass. Restul e meșteșugul tău."
      />

      <HfPreFooter
        eyebrow="Cere ofertă · Restaurante"
        title={<>Pregătim oferta pentru <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>restaurantul tău</em>.</>}
        text="Completezi formularul dedicat în 2 minute — un consultant revine cu 2-3 colecții și o ofertă personalizată în 24h."
        cta="Cere ofertă pentru restaurant"
      />
      <HfFooter />
    </HfPage>
  );
}

// ─── CAFENELE ────────────────────────────────────────────────────────────
function CafeneleHi() {
  return (
    <HfPage>
      <HfHeader active="cafe" />
      <SegmentHero
        segment="Cafenele"
        title={<>Cești care fac<br/>cafeaua <em style={{ fontStyle: 'italic', fontWeight: 400 }}>să arate</em>.</>}
        lede="Seturi pentru cafenele: cești espresso și lungo, căni mari, farfurii de desert și boluri mici. Colecții cu identitate vizuală pronunțată — pe o masă mică, fiecare piesă contează."
        heroImg="img/h-napoli.jpg"
        captionTitle="NAPOLI · Agrume"
        captionMeta="28 piese · pictat manual · porțelan"
        statCards={HF_HORECA_STATS}
        signature={<HeroSignature kind="coffee" label="prima cafea" />}
      />
      <SegmentValueRow items={[
        { t: 'experiență', h: 'Touchpoint vizual', d: 'Cești și căni cu finisaj reactiv — fiecare piesă e ușor diferită. Clientul observă și fotografiază.' },
        { t: 'mix', h: 'Espresso · lungo · cappuccino', d: 'Servicii Plus 60 includ cești espresso și lungo separate. Servire corectă pe toate tipurile de cafea.' },
        { t: 'identitate', h: 'Branding subtil', d: 'De la NAPOLI pictat manual la OXYGEN Rose poudre — finisajul devine semnătura cafenelei.' },
      ]} />
      <SegmentDestinations
        eyebrow="Destinații în cafenea"
        title={<>Fiecare colț al cafenelei <em style={{ fontStyle: 'italic', fontWeight: 400 }}>are piesele{' '}lui</em>.</>}
        intro="De la barul de espresso la vitrina de desert — trei zone, trei feluri de a servi. Catalogul complet rămâne mereu deschis, fără filtre."
        words={['espresso', 'cappuccino', 'flat white', 'prăjitura casei', 'specialty', 'limonadă', 'brunch']}
        items={[
          {
            img: 'img/c-napoli.jpg', alt: 'Cești de cafea · NAPOLI Agrume', kicker: 'Barul de espresso',
            title: <>Cafea, espresso & <em style={{ fontStyle: 'italic', fontWeight: 400 }}>cappuccino</em>.</>,
            text: 'Ceașca e prima atingere dintre client și cafeaua ta. De la espresso-ul scurt la cappuccino-ul de dimineață, fiecare volum are ceașca lui — iar finisajul reactiv face ca fiecare servire să fie ușor diferită. Exact ce se fotografiază.',
          },
          {
            img: 'img/c-oxygen-rose.jpg', alt: 'Farfurii de desert · OXYGEN Rose poudre', kicker: 'Vitrina dulce',
            title: <>Zona de <em style={{ fontStyle: 'italic', fontWeight: 400 }}>desert</em>.</>,
            text: 'Prăjitura casei merită mai mult decât o farfurie oarecare. Farfurii de desert, boluri mici și ramequin-uri în tonuri pudrate sau contraste grafice — vitrina dulce devine al doilea motiv pentru care se revine.',
          },
          {
            img: 'img/c-moon-encre.jpg', alt: 'Atmosferă de bar · MOON Encre', kicker: 'După ora 18',
            title: <>Bar & <em style={{ fontStyle: 'italic', fontWeight: 400 }}>băuturi</em>.</>,
            text: 'Seara, cafeneaua își schimbă lumina. Carafe, boluri de snacks și piese în finisaje întunecate, dramatice — aceeași identitate vizuală, în registru de bar. Paharele intră în catalog într-o fază următoare, prin cerere de ofertă.',
          },
        ]}
      />

      {/* TABLE ANATOMY */}
      <section style={{ padding: '96px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <HfEyebrow num="04">Anatomia unei mese de cafenea</HfEyebrow>
        <HfH2 style={{ marginBottom: 56, maxWidth: 720 }}>Ce piese ai într-un service complet pentru cafenea.</HfH2>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
          <div style={{ position: 'relative' }}>
            <HfImg src="img/h-oxygen-rose.jpg" alt="OXYGEN Rose poudre · table set" h={520} />
            <div style={{
              position: 'absolute', bottom: 20, left: 20,
              background: HF.paper, padding: '12px 16px',
              borderLeft: '3px solid var(--accent)',
            }}>
              <div style={{ fontFamily: hfDisplay, fontSize: 18, fontWeight: 500 }}>OXYGEN · Rose poudre</div>
              <div style={{ fontFamily: hfBody, fontSize: 12, color: HF.ink2 }}>42 piese · service complet</div>
            </div>
          </div>
          <div style={{ borderTop: `1px solid ${HF.line}` }}>
            {[
              { p: '6×', n: 'cești espresso', d: 'cu farfurioară · 80 ml', img: '' },
              { p: '6×', n: 'cești lungo', d: 'cu farfurioară · 120 ml' },
              { p: '6×', n: 'căni cappuccino', d: 'cu finisaj reactiv · 200 ml' },
              { p: '6×', n: 'farfurii desert', d: 'pentru prăjituri și biscuiți' },
              { p: '6×', n: 'boluri mici', d: 'ramequin · iaurt, zahăr, dulceață' },
            ].map(r => (
              <div key={r.n} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr',
                padding: '22px 0', borderBottom: `1px solid ${HF.line}`,
                alignItems: 'baseline', gap: 24,
              }}>
                <div style={{ fontFamily: hfDisplay, fontSize: 36, fontWeight: 400, color: 'var(--accent)', lineHeight: 1 }}>{r.p}</div>
                <div>
                  <div style={{ fontFamily: hfDisplay, fontSize: 22, fontWeight: 500, color: HF.ink }}>{r.n}</div>
                  <div style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink2, marginTop: 4 }}>{r.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECȚIUNE FINALĂ — modul reutilizabil: poză largă + text inspirațional
          (slotul de testimonial e pregătit în HfClosingVista, încă nefolosit) */}
      <HfClosingVista
        img="img/c-scandi-ocre.jpg"
        eyebrow="Ritualul de dimineață"
        title={<>Cafeaua bună se ține minte <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>și cu ochii</em>.</>}
        text="O cafenea nu vinde doar cafea — vinde cele zece minute în care clientul ține ceașca în mâini. Când și ceașca are caracter, ritualul devine al locului tău, nu doar al cafelei."
      />

      <HfPreFooter
        eyebrow="Cere ofertă · Cafenele"
        title={<>O cafenea cu <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>identitate</em>.</>}
        text="Spune-ne tipul de cafenea și volumul zilnic în formularul dedicat — propunem 2-3 colecții care îți completează atmosfera."
        cta="Cere ofertă pentru cafenea"
      />
      <HfFooter />
    </HfPage>
  );
}

// ─── HOTELURI ────────────────────────────────────────────────────────────
function HoteluriHi() {
  return (
    <HfPage>
      <HfHeader active="hot" />
      <SegmentHero
        segment="Hoteluri"
        title={<>Servicii complete<br/>pentru <em style={{ fontStyle: 'italic', fontWeight: 400 }}>operare hotelieră</em>.</>}
        lede="Pentru hoteluri: servicii complete și colecții coerente pentru operare zilnică — breakfast, restaurant principal și room service. Servicii Plus 60 piese, durabilitate ridicată, restock previzibil."
        heroImg="img/h-iris-ivoire.jpg"
        captionTitle="IRIS · Blanc ivoire"
        captionMeta="48 piese · luminos pentru breakfast"
        statCards={HF_HORECA_STATS}
        signature={<HeroSignature kind="hotel" label="mic dejun" />}
      />
      <SegmentValueRow items={[
        { t: 'scară', h: 'Service Plus 60', d: '18 farfurii plate · 18 boluri · 6 farfurii adânci · 12 cești espresso și lungo · 6 căni mari. Acoperire completă pentru turnover ridicat.' },
        { t: 'restock', h: 'Disponibilitate continuă', d: 'GENESIS, IRIS, ZEN, CLOUD, STONE — colecții comandate constant. Restock anual previzibil pe ani.' },
        { t: 'identitate', h: 'O singură linie vizuală', d: 'Aceleași piese pentru breakfast, room service, restaurant principal și terasă. Imagine consistentă pe tot brand-ul.' },
      ]} />
      <SegmentDestinations
        eyebrow="Destinații în hotel"
        title={<>Trei momente ale zilei, <em style={{ fontStyle: 'italic', fontWeight: 400 }}>o singură linie vizuală</em>.</>}
        intro="De la breakfast la lounge, oaspetele întâlnește aceeași masă — în registre diferite. Pentru fiecare moment, colecțiile potrivite; catalogul complet rămâne deschis."
        words={['breakfast', 'à la carte', 'all-inclusive', 'room service', 'lounge', 'terasă', 'banquet']}
        items={[
          {
            img: 'img/h-zen.jpg', alt: 'Masă de mic dejun · ZEN Natural', kicker: 'Dimineața · 7–10',
            title: <>Mic dejun · <em style={{ fontStyle: 'italic', fontWeight: 400 }}>breakfast</em>.</>,
            text: 'Bufetul de dimineață e cel mai intens service al hotelului: runs frecvente, stivuire rapidă, lumină naturală. Farfurii luminoase, boluri pentru cereale și fructe, căni generoase — piese care țin ritmul fără să-și piardă calmul.',
          },
          {
            img: 'img/c-genesis-plus-terre.jpg', alt: 'Service extins · GENESIS Plus Terre', kicker: 'Prânz & seară',
            title: <>Restaurantul hotelului · <em style={{ fontStyle: 'italic', fontWeight: 400 }}>à la carte & all-inclusive</em>.</>,
            text: 'Restaurantul principal servește și meniul à la carte de seară, și volumul all-inclusive de prânz. Servicii extinse cu trei talii de farfurii și farfurii adânci — aceeași colecție acoperă ambele registre, cu restock previzibil pe ani.',
          },
          {
            img: 'img/c-moon-petrole.jpg', alt: 'Atmosferă de lounge · MOON Pétrole', kicker: 'Seara · lobby',
            title: <>Bar & <em style={{ fontStyle: 'italic', fontWeight: 400 }}>lounge</em>.</>,
            text: 'Lobby-ul după ora 18 cere alt ton: finisaje profunde, piese mici cu prezență — cești de espresso, boluri de snacks, farfurii de platou. Aceeași familie vizuală ca restul hotelului, în lumină scăzută.',
          },
        ]}
      />

      {/* OPS TABLE */}
      <section style={{ padding: '96px 56px', background: HF.paper2, borderBottom: `1px solid ${HF.line}` }}>
        <HfEyebrow num="04">Pe operațiuni</HfEyebrow>
        <HfH2 style={{ marginBottom: 48, maxWidth: 720 }}>O colecție pentru fiecare moment al zilei.</HfH2>
        <div style={{ background: HF.paper, border: `1px solid ${HF.line2}` }}>
          {[
            { op: 'Breakfast buffet', d: 'Farfurii plate mari + boluri mici pentru cereale și fructe. Stivuibil pentru runs frecvente.', c: 'IRIS Blanc ivoire · ZEN Natural · CLOUD Gris orage' },
            { op: 'Restaurant principal', d: 'Service Plus 60 cu variație de talii. Coerent cu room service.', c: 'GENESIS+ Terre · STONE Gris lune' },
            { op: 'Room service · in-room dining', d: 'Piese ușor de transportat pe tavă. Boluri cu capac compatibil microunde.', c: 'GENESIS Terre · STELLAR Gris béton' },
            { op: 'Bar · lounge · terasă', d: 'Cești și căni cu identitate vizuală. Espresso și lungo separate.', c: 'GENESIS+ · IRIS Bleu nuit · OXYGEN Vert de gris' },
          ].map((r, i) => (
            <div key={r.op} style={{
              display: 'grid', gridTemplateColumns: '0.8fr 1.5fr 1.2fr 100px',
              padding: '28px 28px', alignItems: 'center', gap: 28,
              borderBottom: i < 3 ? `1px solid ${HF.line}` : 'none',
            }}>
              <div style={{ fontFamily: hfDisplay, fontSize: 24, fontWeight: 500, color: HF.ink }}>{r.op}</div>
              <HfText dim style={{ fontSize: 14 }}>{r.d}</HfText>
              <div style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink, fontWeight: 500 }}>{r.c}</div>
              <HfBtn variant="ghost" size="sm" arrow href={HFRoutes.col}>Vezi</HfBtn>
            </div>
          ))}
        </div>
      </section>

      {/* CAPACITY BUCKETS */}
      <section style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <HfEyebrow num="05">Pentru capacitatea ta</HfEyebrow>
        <HfH2 style={{ marginBottom: 48 }}>Lucrăm pe cantități, nu pe SKU.</HfH2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {[
            { n: '40-80', l: 'camere · hotel boutique' },
            { n: '100-250', l: 'camere · hotel city' },
            { n: '250+', l: 'camere · resort / lanț' },
            { n: 'multi', l: 'property · grupuri hoteliere' },
          ].map(b => (
            <div key={b.l} style={{ border: `1px solid ${HF.line2}`, padding: 32, background: HF.paper }}>
              <div style={{ fontFamily: hfDisplay, fontSize: 56, fontWeight: 400, color: HF.ink, lineHeight: 1 }}>{b.n}</div>
              <HfText dim sm style={{ marginTop: 12, fontSize: 13 }}>{b.l}</HfText>
            </div>
          ))}
        </div>
      </section>

      {/* SECȚIUNE FINALĂ — modul reutilizabil: poză largă + text inspirațional
          (slotul de testimonial e pregătit în HfClosingVista, încă nefolosit) */}
      <HfClosingVista
        img="img/c-cloud.jpg"
        eyebrow="Detaliul care rămâne"
        title={<>Oaspetele nu vede inventarul. <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>Vede grija</em>.</>}
        text="Într-un hotel, vesela nu e un detaliu logistic — e singurul obiect pe care oaspetele îl atinge la fiecare masă, în fiecare zi a sejurului. Când fiecare piesă spune aceeași poveste, grija devine vizibilă."
      />

      <HfPreFooter
        eyebrow="Cere ofertă · Hoteluri"
        title={<>Acoperire completă pentru <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>hotelul tău</em>.</>}
        text="Spune-ne capacitatea și operațiunile în formularul dedicat — propunem un plan de piese și restock anual."
        cta="Cere ofertă pentru hotel"
      />
      <HfFooter />
    </HfPage>
  );
}

Object.assign(window, { RestauranteHi, CafeneleHi, HoteluriHi });