// brenda-closing.jsx — Cross-Lifestyles nav (Brenda excluded — she IS
// the page) + BrendaPage assembler. Per the architecture: NO founder
// handoff section on this page. The /about page is reachable only via
// the institutional crest tile in the universal footer.

// ─────────────────────────────────────────────────────────────
// OtherLifestylesBrenda — same editorial card pattern Jasmine uses,
// adapted: Brenda is omitted (this IS her page), and the remaining
// four characters are presented so the cross-nav reads consistent
// across the system.
//
// hrefs are now relative paths to the live Lifestyle pages — every
// Lifestyle is live, so each card navigates to its respective file.
// Production routes (/lifestyles/[slug]) can be reintroduced by
// swapping the LIFESTYLE_HREFS map below.
// ─────────────────────────────────────────────────────────────
const LIFESTYLE_HREFS = {
  jasmine: '/lifestyles/jasmine',
  keisha: '/lifestyles/keisha',
  tamara: '/lifestyles/tamara',
  destiny: '/lifestyles/destiny',
};

const BRENDA_LIFESTYLES_CROSS = [
  { slug: 'jasmine', role: 'The Builder',        line: 'For the woman already building.',                img: 'assets/persona-jasmine.png' },
  { slug: 'keisha',  role: 'The Architect Mom',  line: 'For the mother building while managing.',        img: 'assets/persona-keisha.png' },
  { slug: 'tamara',  role: 'The Pivot',          line: 'For the woman in reinvention.',                  img: 'assets/persona-tamara.png' },
  { slug: 'destiny', role: 'The Quiet Riser',    line: 'For the quiet riser, upskilling with purpose.',  img: 'assets/persona-destiny.png' },
];

const BrendaOtherLifestyles = () => (
  <section id="lifestyles" data-screen-label="Brenda · 07 Other Lifestyles · Cross-nav"
    style={{
      background: 'var(--ld-pearl-100)',
      padding: '64px 24px 72px',
      borderTop: '1px solid var(--ld-line)',
    }}>
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600,
      fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
      color: 'var(--ld-aqua-700)',
    }}>Five Lifestyles. One Culture.</div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 32, lineHeight: 1.08, letterSpacing: '-0.012em',
      color: 'var(--ld-navy)', margin: '14px 0 12px',
    }}>
      Each Lifestyle is a doorway.<br />
      <em style={{ fontStyle: 'italic' }}>Walk through the one that feels like home.</em>
    </h2>

    {/* Editorial cards — character portrait left, role + tagline right,
        gold arrow at the end. Matches the Jasmine pattern exactly so
        the architecture reads consistent across the platform. */}
    <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column' }}>
      {BRENDA_LIFESTYLES_CROSS.map((l) => (
        <a key={l.slug} href={LIFESTYLE_HREFS[l.slug] || `/lifestyles/${l.slug}`} style={{
          display: 'grid', gridTemplateColumns: '76px 1fr 20px', gap: 16,
          alignItems: 'center',
          padding: '18px 0', borderTop: '1px solid var(--ld-line)',
          borderBottom: 'none', textDecoration: 'none',
        }}>
          <div style={{
            aspectRatio: '4 / 5',
            backgroundImage: `url(${l.img})`,
            backgroundSize: 'cover', backgroundPosition: 'center 25%',
            border: '1px solid var(--ld-line)', borderRadius: 2,
          }} />
          <div>
            <div style={{
              fontFamily: 'var(--font-body)', fontWeight: 600,
              fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--ld-aqua-700)',
            }}>{l.slug}</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 20, lineHeight: 1.2, color: 'var(--ld-navy)',
              marginTop: 4,
            }}>{l.role}</div>
            <div style={{
              fontFamily: 'var(--font-body)', fontSize: 12.5, lineHeight: 1.45,
              color: 'var(--ld-ink-2)', marginTop: 6,
            }}>{l.line}</div>
          </div>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 18,
            color: 'var(--ld-gold)', alignSelf: 'center',
          }}>→</div>
        </a>
      ))}
      <div style={{ borderTop: '1px solid var(--ld-line)' }} />
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// BrendaPage — composes the full mobile artboard top-to-bottom.
//
//   Header
//   ↓
//   Hero · antique gold
//   ↓ (cream hand-off)
//   Offerings · § II
//   ↓
//   ACCESS Journal · § III · conversion engine
//   ↓
//   Level I bridge · § IV
//   ↓
//   Where matriarchs are upgrading · § V
//   ↓
//   Storylines · § VI
//   ↓
//   Five Lifestyles cross-nav · § VII
//   ↓
//   Universal Footer
//
// No founder-story link on this page per the architecture — see notes.
// ─────────────────────────────────────────────────────────────
const BrendaPage = () => (
  <div data-screen-label="Brenda · Lifestyle Page · The Matriarch Upgrading"
    style={{
      background: 'var(--ld-pearl-50)',
      fontFamily: 'var(--font-body)',
      color: 'var(--ld-navy)',
    }}>
    <BrendaHeader />
    <BrendaHero />
    <HeroToBodyHandoff />
    {/* § II · Offerings, § V · Context, and § VI · Storylines removed
        per Lacey's feedback. § III ACCESS Journal replaced with the
        Legacy Library — page now flows hero → Legacy Library →
        Level I bridge → cross-nav. */}
    <BrendaLegacyLibrary />
    <BrendaLevelIBridge />
    <BrendaOtherLifestyles />
    <BrendaFooter />
  </div>
);

Object.assign(window, { BrendaOtherLifestyles, BrendaPage });
