// Hi-fi Homepage — "carte de vizită" structurată (Despre noi integrat aici).
// Hero → bară colecții (bulină-farfurie) → stats →
// bannere rotative categorii (veselă / pahare / tacâmuri) → ce facem (#despre) →
// colecții selectate → marquee beneficii → de ce OwithU + beneficii →
// cu cine lucrăm → proces (#proces) → puncte de intrare (3 locații) →
// CTA pre-footer → footer. (O singură bandă mișcătoare per zonă de pagină.)

// ── Bara de colecții de sub hero — nume + bulina REPREZENTATIVĂ oficială a
// colecției (swatch-urile rotunde de pe bjorn.shop, decupate să umple cercul).
// Ambele sunt linkuri către pagina de colecții, nefiltrată.
const HOME_COLLECTION_NAMES = [
  { n: 'GENESIS', plate: 'img/sw-genesis.png' },
  { n: 'IRIS',    plate: 'img/sw-iris.png' },
  { n: 'MAGMA',   plate: 'img/sw-magma.png' },
  { n: 'SCANDI',  plate: 'img/sw-scandi.png' },
  { n: 'GOURMET', plate: 'img/sw-gourmet.png' },
  { n: 'OXYGEN',  plate: 'img/sw-oxygen.png' },
  { n: 'MOON',    plate: 'img/sw-moon.png' },
  { n: 'ZEN',     plate: 'img/sw-zen.png' },
  { n: 'ISLAND',  plate: 'img/sw-island.png' },
  { n: 'CLOUD',   plate: 'img/sw-cloud.png' },
  { n: 'STONE',   plate: 'img/sw-stone.png' },
  { n: 'COSMOS',  plate: 'img/sw-cosmos.png' },
  { n: 'STELLAR', plate: 'img/sw-stellar.png' },
  { n: 'NAPOLI',  plate: 'img/sw-napoli.png' },
  { n: 'PURE',    plate: 'img/sw-pure.png' },
];

function HomeCollectionsStrip() {
  return (
    <section style={{ borderBottom: `1px solid ${HF.line}`, padding: '14px 0', background: HF.paper }}>
      <HfMarquee duration={70}>
        {HOME_COLLECTION_NAMES.map((c, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 22, marginRight: 22 }}>
            <a href={HFRoutes.col} data-hf-link="" style={{
              fontFamily: hfDisplay, fontSize: 21, fontWeight: 500,
              letterSpacing: '0.02em', color: HF.ink, textDecoration: 'none',
              whiteSpace: 'nowrap',
            }}>{c.n}</a>
            <a href={HFRoutes.col} aria-label={`Toate colecțiile — ${c.n}`} style={{
              display: 'inline-flex', flex: '0 0 auto',
            }}>
              {/* eager: banda se mișcă orizontal — lazy ar lăsa buline goale până intră în viewport */}
              <img src={c.plate} alt="" loading="eager" draggable="false" style={{
                width: 30, height: 30, borderRadius: '50%', objectFit: 'cover',
                border: `1px solid ${HF.line2}`, display: 'block',
                background: '#fff',
              }} />
            </a>
          </span>
        ))}
      </HfMarquee>
    </section>
  );
}

// ── Bannere rotative — categoriile mari: veselă, pahare, tacâmuri.
const HOME_CATEGORY_BANNERS = [
  {
    img: 'img/h-zen.jpg', alt: 'Veselă profesională · colecția ZEN',
    eyebrow: 'Veselă', title: <>Veselă în <em style={{ fontStyle: 'italic', fontWeight: 400 }}>colecții complete</em>.</>,
    text: 'Farfurii, boluri, căni și cești care se potrivesc între ele — gres cu email reactiv și porțelan pictat manual, gândite pentru uz profesional zilnic.',
    ctas: [
      { label: 'Cere ofertă', href: HFRoutes.rfq, variant: 'accent' },
      { label: 'Vezi colecțiile de veselă', href: HFRoutes.col + '?cat=vesela', variant: 'outline' },
    ],
  },
  {
    img: 'img/h-genesis-plus.jpg', alt: 'Pahare și căni · GENESIS Plus',
    eyebrow: 'Pahare', title: <>Pahare care <em style={{ fontStyle: 'italic', fontWeight: 400 }}>întregesc masa</em>.</>,
    text: 'De la pahare de apă și vin până la carafe — completăm mise-en-place-ul cu piese de băut asortate colecției tale, prin cerere de ofertă.',
    ctas: [
      { label: 'Cere ofertă', href: HFRoutes.rfq, variant: 'accent' },
      { label: 'Vezi colecțiile de pahare', href: HFRoutes.col + '?cat=pahare', variant: 'outline' },
    ],
  },
  {
    img: 'img/h-gourmet.jpg', alt: 'Tacâmuri profesionale · GOURMET Onyx',
    eyebrow: 'Tacâmuri', title: <>Tacâmuri pentru <em style={{ fontStyle: 'italic', fontWeight: 400 }}>service coerent</em>.</>,
    text: 'Seturi de tacâmuri profesionale, finisaje mate sau lucioase, alese să se asorteze veselei — aceeași masă, un singur limbaj vizual.',
    ctas: [
      { label: 'Cere ofertă', href: HFRoutes.rfq, variant: 'accent' },
      { label: 'Vezi colecțiile de tacâmuri', href: HFRoutes.col + '?cat=tacamuri', variant: 'outline' },
    ],
  },
];

// ── HERO SLIDESHOW (varianta heroslides) — bannerele rotative de categorii,
// promovate direct în hero: slide 1 = mesajul principal, slide-urile 2-4 =
// ACELEAȘI texte ca HOME_CATEGORY_BANNERS, cu imagini full-bleed de pe Bjorn.
// Crossfade + autoplay 7s (pauză pe hover, respectă reduced-motion) + swipe + buline.
const HERO_SLIDES = [
  {
    img: 'img/h-mix-table.jpg',
    eyebrow: 'Furnizor B2B HoReCa · Veselă profesională',
    title: (
      <>Colecții complete<br/>pentru mese<br/>
        <em style={{ fontWeight: 400, fontStyle: 'italic', position: 'relative', display: 'inline-block' }}>
          care se țin minte
          <span style={{ position: 'absolute', left: 0, right: 0, bottom: -6, height: 6, background: 'var(--accent)', opacity: 0.7 }}></span>
        </em>.</>
    ),
    text: 'Furnizăm servicii complete de veselă pentru restaurante, cafenele și hoteluri. Alegi colecția potrivită locației tale și revenim cu o ofertă personalizată în 24 de ore.',
    ctas: [
      { label: 'Vezi colecțiile', href: HFRoutes.col, variant: 'solid' },
      { label: 'Cere ofertă', href: HFRoutes.rfq, variant: 'accent' },
    ],
    badge: ['Colecție în imagine', 'Mix de colecții', 'prin cerere de ofertă'],
  },
  { ...HOME_CATEGORY_BANNERS[0], img: 'img/h-slide-vesela.jpg', eyebrow: 'Categorie · Veselă', badge: ['În imagine', 'Mix de colecții', 'servicii complete'] },
  { ...HOME_CATEGORY_BANNERS[1], img: 'img/h-slide-pahare.jpg', eyebrow: 'Categorie · Pahare', badge: ['În imagine', 'Sticlărie', 'prin cerere de ofertă'] },
  { ...HOME_CATEGORY_BANNERS[2], img: 'img/h-slide-tacamuri.jpg', eyebrow: 'Categorie · Tacâmuri', badge: ['În imagine', 'Ménagère · finisaj auriu', 'prin cerere de ofertă'] },
];

const HERO_INTERVAL = 6500; // identic cu HfBannerCarousel din feedback-v2

function HomeHeroSlideshow() {
  const n = HERO_SLIDES.length;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const dragRef = React.useRef(null);
  const movedRef = React.useRef(false);
  const reduced = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;

  React.useEffect(() => {
    if (n < 2 || paused || reduced) return undefined;
    const t = setInterval(() => setIdx(i => (i + 1) % n), HERO_INTERVAL);
    return () => clearInterval(t);
  }, [n, paused, idx, reduced]);

  const onDown = (e) => { dragRef.current = { x: e.clientX }; movedRef.current = false; setPaused(true); };
  const onMove = (e) => { if (dragRef.current && Math.abs(e.clientX - dragRef.current.x) > 8) movedRef.current = true; };
  const onUp = (e) => {
    if (!dragRef.current) return;
    const dx = e.clientX - dragRef.current.x;
    dragRef.current = null; setPaused(false);
    if (dx < -60) setIdx(i => (i + 1) % n);
    else if (dx > 60) setIdx(i => (i - 1 + n) % n);
  };

  const s = HERO_SLIDES[idx];
  return (
    <section
      onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}
      onDragStart={(e) => e.preventDefault()}
      onClickCapture={(e) => { if (movedRef.current) { e.preventDefault(); e.stopPropagation(); movedRef.current = false; } }}
      style={{
        position: 'relative', overflow: 'hidden',
        minHeight: 'calc(100vh - var(--hf-header-h))',
        display: 'flex', alignItems: 'center',
        padding: '64px 56px',
        borderBottom: `1px solid ${HF.line}`,
        touchAction: 'pan-y',
      }}>
      {/* straturile de fundal — toate montate, crossfade pe opacity */}
      {HERO_SLIDES.map((sl, i) => (
        <div key={i} aria-hidden={i !== idx} style={{
          position: 'absolute', inset: 0, zIndex: 0,
          backgroundImage: `url("${sl.img}")`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: i === idx ? 1 : 0,
          transition: 'opacity 900ms ease',
        }}></div>
      ))}

      {/* cardul translucid — conținutul slide-ului curent */}
      <div key={idx} className="hf-hero-swap" style={{
        position: 'relative', zIndex: 1,
        background: 'rgba(250,250,247,0.82)',
        backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
        borderLeft: '3px solid var(--accent)',
        boxShadow: '0 24px 70px rgba(0,0,0,0.12)',
        padding: '46px 50px', maxWidth: 640, width: '100%',
      }}>
        <HfEyebrow num="01">{s.eyebrow}</HfEyebrow>
        <HfH1 style={{ fontSize: 62, lineHeight: 1.02 }}>{s.title}</HfH1>
        <HfLede style={{ marginTop: 24, maxWidth: 520 }}>{s.text}</HfLede>
        <div style={{ display: 'flex', gap: 14, marginTop: 30, alignItems: 'center', flexWrap: 'wrap' }}>
          {s.ctas.map((c, i) => (
            <HfBtn key={i} variant={c.variant === 'outline' ? 'solid' : c.variant} size="lg" arrow href={c.href}>{c.label}</HfBtn>
          ))}
        </div>
      </div>

      {/* badge-ul "în imagine" al slide-ului curent */}
      <div key={'b' + idx} className="hf-hero-swap" style={{
        position: 'absolute', bottom: 52, right: 20, zIndex: 1,
        background: 'rgba(250,250,247,0.85)',
        backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
        padding: '12px 16px',
        borderLeft: '3px solid var(--accent)',
      }}>
        <div style={{ fontFamily: hfBody, fontSize: 10, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: HF.ink2 }}>{s.badge[0]}</div>
        <div style={{ fontFamily: hfDisplay, fontSize: 20, fontWeight: 500, marginTop: 2, color: HF.ink }}>{s.badge[1]} <span style={{ fontFamily: hfBody, fontSize: 12, color: HF.ink2, fontWeight: 500 }}>· {s.badge[2]}</span></div>
      </div>

      {/* bulinele de navigare — aceeași mecanică hf-dotfill ca în caruselul de
          bannere din feedback-v2: bulina activă devine pastilă-loading care se
          umple cu accent pe durata slide-ului, apoi trece la următorul. */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 18, zIndex: 2, display: 'flex', justifyContent: 'center', gap: 9 }}>
        {HERO_SLIDES.map((sl, i) => (
          <button key={i} aria-label={`Slide ${i + 1} din ${n}`} aria-current={i === idx} onClick={() => setIdx(i)} style={{
            width: i === idx ? 38 : 8, height: 8, borderRadius: 99, padding: 0,
            border: 'none', cursor: 'pointer', overflow: 'hidden',
            background: 'rgba(250,250,247,0.85)',
            boxShadow: '0 0 0 1px rgba(0,0,0,0.22)',
            transition: 'width 260ms ease',
          }}>
            {i === idx && (
              <span key={'fill-' + idx} style={{
                display: 'block', width: '100%', height: '100%',
                background: 'var(--accent)', transformOrigin: 'left center',
                animation: reduced ? 'none' : `hf-dotfill ${HERO_INTERVAL}ms linear forwards`,
                animationPlayState: paused ? 'paused' : 'running',
              }}></span>
            )}
          </button>
        ))}
      </div>
    </section>
  );
}

function HomeHi() {
  // Anchor handling — secțiunile #despre / #proces se randează după ce React
  // montează pagina, deci la navigare directă (site/index.html#despre) facem
  // scroll manual după primul paint.
  React.useEffect(() => {
    const h = (window.location.hash || '').slice(1);
    if (!h) return undefined;
    const t = setTimeout(() => {
      const el = document.getElementById(h);
      if (el) el.scrollIntoView({ block: 'start' });
    }, 150);
    return () => clearTimeout(t);
  }, []);
  const anchorOffset = { scrollMarginTop: 'calc(var(--hf-header-h) + 12px)' };

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

      {/* ───── HERO — slideshow full-bleed: mesajul principal + categoriile ───── */}
      <HomeHeroSlideshow />

      {/* ───── BARĂ COLECȚII — nume + bulină-farfurie, sub hero ───── */}
      <HomeCollectionsStrip />

      {/* ───── KEY STATS STRIP — cifre relevante HoReCa (game de dimensiuni
            + catalog), partajate cu paginile de locație via HF_HORECA_STATS ───── */}
      <section id="cifre" style={{ padding: '44px 56px', borderBottom: `1px solid ${HF.line}`, ...anchorOffset }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {HF_HORECA_STATS.map(s => (
            <div key={s.t}>
              <div style={{ fontFamily: hfDisplay, fontSize: 38, fontWeight: 400, lineHeight: 1, color: HF.ink }}>{s.n}</div>
              <div style={{ fontFamily: hfBody, fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: HF.ink2, marginTop: 8 }}>{s.t}</div>
              <div style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink2, marginTop: 4 }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ───── CE FACEM — Despre noi, integrat (#despre) ───── */}
      <section id="despre" style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}`, ...anchorOffset }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
          <div>
            <HfEyebrow num="02">Ce facem</HfEyebrow>
            <HfH2 style={{ maxWidth: 760 }}>
              Furnizor B2B de <em style={{ fontWeight: 400, fontStyle: 'italic' }}>veselă profesională</em> pentru HoReCa.
            </HfH2>
          </div>
          <HfText dim style={{ maxWidth: 380, textAlign: 'right', lineHeight: 1.55 }}>
            Operăm prin cerere de ofertă, nu prin catalog public — ca să potrivim colecția cu locația, nu invers.
          </HfText>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${HF.line2}` }}>
          {[
            { n: '01', t: 'Deschidem locații noi', d: 'Set complet de la zero: alegem împreună colecția, estimăm piesele pe capacitatea locației și livrăm înainte de deschidere.' },
            { n: '02', t: 'Completăm designul existent', d: 'Piese și colecții care se integrează în identitatea locației tale — extinzi sau împrospătezi masa fără să schimbi tot inventarul.' },
            { n: '03', t: 'Completări rapide', d: 'Restock și înlocuiri din colecții cu istoric — aceleași piese, aceleași finisaje, aceleași loturi. Comanzi din nou peste ani, fără surprize.' },
          ].map((s, i) => (
            <div key={s.n} style={{
              padding: '40px 32px 8px 0', position: 'relative',
              borderRight: i < 2 ? `1px solid ${HF.line2}` : 'none',
              paddingLeft: i > 0 ? 32 : 0,
            }}>
              <div style={{ fontFamily: hfDisplay, fontWeight: 400, fontSize: 64, lineHeight: 1, color: 'var(--accent)' }}>{s.n}</div>
              <HfH3 style={{ marginTop: 24, marginBottom: 14, fontSize: 28 }}>{s.t}</HfH3>
              <HfText dim style={{ maxWidth: 340 }}>{s.d}</HfText>
            </div>
          ))}
        </div>
      </section>

      {/* ───── COLLECTIONS PREVIEW ───── */}
      <HfDivider label="03 · Colecții selectate" sub="service complet în fiecare" />
      <section style={{ padding: '72px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <HfH2 style={{ maxWidth: 700 }}>
            26 colecții complete.<br/>
            <em style={{ fontWeight: 400, fontStyle: 'italic' }}>Patru selectate pentru tine.</em>
          </HfH2>
          <HfBtn variant="ghost" arrow href={HFRoutes.col}>Vezi toate colecțiile</HfBtn>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          <HfCollectionCard
            img="img/c-genesis-terre.jpg"
            name="GENESIS" finish="Terre" pieces={36} persons={6}
            swatch="#7a6a4e" material="Gres cu email reactiv"
            compat={['mașină spălat', 'microunde', 'cuptor']}
            accent
          />
          <HfCollectionCard
            img="img/c-iris-marron.jpg"
            name="IRIS" finish="Marron sauvage" pieces={48} persons={6}
            swatch="#7a4c2e" material="Gres cu email reactiv"
            compat={['mașină spălat', 'microunde', 'cuptor']}
          />
          <HfCollectionCard
            img="img/c-gourmet-onyx.jpg"
            name="GOURMET" finish="Onyx" pieces={36} persons={4}
            swatch="#1a1a1a" material="Gres cu email reactiv"
            compat={['mașină spălat', 'microunde', 'cuptor']}
          />
          <HfCollectionCard
            img="img/c-napoli.jpg"
            name="NAPOLI" finish="Agrume" pieces={28} persons={4}
            swatch="#e4a838" material="Porțelan pictat manual"
            compat={['mașină spălat', 'microunde']}
          />
        </div>
      </section>

      {/* ───── MARQUEE BENEFICII — element reutilizabil; plasat la distanță de
            banda de colecții de sub hero, ca benzile mișcătoare să dea ritm
            paginii, nu să se suprapună vizual ───── */}
      <HfBenefitBar />

      {/* ───── DE CE OWITHU — brand promise + beneficii (Despre, integrat) ───── */}
      <section id="de-ce" style={{ borderBottom: `1px solid ${HF.line}`, ...anchorOffset }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', minHeight: 540 }}>
          <div style={{ padding: '96px 56px 96px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderRight: `1px solid ${HF.line}` }}>
            <HfEyebrow num="04">De ce OwithU</HfEyebrow>
            <HfH2 style={{ marginBottom: 28, fontSize: 64 }}>
              Nu alegi 500 piese.<br/>
              Alegi <em style={{ fontWeight: 400, fontStyle: 'italic' }}>o singură colecție</em>.
            </HfH2>
            <HfLede style={{ maxWidth: 520, fontSize: 18 }}>
              Pentru locația ta, fiecare piesă trebuie să se potrivească celorlalte — și să rămână disponibilă pentru restock peste ani. Tu alegi un singur finisaj — noi îți livrăm masa coerentă.
            </HfLede>
            <div style={{
              marginTop: 44, display: 'grid', gridTemplateColumns: '1fr 1fr',
              gap: 28, maxWidth: 560,
            }}>
              {[
                { t: 'Consultanță dedicată', d: 'un consultant, nu un call center — de la prima cerere până la livrare.' },
                { t: 'Experiență HoReCa', d: 'lucrăm zi de zi cu restaurante, cafenele și hoteluri din toată țara.' },
                { t: 'Livrare în siguranță', d: 'transport organizat și manipulare atentă, până la ușa locației.' },
                { t: 'Ambalaj sigur', d: 'fiecare piesă protejată individual — setul ajunge întreg.' },
              ].map(b => (
                <div key={b.t}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden>
                      <path d="M2.5 7.5 L5.5 10.5 L11.5 3.5" stroke="var(--accent)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <span style={{ fontFamily: hfBody, fontSize: 14, fontWeight: 700, color: HF.ink }}>{b.t}</span>
                  </div>
                  <HfText sm dim style={{ fontSize: 13, lineHeight: 1.5 }}>{b.d}</HfText>
                </div>
              ))}
            </div>
          </div>
          <HfImg src="img/h-oxygen-rose.jpg" alt="OXYGEN Rose poudre · set complet" h="100%" fill />
        </div>
      </section>

      {/* ───── CU CINE LUCRĂM — Despre, integrat ───── */}
      <section id="clienti" style={{ padding: '72px 56px', borderBottom: `1px solid ${HF.line}`, background: HF.paper2, ...anchorOffset }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }}>
          <div>
            <HfEyebrow num="05">Cu cine lucrăm</HfEyebrow>
            <HfH2 style={{ fontSize: 44, marginBottom: 18 }}>
              Locații HoReCa <em style={{ fontWeight: 400, fontStyle: 'italic' }}>din toată țara</em>.
            </HfH2>
            <HfText dim style={{ maxWidth: 420 }}>
              De la bistro casual la fine-dining, de la specialty coffee la hotel boutique — și alte locații HoReCa, la cerere.
            </HfText>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 26 }}>
              {['Restaurante', 'Cafenele', 'Hoteluri', 'Catering', 'Bistro-uri', 'Patiserii', 'Resort-uri'].map(t => (
                <span key={t} style={{
                  fontFamily: hfBody, fontSize: 13, fontWeight: 500,
                  padding: '8px 14px', border: `1px solid ${HF.line2}`,
                  color: HF.ink, background: HF.paper,
                }}>{t}</span>
              ))}
            </div>
          </div>
          <div>
            <HfText dim style={{ maxWidth: 320, lineHeight: 1.45, marginBottom: 28 }}>
              <em style={{ fontFamily: hfDisplay, fontStyle: 'italic', fontSize: 22, color: HF.ink, fontWeight: 400 }}>„Colaborăm cu locații HoReCa din toată țara."</em>
            </HfText>
            <div style={{ display: 'flex', gap: 40, alignItems: 'center', opacity: 0.75, flexWrap: 'wrap' }}>
              {['Casa Doi Cocoși', 'Atelier Brunch', 'Hotel Lipscani', 'Boroka Café', 'Vila Marina', 'Estate H. Sinaia'].map((c, i) => (
                <div key={c} style={{
                  fontFamily: hfDisplay, fontSize: 22, fontWeight: 500,
                  letterSpacing: '0.04em', color: HF.ink,
                  fontStyle: i % 2 === 0 ? 'italic' : 'normal',
                }}>{c}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ───── PROCESS (#proces) ───── */}
      <section id="proces" style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}`, ...anchorOffset }}>
        <HfEyebrow num="06">Procesul</HfEyebrow>
        <HfH2 style={{ marginBottom: 56 }}>De la colecție la masă pusă, în trei pași.</HfH2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${HF.line2}` }}>
          {[
            { n: '01', t: 'Identifici locația ta', d: 'Spune-ne dacă deschizi un restaurant, o cafenea sau un hotel. Fiecare tip de locație are colecțiile lui recomandate.' },
            { n: '02', t: 'Alegi 1-2 colecții', d: 'Vezi compoziția, materialul, piesele incluse, compatibilitățile. Salvezi colecțiile care te interesează.' },
            { n: '03', t: 'Primești oferta', d: 'Trimiți cererea — un consultant revine cu ofertă personalizată în 24h. Demo fizic la cerere, dacă ești în București.' },
          ].map((s, i) => (
            <div key={s.n} style={{
              padding: '40px 32px 8px 0', position: 'relative',
              borderRight: i < 2 ? `1px solid ${HF.line2}` : 'none',
              paddingLeft: i > 0 ? 32 : 0,
            }}>
              <div style={{
                fontFamily: hfDisplay, fontWeight: 400, fontSize: 64, lineHeight: 1,
                color: 'var(--accent)',
              }}>{s.n}</div>
              <HfH3 style={{ marginTop: 24, marginBottom: 14, fontSize: 28 }}>{s.t}</HfH3>
              <HfText dim style={{ maxWidth: 320 }}>{s.d}</HfText>
            </div>
          ))}
        </div>
      </section>

      {/* ───── PUNCTE DE INTRARE — cele 3 tipuri de locații, la final ───── */}
      <section id="locatii" style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}`, ...anchorOffset }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
          <div>
            <HfEyebrow num="07">Punctul tău de intrare</HfEyebrow>
            <HfH2 style={{ maxWidth: 720 }}>
              Mergi direct la <em style={{ fontWeight: 400, fontStyle: 'italic' }}>colecțiile potrivite</em> locației tale.
            </HfH2>
          </div>
          <HfText dim style={{ maxWidth: 380, textAlign: 'right', lineHeight: 1.55 }}>
            Trei tipuri de locații, trei filozofii de masă. Începe de la cea care te reprezintă.
          </HfText>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
          {[
            { n: '01', label: 'Restaurante', route: HFRoutes.rest, img: 'img/h-iris-marron.jpg', desc: 'Service complet · dressage coerent · uzură zilnică profesională.', tag: 'GENESIS · IRIS · GOURMET · STELLAR', count: '12 colecții' },
            { n: '02', label: 'Cafenele', route: HFRoutes.cafe, img: 'img/h-napoli.jpg', desc: 'Cești espresso / lungo, căni și farfurii de desert pentru servire intimă.', tag: 'NAPOLI · OXYGEN · MAGMA · COSMOS', count: '8 colecții' },
            { n: '03', label: 'Hoteluri', route: HFRoutes.hot, img: 'img/h-iris-ivoire.jpg', desc: 'Service Plus 60 piese pentru breakfast, restaurant, room service.', tag: 'GENESIS+ · IRIS · ZEN · CLOUD · STONE', count: '6 colecții extinse' },
          ].map(s => (
            <article key={s.label} style={{
              border: `1px solid ${HF.line}`,
              background: s.accent ? 'var(--accent)' : HF.paper,
              display: 'flex', flexDirection: 'column',
            }}>
              <HfImg src={s.img} alt={s.label} h={320} />
              <div style={{ padding: '28px 28px 32px', borderTop: `1px solid ${HF.line}`, display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
                  <span style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', color: HF.ink2 }}>· {s.n}</span>
                  <span style={{ fontFamily: hfBody, fontSize: 12, fontWeight: 600, color: HF.ink2 }}>{s.count}</span>
                </div>
                <HfH3 style={{ fontSize: 38, marginBottom: 14 }}>{s.label}</HfH3>
                <HfText dim={!s.accent} style={{ marginBottom: 20, fontSize: 15, color: s.accent ? 'rgba(0,0,0,0.78)' : undefined }}>{s.desc}</HfText>
                <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: HF.ink, marginBottom: 8 }}>Colecții recomandate</div>
                <div style={{ fontFamily: hfDisplay, fontSize: 18, fontWeight: 500, color: HF.ink, marginBottom: 24 }}>{s.tag}</div>
                <HfBtn variant={s.accent ? 'solid' : 'outline'} arrow href={s.route} style={{ alignSelf: 'flex-start' }}>Vezi soluții pentru {s.label.toLowerCase()}</HfBtn>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ───── PRE-FOOTER CTA → pagina dedicată de formular ───── */}
      <HfPreFooter
        eyebrow="Cere ofertă"
        title={<>Te-am convins? <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--accent)' }}>Spune-ne ce locație ai</em> — revenim cu oferta în 24h.</>}
        text="Completezi formularul dedicat în 2 minute — un consultant revine cu 2-3 colecții potrivite și o ofertă personalizată în 24h."
      />

      <HfFooter />
    </HfPage>
  );
}

Object.assign(window, { HomeHi });