// foyer-closing.jsx — Section 05 · Walk-in close.
//
// Soft pull back to the Signature Program landing page.
// Per direction: "When you're ready — Walk in."
//
// Visual: navy ground (matches the universal footer that
// follows it). A single editorial line, a generous arched
// underline, and a CTA pill in aqua that mirrors the Become A
// Resident button in the header.

const FoyerClosing = () => (
  <section id="walk-in"
    data-screen-label="Foyer · 05 Walk-in Close"
    style={{
      background: 'var(--t-navy)',
      color: 'var(--t-text-on-navy)',
      padding: '80px 24px 96px',
      position: 'relative',
      overflow: 'hidden',
      textAlign: 'center',
    }}>

    {/* faint arched glow behind */}
    <div aria-hidden="true" style={{
      position: 'absolute',
      left: '50%', top: '20%',
      width: 'min(80vw, 600px)', height: '60%',
      transform: 'translateX(-50%)',
      background: 'radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--ld-aqua) 22%, transparent) 0%, transparent 70%)',
      pointerEvents: 'none',
    }} />

    <div style={{ position: 'relative', maxWidth: 720, margin: '0 auto' }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.40em', textTransform: 'uppercase',
        color: 'var(--ld-aqua)', marginBottom: 22,
      }}>The Threshold</div>

      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(34px, 7vw, 56px)', lineHeight: 1.04,
        letterSpacing: '-0.018em',
        color: 'var(--t-text-on-navy)', margin: '0 0 12px',
        textWrap: 'balance',
      }}>
        When you\u2019re ready{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--ld-aqua)' }}>
          — Walk in.
        </em>
      </h2>

      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400, fontSize: 'clamp(16px, 3vw, 19px)', lineHeight: 1.5,
        color: 'var(--t-text-on-navy-2)', margin: '0 0 32px',
        textWrap: 'pretty',
      }}>
        The Doorway you choose will be waiting.
      </p>

      <a href="../signature/7 Days Living Digitally.html#doorways" style={{
        display: 'inline-flex', alignItems: 'center', gap: 12,
        padding: '16px 24px',
        background: 'var(--ld-aqua)',
        color: 'var(--ld-navy)',
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase',
        borderRadius: 2, borderBottom: 'none',
        boxShadow: '0 0 22px color-mix(in srgb, var(--ld-aqua) 32%, transparent)',
        textDecoration: 'none',
      }}>
        <span>Choose your Doorway</span>
        <span aria-hidden="true">→</span>
      </a>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// FoyerPage — top-level composition.
// Flow: Header → Hero → At a Glance → FAQ → Who → Not →
//       Cohort → Walk-in close → Footer.
// ─────────────────────────────────────────────────────────────
const FoyerPage = () => (
  <div data-palette="keeping-room">
    <FoyerHeader />
    <FoyerHero />
    <FoyerAtAGlance />
    <FoyerFAQ />
    <FoyerWho />
    <FoyerNot />
    <FoyerFooter />
  </div>
);

Object.assign(window, { FoyerPage });