// Hero.jsx — full-bleed portrait, navy protection gradient, serif headline.
function Hero({ onCta }) {
  return (
    <section style={{ position: 'relative', minHeight: '92vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      {/* Background portrait */}
      <img src="assets/brand-photos/portrait-courthouse-full.png" alt="" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: '70% 20%',
      }} />
      {/* Protection gradients */}
      <div style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(100deg, rgba(10,20,34,0.94) 0%, rgba(10,20,34,0.78) 38%, rgba(10,20,34,0.30) 64%, rgba(10,20,34,0.05) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(to top, rgba(10,20,34,0.55), rgba(10,20,34,0) 30%)' }} />

      {/* Content */}
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '0 32px', width: '100%' }}>
        <div style={{ maxWidth: 620 }}>
          <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <span style={{ height: 1, width: 40, background: 'var(--brass-500)' }}></span>
            <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.74rem', letterSpacing: '0.26em', color: 'var(--brass-300)' }}>
              EXPERIENCED INJURY COUNSEL
            </span>
          </div>
          <h1 className="reveal" style={{ fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(2.8rem, 5.4vw, 4.6rem)', lineHeight: 1.04, color: '#fff', letterSpacing: '-0.01em', marginBottom: 22 }}>
            When everything is on the line, experience matters.
          </h1>
          <p className="reveal" style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(1.15rem,1.7vw,1.45rem)',
            lineHeight: 1.5, color: 'rgba(243,239,230,0.88)', marginBottom: 34, maxWidth: 520 }}>
            For over two decades, Alex Narayan has fought for the injured against insurance
            companies that won’t pay what’s fair. You work with Alex directly — never handed off.
          </p>
          <div className="reveal" style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
            <button onClick={onCta} style={{
              fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.95rem', letterSpacing: '0.02em',
              color: '#fff', background: 'var(--crimson-600)', border: 'none',
              padding: '16px 30px', borderRadius: 'var(--radius-sm)', cursor: 'pointer',
              transition: 'background var(--dur-fast), transform var(--dur-fast)',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--crimson-700)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--crimson-600)'; }}
            >Schedule a free consultation</button>
            <a href="tel:+18055214085" style={{
              fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.95rem', letterSpacing: '0.02em',
              color: '#fff', background: 'transparent', border: '1px solid rgba(243,239,230,0.4)',
              padding: '16px 30px', borderRadius: 'var(--radius-sm)', cursor: 'pointer', textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 10, transition: 'border-color var(--dur-fast)',
            }}
              onMouseEnter={(e) => (e.currentTarget.style.borderColor = 'var(--brass-400)')}
              onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'rgba(243,239,230,0.4)')}
            ><span style={{ display: 'inline-flex', marginRight: 8 }}><Icon name="phone" size={17} /></span>(805) 521-4085</a>
          </div>
        </div>
      </div>

      {/* Bottom trust strip */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0,
        borderTop: '1px solid rgba(243,239,230,0.14)', background: 'rgba(10,20,34,0.4)', backdropFilter: 'blur(4px)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '16px 32px', display: 'flex', gap: 40, flexWrap: 'wrap',
          fontFamily: 'var(--font-sans)', fontSize: '0.82rem', fontWeight: 600, letterSpacing: '0.04em', color: 'rgba(243,239,230,0.78)' }}>
          <span>20+ Years of Experience</span>
          <span style={{ color: 'var(--brass-400)' }}>·</span>
          <span>No Fee Unless We Win</span>
          <span style={{ color: 'var(--brass-400)' }}>·</span>
          <span>Available 24 / 7</span>
          <span style={{ color: 'var(--brass-400)' }}>·</span>
          <span>Se Habla Español</span>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;