// destiny-body.jsx — Destiny Lifestyle body.
//
// Section A · The Resident's Retreat — full-bleed photograph
//   with the title "The Retreat." pinned at the bottom-left of
//   the image, followed by the inheritance-room editorial on
//   the pearl ground and a hairline-aqua "destination box"
//   callout for the Living Digitally™ Resident's Retreat.
//
// Section B · The Art of Living Digitally™ Embodied —
//   institutional manifesto on the forest-green structural
//   ground. Opens with "Skills + Lifestyle = Culture.", then
//   the Vision, then the Three Gaps diagram (Interest / Trust
//   / Access, with the 73 % · 94 vs 6 · 800 M stats), then the
//   unifying line, sources, the 37 → 52 % closing paragraph,
//   and the primary CTA "Enter 7 Days of Living Digitally
//   Signature Program."

// ─────────────────────────────────────────────────────────────
// Pull — small helper for aqua-keyed in-line emphasis.
// Used throughout both sections to lift nouns at editorial
// pace without breaking line color.
// ─────────────────────────────────────────────────────────────
const Pull = ({ children, style }) => (
  <span style={{
    color: 'var(--t-gold)', fontWeight: 700,
    borderBottom: '1px solid color-mix(in srgb, var(--t-gold) 55%, transparent)',
    paddingBottom: 1,
    ...style,
  }}>{children}</span>
);

// ─────────────────────────────────────────────────────────────
// DestinyRetreat — Section A.
// Pearl ground; full-bleed photograph; "The Retreat." caption
// in aqua. Body copy commits to the inheritance-room argument:
// the living room as the South's first soft room, the Retreat
// as Living Digitally's inheritance room, the 7 Days program
// as the door. Closes on the destination box CTA card.
// ─────────────────────────────────────────────────────────────
const DestinyRetreat = () => (
  <section data-screen-label="Destiny · 02 The Retreat"
    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 ── */}
    <div style={{ position: 'relative' }}>
      <img
        src="assets/destiny-retreat-empty.png"
        alt="The Retreat. A high-floor Charlotte apartment at dusk — forest-green velvet sofa against a forest-green wall, a Madonna and Child painting centered above the sofa, a travertine and bronze coffee table, brushed-bronze floor lamp, and floor-to-ceiling windows looking out at the city skyline."
        style={{
          display: 'block', width: '100%', height: 'auto',
          aspectRatio: '4 / 3', objectFit: 'cover',
          filter: 'var(--t-photo-filter)',
        }} />

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

      <h2 style={{
        position: 'absolute', left: 24, right: 24, bottom: 22,
        fontFamily: 'var(--font-display)', fontWeight: 400,
        fontSize: 'clamp(34px, 9vw, 44px)', lineHeight: 1.0,
        letterSpacing: '-0.012em',
        color: 'var(--t-accent)',
        margin: 0,
        textShadow: '0 1px 18px rgba(13,27,61,0.70), 0 0 2px rgba(13,27,61,0.55)',
      }}>
        The Retreat.
      </h2>
    </div>

    {/* ── The inheritance-room editorial ────────────────────
        Three paragraphs on pearl ground. The first sets the
        cultural ground (the living room as the South's first
        soft room); the second translates that inheritance
        forward into the Retreat; the third names the door —
        the 7 Days of Living Digitally Signature Program. */}
    <div style={{ padding: '38px 24px 16px' }}>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.78,
        color: 'var(--t-text)', margin: '0 0 18px', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        A living room has always been more than a place to sit. For
        women, especially in the South, it is often the first room of
        the home. It, or the sitting room, is the place where company
        is received &amp; culture is lived &amp; learned — often
        simultaneously. It was where matriarchs traded news after
        church, where daughters learned how to host, and where the
        women of the house made the decisions that shaped a
        generation. The living room was not the public ground. It
        was the{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-text)' }}>
          inheritance room.
        </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',
      }}>
        You are the woman of the house now, building inside a new
        kind of home. <Pull>The Retreat</Pull> is the inheritance
        room of Living Digitally<sup style={{ fontSize: 9 }}>™</sup>.
        A Resident need not apologize for needing a tech foundation,
        nor for choosing to rise quietly.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.78,
        color: 'var(--t-text)', margin: '0 0 28px', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        The <em style={{ fontStyle: 'italic', color: 'var(--t-text)' }}>
          7 Days of Living Digitally Signature Program
        </em>{' '}opens the door to learning in the ways most
        comfortable for you. The Retreat is the room where at least
        one light is always on, even if it's just the lamp.
      </p>

      {/* ── Destination box callout ──────────────────────── */}
      <a href="#embodied" style={{
        display: 'block',
        border: '1px solid var(--t-accent)',
        borderRadius: 2, borderBottom: '1px solid var(--t-accent)',
        background: 'color-mix(in srgb, var(--t-accent) 6%, transparent)',
        padding: '24px 22px',
        textDecoration: 'none', color: 'inherit',
        maxWidth: 460,
        boxShadow: '0 0 24px color-mix(in srgb, var(--t-accent) 14%, transparent)',
      }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 400,
          fontSize: 24, lineHeight: 1.18, letterSpacing: '-0.005em',
          color: 'var(--t-gold)',
          marginBottom: 8,
        }}>
          Living Digitally<sup style={{ fontSize: 11 }}>™</sup> Resident's Retreat
        </div>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10.5, letterSpacing: '0.20em', textTransform: 'uppercase',
          color: 'var(--t-text-2)', lineHeight: 1.55,
        }}>
          Always Open in The BAND App
        </div>
      </a>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// GapCard — single gap for the Three-Gaps diagram. Stacks
// vertically on the 430-wide column. Number + label + giant
// stat + descriptor + the "X is not the problem" italic line.
// ─────────────────────────────────────────────────────────────
const GapCard = ({ index, label, stat, statSuffix, descriptor, verdict }) => (
  <div style={{
    border: '1px solid var(--t-line-on-dark)',
    borderRadius: 2,
    padding: '24px 22px 22px',
    background: 'color-mix(in srgb, var(--t-accent) 4%, transparent)',
    display: 'flex', flexDirection: 'column', gap: 14,
  }}>
    {/* Row 1 — small-caps tag */}
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      gap: 12, flexWrap: 'wrap',
    }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 10.5, letterSpacing: '0.30em', textTransform: 'uppercase',
        color: 'var(--t-accent)',
      }}>
        Gap 0{index}
      </div>
      <div style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 22, color: 'var(--t-text-on-dark)', letterSpacing: '-0.005em',
      }}>
        {label}
      </div>
    </div>

    {/* Row 2 — the giant stat */}
    <div style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 'clamp(58px, 18vw, 78px)', lineHeight: 0.92,
      letterSpacing: '-0.03em', color: 'var(--t-text-on-dark)',
      textShadow: '0 0 28px color-mix(in srgb, var(--t-accent) 24%, transparent)',
    }}>
      {stat}
      {statSuffix ? (
        <span style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 'clamp(36px, 11vw, 48px)', letterSpacing: '-0.02em',
          color: 'var(--t-text-on-dark-2)', marginLeft: 4,
        }}>{statSuffix}</span>
      ) : null}
    </div>

    {/* Row 3 — descriptor */}
    <p style={{
      fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.65,
      color: 'var(--t-text-on-dark-2)', margin: 0,
    }}>
      {descriptor}
    </p>

    {/* Row 4 — italic verdict, hairline above */}
    <div style={{
      borderTop: '1px solid var(--t-line-on-dark)',
      paddingTop: 14, marginTop: 2,
      fontFamily: 'var(--font-display)', fontStyle: 'italic',
      fontSize: 17, lineHeight: 1.3, color: 'var(--t-text-on-dark)',
      letterSpacing: '-0.005em',
    }}>
      {verdict}
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// DestinyEmbodied — Section B. The Art of Living Digitally™
// Embodied. The page's institutional weight rests here.
// Forest-green structural ground. Sections:
//   1) Skills + Lifestyle = Culture · the doctrine sentence
//   2) THE VISION · "A lifestyle of digital fluency…"
//   3) WHY THIS EXISTS · The Three Gaps (diagram)
//   4) Unifying line · "The interest is already here…"
//   5) Sources line
//   6) Closing paragraph · 37 → 52% shift
//   7) Primary CTA · "Enter 7 Days of Living Digitally
//      Signature Program"
//   8) Brand sign-off · "Digital literacy as inheritance,
//      not interruption."
// The section anchor is #access (preserved for incoming
// header / hero links) and also exposes #embodied.
// ─────────────────────────────────────────────────────────────
const DestinyEmbodied = () => (
  <section id="access" data-screen-label="Destiny · 03 Embodied"
    style={{
      background: 'var(--t-structure)',
      color: 'var(--t-text-on-dark)',
      padding: '72px 24px 84px',
      position: 'relative',
    }}>
    <span id="embodied" style={{ position: 'absolute', top: -64 }} />

    {/* ── 1 · Section nameplate + doctrine sentence ────────── */}
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 700,
      fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
      color: 'var(--t-accent)',
      filter: 'drop-shadow(0 0 10px color-mix(in srgb, var(--t-accent) 45%, transparent))',
      margin: '0 0 18px',
    }}>
      The Art of Living Digitally<sup style={{ fontSize: 7 }}>™</sup> · Embodied
    </div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 'clamp(34px, 10vw, 48px)', lineHeight: 1.02,
      letterSpacing: '-0.018em',
      color: 'var(--t-text-on-dark)',
      margin: '0 0 24px',
    }}>
      <span style={{ color: 'var(--t-accent)' }}>Skills</span>{' '}
      <span style={{ color: 'var(--t-text-on-dark)' }}>+</span>{' '}
      <span style={{ color: 'var(--t-accent)' }}>Lifestyle</span>{' '}
      <span style={{ color: 'var(--t-text-on-dark)' }}>=</span>{' '}
      <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--t-accent)' }}>Culture.</em>
    </h2>

    <p style={{
      fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
      color: 'var(--t-text-on-dark-2)', margin: '0 0 16px', maxWidth: 460,
    }}>
      The institution holds these three terms in steady relation.
      <strong style={{ color: 'var(--t-text-on-dark)', fontWeight: 600 }}>{' '}Skills</strong>{' '}
      are the competencies of digital life.
      <strong style={{ color: 'var(--t-text-on-dark)', fontWeight: 600 }}>{' '}Lifestyle</strong>{' '}
      is the voice in which those competencies are spoken into
      daily life.
      <strong style={{ color: 'var(--t-text-on-dark)', fontWeight: 600 }}>{' '}Culture</strong>{' '}
      is what emerges when the two are held together over time —
      transmissible across generations.
    </p>
    <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> is where
      that doctrine becomes practice in the lives of the women who
      claim a seat. Through cohorts, curriculum, and a private
      community, we teach the competencies of digital life to women,
      and hold the lifestyle in common
      with those who claim a seat.
    </p>
    <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: '8px 0 0', maxWidth: 460,
    }}>
      The institution holds the doctrine. The platform teaches it.
      The community lives it.
    </p>

    {/* ── 2 · THE VISION ──────────────────────────────────── */}
    <div style={{ marginTop: 56 }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.34em', textTransform: 'uppercase',
        color: 'var(--t-accent)', marginBottom: 14,
      }}>
        The Vision
      </div>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(28px, 8vw, 36px)', lineHeight: 1.16,
        letterSpacing: '-0.012em',
        color: 'var(--t-text-on-dark)',
        margin: '0 0 18px', maxWidth: 460,
      }}>
        <em style={{ fontStyle: 'italic', fontWeight: 400 }}>
          A lifestyle of digital fluency,
        </em>{' '}held in common across generations.
      </h3>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.78,
        color: 'var(--t-text-on-dark-2)', margin: 0, maxWidth: 460,
      }}>
        Here, we develop competencies of digital life that are read,
        written, &amp; inherited as fluently as your native tongue.
        Where the lifestyle is spoken in every woman's own voice. The
        way we move through digital spaces &amp; our digital
        citizenship become something daughters and sons are handed.
      </p>
    </div>

    {/* ── 3 · WHY THIS EXISTS · The Three Gaps ─────────────── */}
    <div style={{ marginTop: 64 }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.34em', textTransform: 'uppercase',
        color: 'var(--t-accent)', marginBottom: 14,
      }}>
        Why this exists · The three gaps
      </div>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.78,
        color: 'var(--t-text-on-dark-2)', margin: '0 0 28px', maxWidth: 460,
      }}>
        Here is what the numbers are actually saying. Women want to
        learn and use tech more in their daily lives. The trust is
        not there yet, especially around AI. Big Tech is not pumping
        funding into filling the gap. As women of old, we built this
        for us. Living Digitally<sup style={{ fontSize: 9 }}>™</sup> exists in that gap — on purpose.
      </p>

      <div style={{
        display: 'flex', flexDirection: 'column', gap: 16,
        maxWidth: 460,
      }}>
        <GapCard
          index={1} label="Interest"
          stat="52" statSuffix="%"
          descriptor="of ChatGPT users were women by the end of July 2025."
          verdict="Interest is not the problem."
        />
        <GapCard
          index={2} label="Trust"
          stat="94" statSuffix="% / 6%"
          descriptor="94% of Black women are impressed by AI's capability — but only 6% trust how it is being used."
          verdict="Trust is the problem the industry won't name."
        />
        <GapCard
          index={3} label="Access"
          stat="800" statSuffix="M"
          descriptor="weekly ChatGPT users globally — and no equity-centered institution built to teach the women inside that number."
          verdict="Access without instruction is not access."
        />
      </div>

      {/* ── 4 · Unifying line beneath the diagram ────────── */}
      <div style={{
        marginTop: 22,
        paddingLeft: 0, maxWidth: 460,
      }}>
      </div>

      {/* ── 5 · Sources credit line ──────────────────────── */}
      <p style={{
        fontFamily: 'var(--font-body)', fontWeight: 500,
        fontSize: 10.5, letterSpacing: '0.10em',
        color: 'var(--t-text-on-dark-2)', margin: '0 0 0', maxWidth: 460,
        opacity: 0.82,
      }}>
        Sources: Brookings Institution (2025); OpenAI Usage Report (2025); McKinsey State of AI (2025).
      </p>
    </div>

    {/* ── 6 · Closing paragraph ─────────────────────────── */}
    <p style={{
      fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
      color: 'var(--t-text-on-dark-2)', margin: '52px 0 36px', maxWidth: 460,
    }}>
      Women now make up the majority of ChatGPT users worldwide.
      The jump from <Pull style={{ color: 'var(--t-accent)', borderBottomColor: 'color-mix(in srgb, var(--t-accent) 55%, transparent)' }}>37%</Pull> in January 2024 to{' '}
      <Pull style={{ color: 'var(--t-accent)', borderBottomColor: 'color-mix(in srgb, var(--t-accent) 55%, transparent)' }}>52%</Pull> in July 2025 is not a trend. It is a permanent
      shift in who is driving the digital economy. Living Digitally<sup style={{ fontSize: 9 }}>™</sup> meets that shift in real time — with structure,
      dignity, and a core curriculum that recognizes women are
      already inside the door.
    </p>

    {/* ── 7 · Primary CTA ───────────────────────────────── */}
    <a href="/signature-program" style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 16, padding: '18px 20px',
      background: 'var(--t-accent)', color: 'var(--t-navy)',
      borderBottom: 'none', borderRadius: 2,
      fontFamily: 'var(--font-body)', fontWeight: 700,
      fontSize: 11.5, letterSpacing: '0.18em', textTransform: 'uppercase',
      boxShadow: '0 0 30px color-mix(in srgb, var(--t-accent) 35%, transparent)',
      maxWidth: 460, width: '100%',
      lineHeight: 1.25, textWrap: 'pretty',
    }}>
      <span>Enter 7 Days of Living Digitally Signature Program</span>
      <span aria-hidden="true">→</span>
    </a>
  </section>
);

// Legacy alias — destiny-closing.jsx mounts DestinyAccess as
// part of the page composition. Wire the embodied section
// to the same export name so DestinyPage continues to work
// without a closing-file rewrite.
const DestinyAccess = DestinyEmbodied;

Object.assign(window, { DestinyRetreat, DestinyAccess, DestinyEmbodied, GapCard });
