// sig-welcome.jsx — Section 06. Welcome to The Tech Lifestyle.
//
// Visual register: ALTERNATE WORLD. This is the deepest moment of
// the page — the user has descended through street level, the
// architecture, the conversion moment, the inventory, and the
// lifestyles. Now: the arrival.
//
// Background: full navy → black at the horizon, with a single aqua
// horizon line glowing in the distance. Above the horizon: stars,
// suggesting the alternate-world space of "the institution." Below:
// nothing. Just black.
//
// The text is centered, generously spaced. The final line —
// "Welcome, Resident." — sits in script.

const SigWelcome = () => (
  <section id="welcome" data-screen-label="06 Welcome to The Tech Lifestyle"
    style={{
      background:
        'radial-gradient(ellipse at 50% 100%, rgba(95,224,230,0.18) 0%, transparent 50%),' +
        'radial-gradient(ellipse at 50% 50%, rgba(43,69,147,0.20) 0%, transparent 70%),' +
        'linear-gradient(180deg, var(--ld-navy-900) 0%, #050913 50%, #02050D 100%)',
      color: 'var(--ld-pearl-100)',
      padding: '56px 32px 64px',
      position: 'relative', overflow: 'hidden',
    }}>

    {/* ── Star field above the horizon ─────────────────────── */}
    <div aria-hidden="true" style={{
      position: 'absolute', left: 0, right: 0, top: 0, height: '60%',
      background:
        'radial-gradient(1px 1px at 6%  18%, rgba(235,221,197,0.7) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 12% 42%, rgba(235,221,197,0.55) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 18% 26%, rgba(95,224,230,0.65) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 24% 60%, rgba(235,221,197,0.5) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 32% 14%, rgba(201,162,74,0.7) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 38% 48%, rgba(235,221,197,0.65) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 46% 22%, rgba(95,224,230,0.55) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 52% 36%, rgba(235,221,197,0.8) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 58% 12%, rgba(235,221,197,0.55) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 64% 54%, rgba(201,162,74,0.55) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 72% 28%, rgba(235,221,197,0.7) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 78% 44%, rgba(95,224,230,0.55) 0, transparent 50%),' +
        'radial-gradient(2px 2px at 84% 20%, rgba(235,221,197,0.65) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 92% 52%, rgba(235,221,197,0.5) 0, transparent 50%),' +
        'radial-gradient(1px 1px at 96% 32%, rgba(95,224,230,0.6) 0, transparent 50%)',
      pointerEvents: 'none',
    }} />

    {/* ── Aqua horizon line ────────────────────────────────── */}
    <div aria-hidden="true" style={{
      position: 'absolute', left: 0, right: 0, top: '64%', height: 1,
      background: 'linear-gradient(90deg, transparent 0%, var(--ld-aqua) 50%, transparent 100%)',
      boxShadow: '0 0 48px var(--ld-aqua), 0 0 120px rgba(95,224,230,0.4)',
    }} />

    {/* ── Faint perspective grid below the horizon ─────────── */}
    <div aria-hidden="true" style={{
      position: 'absolute', left: 0, right: 0, top: '64%', bottom: 0,
      backgroundImage:
        'linear-gradient(0deg, rgba(95,224,230,0.18) 1px, transparent 1px),' +
        'linear-gradient(90deg, rgba(95,224,230,0.10) 1px, transparent 1px)',
      backgroundSize: '64px 64px',
      transform: 'perspective(420px) rotateX(58deg)',
      transformOrigin: 'center top',
      maskImage: 'linear-gradient(180deg, black 0%, transparent 90%)',
      WebkitMaskImage: 'linear-gradient(180deg, black 0%, transparent 90%)',
      pointerEvents: 'none',
      opacity: 0.7,
    }} />

    {/* ── CONTENT ──────────────────────────────────────────── */}
    <div style={{
      maxWidth: 820, margin: '0 auto', position: 'relative', zIndex: 2,
      textAlign: 'center',
    }}>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(38px, 5.4vw, 68px)', lineHeight: 1.02,
        letterSpacing: '-0.018em',
        color: 'var(--ld-pearl-100)', margin: '0 0 18px',
        textWrap: 'balance',
      }}>
        Welcome to{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--ld-aqua)' }}>
          The Tech Lifestyle.
        </em>
      </h2>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
        color: 'rgba(235,221,197,0.82)', margin: '0 0 28px',
        textWrap: 'pretty',
      }}>
        — at the intersection of digital literacy, lifestyle, and access.
      </p>

      <p style={{
        fontFamily: 'var(--font-display)', fontWeight: 400,
        fontStyle: 'italic',
        fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.3,
        color: 'var(--ld-pearl-100)', margin: '0 0 24px',
        textWrap: 'balance',
      }}>
        Here, you learn how the{' '}
        <span style={{ color: 'var(--ld-aqua)' }}>digital world</span>{' '}
        works &amp; how to live well inside it.
      </p>

      {/* Closing salute */}
      <div style={{
        fontFamily: 'var(--font-script)', fontWeight: 400,
        fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 1.0,
        letterSpacing: '-0.005em',
        color: 'var(--ld-aqua)',
        textShadow: '0 0 32px rgba(95,224,230,0.5)',
        marginTop: 12,
      }}>
        Hello, Resident.
      </div>
    </div>
  </section>
);

Object.assign(window, { SigWelcome });