// keisha-body.jsx — Keisha Lifestyle body.
//
// Section A · Editorial Intro & The Program Invitation —
//   on the deep mahogany structural ground. This is
//   Keisha's structural anchor and the page's primary CTA
//   moment. Single CTA points at the Signature Program
//   overview (not a single Level), matching Destiny's
//   pattern.
//
// Section B · The Keeping Room — full-bleed photograph
//   with the title "The Keeping Room." pinned at the
//   bottom-left of the image, followed by the
//   Southern-keeping-room editorial on champagne ground,
//   closing with the Lacey ↔ Keisha bridge paragraph that
//   carries the reader into the About section.

// ─────────────────────────────────────────────────────────────
// Pull — small helper for brass-keyed in-line emphasis.
// ─────────────────────────────────────────────────────────────
const Pull = ({ children, style }) => (
  <span style={{
    color: 'var(--t-accent)', fontWeight: 700,
    borderBottom: '1px solid color-mix(in srgb, var(--t-accent) 55%, transparent)',
    paddingBottom: 1,
    ...style,
  }}>{children}</span>
);

// Pull-on-dark — brass holds on mahogany too; this is the
// same helper but with the brass2 (lighter) variant so the
// underline reads against the dark ground.
const PullDark = ({ children, style }) => (
  <span style={{
    color: 'var(--t-accent-2)', fontWeight: 600,
    borderBottom: '1px solid color-mix(in srgb, var(--t-accent-2) 55%, transparent)',
    paddingBottom: 1,
    ...style,
  }}>{children}</span>
);

// ─────────────────────────────────────────────────────────────
// KeishaProgram — Section A. The editorial invitation +
// primary CTA. Mahogany ground. The page's institutional
// weight rests here.
//   1) Section nameplate (brass small-caps)
//   2) Editorial headline — "You don't need more guilt…"
//   3) Long-form body paragraph (the operation you're
//      already running → one clean system)
//   4) Short voice line — plain language, real time
//      windows, AI woven in
//   5) "From Holding Everything to…" eyebrow
//   6) Stacked primary CTA — Guidance / Enter 7 Days
//   7) Small paragraph beneath the button
// ─────────────────────────────────────────────────────────────
const KeishaProgram = () => (
  <section id="program" data-screen-label="Keisha · 02 The Program Invitation"
    style={{
      background: 'var(--t-structure)',
      color: 'var(--t-text-on-dark)',
      padding: '72px 24px 84px',
      position: 'relative',
    }}>
    {/* subtle radial lift in the upper-left to give the
        mahogany ground depth without breaking it into a
        gradient panel — mimics the brass glow of the music
        box in the keeping-room photo. */}
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background:
        'radial-gradient(ellipse at 20% 18%, rgba(184,137,62,0.10) 0%, rgba(184,137,62,0) 55%),' +
        'radial-gradient(ellipse at 85% 92%, rgba(184,137,62,0.06) 0%, rgba(184,137,62,0) 60%)',
    }} />

    <div style={{ position: 'relative' }}>

      {/* ── 1 · Section nameplate ─────────────────────────── */}
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
        color: 'var(--t-accent-2)',
        margin: '0 0 18px',
      }}>
        7 Days of Living Digitally<sup style={{ fontSize: 7 }}>™</sup> Signature Program
      </div>

      {/* ── 2 · Editorial headline ────────────────────────── */}
      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(30px, 9vw, 42px)', lineHeight: 1.08,
        letterSpacing: '-0.018em',
        color: 'var(--t-text-on-dark)',
        margin: '0 0 28px', maxWidth: 460,
      }}>
        "You don't need more guilt.<br />
        <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--t-accent-2)' }}>
          You need a system
        </em>{' '}that fits inside the day as it unfolds."
      </h2>

      {/* ── 3 · The operation you're already running ──────── */}
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-on-dark-2)', margin: '0 0 16px', maxWidth: 460,
      }}>
        Living Digitally<sup style={{ fontSize: 9 }}>™</sup> takes
        the operation you are already running, the family, the
        work, the calendar, the school portals, the appointments,
        the meal planning, the texts you have not answered yet,
        and turns it into{' '}
        <PullDark>one clean system you can actually keep up with.</PullDark>
      </p>

      {/* ── 4 · Plain language, real time, AI woven in ────── */}
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-on-dark-2)', margin: '0 0 18px', maxWidth: 460,
      }}>
        Plain language. Real time windows. AI woven in where it
        makes the day shorter, not longer. Taught in the language
        of the household you are actually managing, by a Founder
        who is managing one too.
      </p>

      {/* small italic close line — the brand cadence */}
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 19, lineHeight: 1.45, letterSpacing: '-0.005em',
        color: 'var(--t-text-on-dark)', margin: '6px 0 0', maxWidth: 460,
      }}>
        The room where the woman of the house stops running it
        through herself &amp; starts running it for herself.
      </p>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// KeishaKeepingRoom — Section B.
// Champagne ground; full-bleed photograph; "The Keeping
// Room." caption in brass. Body commits to the
// inheritance-of-the-Southern-keeping-room argument and
// closes on the Lacey ↔ Keisha bridge paragraph that
// carries the reader into the About Lacey section.
// ─────────────────────────────────────────────────────────────
const KeishaKeepingRoom = () => (
  <section data-screen-label="Keisha · 03 The Keeping Room"
    style={{
      background: 'var(--t-ground)',
      color: 'var(--t-text)',
      position: 'relative',
    }}>

    <div aria-hidden="true" style={{
      borderTop: '1px solid var(--t-line)', height: 0,
    }} />

    {/* ── Full-bleed photograph with title settling at bottom
           ── The keeping-room reference is portrait (9:16),
           taller than the hero. We let the aspect ratio
           breathe rather than crop it square. */}
    <div style={{ position: 'relative' }}>
      <img
        src="assets/keeping-room.jpg"
        alt="The Keeping Room. A young boy reaches up toward an antique cabinet against deep forest-green wainscoted walls. On the dark wood coffee table in the foreground sit an opened gilded music box with a black-and-white wedding photograph inside its lid, a clothbound book titled THE ART OF LIVING DIGITALLY, and a heavy brass key on a chain."
        style={{
          display: 'block', width: '100%', height: 'auto',
          aspectRatio: '4 / 5', objectFit: 'cover',
          objectPosition: 'center center',
          filter: 'var(--t-photo-filter)',
        }} />

      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background:
          'linear-gradient(180deg, transparent 50%, rgba(46,24,16,0.55) 88%, rgba(46,24,16,0.85) 100%), ' +
          'linear-gradient(90deg, rgba(46,24,16,0.40) 0%, transparent 55%)',
        pointerEvents: 'none',
      }} />

      <h2 style={{
        position: 'absolute', left: 24, right: 24, bottom: 22,
        fontFamily: 'var(--font-display)', fontWeight: 400,
        fontStyle: 'italic',
        fontSize: 'clamp(34px, 9vw, 44px)', lineHeight: 1.0,
        letterSpacing: '-0.012em',
        color: 'var(--t-accent-2)',
        margin: 0,
        textShadow: '0 1px 18px rgba(46,24,16,0.80), 0 0 2px rgba(46,24,16,0.65)',
      }}>
        The Keeping Room.
      </h2>
    </div>

    {/* ── The Southern keeping-room editorial ──────────────── */}
    <div style={{ padding: '38px 24px 24px' }}>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.78,
        color: 'var(--t-text)', margin: '0 0 18px', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        In Southern homes, the keeping room sat just off the
        kitchen. It was the room where the woman of the house
        kept watch over the meal &amp; the family. The
        photographs lived there. The family Bible &amp; the
        obituaries lived there. The stereo that played at every
        gathering lived there. It kept the records. It kept the
        rhythms.{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-text)' }}>
          It kept the day.
        </em>
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.78,
        color: 'var(--t-text)', margin: '0 0 18px', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        <Pull>The Keeping Room</Pull> is the room of Living
        Digitally<sup style={{ fontSize: 9 }}>™</sup> where the
        system you build inside the 7 Days does not disappear
        when the kids walk in. The 30 Day Reset stays. The
        morning prompt stays. The meal plan you built that week
        stays.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.78,
        color: 'var(--t-text)', margin: '0 0 0', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        Nothing built inside the 7 Days of Living
        Digitally<sup style={{ fontSize: 9 }}>™</sup> Signature
        Program leaves the house. It is{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>
          kept.
        </em>
      </p>

      {/* ── brass hairline + Lacey-Keisha bridge ─────────── */}
      <div aria-hidden="true" style={{
        height: 1, width: 56, background: 'var(--t-accent)',
        margin: '36px 0 24px',
      }} />

      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 'clamp(20px, 6vw, 24px)', lineHeight: 1.36,
        letterSpacing: '-0.008em',
        color: 'var(--t-text)', margin: '0 0 18px', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        I keep mine here too.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-2)', margin: '0 0 14px', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        I am the Founder, &amp; I am a mom. On any given day I am
        checking MyChart between work emails, getting my girls to
        cheer &amp; dance practice, &amp; still making it to Mass.
        The day only holds together because I have used my digital
        skill to streamline the appointments, the school portals,
        the inbox that never empties. The system carries what it
        can so I get to be present for what this room is actually
        for. Mass. The family. The afternoon.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-2)', margin: '0 0 0', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        Keisha &amp; I sit in The Keeping Room for the same
        reason. We are not winging it. <Pull>We are keeping it.</Pull>
      </p>
    </div>
  </section>
);

// Legacy aliases kept in case the host file naming changes.
const KeishaAccess = KeishaProgram;
const KeishaRetreat = KeishaKeepingRoom;

Object.assign(window, {
  KeishaProgram, KeishaAccess,
  KeishaKeepingRoom, KeishaRetreat,
  Pull, PullDark,
});
