// keisha-closing.jsx — Keisha Lifestyle closing.
//
// Section 5 · Five Lifestyles cross-nav. Keisha is the
// fifth and final page in the system — every other
// Lifestyle has a live page to link to, so this is the
// first cross-nav in the system with no "Coming Soon"
// markers. Keisha is marked as the current page.
//
// Pattern mirrors Destiny's nav exactly so the cross-nav
// reads consistently across the five doorways.

const KEISHA_LIFESTYLES = [
  { id: 'jasmine', who: 'Jasmine', tagline: 'The Builder',
    href: '/lifestyles/jasmine',
    short: 'For the emerging founder.' },
  { id: 'brenda',  who: 'Brenda',  tagline: 'The Matriarch Upgrading',
    href: '/lifestyles/brenda',
    short: 'For the woman investing in her next chapter.' },
  { id: 'tamara',  who: 'Tamara',  tagline: 'The Pivot',
    href: '/lifestyles/tamara',
    short: 'For the woman in reinvention.' },
  { id: 'destiny', who: 'Destiny', tagline: 'The Quiet Riser',
    href: '/lifestyles/destiny',
    short: 'For the woman engineering her own rise.' },
  { id: 'keisha',  who: 'Keisha',  tagline: 'The Architect Mom',
    href: null, current: true,
    short: 'For the mother building while managing.' },
];

const KeishaLifestyleNav = () => (
  <section id="lifestyles"
    data-screen-label="Keisha · 05 Five Lifestyles"
    style={{
      background: 'var(--t-ground-soft-2)',
      color: 'var(--t-text)',
      padding: '72px 24px 84px',
      position: 'relative',
      borderTop: '1px solid var(--t-line)',
    }}>

    {/* Eyebrow — brass small-caps */}
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 700,
      fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
      color: 'var(--t-accent)',
      marginBottom: 22,
    }}>
      Five Lifestyles. One Culture.
    </div>

    {/* Headline — mixed display + italic display */}
    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 400,
      fontSize: 'clamp(30px, 8.5vw, 40px)', lineHeight: 1.08,
      letterSpacing: '-0.012em',
      color: 'var(--t-text)',
      margin: '0 0 38px', maxWidth: 460,
    }}>
      Each Lifestyle is a doorway.<br />
      <em style={{ fontStyle: 'italic', fontWeight: 400 }}>
        Walk through the one that feels like home.
      </em>
    </h2>

    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
      {KEISHA_LIFESTYLES.map((L, i) => (
        <a key={L.id}
          href={L.href || '#'}
          aria-current={L.current ? 'page' : undefined}
          onClick={L.current ? (e) => e.preventDefault() : undefined}
          style={{
            display: 'grid',
            gridTemplateColumns: '32px 1fr auto',
            alignItems: 'baseline', gap: 16,
            padding: '20px 0',
            borderTop: '1px solid var(--t-line)',
            borderBottom: i === KEISHA_LIFESTYLES.length - 1 ? '1px solid var(--t-line)' : 'none',
            color: 'inherit', textDecoration: 'none', borderRight: 'none',
            cursor: L.current ? 'default' : 'pointer',
          }}>
          {/* Index numeral */}
          <span style={{
            fontFamily: 'var(--font-body)', fontWeight: 500,
            fontSize: 11, letterSpacing: '0.10em',
            color: L.current ? 'var(--t-accent)' : 'var(--t-text-2)',
            paddingTop: 6,
          }}>0{i + 1}</span>

          {/* Name + tagline + short */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 24, letterSpacing: '-0.012em',
                color: 'var(--t-text)',
              }}>{L.who}</span>
              <span style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic',
                fontSize: 17, color: L.current ? 'var(--t-accent)' : 'var(--t-text-2)',
              }}>{L.tagline}</span>
            </div>
            <span style={{
              fontFamily: 'var(--font-body)', fontSize: 13,
              color: 'var(--t-text-2)', maxWidth: 320,
            }}>{L.short}</span>
          </div>

          {/* Right marker — arrow / "you are here" */}
          <span style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 10, letterSpacing: '0.20em', textTransform: 'uppercase',
            color: L.current ? 'var(--t-accent)' : 'var(--t-text)',
            whiteSpace: 'nowrap', paddingTop: 6,
          }}>
            {L.current ? 'You are here' : '→'}
          </span>
        </a>
      ))}
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// KeishaPage — top-level composition.
// Flow: Header → Hero → Program Invitation → Keeping Room
//       → About Lacey → Five Lifestyles → Footer.
// (No Founder's Note section — the About Lacey section
// IS the Founder voice on this page, by design.)
// ─────────────────────────────────────────────────────────────
const KeishaPage = ({ palette }) => (
  <div data-palette={palette || 'keeping-room'}>
    <KeishaHeader />
    <KeishaHero />
    <KeishaProgram />
    <KeishaKeepingRoom />
    <KeishaAboutLacey />
    <KeishaLifestyleNav />
    <KeishaFooter />
  </div>
);

Object.assign(window, { KeishaLifestyleNav, KeishaPage });