// Hero.jsx — Maison Gifts
// Dark navy hero: editorial headline, dual CTA, large photo, trust strip.

const Hero = () => {
  const c = useContent();

  const primaryBtn = {
    fontFamily: 'var(--font-sans)', fontSize: 15.5, fontWeight: 500,
    background: 'var(--burgundy)', color: '#F6F1E6', border: 'none', cursor: 'pointer',
    padding: '15px 28px', borderRadius: 'var(--radius-full)',
    display: 'inline-flex', alignItems: 'center', gap: 9,
    transition: 'background 160ms ease'
  };
  const ghostBtn = {
    fontFamily: 'var(--font-sans)', fontSize: 15.5, fontWeight: 500,
    background: 'transparent', color: '#F6F1E6', cursor: 'pointer',
    padding: '15px 26px', borderRadius: 'var(--radius-full)',
    border: '1px solid rgba(246,241,230,0.32)',
    display: 'inline-flex', alignItems: 'center', gap: 9,
    transition: 'background 160ms ease, border-color 160ms ease'
  };

  return (
    <section id="top" style={{
      background: 'var(--navy)', color: '#F6F1E6', position: 'relative', overflow: 'hidden'
    }}>
      {/* Full-bleed gift-box photography */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(maison/img/hero-bg.png)',
        backgroundSize: 'cover', backgroundPosition: 'center right',
        pointerEvents: 'none'
      }}></div>
      {/* Navy gradient — darker on the left so copy reads, boxes show on the right */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(100deg, rgba(18,28,48,0.94) 0%, rgba(18,28,48,0.82) 32%, rgba(18,28,48,0.5) 58%, rgba(18,28,48,0.28) 100%)'
      }}></div>
      {/* subtle bottom fade into the next section */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 160, pointerEvents: 'none',
        background: 'linear-gradient(to top, rgba(18,28,48,0.55), transparent)'
      }}></div>

      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 var(--space-8)',
        position: 'relative', zIndex: 1
      }}>
        <div className="mg-hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr',
          alignItems: 'center', paddingTop: 168, paddingBottom: 'var(--space-20)',
          minHeight: '88vh'
        }}>
          {/* Left — copy */}
          <div style={{ maxWidth: 640 }}>
            {c.hero.overline ?
            <Reveal>
                <Overline tone="cream">{c.hero.overline}</Overline>
              </Reveal> :
            null}
            <Reveal delay={80}>
              <h1 style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 'clamp(46px, 5.6vw, 84px)', lineHeight: 1.04,
                letterSpacing: '-0.01em', margin: c.hero.overline ? '26px 0 0' : 0
              }}>
                <span style={{ display: 'block', fontFamily: "serif", fontSize: "60px" }}>{c.hero.titleA}</span>
                {c.hero.titleB ? <span style={{ display: 'block', fontFamily: "serif", fontSize: "60px" }}>{c.hero.titleB}</span> : null}
                {c.hero.titleC ? <span style={{ display: 'block', fontStyle: 'italic', color: 'var(--burgundy-soft)' }}>{c.hero.titleC}</span> : null}
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p style={{
                fontFamily: 'var(--font-sans)', fontSize: 'clamp(16px,1.3vw,19px)', fontWeight: 300,
                lineHeight: 1.7, color: 'rgba(246,241,230,0.74)', maxWidth: 520, margin: '28px 0 0'
              }}>{c.hero.sub}</p>
            </Reveal>
            <Reveal delay={240}>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 38 }}>
                <button style={primaryBtn} onClick={() => scrollToId('contact')}
                onMouseEnter={(e) => e.currentTarget.style.background = 'var(--burgundy-deep)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'var(--burgundy)'}>
                  {c.hero.cta1}
                  <i data-lucide="arrow-right" style={{ width: 17, height: 17, strokeWidth: 2 }}></i>
                </button>
                <button style={ghostBtn} onClick={() => scrollToId('products')}
                onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(246,241,230,0.08)';e.currentTarget.style.borderColor = 'rgba(246,241,230,0.5)';}}
                onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.borderColor = 'rgba(246,241,230,0.32)';}}>
                  {c.hero.cta2}
                </button>
              </div>
            </Reveal>
          </div>
        </div>

        {/* Trust strip */}
        <Reveal delay={120}>
          <div className="mg-trust" style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            borderTop: '1px solid rgba(246,241,230,0.14)',
            paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-12)', gap: 24
          }}>
            {c.hero.trust.map((t, i) =>
            <div key={i} style={{ paddingLeft: i > 0 ? 24 : 0, borderLeft: i > 0 ? '1px solid rgba(246,241,230,0.12)' : 'none' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(24px,2.6vw,32px)', color: '#F6F1E6', lineHeight: 1 }}>{t.v}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'rgba(246,241,230,0.6)', marginTop: 8 }}>{t.l}</div>
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </section>);

};

Object.assign(window, { Hero });