// foyer-hero.jsx — The Foyer · Section 01 Hero.
//
// Visual register: a quiet, library-restrained entryway. Pearl
// ground. A single ghosted architectural arch motif rises behind
// the hero text — never literal, never billboard-loud. Bronze
// type does the talking; aqua only flickers in the scroll-down
// affordance.
//
// Hero copy (per direction):
//   Eyebrow: THE FOYER
//   H1:      The Foyer.
//   Sub:     Where you pause before you enter.
//   CTA:     Compare the Levels ↓
//
// Section pulls back the Signature Program's doorway iconography
// as a single ghosted SVG arch — a wink, not a billboard.

const FoyerArchMotif = () => (
  // A simple architectural arch: tall rectangle topped by a half-
  // circle, drawn as a thin hairline. Sits behind the hero copy.
  <svg viewBox="0 0 320 480" aria-hidden="true" style={{
    position: 'absolute',
    left: '50%', top: '50%',
    transform: 'translate(-50%, -50%)',
    width: 'min(72vw, 520px)', height: 'auto',
    opacity: 0.18, pointerEvents: 'none',
  }}>
    <defs>
      <linearGradient id="foyer-arch-grad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#824807" stopOpacity="0.0" />
        <stop offset="40%" stopColor="#824807" stopOpacity="0.6" />
        <stop offset="100%" stopColor="#824807" stopOpacity="0.9" />
      </linearGradient>
    </defs>
    {/* outer arch */}
    <path
      d="M 30 470 L 30 160 A 130 130 0 0 1 290 160 L 290 470"
      fill="none" stroke="url(#foyer-arch-grad)" strokeWidth="1.4"
    />
    {/* inner arch */}
    <path
      d="M 56 470 L 56 168 A 104 104 0 0 1 264 168 L 264 470"
      fill="none" stroke="url(#foyer-arch-grad)" strokeWidth="0.8"
      opacity="0.5"
    />
    {/* threshold line */}
    <line x1="20" y1="470" x2="300" y2="470"
      stroke="#824807" strokeWidth="1" opacity="0.4" />
  </svg>
);

const FoyerHero = () => (
  <section id="hero"
    data-screen-label="Foyer · 01 Hero · The Foyer"
    style={{
      background: 'var(--t-ground)',
      color: 'var(--t-text)',
      padding: '80px 24px 64px',
      position: 'relative',
      overflow: 'hidden',
      borderBottom: '1px solid var(--t-line)',
      minHeight: 'clamp(440px, 70vh, 600px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>

    {/* ghosted arch behind */}
    <FoyerArchMotif />

    {/* hero text — centered */}
    <div style={{
      position: 'relative', zIndex: 1,
      textAlign: 'center', maxWidth: 720, margin: '0 auto',
    }}>
      {/* eyebrow */}
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.40em', textTransform: 'uppercase',
        color: 'var(--t-accent)', marginBottom: 26,
        display: 'inline-flex', alignItems: 'center', gap: 14,
      }}>
        <span aria-hidden="true" style={{
          width: 24, height: 1, background: 'var(--t-accent)',
        }} />
        <span>The Foyer</span>
        <span aria-hidden="true" style={{
          width: 24, height: 1, background: 'var(--t-accent)',
        }} />
      </div>

      {/* H1 — stacked editorial */}
      <h1 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(48px, 12vw, 96px)', lineHeight: 0.95,
        letterSpacing: '-0.022em',
        color: 'var(--t-text)', margin: '0 0 14px',
      }}>
        The Foyer.
      </h1>

      {/* sub — italic, smaller, bronze */}
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400, fontSize: 'clamp(20px, 4vw, 28px)',
        lineHeight: 1.35, letterSpacing: '-0.008em',
        color: 'var(--t-accent)', margin: '0 0 40px',
        textWrap: 'balance',
      }}>
        Where you pause before you enter.
      </p>

      {/* CTA — soft scroll to compare */}
      <a href="#at-a-glance" style={{
        display: 'inline-flex', alignItems: 'center', gap: 12,
        padding: '14px 22px',
        background: 'transparent',
        color: 'var(--t-text)',
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase',
        borderRadius: 2,
        border: '1px solid var(--t-accent)',
        borderBottom: '1px solid var(--t-accent)',
        textDecoration: 'none',
      }}>
        <span>Compare the Levels</span>
        <span aria-hidden="true" style={{ color: 'var(--ld-aqua)' }}>↓</span>
      </a>
    </div>
  </section>
);

Object.assign(window, { FoyerHero });
