// 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 ────────────────────────────────────────────────────────────
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 · 6 persoane · finisaj reactiv"
        statCards={[
          { n: '4-6', t: 'persoane / colecție' },
          { 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ă.' },
      ]} />
      <FeaturedCollectionsHi
        eyebrow="03 · Colecții pentru restaurante"
        title={<>Patru direcții. <em style={{ fontStyle: 'italic', fontWeight: 400 }}>Una potrivită ție.</em></>}
        intro="GENESIS pentru bistro casual cu identitate organică. IRIS pentru fine-dining cu plating dramatic. GOURMET pentru gastronomic. STELLAR pentru minimal contemporan."
        items={[
          { img: 'img/c-genesis-terre.jpg', name: 'GENESIS', finish: 'Terre', pieces: 36, persons: 6, swatch: '#7a6a4e', material: 'Gres cu email reactiv' },
          { img: 'img/c-iris-marron.jpg',    name: 'IRIS',    finish: 'Marron sauvage', pieces: 48, persons: 6, swatch: '#7a4c2e', material: 'Gres cu email reactiv' },
          { img: 'img/c-gourmet-onyx.jpg',   name: 'GOURMET', finish: 'Onyx',    pieces: 36, persons: 4, swatch: '#1a1a1a', material: 'Gres cu email reactiv' },
          { img: 'img/c-stellar.jpg',        name: 'STELLAR', finish: 'Gris béton', pieces: 48, persons: 6, swatch: '#5a5e62', material: 'Gres cu email reactiv' },
        ]}
      />

      {/* 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',
              '4 — 6 persoane / colecție',
            ].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: '4-6', t: 'persoane / set' },
        ]}
      />
      <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.' },
      ]} />
      <FeaturedCollectionsHi
        eyebrow="03 · Colecții pentru cafenele"
        title={<>Cești și căni <em style={{ fontStyle: 'italic', fontWeight: 400 }}>cu caracter</em>.</>}
        intro="NAPOLI pentru brunch-uri cu personalitate. OXYGEN Rose poudre pentru pâtisserie. MAGMA Menthe pentru specialty coffee. COSMOS Azur pentru atmosferă marină."
        items={[
          { img: 'img/c-napoli.jpg',       name: 'NAPOLI',  finish: 'Agrume',       pieces: 28, persons: 4, swatch: '#e4a838', material: 'Porțelan pictat manual', compat: ['mas. spălat', 'microunde'] },
          { img: 'img/c-oxygen-rose.jpg',  name: 'OXYGEN',  finish: 'Rose poudre',  pieces: 42, persons: 6, swatch: '#d8aea2', material: 'Gres cu email reactiv' },
          { img: 'img/c-magma-menthe.jpg', name: 'MAGMA',   finish: 'Menthe',       pieces: 30, persons: 6, swatch: '#7aa590', material: 'Gres cu email reactiv' },
          { img: 'img/c-cosmos-azur.jpg',  name: 'COSMOS',  finish: 'Azur',         pieces: 30, persons: 6, swatch: '#5878a8', material: 'Gres cu email reactiv' },
        ]}
      />

      {/* 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 · 6 persoane · 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 });