// destiny-hero.jsx — Destiny Lifestyle hero.
//
// Beats:
//   1. Centered FOR / The Quiet Riser / WHO'S ALREADY RISING.
//      cover masthead (no glyph row above).
//   2. Cover photograph with italic aqua "Destiny." pinned at
//      the bottom-left.
//   3. Hairline → voice line block. Editorial italic opener
//      ("The Retreat is where hustle culture is replaced by
//       systems that scale.") followed by three institutional
//      paragraphs (the room → the route → the community), then
//      the slogan close "Welcome to The Tech Lifestyle."
//   4. From → To CTA module: "From Selecting the Door to… →
//      Becoming a Resident" with the new subtext.

const DestinyHero = () => (
  <section data-screen-label="Destiny · 01 Hero" style={{
    background: 'var(--t-ground)',
    color: 'var(--t-text)',
    padding: '8px 22px 44px',
    position: 'relative',
  }}>
    {/* COVER MASTHEAD ─────────────────────────────────────── */}
    <div style={{ textAlign: 'center', padding: '18px 0 20px' }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 10, letterSpacing: '0.34em', textTransform: 'uppercase',
        color: 'var(--t-text-2)', marginBottom: 8,
      }}>For</div>
      <h1 style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 46, lineHeight: 0.98, letterSpacing: '-0.018em',
        color: 'var(--t-text)', margin: 0,
      }}>
        The Quiet Riser
      </h1>
      <div style={{
        marginTop: 8,
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 9.5, letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'var(--t-structure)',
      }}>Who's Already Rising.</div>
    </div>

    {/* COVER PHOTOGRAPH · "Destiny." cover line ───────────── */}
    <div style={{ position: 'relative', marginTop: 2 }}>
      <img
        src="assets/persona-destiny-retreat.png"
        alt="Destiny seated on a forest-green velvet sofa in her Charlotte high-floor apartment at dusk. A Madonna & Child painting hangs centered above the sofa, the city skyline visible through floor-to-ceiling windows on the left."
        style={{
          display: 'block', width: '100%',
          aspectRatio: '16 / 9', objectFit: 'cover',
          background: 'var(--t-structure)',
          border: '1px solid var(--t-line)',
          borderRadius: 2,
          filter: 'var(--t-photo-filter)',
        }}
      />
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '34%',
        background: 'linear-gradient(180deg, rgba(13,27,61,0) 0%, rgba(13,27,61,0.62) 100%)',
        borderBottomLeftRadius: 2, borderBottomRightRadius: 2,
      }} />
      <div style={{
        position: 'absolute', left: 18, right: 18, bottom: 18,
        pointerEvents: 'none',
      }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic',
          fontSize: 44, lineHeight: 1.0, letterSpacing: '-0.005em',
          color: 'var(--t-accent)',
          textShadow: '0 1px 18px rgba(13,27,61,0.70), 0 0 2px rgba(13,27,61,0.65)',
        }}>Destiny.</div>
      </div>
    </div>

    <hr style={{
      border: 'none', borderTop: '1px solid var(--t-line)',
      margin: '32px 0 0',
    }} />

    {/* VOICE LINE BLOCK · the new institutional voice ────── */}
    <div style={{ padding: '32px 0 0' }}>
      <p style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 30, lineHeight: 1.14, letterSpacing: '-0.012em',
        color: 'var(--t-text)', margin: 0, textWrap: 'pretty',
      }}>
        <em style={{ fontStyle: 'italic', fontWeight: 400 }}>
          The Retreat is where hustle culture is replaced by{' '}
          <span style={{ color: 'var(--t-gold)' }}>systems that scale.</span>
        </em>
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.75,
        color: 'var(--t-text-2)',
        margin: '26px 0 0', maxWidth: 420,
      }}>
        The work gets quieter. Routines take shape. The rise starts
        to compound. This is the room where the quiet rise is
        recognized as{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-text)' }}>strategy</em>{' '}
        — the vehicle that carries the Resident through the
        intersection of{' '}
        <span style={{ color: 'var(--t-gold)' }}>digital literacy, lifestyle, and access.</span>
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.75,
        color: 'var(--t-text-2)',
        margin: '14px 0 0', maxWidth: 420,
      }}>
        You're not behind. You're choosing the route that compounds.
        The structure you build now becomes the operating system
        you'll carry into the decade ahead. Discipline becomes
        infrastructure. The rise looks effortless because it's
        actually engineered.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.75,
        color: 'var(--t-text-2)',
        margin: '14px 0 0', maxWidth: 420,
      }}>
        Inside Living Digitally<sup style={{ fontSize: 9 }}>™</sup> you
        become a Resident of{' '}
        <span style={{ color: 'var(--t-gold)' }}>The Tech Lifestyle</span> — a
        private community of women learning to use AI and technology
        intentionally to simplify their lives. The work is taught in
        cohorts, lived in community, and translates into real
        outcomes: more focus, higher income, calmer households,
        better decisions. Destiny is one of five Lifestyle Personas,
        each with a door you can walk through. Hers is the quiet
        riser's route. Yours may be another. All belong here.
      </p>

      {/* Slogan sign-off line — the brand close. */}
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 22, lineHeight: 1.25, letterSpacing: '-0.008em',
        color: 'var(--t-text)',
        margin: '24px 0 0',
      }}>
        Welcome to{' '}
        <span style={{ color: 'var(--t-gold)' }}>The Tech Lifestyle.</span>
      </p>
    </div>

    {/* FROM → TO CTA module ──────────────────────────────── */}
    <div style={{
      marginTop: 36, display: 'flex', flexDirection: 'column',
      gap: 18, alignItems: 'flex-start',
    }}>
      <a href="/signature-program" style={{
        display: 'inline-block',
        textDecoration: 'none', borderBottom: 'none',
        color: 'inherit', maxWidth: 420,
      }}>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
          color: 'var(--t-gold)', marginBottom: 12,
        }}>
          From Selecting the Door to…
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 14,
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 15, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--t-text)',
          paddingBottom: 10,
          borderBottom: '1.5px solid var(--t-accent)',
        }}>
          <span>Becoming a Resident</span>
          <span style={{ color: 'var(--t-accent)', fontWeight: 600 }}>→</span>
        </div>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6,
          color: 'var(--t-text-2)',
          margin: '16px 0 0', maxWidth: 420,
        }}>
          A doorway is just a beginning. Evolving as a Resident
          takes shape — at the intersection of digital literacy,
          lifestyle, and access.
        </p>
      </a>
      <a href="/foyer-faq" style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 15, lineHeight: 1.2,
        color: 'var(--t-text-2)',
        borderBottom: '1px solid var(--t-line-strong)',
        paddingBottom: 2,
      }}>Compare all three doorways</a>
    </div>
  </section>
);

Object.assign(window, { DestinyHero });