// Hi-fi Homepage — editorial / audience-first.
// Hero (split, large serif + lifestyle photo) → audience routing (3 photo cards) →
// featured collections (4-up) → split brand promise → process → trust strip →
// RFQ CTA (dark band) → footer.

function HomeHi() {
  return (
    <HfPage>
      <HfHeader active="home" />

      {/* ───── HERO ───── */}
      <section style={{ padding: '88px 56px 96px', position: 'relative', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'end' }}>
          <div>
            <HfEyebrow num="01">Furnizor B2B HoReCa · Vesela profesională</HfEyebrow>
            <HfH1 style={{ fontSize: 108, lineHeight: 0.98 }}>
              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: 32, maxWidth: 540 }}>
              Furnizăm servicii complete de vesela 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: 36, alignItems: 'center' }}>
              <HfBtn variant="accent" size="lg" arrow href={HFRoutes.rfq}>Cere ofertă pentru locația ta</HfBtn>
              <HfBtn variant="ghost" size="lg" arrow href={HFRoutes.col}>Vezi colecțiile</HfBtn>
            </div>
            <div style={{
              marginTop: 56, paddingTop: 28, borderTop: `1px solid ${HF.line}`,
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
            }}>
              {[
                { n: '26', t: 'colecții complete', s: 'cu istoric · restock previzibil' },
                { n: '4-6', t: 'persoane / colecție', s: 'service complet 28-60 piese' },
                { n: '< 24h', t: 'răspuns cerere', s: 'consultant dedicat' },
              ].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.s}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <HfImg src="img/h-genesis-terre.jpg" alt="GENESIS Terre · masă pusă" h={680} />
            <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 }}>Colecție în imagine</div>
              <div style={{ fontFamily: hfDisplay, fontSize: 24, fontWeight: 500, marginTop: 4, color: HF.ink }}>GENESIS · Terre</div>
              <div style={{ fontFamily: hfBody, fontSize: 13, color: HF.ink2, marginTop: 4 }}>36 piese · pentru 6 persoane</div>
            </div>
          </div>
        </div>
      </section>

      {/* ───── AUDIENCE ROUTING ───── */}
      <section style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
          <div>
            <HfEyebrow num="02">Soluții pe industrie</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', accent: true },
            { 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>

      {/* ───── COLLECTIONS PREVIEW ───── */}
      <HfDivider label="03 · Service Complet" sub="Colecții selectate" />
      <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={['masină 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={['masină 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={['masină 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={['masină spălat', 'microunde']}
          />
        </div>
      </section>

      {/* ───── BRAND PROMISE / SPLIT EDITORIAL ───── */}
      <section style={{ borderBottom: `1px solid ${HF.line}` }}>
        <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. Colecțiile noastre sunt complete: aceleași piese, aceleași tehnici de fabricație, aceleași loturi de finisaj. Tu alegi un singur finisaj — noi îți livrăm masa coerentă.
            </HfLede>
            <div style={{
              marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr',
              gap: 24, maxWidth: 520,
            }}>
              <HfSpec>Stoneware cu email reactiv</HfSpec>
              <HfSpec>Compatibil mașină spălat profesională</HfSpec>
              <HfSpec>Compatibil microunde și cuptor</HfSpec>
              <HfSpec>Garanție 2 ani · restock anual</HfSpec>
            </div>
          </div>
          <HfImg src="img/h-gourmet.jpg" alt="GOURMET Onyx · plating" h="100%" />
        </div>
      </section>

      {/* ───── PROCESS ───── */}
      <section style={{ padding: '88px 56px', background: HF.paper2, borderBottom: `1px solid ${HF.line}` }}>
        <HfEyebrow num="05">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, numărul de persoane, 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>

      {/* ───── TRUST STRIP ───── */}
      <section style={{ padding: '56px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 40 }}>
          <HfText dim style={{ maxWidth: 320, lineHeight: 1.45 }}>
            <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: 48, alignItems: 'center', opacity: 0.75 }}>
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} style={{
                fontFamily: hfDisplay, fontSize: 22, fontWeight: 500,
                letterSpacing: '0.04em', color: HF.ink,
                fontStyle: i % 2 === 0 ? 'italic' : 'normal',
              }}>
                {['Casa Doi Cocoși', 'Atelier Brunch', 'Hotel Lipscani', 'Boroka Café', 'Vila Marina', 'Estate H. Sinaia'][i]}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ───── RFQ CTA BAND (DARK) ───── */}
      <section style={{ background: HF.ink, color: '#fff', padding: '96px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <HfEyebrow num="06" light>Cere ofertă</HfEyebrow>
            <HfH1 light style={{ fontSize: 84 }}>
              Locația ta merită<br/>
              <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--accent)' }}>o masă care</em><br/>
              <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--accent)' }}>se ține minte.</em>
            </HfH1>
            <HfLede light style={{ marginTop: 32, maxWidth: 520 }}>
              Trimite câteva detalii — un consultant revine cu 2-3 colecții potrivite și o ofertă personalizată în 24h.
            </HfLede>
            <div style={{ display: 'flex', gap: 16, marginTop: 36 }}>
              <HfBtn variant="accent" size="lg" arrow href={HFRoutes.rfq}>Trimite cererea</HfBtn>
              <HfBtn variant="outline" dark size="lg" href="tel:+40700000000">+40 7XX XXX XXX</HfBtn>
            </div>
          </div>
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.12)',
            padding: 36,
          }}>
            <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 22 }}>Ce primești înapoi</div>
            {[
              '2-3 recomandări de colecții cu argumente',
              'Estimare piese pentru capacitatea ta',
              'Ofertă comercială pe email · TVA inclus',
              'Demo fizic la cerere · București / online',
            ].map((r, i) => (
              <div key={r} style={{
                display: 'flex', gap: 18, alignItems: 'flex-start',
                padding: '16px 0',
                borderTop: i > 0 ? '1px solid rgba(255,255,255,0.10)' : 'none',
              }}>
                <span style={{
                  fontFamily: hfDisplay, fontSize: 22, fontWeight: 400,
                  color: 'var(--accent)', minWidth: 30,
                }}>0{i + 1}</span>
                <HfText light style={{ fontSize: 16 }}>{r}</HfText>
              </div>
            ))}
          </div>
        </div>
      </section>

      <HfFooter />
    </HfPage>
  );
}

Object.assign(window, { HomeHi });