// destiny-closing.jsx — Destiny Lifestyle closing sections.
//
// Sections:
//   C · Founder's Note (pearl/cream editorial inset; mirrors
//       attachment 10's small-image + quote + script signature
//       + "About Lacey R. Hardy" small-caps link pattern).
//   D · Five Lifestyles cross-nav (pearl/cream; mirrors
//       attachment 11's "FIVE LIFESTYLES. ONE CULTURE." aqua
//       eyebrow + mixed-style display headline).
//   E · Universal footer (rendered by DestinyFooter on the
//       forest-green structural ground).
//
// Both inset sections sit on pearl/cream so the navy page
// breathes — the institutional palette uses pearl exactly for
// these editorial inset moments.

// ─────────────────────────────────────────────────────────────
// DestinyFounderNote — Section C.
// Pearl ground. Small portrait slot on the left, "A NOTE FROM
// THE FOUNDER" aqua small-caps eyebrow above the quote, italic
// display body, "With care," → "Lacey." in script, then the
// "ABOUT LACEY R. HARDY, FOUNDER & MOM →" small-caps link.
// ─────────────────────────────────────────────────────────────
const DestinyFounderNote = () => (
  <section id="about" data-screen-label="Destiny · 04 Founder's Note"
    style={{
      background: 'var(--t-ground-soft)',
      color: 'var(--t-text-on-pearl)',
      padding: '60px 24px 64px',
      position: 'relative',
    }}>
    <div style={{
      display: 'grid',
      gridTemplateColumns: '64px 1fr',
      gap: 18,
      alignItems: 'start',
      maxWidth: 460,
    }}>
      {/* Bronze institutional crest — same mark as the header,
          tinted in brand bronze via CSS mask. No box, no plate,
          just the crest sitting against the pearl ground per
          the founder-note pattern across the Lifestyle pages. */}
      <BronzeCrest size={64} ariaLabel="The Art of Living Digitally" />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase',
          color: 'var(--t-navy)',
          marginBottom: 14, marginTop: 6,
        }}>
          A note from the founder
        </div>

        <p style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 400,
          fontSize: 22, lineHeight: 1.36, letterSpacing: '-0.008em',
          color: 'var(--t-text-on-pearl)',
          margin: '0 0 22px',
          textWrap: 'pretty',
        }}>
          "I built this for the women who are rising deliberately. The
          vision was never the problem — the structure underneath it
          was."
        </p>

        <div style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontSize: 18, color: 'var(--t-text-on-pearl-2)',
          margin: '0 0 4px',
        }}>With care,</div>

        {/* Script signature — Playwrite US Modern, in gold so it
            reads as the institutional "legacy" moment per the
            colors_and_type guide. */}
        <div style={{
          fontFamily: 'var(--font-script)', fontWeight: 400,
          fontSize: 44, lineHeight: 1.0,
          color: 'var(--t-gold)',
          margin: '0 0 24px',
          letterSpacing: '-0.005em',
        }}>
          Lacey.
        </div>

        <a href="/about" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 10.5, letterSpacing: '0.20em', textTransform: 'uppercase',
          color: 'var(--t-text-on-pearl)',
          borderBottom: '1px solid var(--t-text-on-pearl)',
          paddingBottom: 4,
          alignSelf: 'flex-start',
        }}>
          <span>About Lacey R. Hardy, Founder &amp; Mom</span>
          <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// DestinyLifestyleNav — Section D. The five doorways.
// All five cards present. Destiny is marked as the current
// page (small "you are here" pill + aqua tagline); the other
// four now link out to their respective Lifestyle pages —
// Keisha's page is live, so the system is complete and no
// card carries a "Coming Soon" badge anymore.
// ─────────────────────────────────────────────────────────────
const 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: 'keisha', who: 'Keisha', tagline: 'The Architect Mom',
    href: '/lifestyles/keisha',
    short: 'For the mother building while managing.' },
  { id: 'destiny', who: 'Destiny', tagline: 'The Quiet Riser',
    href: null, short: 'For the woman engineering her own rise.',
    current: true },
];

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

    {/* Eyebrow — aqua small-caps, matching attachment 11 exactly */}
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 700,
      fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
      color: 'var(--ld-aqua-700, #2BAAB0)',
      marginBottom: 22,
    }}>
      Five Lifestyles. One Culture.
    </div>

    {/* Headline — mixed display + italic display, navy text */}
    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 400,
      fontSize: 'clamp(30px, 8.5vw, 40px)', lineHeight: 1.08,
      letterSpacing: '-0.012em',
      color: 'var(--t-text-on-pearl)',
      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 }}>
      {LIFESTYLES.map((L, i) => (
        <a key={L.id}
          href={L.href || '#'}
          aria-current={L.current ? 'page' : undefined}
          aria-disabled={L.soon ? 'true' : undefined}
          onClick={L.soon || L.current ? (e) => e.preventDefault() : undefined}
          style={{
            display: 'grid',
            gridTemplateColumns: '32px 1fr auto',
            alignItems: 'baseline', gap: 16,
            padding: '20px 0',
            borderTop: i === 0 ? '1px solid var(--t-line-on-pearl)' : '1px solid var(--t-line-on-pearl)',
            borderBottom: i === LIFESTYLES.length - 1 ? '1px solid var(--t-line-on-pearl)' : 'none',
            color: 'inherit', textDecoration: 'none', borderRight: 'none',
            opacity: L.soon ? 0.45 : 1,
            cursor: L.soon ? 'default' : (L.current ? 'default' : 'pointer'),
          }}>
          {/* Index numeral */}
          <span style={{
            fontFamily: 'var(--font-body)', fontWeight: 500,
            fontSize: 11, letterSpacing: '0.10em',
            color: L.current ? 'var(--ld-aqua-700, #2BAAB0)' : 'var(--t-text-on-pearl-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-on-pearl)',
              }}>{L.who}</span>
              <span style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic',
                fontSize: 17, color: L.current ? 'var(--ld-aqua-700, #2BAAB0)' : 'var(--t-text-on-pearl-2)',
              }}>{L.tagline}</span>
            </div>
            <span style={{
              fontFamily: 'var(--font-body)', fontSize: 13,
              color: 'var(--t-text-on-pearl-2)', maxWidth: 320,
            }}>{L.short}</span>
          </div>

          {/* Right marker — arrow / current / coming soon */}
          <span style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 10, letterSpacing: '0.20em', textTransform: 'uppercase',
            color: L.current ? 'var(--ld-aqua-700, #2BAAB0)' : (L.soon ? 'var(--t-text-on-pearl-2)' : 'var(--t-text-on-pearl)'),
            whiteSpace: 'nowrap', paddingTop: 6,
          }}>
            {L.current ? 'You are here' : (L.soon ? 'Soon' : '→')}
          </span>
        </a>
      ))}
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// DestinyPage — top-level composition mounted by the host HTML.
// Flow: Header → Hero → Resident's Retreat → Access → Founder
//       → Five Lifestyles → Footer.
// ─────────────────────────────────────────────────────────────
const DestinyPage = ({ palette }) => (
  <div data-palette={palette || 'sanctuary'}>
    <DestinyHeader />
    <DestinyHero />
    <DestinyRetreat />
    <DestinyAccess />
    <DestinyFounderNote />
    <DestinyLifestyleNav />
    <DestinyFooter />
  </div>
);

Object.assign(window, {
  DestinyFounderNote,
  DestinyLifestyleNav,
  DestinyPage,
});