// jasmine-closing.jsx — OtherLifestyles (B-variant only) + FounderHandoff
// + JasminePage assembler that wires the whole thing together by variant.
const Hero = JasmineHeroB;
// ─────────────────────────────────────────────────────────────
// OtherLifestyles — editorial cross-nav section. Used in Version B only;
// Version A surfaces these same five at the top in role-name nav.
// ─────────────────────────────────────────────────────────────
const JASMINE_LIFESTYLE_HREFS = {
  brenda:  '/lifestyles/brenda',
  keisha:  '/lifestyles/keisha',
  tamara:  '/lifestyles/tamara',
  destiny: '/lifestyles/destiny',
};

const LIFESTYLES = [
  { slug: 'brenda',  role: 'The Matriarch Upgrading', line: 'For the woman investing in her next chapter.',          img: 'assets/persona-brenda.jpg' },
  { 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 OtherLifestyles = () => (
  <section id="lifestyles" data-screen-label="B · 08 Other Lifestyles" 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: 34, lineHeight: 1.08, letterSpacing: '-0.01em',
      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>

    <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column' }}>
      {LIFESTYLES.map((l) => (
        <a key={l.slug} href={JASMINE_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>
);

// ─────────────────────────────────────────────────────────────
// FounderHandoff — quiet editorial bridge to /about. Just before footer.
// ─────────────────────────────────────────────────────────────
const FounderHandoff = ({ variant }) => (
  <section data-screen-label={`${variant} · 09 Founder`} style={{
    background: 'var(--ld-pearl-50)',
    padding: '56px 24px 64px',
    borderTop: '1px solid var(--ld-line)',
  }}>
    <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
      {/* Institutional crest — same silhouette as the footer chip, recolored
          navy so it reads against the pearl ground of this panel. Sets up
          the founder note as a dispatch from the institution itself. */}
      <img src="assets/crest-institution-navy.png" alt=""
        style={{ width: 56, height: 56, objectFit: 'contain', flex: '0 0 auto' }} />
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
          color: 'var(--ld-ink-3)',
        }}>A note from the founder</div>

        <p style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 400, fontSize: 22, lineHeight: 1.35,
          color: 'var(--ld-navy)', margin: '12px 0 16px',
        }}>
          "I built this for the women who already know what they're
          building. The vision was never the problem — the structure
          underneath it was."
        </p>

        {/* Sign-off in script — now reads "With care, / Lacey." so the
            closing note carries the warmer cadence the founder asked for. */}
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 500, fontStyle: 'italic',
          fontSize: 14, letterSpacing: '0.02em',
          color: 'var(--ld-ink-2)', marginBottom: 4,
        }}>With care,</div>
        <div style={{
          fontFamily: 'var(--font-script)', fontSize: 28,
          color: 'var(--ld-gold)', lineHeight: 1, marginBottom: 18,
        }}>Lacey.</div>

        <a href="/about" style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
          color: 'var(--ld-navy)',
          borderBottom: '1px solid var(--ld-gold)', paddingBottom: 4,
        }}>About Lacey R. Hardy, Founder &amp; Mom →</a>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// JasminePage — composes the full page by variant.
// ─────────────────────────────────────────────────────────────
const JasminePage = ({ variant = 'A' }) => {
  const Header = JasmineHeaderA;
  const Hero = JasmineHeroB;
  const screenLabel = variant === 'A'
    ? 'A · Jasmine · Type-Led · Header Role-Nav'
    : 'B · Jasmine · Image-Led · Editorial Lifestyles Section';
  return (
    <div data-screen-label={screenLabel} style={{
      background: 'var(--ld-pearl-50)',
      color: 'var(--ld-navy)',
      fontFamily: 'var(--font-body)',
      width: '100%',
    }}>
      <Header />
      <Hero />
      {/* Core Curriculum section removed per direction. The page now moves
          directly from hero into the Creator's Lab. */}
      <CreatorsLab variant={variant} />
      <LevelIII variant={variant} />
      {variant === 'B' && <OtherLifestyles />}
      <FounderHandoff variant={variant} />
      <JasmineFooter />
    </div>
  );
};

Object.assign(window, { OtherLifestyles, FounderHandoff, JasminePage });