// Hero.jsx — clean script wordmark over cocoa imagery, gifting CTAs (no single-piece sale)
function Hero() {
  const _c = (window.BB_CONTENT || {}).hero || {};
  const h = (key, def) => (_c[key] !== undefined && _c[key] !== '') ? _c[key] : def;

  const stats = [
    { k: h('stat1Value', 'Same-day'),   v: h('stat1Sub', 'in 9 cities') },
    { k: h('stat2Value', '25 – 5,000'), v: h('stat2Sub', 'boxes, bulk') },
    { k: h('stat3Value', '1.4 : 1'),    v: h('stat3Sub', 'nut to cocoa') },
  ];

  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--bb-burgundy-deep)' }}>
      {/* photo backdrop */}
      <div style={{ position: 'absolute', inset: 0 }}>
        <img src={h('bgImage', 'assets/hero-truffles.jpg')} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.5 }} />
        <div style={{ position: 'absolute', inset: 0,
          background: 'linear-gradient(100deg, rgba(63,19,32,0.94) 0%, rgba(63,19,32,0.72) 46%, rgba(63,19,32,0.32) 100%)' }} />
      </div>

      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '108px 32px 96px',
        display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 56, alignItems: 'center' }} className="bb-hero-grid">
        <div style={{ color: 'var(--bb-gold-light)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 12, letterSpacing: '0.38em', color: 'var(--bb-gold)', marginBottom: 22 }}>
            {h('eyebrow', '✦   THE QUEEN OF COCOA   ✦')}
          </div>
          <div style={{ fontFamily: 'var(--font-script)', fontSize: 'clamp(72px, 10vw, 140px)', lineHeight: 0.82, color: 'var(--bb-gold-light)', marginBottom: 14 }}>
            {h('brandName', 'Blissful Bites')}
          </div>
          <h1 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'clamp(26px, 3.4vw, 40px)', lineHeight: 1.12, color: 'var(--bb-gold-light)', margin: '8px 0 24px', maxWidth: 560, fontStyle: 'italic' }}>
            {h('heading', 'Dryfruit-loaded chocolate, gifted for the moments that matter.')}
          </h1>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 19, lineHeight: 1.6, color: 'rgba(225,200,146,0.84)', maxWidth: 480, marginBottom: 34 }}>
            {h('description', 'Same-day hand-delivery, corporate hampers, and wedding favours — hand-rolled, ribbon-tied, and packed with more nuts per bite than anyone in the category.')}
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn btn-foil" onClick={() => window.bbScrollTo('same-day')} style={{ padding: '16px 26px' }}>{h('cta1', 'Send a Gift Today →')}</button>
            <button className="btn btn-ghost-light" onClick={() => window.bbEnquire('')} style={{ padding: '16px 26px' }}>{h('cta2', 'Bulk & Corporate Enquiry')}</button>
          </div>

          {/* trust strip */}
          <div style={{ display: 'flex', gap: 36, marginTop: 44, flexWrap: 'wrap' }}>
            {stats.map((s) => (
              <div key={s.k}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, color: 'var(--bb-gold-light)', lineHeight: 1 }}>{s.k}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.26em', color: 'rgba(225,200,146,0.62)', marginTop: 6 }}>{s.v.toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>

        {/* clean framed signature image — showcase, not for sale */}
        <div style={{ position: 'relative' }} className="bb-hero-card">
          <div style={{ borderRadius: 22, overflow: 'hidden', border: '1px solid rgba(225,200,146,0.4)', boxShadow: 'var(--shadow-3)', aspectRatio: '3/4' }}>
            <img src={h('showcaseImage', 'assets/duet-split.jpg')} alt="Dryfruit-loaded duet bar" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{
            position: 'absolute', left: -18, bottom: 26, background: 'var(--bb-pearl)', color: 'var(--bb-burgundy-deep)',
            borderRadius: 14, padding: '14px 20px', boxShadow: 'var(--shadow-3)', border: '1px solid var(--line-gold)', maxWidth: 230
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.3em', color: 'var(--bb-gold-deep)', marginBottom: 5 }}>{h('newTag', '★ NEW THIS SEASON')}</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 21, lineHeight: 1.1 }}>{h('newTitle', 'The Cocoa Duet — Loaded')}</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 13, color: 'var(--fg-3)', marginTop: 3 }}>{h('newSub', 'Almond · cashew · cranberry')}</div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .bb-hero-grid { grid-template-columns: 1fr !important; }
          .bb-hero-card { display: none !important; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;