// sig-hero.jsx — billboard hero. Section 01.
//
// Visual register: street-level cinematic. Deep navy ground with a
// suggestion of wet-pavement reflections, an architectural skyline
// silhouette behind, and the "billboard" itself as the framing
// device for the hero headline. Establishes the cinematic register
// the rest of the page escalates from.
//
// Image-slot drop zones are included so real editorial photography
// can replace the CSS-illustrated billboards later.

const SigHero = () => (
  <section id="hero" data-screen-label="01 Hero · Street-level Billboard"
    style={{
      background:
        'radial-gradient(ellipse at 50% 110%, rgba(95,224,230,0.10) 0%, transparent 56%),' +
        'radial-gradient(ellipse at 50% 0%, rgba(43,69,147,0.32) 0%, transparent 55%),' +
        'linear-gradient(180deg, var(--ld-navy-900) 0%, var(--ld-navy) 60%, #050913 100%)',
      color: 'var(--ld-pearl-100)',
      padding: '56px 32px 56px',
      position: 'relative', overflow: 'hidden',
    }}>

    {/* ── Skyline silhouette — pure CSS ─────────────────────────
        A row of "buildings" rendered as rectangles with random-ish
        heights, anchored to the bottom. Suggests downtown without
        depicting any specific skyline. */}
    <div aria-hidden="true" style={{
      position: 'absolute', left: 0, right: 0, bottom: 220,
      height: 160,
      background:
        'linear-gradient(180deg, transparent 0%, rgba(13,27,61,0.85) 100%),' +
        'repeating-linear-gradient(90deg,' +
          ' rgba(13,27,61,0.95) 0px, rgba(13,27,61,0.95) 38px,' +
          ' transparent 38px, transparent 42px,' +
          ' rgba(8,18,42,0.95) 42px, rgba(8,18,42,0.95) 96px,' +
          ' transparent 96px, transparent 100px,' +
          ' rgba(13,27,61,0.95) 100px, rgba(13,27,61,0.95) 162px,' +
          ' transparent 162px, transparent 168px,' +
          ' rgba(6,14,34,0.95) 168px, rgba(6,14,34,0.95) 220px,' +
          ' transparent 220px, transparent 226px)',
      maskImage:
        'linear-gradient(180deg, transparent 0%, black 30%, black 100%)',
      WebkitMaskImage:
        'linear-gradient(180deg, transparent 0%, black 30%, black 100%)',
      opacity: 0.65,
    }} />

    {/* tiny window lights — gold flickers */}
    <div aria-hidden="true" style={{
      position: 'absolute', left: 0, right: 0, bottom: 240, height: 120,
      background:
        'radial-gradient(2px 2px at 8% 60%, rgba(201,162,74,0.65) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 14% 30%, rgba(201,162,74,0.55) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 22% 75%, rgba(95,224,230,0.45) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 31% 45%, rgba(201,162,74,0.55) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 42% 65%, rgba(201,162,74,0.7) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 53% 35%, rgba(95,224,230,0.35) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 64% 70%, rgba(201,162,74,0.55) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 74% 40%, rgba(201,162,74,0.65) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 86% 60%, rgba(95,224,230,0.45) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 93% 35%, rgba(201,162,74,0.55) 0, transparent 50%)',
      pointerEvents: 'none',
    }} />

    {/* wet-pavement reflection at the bottom */}
    <div aria-hidden="true" style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 220,
      background:
        'radial-gradient(ellipse at 50% 100%, rgba(95,224,230,0.18) 0%, rgba(95,224,230,0.05) 30%, transparent 60%),' +
        'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%)',
      pointerEvents: 'none',
    }} />

    {/* horizontal reflection lines */}
    <div aria-hidden="true" style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 200,
      background:
        'repeating-linear-gradient(0deg, transparent 0px, transparent 18px, rgba(95,224,230,0.04) 18px, rgba(95,224,230,0.04) 19px)',
      pointerEvents: 'none',
    }} />

    {/* ── HERO CONTENT ──────────────────────────────────────── */}
    <div style={{
      maxWidth: 1320, margin: '0 auto',
      position: 'relative', zIndex: 2,
    }} className="sig-hero-grid">

      {/* Editorial billboard headline — single column, full width */}
      <div style={{ maxWidth: 880 }}>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 11, letterSpacing: '0.40em', textTransform: 'uppercase',
          color: 'var(--ld-aqua)', marginBottom: 22,
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          <span aria-hidden="true" style={{
            width: 32, height: 1, background: 'var(--ld-aqua)',
            boxShadow: '0 0 12px rgba(95,224,230,0.6)',
          }} />
          <span>The Signature Program · Living Digitally™</span>
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 'clamp(44px, 6.5vw, 84px)', lineHeight: 0.98,
          letterSpacing: '-0.022em',
          color: 'var(--ld-pearl-100)', margin: '0 0 28px',
          textWrap: 'balance',
        }}>
          You're <em style={{ fontStyle: 'italic', color: 'var(--ld-aqua)' }}>not</em> behind.<br />
          You've been doing this <em style={{ fontStyle: 'italic', color: 'var(--ld-gold)' }}>alone.</em>
        </h1>

        <p style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 400, fontSize: 'clamp(18px, 1.6vw, 22px)', lineHeight: 1.4,
          color: 'rgba(235,221,197,0.86)', margin: '0 0 36px', maxWidth: 520,
          textWrap: 'pretty',
        }}>
          7 Days of Living Digitally<sup style={{ fontSize: 12 }}>™</sup>{' '}
          — the flagship Signature Program of The Art of Living Digitally<sup style={{ fontSize: 12 }}>™</sup>.{' '}
          A live, seven-day cohort experience, built for the way you{' '}
          <span style={{ color: 'var(--ld-aqua)', fontStyle: 'italic' }}>actually</span> live.
        </p>

        <div style={{
          display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap',
          marginBottom: 28,
        }}>
          <a href="#doorways" style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 12, letterSpacing: '0.26em', textTransform: 'uppercase',
            color: 'var(--ld-navy)', background: 'var(--ld-aqua)',
            padding: '18px 30px', borderRadius: 2, borderBottom: 'none',
            boxShadow: '0 0 32px rgba(95,224,230,0.45)',
            whiteSpace: 'nowrap',
          }}>Walk In Through a Doorway →</a>
          <a href="/foyer-faq" style={{
            fontFamily: 'var(--font-body)', fontWeight: 600,
            fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
            color: 'var(--ld-pearl-100)', borderBottom: '1px solid var(--ld-gold)',
            paddingBottom: 4,
          }}>Compare all three doorways →</a>
        </div>
      </div>
    </div>

    {/* mobile collapse */}
    <style>{`
      @media (max-width: 900px) {
        #hero .sig-hero-grid { grid-template-columns: 1fr !important; }
        #hero .sig-hero-billboard-col { height: 420px; }
      }
      @media (max-width: 1000px) {
        .sig-header-nav { display: none !important; }
      }
      @media (max-width: 720px) {
        .sig-footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { SigHero });
