// 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 + bulină-farfurie (thumbnail rotund).
// Ambele sunt linkuri către pagina de colecții, nefiltrată.
const HOME_COLLECTION_NAMES = [
  { n: 'GENESIS', plate: 'img/p-gen-terre-assiette-27.jpg' },
  { n: 'IRIS',    plate: 'img/p-iris-marron-assiette-26.jpg' },
  { n: 'MAGMA',   plate: 'img/p-gourmet-assiette-21.jpg' },
  { n: 'SCANDI',  plate: 'img/p-oxygen-rose-assiette-21.jpg' },
  { n: 'GOURMET', plate: 'img/p-gourmet-assiette-28.jpg' },
  { n: 'OXYGEN',  plate: 'img/p-oxygen-rose-assiette-27.jpg' },
  { n: 'MOON',    plate: 'img/p-iris-marron-assiette-21.jpg' },
  { n: 'ZEN',     plate: 'img/p-gen-terre-assiette-20.jpg' },
  { n: 'ISLAND',  plate: 'img/p-iris-marron-assiette-16.jpg' },
  { n: 'CLOUD',   plate: 'img/p-napoli-assiette-20.jpg' },
  { n: 'STONE',   plate: 'img/p-gen-terre-assiette-27.jpg' },
  { n: 'COSMOS',  plate: 'img/p-napoli-assiette-27.jpg' },
  { n: 'STELLAR', plate: 'img/p-gourmet-assiette-15.jpg' },
  { n: 'NAPOLI',  plate: 'img/p-napoli-assiette-27.jpg' },
  { n: 'PURE',    plate: 'img/p-oxygen-rose-assiette-27.jpg' },
];

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',
            }}>
              <img src={c.plate} alt="" loading="lazy" 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' },
    ],
  },
];

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 — full-screen photo, light translucent panel (no dark
            overlay), title + paragraph + two buttons ───── */}
      <section style={{
        position: 'relative',
        minHeight: 'calc(100vh - var(--hf-header-h))',
        display: 'flex', alignItems: 'center',
        padding: '64px 56px',
        backgroundImage: 'url("img/h-genesis-terre.jpg")',
        backgroundSize: 'cover', backgroundPosition: 'center',
        borderBottom: `1px solid ${HF.line}`,
      }}>
        <div style={{
          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">Furnizor B2B HoReCa · Vesela profesională</HfEyebrow>
          <HfH1 style={{ fontSize: 68, lineHeight: 1.0 }}>
            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>.
          </HfH1>
          <HfLede style={{ marginTop: 26, maxWidth: 520 }}>
            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.
          </HfLede>
          <div style={{ display: 'flex', gap: 14, marginTop: 32, alignItems: 'center', flexWrap: 'wrap' }}>
            <HfBtn variant="solid" size="lg" arrow href={HFRoutes.col}>Vezi colecțiile</HfBtn>
            <HfBtn variant="accent" size="lg" arrow href={HFRoutes.rfq}>Cere ofertă</HfBtn>
          </div>
        </div>
        <div style={{
          position: 'absolute', bottom: 20, right: 20,
          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 }}>Colecție în imagine</div>
          <div style={{ fontFamily: hfDisplay, fontSize: 20, fontWeight: 500, marginTop: 2, color: HF.ink }}>GENESIS · Terre <span style={{ fontFamily: hfBody, fontSize: 12, color: HF.ink2, fontWeight: 500 }}>· 36 piese</span></div>
        </div>
      </section>

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

      {/* ───── BANNERE ROTATIVE — categoriile mari ───── */}
      <section id="categorii" style={{ padding: '72px 56px 56px', borderBottom: `1px solid ${HF.line}`, ...anchorOffset }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36 }}>
          <div>
            <HfEyebrow num="02">Categoriile principale</HfEyebrow>
            <HfH2 style={{ maxWidth: 720 }}>
              Tot ce pui <em style={{ fontWeight: 400, fontStyle: 'italic' }}>pe masă</em>.
            </HfH2>
          </div>
          <HfText dim style={{ maxWidth: 360, textAlign: 'right', lineHeight: 1.55 }}>
            Veselă, pahare și tacâmuri — alese împreună, ca masa să vorbească o singură limbă.
          </HfText>
        </div>
        <HfBannerCarousel slides={HOME_CATEGORY_BANNERS} />
      </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="03">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="04 · 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="05">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="06">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="07">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="08">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 });