// 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>
  );
}

function SegmentHero({ segment, title, lede, heroImg, captionTitle, captionMeta, statCards }) {
  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} />
          <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>
  );
}

function FeaturedCollectionsHi({ eyebrow, title, items, intro }) {
  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: 720 }}>{title}</HfH2>
          {intro && <HfLede dim style={{ marginTop: 18, maxWidth: 540 }}>{intro}</HfLede>}
        </div>
        <HfBtn variant="ghost" arrow href={HFRoutes.col}>Vezi toate colecțiile</HfBtn>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {items.map((c, i) => (
          <HfCollectionCard key={c.name + c.finish}
            {...c} compat={c.compat || ['mas. spălat', 'microunde', 'cuptor']}
            accent={i === 1}
          />
        ))}
      </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 ────────────────────────────────────────────────────────────
// ── UnitPickCard — recomandare de PIESĂ unitară (nu set complet) pe pagina de
// industrie. Linkează la pagina de produs unitar (produs.html#collSlug__piesă).
function UnitPickCard({ img, title, type, collLabel, swatch, collSlug, accent }) {
  const href = (typeof slugifyProd !== 'undefined' && collSlug)
    ? `${HFRoutes.prod}#${collSlug}__${slugifyProd(title)}`
    : HFRoutes.col;
  return (
    <article style={{ background: HF.paper, border: `1px solid ${HF.line}`, display: 'flex', flexDirection: 'column' }}>
      <HfImg src={img} alt={`${title} · ${collLabel}`} ratio="3 / 2" />
      <div style={{ padding: '22px 24px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <span style={{ width: 14, height: 14, borderRadius: '50%', background: swatch, border: `1px solid ${HF.line2}` }}></span>
          <span style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: HF.ink2 }}>{collLabel}</span>
        </div>
        <h3 style={{ fontFamily: hfDisplay, fontWeight: 500, fontSize: 26, lineHeight: 1.05, margin: 0, color: HF.ink }}>{title}</h3>
        <div style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink2, marginTop: 6, marginBottom: 18 }}>{type}</div>
        <div style={{ display: 'flex', gap: 10, marginTop: 'auto', alignItems: 'center' }}>
          <HfBtn variant={accent ? 'accent' : 'solid'} size="sm" arrow href={HFRoutes.rfq}>Cere ofertă</HfBtn>
          <HfBtn variant="ghost" size="sm" href={href}>Detalii</HfBtn>
        </div>
      </div>
    </article>
  );
}

// ── IndustryPicksHi — secțiune de recomandări de piese unitare pe industrie
// (înlocuiește recomandarea de seturi complete pe Restaurante & Cafenele).
function IndustryPicksHi({ eyebrow, title, intro, items }) {
  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', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {items.map((it, i) => <UnitPickCard key={i} {...it} accent={i === 1} />)}
      </div>
    </section>
  );
}

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 vesela 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={[
          { n: '26', t: 'colecții complete' },
          { n: '36-60', t: 'piese în service' },
          { n: '2 ani', t: 'garanție · restock' },
        ]}
      />
      <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ă.' },
      ]} />
      <IndustryPicksHi
        eyebrow="03 · Piese recomandate pentru restaurante"
        title={<>Piesele care contează <em style={{ fontStyle: 'italic', fontWeight: 400 }}>în service-ul zilnic</em>.</>}
        intro="Farfuria mare și bolul — selectate din mai multe colecții. Le poți cere individual sau ca parte din service-ul complet."
        items={[
          { collSlug: 'genesis-terre',      collLabel: 'GENESIS · Terre',          title: 'Farfurie plată mare', type: 'Farfurie principală · Ø 27 cm',        img: 'img/p-gen-terre-assiette-27.jpg',  swatch: '#7a6a4e' },
          { collSlug: 'iris-marron-sauvage', collLabel: 'IRIS · Marron sauvage',    title: 'Farfurie plată mare', type: 'Farfurie principală · Ø 26 cm',        img: 'img/p-iris-marron-assiette-26.jpg', swatch: '#7a4c2e' },
          { collSlug: 'gourmet-onyx',       collLabel: 'GOURMET · Onyx',           title: 'Farfurie plată Ø 28 cm', type: 'Farfurie principală · gastronomic', img: 'img/p-gourmet-assiette-28.jpg',     swatch: '#1a1a1a' },
          { collSlug: 'genesis-terre',      collLabel: 'GENESIS · Terre',          title: 'Bol Ø 17 cm',         type: 'Bol mediu · supe, paste, salate',     img: 'img/p-gen-terre-bol-17.jpg',       swatch: '#7a6a4e' },
          { collSlug: 'iris-marron-sauvage', collLabel: 'IRIS · Marron sauvage',    title: 'Bol Ø 16,5 cm',       type: 'Bol mediu · interior reactiv',        img: 'img/p-iris-marron-bol-16.jpg',     swatch: '#7a4c2e' },
          { collSlug: 'oxygen-rose-poudre', collLabel: 'OXYGEN · Rose poudre',     title: 'Bol Ø 17,5 cm',       type: 'Bol mediu · bowls, salate',           img: 'img/p-oxygen-rose-bol-17.jpg',     swatch: '#d8aea2' },
        ]}
      />

      {/* 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',
              'Garanție 2 ani · restock anual',
              'Demo fizic la cerere',
              '30 — 60 piese / colecție',
              'Restock anual previzibil',
            ].map(s => <HfSpec key={s}>{s}</HfSpec>)}
          </div>
        </div>
      </section>

      <RfqSection
        segment="Restaurant"
        segmentValue={{ label: 'Număr locuri / mese', hint: 'ex: 40 locuri · 12 mese' }}
        extraField={{ label: 'Stil bucătărie / meniu', hint: 'ex: bistro tradițional, italian fine-dining' }}
        suggestions="GENESIS Terre · IRIS Marron sauvage · GOURMET Onyx"
        leftTitle={<>Pregătim oferta<br/>pentru <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>restaurantul tău</em>.</>}
        leftLede="Trimite câteva detalii — un consultant revine cu 2-3 colecții și o ofertă personalizată în 24h."
      />
      <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={[
          { n: '6×', t: 'cești espresso / lungo' },
          { n: '6×', t: 'căni cappuccino' },
          { n: '26', t: 'colecții complete' },
        ]}
      />
      <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.' },
      ]} />
      <IndustryPicksHi
        eyebrow="03 · Piese recomandate pentru cafenele"
        title={<>Cești, căni și farfurii de desert <em style={{ fontStyle: 'italic', fontWeight: 400 }}>cu caracter</em>.</>}
        intro="Piesele pentru servirea cafelei și a deserturilor — selectate din mai multe colecții. Paharele intră în catalog într-o fază următoare."
        items={[
          { collSlug: 'genesis-terre',      collLabel: 'GENESIS · Terre',       title: 'Ceașcă 15 cl',      type: 'Ceașcă lungo · espresso dublu',       img: 'img/p-gen-terre-tasse-15.jpg',     swatch: '#7a6a4e' },
          { collSlug: 'napoli-agrume',      collLabel: 'NAPOLI · Agrume',       title: 'Ceașcă 20 cl',      type: 'Ceașcă + farfurioară · pictat manual', img: 'img/p-napoli-tasse.jpg',           swatch: '#e4a838' },
          { collSlug: 'oxygen-rose-poudre', collLabel: 'OXYGEN · Rose poudre',  title: 'Cană 30 cl',        type: 'Cană · cappuccino, cafea cu lapte',   img: 'img/p-oxygen-rose-mug.jpg',        swatch: '#d8aea2' },
          { collSlug: 'genesis-terre',      collLabel: 'GENESIS · Terre',       title: 'Farfurie mică',     type: 'Farfurie desert · Ø 20,5 cm',         img: 'img/p-gen-terre-assiette-20.jpg',  swatch: '#7a6a4e' },
          { collSlug: 'gourmet-onyx',       collLabel: 'GOURMET · Onyx',        title: 'Farfurie Ø 15,5 cm', type: 'Farfurie desert · mignardises',      img: 'img/p-gourmet-assiette-15.jpg',    swatch: '#1a1a1a' },
          { collSlug: 'oxygen-rose-poudre', collLabel: 'OXYGEN · Rose poudre',  title: 'Bol mini Ø 9 cm',   type: 'Ramequin · sosuri, garnituri',        img: 'img/p-oxygen-rose-bol-9.jpg',      swatch: '#d8aea2' },
        ]}
      />

      {/* 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>

      <RfqSection
        segment="Cafenea"
        segmentValue={{ label: 'Capacitate / cafele pe zi', hint: 'ex: 25 locuri · 80 cafele/zi' }}
        extraField={{ label: 'Stil cafenea', hint: 'ex: specialty coffee, brunch, pâtisserie' }}
        suggestions="NAPOLI Agrume · OXYGEN Rose poudre · MAGMA Menthe"
        leftTitle={<>O cafenea cu <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>identitate</em>.</>}
        leftLede="Spune-ne tipul de cafenea și volumul zilnic — propunem 2-3 colecții care îți completează atmosfera."
      />
      <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={[
          { n: '60', t: 'piese / service plus' },
          { n: '3', t: 'taliile farfuriilor' },
          { n: '< 24h', t: 'răspuns ofertă' },
        ]}
      />
      <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.' },
      ]} />
      <FeaturedCollectionsHi
        eyebrow="03 · Colecții pentru hoteluri"
        title={<>Colecții de <em style={{ fontStyle: 'italic', fontWeight: 400 }}>volum</em>, coerente la scară.</>}
        intro="GENESIS Plus 60 pentru flexibilitate maximă. IRIS Blanc ivoire pentru breakfast luminos. ZEN Natural pentru calm. CLOUD Gris orage pentru daily operations neutre."
        items={[
          { img: 'img/c-genesis-plus-terre.jpg', name: 'GENESIS+', finish: 'Terre · 60', pieces: 60, persons: 6, swatch: '#7a6a4e', material: 'Gres cu email reactiv', badge: 'Plus' },
          { img: 'img/c-iris-ivoire.jpg', name: 'IRIS', finish: 'Blanc ivoire', pieces: 48, persons: 6, swatch: '#e8dec8', material: 'Gres cu email reactiv' },
          { img: 'img/c-zen-natural.jpg', name: 'ZEN', finish: 'Natural', pieces: 48, persons: 6, swatch: '#a8b0b8', material: 'Gres cu email reactiv' },
          { img: 'img/c-cloud.jpg', name: 'CLOUD', finish: 'Gris orage', pieces: 48, persons: 6, swatch: '#b0b4b8', material: 'Gres cu email reactiv' },
        ]}
      />

      {/* 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>

      <RfqSection
        segment="Hotel"
        segmentValue={{ label: 'Capacitate (camere / locuri)', hint: 'ex: 120 camere · 80 locuri restaurant' }}
        extraField={{ label: 'Operațiuni unde se va folosi', hint: 'breakfast, restaurant, room service, bar' }}
        suggestions="GENESIS+ Terre · IRIS Blanc ivoire · ZEN Natural · CLOUD Gris orage"
        leftTitle={<>Acoperire completă<br/>pentru <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>hotelul tău</em>.</>}
        leftLede="Spune-ne capacitatea și operațiunile — propunem un plan de piese și restock anual."
      />
      <HfFooter />
    </HfPage>
  );
}

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