// brenda-hero.jsx — Editorial ACCESS hero for The Matriarch Upgrading.
// Antique-gold museum room with sculptural portrait + voice line + a
// single primary CTA. Mobile-first artboard. The page transitions to
// cream immediately under this — the architecture is the hand-off.

const BrendaHero = () => (
  <section data-screen-label="Brenda · 01 Hero · Antique Gold" style={{
    background:
      'radial-gradient(ellipse at 22% 18%, rgba(232,180,90,0.45) 0%, rgba(232,180,90,0) 55%),' +
      'radial-gradient(ellipse at 80% 92%, rgba(201,162,74,0.28) 0%, rgba(201,162,74,0) 60%),' +
      'linear-gradient(165deg, #2A1B05 0%, #4A2F08 38%, #6B4810 68%, #4A2F08 100%)',
    color: 'var(--ld-pearl-100)',
    padding: '18px 22px 36px',
    position: 'relative',
    overflow: 'hidden',
  }}>
    {/* Bokeh flecks — hand-placed warm pin-pricks of light, echoing the
        bokeh in the visual reference. Pure CSS so the page stays
        lightweight; positions chosen to read as scattered, not patterned. */}
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage:
        'radial-gradient(circle at 12% 28%, rgba(255,210,140,0.30) 0, transparent 5px),' +
        'radial-gradient(circle at 36% 16%, rgba(255,210,140,0.20) 0, transparent 4px),' +
        'radial-gradient(circle at 86% 32%, rgba(255,210,140,0.24) 0, transparent 5px),' +
        'radial-gradient(circle at 14% 70%, rgba(255,210,140,0.22) 0, transparent 6px),' +
        'radial-gradient(circle at 72% 78%, rgba(255,210,140,0.18) 0, transparent 4px),' +
        'radial-gradient(circle at 50% 90%, rgba(255,210,140,0.16) 0, transparent 4px)',
    }} />

    {/* ── Editorial framing · TOP ROW ─────────────────────────
        Issue dateline and character identifier removed per direction.
        The aqua glyph holds the top as a quiet anchor, the way the
        cover masthead below it carries the page identity on its own. */}
    <div style={{
      position: 'relative', zIndex: 2,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      paddingBottom: 14, borderBottom: '1px solid rgba(244,235,217,0.22)',
    }}>
      <div style={{
        width: 18, height: 18,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--ld-aqua)',
        textShadow: '0 0 14px rgba(95,224,230,0.55)',
        fontSize: 16, lineHeight: 1,
      }}>✦</div>
    </div>

    {/* ── Cover masthead ──────────────────────────────────────
        "FOR" kicker → "The Matriarch" set in display italic →
        secondary line. Mirrors the masthead pattern established on
        Jasmine's cover, in the same editorial register. */}
    <div style={{
      position: 'relative', zIndex: 2,
      textAlign: 'center', padding: '20px 0 18px',
    }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 10, letterSpacing: '0.34em', textTransform: 'uppercase',
        color: 'rgba(244,235,217,0.7)', marginBottom: 6,
      }}>For</div>
      <h1 style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 44, lineHeight: 0.98, letterSpacing: '-0.018em',
        color: 'var(--ld-pearl-100)', margin: 0,
      }}>
        The Matriarch
      </h1>
      <div style={{
        marginTop: 6,
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 9.5, letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'var(--ld-aqua)',
      }}>Her Next Chapter.</div>
    </div>

    {/* ── The cover photograph ────────────────────────────────
        The visual reference IS the hero portrait — sculptural Black-woman
        bust in the printed silk scarf, deep antique gold ground. The
        composition carries museum-gravitas exactly as the brief locks. */}
    <div style={{ position: 'relative', marginTop: 2, zIndex: 2 }}>
      <img
        src="assets/brenda-visual-reference.jpg"
        alt="Brenda — The Matriarch Upgrading. Seated portrait inside the Memphis Legacy Library."
        style={{
          display: 'block', width: '100%',
          aspectRatio: '16 / 9', objectFit: 'cover', objectPosition: '28% 50%',
          background: '#3a2509',
          border: '1px solid rgba(244,235,217,0.18)',
          borderRadius: 2,
        }}
      />
      {/* A whisper-soft scrim at the bottom so the coverline reads against
          the warm gold field of the lower portrait. */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '34%',
        background: 'linear-gradient(180deg, rgba(13,9,2,0) 0%, rgba(13,9,2,0.55) 100%)',
        borderBottomLeftRadius: 2, borderBottomRightRadius: 2,
      }} />
      {/* Coverline — name only. The role-line kicker has been removed so
          the photograph reads as a portrait, not a credential. */}
      <div style={{
        position: 'absolute', left: 18, right: 18, bottom: 18,
        pointerEvents: 'none',
      }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic',
          fontSize: 32, lineHeight: 1.0, letterSpacing: '-0.005em',
          color: 'var(--ld-pearl-100)',
          textShadow: '0 1px 14px rgba(13,9,2,0.7)',
        }}>Brenda.</div>
      </div>
    </div>

    {/* Hairline beneath the photograph — separates portrait from voice line */}
    <hr style={{
      position: 'relative', zIndex: 2,
      border: 'none', borderTop: '1px solid rgba(244,235,217,0.22)',
      margin: '28px 0 0',
    }} />

    {/* ── Voice line — the brand's letter to Brenda ──────────
        Set as display italic on the gold ground, the single largest
        editorial moment on the page. Aqua is held entirely off this
        block — letting the typography carry the gravity. */}
    <div style={{ position: 'relative', zIndex: 2, padding: '28px 0 0' }}>
      {/* Voice line — set as one flowing block so "Now let's build" sits
          immediately after "wisdom." The line wrap then falls naturally
          where the column ends — "Now let's build the digital" reads on
          the same line as wisdom on the 430px mobile artboard, with the
          italic carrying the rhythm into the second sentence. */}
      <p style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontStyle: 'normal',
        fontSize: 32, lineHeight: 1.12, letterSpacing: '-0.012em',
        color: 'var(--ld-pearl-100)', margin: 0,
      }}>
        You've built a career on <em style={{
          fontStyle: 'italic', color: '#F0D9A4',
        }}>wisdom.</em>{' '}
        <span style={{ fontStyle: 'italic', fontWeight: 400 }}>
          Now let's build the <span style={{ color: 'var(--ld-aqua)', fontStyle: 'italic' }}>digital infrastructure</span> to carry it forward.
        </span>
      </p>

      {/* Secondary positioning block — multi-sentence editorial paragraph
          that names the translation work the platform actually performs
          (wisdom → infrastructure → reach), the day-one delivery (Core
          Curriculum), and what the Resident walks away from the
          seven-day live cohort knowing how to do. Held at body-type
          size so the voice line above it remains the dominant moment. */}
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.75,
        color: 'rgba(244,235,217,0.86)',
        margin: '28px 0 0', maxWidth: 420,
      }}>
        Living Digitally<sup style={{ fontSize: 9 }}>™</sup> is the editorial
        room that translates <em style={{ fontStyle: 'italic', color: '#F0D9A4' }}>wisdom into infrastructure</em>
        {' '}— so what you've already built can finally reach Gen Alpha.
      </p>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.75,
        color: 'rgba(244,235,217,0.78)',
        margin: '14px 0 0', maxWidth: 420,
      }}>
        Every Resident walks in and instantly gets the Core Curriculum —
        the tech foundation that pairs with the wisdom one you've already
        built. The seven-day live cohort inside <span style={{ color: 'var(--ld-aqua)' }}>The Tech Lifestyle</span> is where you put it into practice.
      </p>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.75,
        color: 'rgba(244,235,217,0.78)',
        margin: '14px 0 0', maxWidth: 420,
      }}>
        By the end of the seven days, you'll navigate workplace platforms
        with confidence, your digital presence finally visible, AI woven
        in quietly to fill the gaps where it serves you.
      </p>
    </div>

    {/* ── CTA — editorial small caps, no pillow ──────────────
        Primary on aqua (the brand's one structural accent inside this
        gold field), tertiary as a quiet underline. Mirrors the CTA
        pattern from Jasmine's hero but routed to Level I rather than
        Access — because Brenda's path is observe, then decide. */}
    <div style={{
      position: 'relative', zIndex: 2,
      marginTop: 32, display: 'flex', flexDirection: 'column',
      gap: 18, alignItems: 'flex-start',
    }}>
      {/* Primary CTA — editorial "From → To" module.
          Mirrors the rhythm of Jasmine's homepage slogan block
          (small-caps eyebrow → bold headline with arrow → aqua
          underline), but tuned to Brenda's antique-gold field:
          aqua kept as the single structural accent (eyebrow +
          underline), headline rendered in the pearl/cream the
          rest of the hero copy uses so it reads as a piece of
          the museum room, not an applied web button. The whole
          block is the link target. */}
      <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(--ld-aqua)',
          marginBottom: 12,
        }}>
          From auntie with the answers
        </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(--ld-pearl-100)',
          paddingBottom: 10,
          borderBottom: '1.5px solid var(--ld-aqua)',
        }}>
          <span>To Editor of her Foundation</span>
          <span style={{ color: 'var(--ld-aqua)', fontWeight: 600 }}>→</span>
        </div>
        {/* Supporting line — mirrors the Jasmine "Learn to…" paragraph
            that sits beneath her From/To slogan: same body type, same
            indent under the aqua rule, same tonal hierarchy (eyebrow
            shouts, headline anchors, this line explains the promise in
            one breath). Slight em-dash break to keep Brenda's editorial
            cadence rather than Jasmine's straight declarative. */}
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6,
          color: 'rgba(244,235,217,0.86)',
          margin: '16px 0 0', maxWidth: 420,
        }}>
          Learn to lay the digital foundation that pairs with the wisdom
          one you've already built — without losing your voice on the
          way.
        </p>
      </a>
      <a href="#three-doorways" style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 14, lineHeight: 1.2,
        color: 'rgba(244,235,217,0.82)',
        borderBottom: '1px solid rgba(244,235,217,0.42)',
        paddingBottom: 2,
      }}>Explore the Legacy Library</a>
    </div>
  </section>
);

// Hand-off slab — a single hairline rule on cream sets the architectural
// transition from museum-gold gravitas to editorial-cream archive. The
// page does not buffer between rooms; the shift is itself the architecture.
const HeroToBodyHandoff = () => (
  <div aria-hidden="true" style={{
    background: 'var(--ld-pearl-50)',
    height: 1,
    borderTop: '1px solid var(--ld-line)',
  }} />
);

Object.assign(window, { BrendaHero, HeroToBodyHandoff });
