// Hi-fi UI primitives — editorial premium B2B HoReCa.
// Cormorant Garamond (serif display) + Manrope (sans body) + small caps eyebrow.
// White paper, black ink, mustard accent. Hairline borders. Lots of whitespace.

const HF = {
  ink: '#0d0d0d',
  ink2: 'rgba(13,13,13,0.78)',
  ink3: 'rgba(13,13,13,0.55)',
  line: 'rgba(13,13,13,0.10)',
  line2: 'rgba(13,13,13,0.18)',
  paper: '#fafaf7',
  paper2: '#f3f0e8',
  paper3: '#ebe6d8',
};

const hfDisplay = '"Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif';
const hfBody = '"Manrope", "Inter", system-ui, sans-serif';

// ── Routing — relative paths used by the standalone clickable prototype in /site.
// In the canvas HIFI page, these still render as <a href>; a global click handler
// there (see Demo Owithu B2B HoReCa HIFI V1.html) calls preventDefault so the
// canvas doesn't navigate. In /site/*.html files, navigation works normally.
const HFRoutes = {
  home: 'site/index.html',
  rest: 'site/restaurante.html',
  cafe: 'site/cafenele.html',
  hot:  'site/hoteluri.html',
  col:  'site/colectii.html',
  desp: 'site/despre.html',
  rfq:  'site/cere-oferta.html',
  detail: 'site/genesis-terre.html', // for now only GENESIS Terre has a detail page
};

// ── Hover-image lookup — maps a collection card's primary photo to its
// alternate (lifestyle / detail shot). HfCollectionCard reads from here when
// no explicit `imgHover` prop is passed, so the same lookup works whether
// the card is rendered from ALL_COLLECTIONS in page-collections.jsx, or from
// an inline array in page-home.jsx / page-landings.jsx.
// Both photos come from the SAME Bjorn product (collection + finish), never
// random across collections.
const HF_HOVER = {
  'img/c-genesis-terre.jpg':      'img/h-genesis-terre.jpg',
  'img/c-genesis-mer.jpg':        'img/c-genesis-mer-alt.jpg',
  'img/c-genesis-basalte.jpg':    'img/c-genesis-basalte-alt.jpg',
  'img/c-genesis-plus-terre.jpg': 'img/h-genesis-plus.jpg',
  'img/c-iris-marron.jpg':        'img/h-iris-marron.jpg',
  'img/c-iris-nuit.jpg':          'img/c-iris-nuit-alt.jpg',
  'img/c-iris-ivoire.jpg':        'img/h-iris-ivoire.jpg',
  'img/c-magma-cobalt.jpg':       'img/c-magma-cobalt-alt.jpg',
  'img/c-magma-menthe.jpg':       'img/c-magma-menthe-alt.jpg',
  'img/c-scandi-olive.jpg':       'img/c-scandi-olive-alt.jpg',
  'img/c-scandi-marine.jpg':      'img/c-scandi-marine-alt.jpg',
  'img/c-scandi-ocre.jpg':        'img/c-scandi-ocre-alt.jpg',
  'img/c-gourmet-onyx.jpg':       'img/h-gourmet.jpg',
  'img/c-oxygen-rose.jpg':        'img/h-oxygen-rose.jpg',
  'img/c-oxygen-vert.jpg':        'img/c-oxygen-vert-alt.jpg',
  'img/c-moon-petrole.jpg':       'img/c-moon-petrole-alt.jpg',
  'img/c-moon-encre.jpg':         'img/c-moon-encre-alt.jpg',
  'img/c-zen-natural.jpg':        'img/h-zen.jpg',
  'img/c-island.jpg':             'img/c-island-alt.jpg',
  'img/c-cloud.jpg':              'img/c-cloud-alt.jpg',
  'img/c-stone.jpg':              'img/c-stone-alt.jpg',
  'img/c-cosmos-azur.jpg':        'img/c-cosmos-azur-alt.jpg',
  'img/c-cosmos-creme.jpg':       'img/c-cosmos-creme-alt.jpg',
  'img/c-stellar.jpg':            'img/c-stellar-alt.jpg',
  'img/c-napoli.jpg':             'img/h-napoli.jpg',
  'img/c-pure.jpg':               'img/c-pure-alt.jpg',
};

// ── Responsive CSS + animations — injected once at module load. Targets
// inline-style elements via attribute selectors + !important so the same
// components work at desktop (1440 canvas) and on mobile (375-768) viewports.
// Elastic padding + entry animations only apply when document.documentElement
// has `data-hf-standalone` — i.e. in /site/*.html, NOT in the canvas HIFI page.
if (typeof document !== 'undefined' && !document.getElementById('hf-responsive')) {
  const s = document.createElement('style');
  s.id = 'hf-responsive';
  s.textContent = [
    /* ── MOBILE ─────────────────────────────────────────────────────── */
    '@media (max-width: 900px) {',
    // Stack any 2/3/4-col grid layout to single column
    '  [style*="grid-template-columns"] {',
    '    grid-template-columns: 1fr !important;',
    '    gap: 24px !important;',
    '  }',
    // Reduce horizontal section padding from 56px → 20px when both "padding" and "56px" appear in the inline style
    '  [style*="padding"][style*="56px"] {',
    '    padding-left: 20px !important;',
    '    padding-right: 20px !important;',
    '  }',
    // Scale display headings down
    '  h1 { font-size: clamp(36px, 10vw, 64px) !important; line-height: 1.02 !important; }',
    '  h2 { font-size: clamp(28px, 7vw, 48px) !important; line-height: 1.06 !important; }',
    '  h3 { font-size: clamp(20px, 5vw, 30px) !important; line-height: 1.12 !important; }',
    // Hero photos cap height at 60vw
    '  [data-hf-img] { max-height: 62vw !important; min-height: 0 !important; }',
    // Header — hide full nav links, show compact "Meniu" placeholder
    '  [data-hf-nav-links] { display: none !important; }',
    '  [data-hf-nav-menu]  { display: inline-flex !important; }',
    '  [data-hf-lang]      { display: none !important; }',
    // Footer column grid wraps to 2-up
    '  [data-hf-footer-cols] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }',
    // Prevent horizontal overflow from huge headings or hero photos
    '  body { overflow-x: hidden; }',
    '}',
    // Default state of the mobile menu placeholder — hidden at desktop
    '[data-hf-nav-menu] { display: none; }',
    // Soft hover for real links
    'a[data-hf-link]:hover { color: var(--accent) !important; }',

    /* ── ELASTIC PADDING (standalone only) ─────────────────────────────
       Constrains content width to ~1240 with auto-growing horizontal
       padding so the design feels centered and aerated on wide screens.
       Disabled in canvas (no data-hf-standalone) so artboards stay full.  */
    '@media (min-width: 901px) {',
    '  [data-hf-standalone] section[style*="56px"],',
    '  [data-hf-standalone] header[style*="56px"],',
    '  [data-hf-standalone] footer[style*="56px"] {',
    '    padding-left: max(56px, calc((100vw - 1360px) / 2)) !important;',
    '    padding-right: max(56px, calc((100vw - 1360px) / 2)) !important;',
    '  }',
    '}',

    /* ── ANIMATIONS — entry fade-up + card hover lift ────────────────── */
    '@media (prefers-reduced-motion: no-preference) {',
    // Cards lift on hover
    '  article {',
    '    transition: transform 360ms cubic-bezier(0.2,0.6,0.2,1), box-shadow 360ms ease;',
    '  }',
    '  [data-hf-standalone] article:hover {',
    '    transform: translateY(-4px);',
    '    box-shadow: 0 24px 50px rgba(0,0,0,0.08);',
    '  }',
    // Nav links hover
    '  a[data-hf-link] { transition: color 200ms ease, border-color 200ms ease; }',
    // Header gets a soft shadow once user scrolls past hero
    '  header.hf-scrolled {',
    '    box-shadow: 0 8px 30px rgba(0,0,0,0.06);',
    '    transition: box-shadow 240ms ease;',
    '  }',
    // Entry animation classes (applied via JS in standalone only)
    '  .hf-anim-init {',
    '    opacity: 0;',
    '    transform: translateY(28px);',
    '    transition: opacity 900ms cubic-bezier(0.2,0.6,0.2,1), transform 900ms cubic-bezier(0.2,0.6,0.2,1);',
    '    will-change: opacity, transform;',
    '  }',
    '  .hf-anim-init.hf-anim-in {',
    '    opacity: 1;',
    '    transform: translateY(0);',
    '  }',
    '  .hf-anim-init.hf-anim-delay-1 { transition-delay: 80ms; }',
    '  .hf-anim-init.hf-anim-delay-2 { transition-delay: 160ms; }',
    '  .hf-anim-init.hf-anim-delay-3 { transition-delay: 240ms; }',
    // Subtle photo zoom on hover (cards)
    '  [data-hf-standalone] article:hover [data-hf-img] {',
    '    transform: scale(1.012);',
    '  }',
    // Cross-fade to the alternate image on card hover — quick, full swap.
    '  [data-hf-standalone] article:hover [data-hf-img-hover] {',
    '    opacity: 1 !important;',
    '  }',
    '  [data-hf-img] {',
    '    transition: transform 380ms cubic-bezier(0.2,0.6,0.2,1);',
    '    will-change: transform;',
    '  }',
    '}',
  ].join('\n');
  document.head.appendChild(s);
}

// ── Animations runtime — only in standalone (canvas would conflict with
// the scaled artboard rendering). Adds:
//   • Fade-up reveal on elements scrolling into viewport
//   • Sticky header shadow on scroll
if (typeof window !== 'undefined' && !window.__hfAnimWired) {
  window.__hfAnimWired = true;
  const start = () => {
    if (!document.documentElement.hasAttribute('data-hf-standalone')) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    // Sticky header shadow
    const onScroll = () => {
      const hdrs = document.querySelectorAll('header');
      const scrolled = window.scrollY > 40;
      hdrs.forEach(h => h.classList.toggle('hf-scrolled', scrolled));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();

    // Fade-up on scroll into view
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('hf-anim-in');
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.05 });

    // Attach to top-level content blocks that are BELOW initial viewport
    // (above-the-fold content stays unanimated to avoid load-flash).
    const targets = document.querySelectorAll('section, article, h1, h2, [data-hf-img]');
    let groupIdx = 0;
    targets.forEach((el) => {
      const rect = el.getBoundingClientRect();
      if (rect.top < window.innerHeight - 100) return; // already visible
      if (el.dataset.hfAnimAttached) return;
      el.dataset.hfAnimAttached = '1';
      el.classList.add('hf-anim-init');
      el.classList.add('hf-anim-delay-' + (groupIdx % 3 + 1));
      groupIdx++;
      io.observe(el);
    });
  };
  // Wait for React to paint, then wire up
  if (document.readyState === 'complete') setTimeout(start, 250);
  else window.addEventListener('load', () => setTimeout(start, 250));
}

// ── HfEyebrow — small caps label with leading line / number
function HfEyebrow({ num, children, light }) {
  const c = light ? 'rgba(255,255,255,0.78)' : HF.ink2;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      fontFamily: hfBody, fontSize: 11, fontWeight: 600,
      letterSpacing: '0.24em', textTransform: 'uppercase',
      color: c, marginBottom: 14,
    }}>
      {num != null && <span style={{ color: 'var(--accent)', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{num}</span>}
      <span style={{ display: 'inline-block', width: 22, height: 1, background: c }}></span>
      <span>{children}</span>
    </div>
  );
}

// ── HfH1, HfH2, HfH3 — display type using Cormorant
function HfH1({ children, style = {}, light }) {
  return (
    <h1 style={{
      fontFamily: hfDisplay, fontWeight: 400,
      fontSize: 88, lineHeight: 1.02,
      letterSpacing: '-0.01em',
      color: light ? '#fff' : HF.ink,
      margin: 0,
      ...style,
    }}>{children}</h1>
  );
}
function HfH2({ children, style = {}, light }) {
  return (
    <h2 style={{
      fontFamily: hfDisplay, fontWeight: 400,
      fontSize: 56, lineHeight: 1.05,
      letterSpacing: '-0.005em',
      color: light ? '#fff' : HF.ink,
      margin: 0,
      ...style,
    }}>{children}</h2>
  );
}
function HfH3({ children, style = {}, light }) {
  return (
    <h3 style={{
      fontFamily: hfDisplay, fontWeight: 500,
      fontSize: 30, lineHeight: 1.12,
      color: light ? '#fff' : HF.ink,
      margin: 0,
      ...style,
    }}>{children}</h3>
  );
}
function HfLede({ children, style = {}, light }) {
  return (
    <p style={{
      fontFamily: hfBody, fontWeight: 400,
      fontSize: 19, lineHeight: 1.55,
      color: light ? 'rgba(255,255,255,0.78)' : HF.ink2,
      margin: 0,
      ...style,
    }}>{children}</p>
  );
}
function HfText({ children, style = {}, dim, sm, light }) {
  const color = light
    ? (dim ? '__TEMP_-1__' : 'rgba(255,255,255,0.90)')
    : (dim ? HF.ink2 : HF.ink);
  return (
    <p style={{
      fontFamily: hfBody, fontWeight: 400,
      fontSize: sm ? 14 : 16, lineHeight: 1.55,
      color, margin: 0,
      ...style,
    }}>{children}</p>
  );
}

// ── HfBtn — primary / accent / outline / ghost. Imperative neutral copy.
// Set `href` to render as an <a> link (used for real navigation in /site/).
function HfBtn({ children, variant = 'outline', size = 'md', arrow, style = {}, dark, href, target, onClick }) {
  const sizes = {
    sm: { padding: '7px 14px', fontSize: 13, height: 34 },
    md: { padding: '11px 22px', fontSize: 14, height: 44 },
    lg: { padding: '15px 30px', fontSize: 15, height: 54 },
  };
  const variants = {
    solid:   { background: HF.ink, color: '#fff', border: `1px solid ${HF.ink}` },
    accent:  { background: 'var(--accent)', color: HF.ink, border: '1px solid transparent' },
    outline: dark
      ? { background: 'transparent', color: '#fff', border: `1px solid rgba(255,255,255,0.30)` }
      : { background: 'transparent', color: HF.ink, border: `1px solid ${HF.ink}` },
    ghost: dark
      ? { background: 'transparent', color: 'rgba(255,255,255,0.85)', border: '1px solid transparent' }
      : { background: 'transparent', color: HF.ink, border: '1px solid transparent' },
  };
  const Tag = href ? 'a' : 'span';
  // NOTE: HfBtn deliberately does NOT set data-hf-link — that attribute drives
  // the "underline turns mustard on hover" rule, which would make accent
  // buttons (yellow bg + black text) become yellow-on-yellow → unreadable.
  // Buttons get their own hover state from the variant styles below.
  const linkProps = href ? { href, target } : {};
  return (
    <Tag
      {...linkProps}
      onClick={onClick}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        fontFamily: hfBody, fontWeight: 600, letterSpacing: '0.02em',
        whiteSpace: 'nowrap', cursor: 'pointer',
        textDecoration: 'none',
        transition: 'background 160ms, color 160ms, transform 120ms',
        ...sizes[size], ...variants[variant], ...style,
      }}
    >
      <span>{children}</span>
      {arrow && <span aria-hidden style={{ fontSize: '1.15em', lineHeight: 1, transform: 'translateY(-1px)' }}>→</span>}
    </Tag>
  );
}

// ── HfField — labeled input (visual only)
function HfField({ label, value, required, hint, style = {}, dark }) {
  const labelColor = dark ? '__TEMP_-1__' : HF.ink2;
  const valueColor = dark ? '#fff' : HF.ink;
  const placeholderColor = dark ? '__TEMP_-1__' : HF.ink3;
  const borderColor = dark ? 'rgba(255,255,255,0.20)' : HF.line2;
  return (
    <label style={{ display: 'block', ...style }}>
      <div style={{
        fontFamily: hfBody, fontSize: 11, fontWeight: 600,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        color: labelColor, marginBottom: 8,
      }}>
        {label}{required && <span style={{ color: 'var(--accent)', marginLeft: 4 }}>*</span>}
      </div>
      <div style={{
        borderBottom: `1px solid ${borderColor}`,
        padding: '10px 0', minHeight: 40,
        fontFamily: hfBody, fontSize: 16,
        color: value ? valueColor : placeholderColor,
      }}>
        {value || hint || '—'}
      </div>
    </label>
  );
}

// ── HfTextarea
function HfTextarea({ label, hint, dark, h = 110 }) {
  const labelColor = dark ? '__TEMP_-1__' : HF.ink2;
  const placeholderColor = dark ? '__TEMP_-1__' : HF.ink3;
  const borderColor = dark ? 'rgba(255,255,255,0.20)' : HF.line2;
  return (
    <div>
      <div style={{
        fontFamily: hfBody, fontSize: 11, fontWeight: 600,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        color: labelColor, marginBottom: 8,
      }}>{label}</div>
      <div style={{
        borderBottom: `1px solid ${borderColor}`, paddingBottom: 12,
        minHeight: h, fontFamily: hfBody, fontSize: 16,
        color: placeholderColor, lineHeight: 1.5,
      }}>{hint || '—'}</div>
    </div>
  );
}

// ── HfImg — photo with subtle dark-overlay option for hero text. JIT-loaded background-image.
function HfImg({ src, alt, h = 420, w = '100%', overlay, style = {}, position = 'center', size = 'cover' }) {
  return (
    <div data-hf-img="" style={{
      width: w, height: h, position: 'relative',
      background: `${HF.paper2} url("${src}") ${position}/${size} no-repeat`,
      ...style,
    }} role="img" aria-label={alt}>
      {overlay && (
        <div style={{
          position: 'absolute', inset: 0,
          background: typeof overlay === 'string' ? overlay : 'linear-gradient(180deg, rgba(13,13,13,0.05) 0%, rgba(13,13,13,0.55) 100%)',
        }}></div>
      )}
    </div>
  );
}

// ── HfSwatch — small color chip
function HfSwatch({ color, label, large }) {
  const sz = large ? 22 : 14;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <span style={{
        width: sz, height: sz, borderRadius: '50%',
        background: color, border: `1px solid ${HF.line2}`,
        display: 'inline-block', flex: '0 0 auto',
      }}></span>
      {label && <span style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink, letterSpacing: '0.01em' }}>{label}</span>}
    </span>
  );
}

// ── HfSpec — checkmark line for compatibility
function HfSpec({ children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: hfBody, fontSize: 14, color: HF.ink }}>
      <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>{children}</span>
    </div>
  );
}

// ── HfHeader — sticky-style top nav, used at top of each page artboard
function HfHeader({ active = 'home' }) {
  const links = [
    { id: 'home', label: 'Acasă' },
    { id: 'rest', label: 'Restaurante' },
    { id: 'cafe', label: 'Cafenele' },
    { id: 'hot',  label: 'Hoteluri' },
    { id: 'col',  label: 'Colecții' },
    { id: 'desp', label: 'Despre' },
  ];
  return (
    <header style={{
      padding: '22px 56px', background: HF.paper,
      borderBottom: `1px solid ${HF.line}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 24,
    }}>
      <a href={HFRoutes.home} data-hf-link="" style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        textDecoration: 'none',
      }}>
        <span style={{
          width: 28, height: 28, position: 'relative', flex: '0 0 auto',
        }}>
          <svg viewBox="0 0 28 28" width="28" height="28">
            <circle cx="14" cy="14" r="13" fill={HF.ink} />
            <circle cx="14" cy="14" r="5" fill="var(--accent)" />
          </svg>
        </span>
        <span style={{
          fontFamily: hfDisplay, fontSize: 22, fontWeight: 500,
          letterSpacing: '0.005em', color: HF.ink,
        }}>OwithU<span style={{ fontFamily: hfBody, fontSize: 13, fontWeight: 600, letterSpacing: '0.18em', marginLeft: 8, color: HF.ink2, textTransform: 'uppercase' }}>HoReCa</span></span>
      </a>
      <nav data-hf-nav-links="" style={{ display: 'flex', gap: 28, fontFamily: hfBody, fontSize: 14, fontWeight: 500 }}>
        {links.map(l => (
          <a key={l.id} href={HFRoutes[l.id]} data-hf-link="" style={{
            color: active === l.id ? HF.ink : HF.ink2,
            textDecoration: 'none',
            paddingBottom: 2,
            borderBottom: active === l.id ? `1.5px solid var(--accent)` : '1.5px solid transparent',
            transition: 'color 160ms, border-color 160ms',
          }}>{l.label}</a>
        ))}
      </nav>
      <span data-hf-nav-menu="" style={{
        fontFamily: hfBody, fontSize: 13, fontWeight: 600,
        letterSpacing: '0.18em', textTransform: 'uppercase', color: HF.ink,
        alignItems: 'center', gap: 8, cursor: 'pointer',
      }}>
        <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden><path d="M2 5h14M2 9h14M2 13h14" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" /></svg>
        Meniu
      </span>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <span data-hf-lang="" style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink2 }}>RO · EN</span>
        <HfBtn variant="accent" size="sm" arrow href={HFRoutes.rfq}>Cere ofertă</HfBtn>
      </div>
    </header>
  );
}

// ── HfFooter
function HfFooter() {
  const audInd = [
    { l: 'Restaurante', h: HFRoutes.rest },
    { l: 'Cafenele',    h: HFRoutes.cafe },
    { l: 'Hoteluri',    h: HFRoutes.hot  },
    { l: 'Alt HoReCa',  h: HFRoutes.rfq  },
  ];
  const cat = [
    { l: 'Toate colecțiile',    h: HFRoutes.col },
    { l: 'Service Complet 36',  h: HFRoutes.detail },
    { l: 'Service Plus 60',     h: HFRoutes.col },
    { l: 'Porțelan pictat',     h: HFRoutes.col },
  ];
  const comp = [
    { l: 'Despre',          h: HFRoutes.desp },
    { l: 'Cum lucrăm',      h: HFRoutes.desp },
    { l: 'Faza 2 · roadmap', h: HFRoutes.desp },
  ];
  const cont = [
    { l: 'Cerere ofertă',     h: HFRoutes.rfq },
    { l: '+40 7XX XXX XXX',    h: 'tel:+40700000000' },
    { l: '[email · de completat]', h: '#' },
    { l: 'WhatsApp Business',  h: '#' },
  ];
  return (
    <footer style={{
      background: HF.ink, color: '#fff',
      padding: '72px 56px 36px',
    }}>
      <div data-hf-footer-cols="" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1.2fr', gap: 36, marginBottom: 56 }}>
        <div>
          <a href={HFRoutes.home} data-hf-link="" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18, textDecoration: 'none' }}>
            <svg viewBox="0 0 28 28" width="32" height="32">
              <circle cx="14" cy="14" r="13" fill="#fff" />
              <circle cx="14" cy="14" r="5" fill="var(--accent)" />
            </svg>
            <span style={{ fontFamily: hfDisplay, fontSize: 26, fontWeight: 500, color: '#fff' }}>OwithU<span style={{ fontFamily: hfBody, fontSize: 12, fontWeight: 600, letterSpacing: '0.20em', marginLeft: 10, color: '__TEMP_-1__', textTransform: 'uppercase' }}>HoReCa</span></span>
          </a>
          <HfText light style={{ maxWidth: 320, fontSize: 15 }}>
            Furnizor B2B de vesela profesională pentru restaurante, cafenele și hoteluri. Colecții complete prin cerere de ofertă.
          </HfText>
        </div>
        {[
          { t: 'Audiențe', items: audInd },
          { t: 'Catalog',  items: cat },
          { t: 'Companie', items: comp },
          { t: 'Contact',  items: cont },
        ].map(col => (
          <div key={col.t}>
            <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 18 }}>{col.t}</div>
            <div style={{ display: 'grid', gap: 10 }}>
              {col.items.map(i => (
                <a key={i.l} href={i.h} data-hf-link="" style={{ fontFamily: hfBody, fontSize: 14, color: 'rgba(255,255,255,0.78)', textDecoration: 'none' }}>{i.l}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 22,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: hfBody, fontSize: 13, color: '__TEMP_-1__',
      }}>
        <span>© 2026 OwithU · toate drepturile rezervate</span>
        <div style={{ display: 'flex', gap: 24 }}>
          <a href="#" data-hf-link="" style={{ color: 'inherit', textDecoration: 'none' }}>Confidențialitate</a>
          <a href="#" data-hf-link="" style={{ color: 'inherit', textDecoration: 'none' }}>Termeni</a>
          <a href="#" data-hf-link="" style={{ color: 'inherit', textDecoration: 'none' }}>GDPR</a>
        </div>
      </div>
    </footer>
  );
}

// ── HfPage — paper-backgrounded artboard container
function HfPage({ children, style = {} }) {
  return (
    <div style={{
      background: HF.paper, color: HF.ink, fontFamily: hfBody,
      width: '100%', height: '100%',
      ...style,
    }}>
      {children}
    </div>
  );
}

// ── HfDivider — section dividing strip with eyebrow label
function HfDivider({ label, sub }) {
  return (
    <div style={{
      borderTop: `1px solid ${HF.line}`, borderBottom: `1px solid ${HF.line}`,
      padding: '20px 56px', background: HF.paper,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: hfBody, fontSize: 12, fontWeight: 600,
      letterSpacing: '0.22em', textTransform: 'uppercase', color: HF.ink2,
    }}>
      <span>{label}</span>
      {sub && <span style={{ letterSpacing: '0.04em', textTransform: 'none', fontWeight: 400 }}>{sub}</span>}
    </div>
  );
}

// ── HfCollectionCard — image card with overlay info; canonical product card
// for the catalog grid. Compact variant for sidebars.
function HfCollectionCard({ img, imgHover, name, finish, pieces, persons, swatch, material, compat, accent, compact, badge }) {
  // Fall back to the central HF_HOVER lookup so cards rendered from inline
  // arrays (without an explicit imgHover) still get a hover swap.
  const hoverSrc = imgHover || HF_HOVER[img];
  return (
    <article style={{
      background: HF.paper, border: `1px solid ${HF.line}`,
      display: 'flex', flexDirection: 'column',
      transition: 'transform 240ms, box-shadow 240ms',
    }}>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <HfImg src={img} alt={`${name} · ${finish}`} h={compact ? 220 : 280} />
        {hoverSrc && (
          <div data-hf-img-hover style={{
            position: 'absolute', inset: 0,
            opacity: 0,
            transition: 'opacity 320ms cubic-bezier(0.2,0.6,0.2,1)',
            pointerEvents: 'none',
          }}>
            <HfImg src={hoverSrc} alt={`${name} · ${finish} · ambianta`} h={compact ? 220 : 280} />
          </div>
        )}
        {badge && (
          <div style={{
            position: 'absolute', top: 14, left: 14,
            background: 'var(--accent)', color: HF.ink,
            fontFamily: hfBody, fontSize: 11, fontWeight: 700,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            padding: '5px 10px',
          }}>{badge}</div>
        )}
        {swatch && (
          <div style={{
            position: 'absolute', top: 14, right: 14,
            width: 28, height: 28, borderRadius: '50%',
            background: swatch, border: `2px solid ${HF.paper}`,
            boxShadow: '0 0 0 1px rgba(0,0,0,0.12)',
          }}></div>
        )}
      </div>
      <div style={{ padding: compact ? '18px 20px 20px' : '24px 26px 26px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
          <h3 style={{
            fontFamily: hfDisplay, fontWeight: 500,
            fontSize: compact ? 26 : 32, lineHeight: 1, letterSpacing: '0.01em',
            margin: 0, color: HF.ink,
          }}>{name}</h3>
          <span style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: HF.ink2 }}>
            {pieces} piese
          </span>
        </div>
        <div style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink2, marginBottom: 14 }}>
          finisaj <span style={{ color: HF.ink, fontWeight: 500 }}>{finish}</span> · {persons} persoane
        </div>
        {material && (
          <HfText sm dim style={{ marginBottom: 14, fontSize: 13 }}>{material}</HfText>
        )}
        {compat && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 18 }}>
            {compat.map(c => (
              <span key={c} style={{
                fontFamily: hfBody, fontSize: 11, fontWeight: 500,
                color: HF.ink2, padding: '3px 8px',
                border: `1px solid ${HF.line2}`,
              }}>{c}</span>
            ))}
          </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={`${HFRoutes.detail}#${(name + '-' + finish).toLowerCase().replace(/[ăâ]/g,'a').replace(/[î]/g,'i').replace(/[ș]/g,'s').replace(/[ț]/g,'t').replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'')}`}>Detalii</HfBtn>
        </div>
      </div>
    </article>
  );
}

// ── HfStatRow — small stat callouts used in landings
function HfStat({ n, t, sub, light }) {
  return (
    <div>
      <div style={{
        fontFamily: hfDisplay, fontWeight: 400,
        fontSize: 64, lineHeight: 1,
        color: light ? '#fff' : HF.ink,
      }}>{n}</div>
      <div style={{
        fontFamily: hfBody, fontSize: 13, fontWeight: 600,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        color: light ? 'rgba(255,255,255,0.78)' : HF.ink, marginTop: 8,
      }}>{t}</div>
      {sub && (
        <HfText sm dim light={light} style={{ marginTop: 6, fontSize: 13 }}>{sub}</HfText>
      )}
    </div>
  );
}

// ── HfRfqForm — reusable form module (light or dark version)
function HfRfqForm({ segment, segmentValue, extraField, suggestions, dark, compact }) {
  const bg = dark ? 'transparent' : HF.paper;
  const fg = dark ? '#fff' : HF.ink;
  return (
    <div style={{
      background: bg, padding: compact ? 28 : 40,
      border: dark ? '1px solid rgba(255,255,255,0.18)' : `1px solid ${HF.ink}`,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
        <h3 style={{
          fontFamily: hfDisplay, fontSize: 32, fontWeight: 500,
          margin: 0, color: fg, letterSpacing: '-0.005em',
        }}>Cerere ofertă</h3>
        <span style={{ fontFamily: hfBody, fontSize: 12, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: dark ? '__TEMP_-1__' : HF.ink2 }}>răspuns &lt; 24h</span>
      </div>
      <p style={{
        fontFamily: hfBody, fontSize: 14,
        color: dark ? '__TEMP_-1__' : HF.ink2,
        margin: '0 0 26px', lineHeight: 1.55,
      }}>
        Tip locație pre-selectat: <strong style={{ color: 'var(--accent)' }}>{segment}</strong>. Câteva detalii și revenim cu 2-3 colecții potrivite.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, columnGap: 28 }}>
        <HfField dark={dark} label="Nume firmă / locație" required hint="ex: Restaurant Doi Cocoși" />
        <HfField dark={dark} label="Tip locație" required value={segment} />
        <HfField dark={dark} label="Oraș" required hint="București" />
        <HfField dark={dark} label="Persoană contact" required hint="Maria Popescu" />
        <HfField dark={dark} label="Telefon" required hint="07XX XXX XXX" />
        <HfField dark={dark} label="Email" hint="opțional" />
        <HfField dark={dark} label="Colecții de interes" hint="GENESIS Terre · IRIS Bleu nuit" style={{ gridColumn: '1 / -1' }} />
        <HfField dark={dark} label={segmentValue.label} hint={segmentValue.hint} style={{ gridColumn: '1 / -1' }} />
        {extraField && <HfField dark={dark} label={extraField.label} hint={extraField.hint} style={{ gridColumn: '1 / -1' }} />}
      </div>
      <div style={{ marginTop: 22 }}>
        <HfTextarea dark={dark} label="Mesaj · detalii cerere" hint="ex: căutăm o colecție pentru deschiderea unui bistro în zona Floreasca, 38 locuri…" />
      </div>
      <div style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
        <div style={{ fontFamily: hfBody, fontSize: 12, color: dark ? '__TEMP_-1__' : HF.ink2, maxWidth: 340, lineHeight: 1.5 }}>
          Trimițând cererea, sunteți de acord cu prelucrarea datelor în scopul ofertării.
        </div>
        <HfBtn variant="accent" size="lg" arrow>Trimite cererea</HfBtn>
      </div>
      {suggestions && (
        <div style={{
          marginTop: 28, padding: '14px 18px',
          background: dark ? 'rgba(255,255,255,0.05)' : HF.paper2,
          fontFamily: hfBody, fontSize: 13,
          color: dark ? 'rgba(255,255,255,0.78)' : HF.ink,
        }}>
          <strong style={{ color: 'var(--accent)' }}>Sugestii pentru tine:</strong> {suggestions}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  HF, hfDisplay, hfBody, HFRoutes, HF_HOVER,
  HfEyebrow, HfH1, HfH2, HfH3, HfLede, HfText,
  HfBtn, HfField, HfTextarea, HfImg, HfSwatch, HfSpec,
  HfHeader, HfFooter, HfPage, HfDivider,
  HfCollectionCard, HfStat, HfRfqForm,
});