// keisha-hero.jsx — Keisha Lifestyle hero.
//
// Beats:
//   1. Centered FOR / The Architect Mom / WHO'S ALREADY
//      RUNNING EVERYTHING. cover masthead.
//   2. Hero photograph (kitchen) with italic brass "Keisha."
//      pinned bottom-left.
//   3. Pull quote — set apart, featured, italic Garamond:
//      "She does not call herself tech-savvy. She uses more
//       technology daily than most people who do."
//   4. Body block (three short paragraphs) on the running.

const KeishaHero = () => (
  <section data-screen-label="Keisha · 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 Architect Mom
      </h1>
      <div style={{
        marginTop: 8,
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 9.5, letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'var(--t-accent)',
      }}>Who's Already Running Everything.</div>
    </div>

    {/* COVER PHOTOGRAPH · "Keisha." cover line ───────────── */}
    <div style={{ position: 'relative', marginTop: 2 }}>
      <img
        src="assets/persona-keisha-kitchen.png"
        alt="Keisha at her kitchen table at 9:02 AM. She is seated in cream pajamas, holding a steaming mug, with a navy monogrammed planner open beside her and a tablet displaying the 7 Days of Living Digitally™ dashboard. Soft morning light fills the white kitchen behind her."
        style={{
          display: 'block', width: '100%',
          aspectRatio: '16 / 9', objectFit: 'cover',
          objectPosition: 'center 35%',
          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: '38%',
        background: 'linear-gradient(180deg, rgba(46,24,16,0) 0%, rgba(46,24,16,0.55) 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-2)',
          textShadow: '0 1px 18px rgba(46,24,16,0.85), 0 0 2px rgba(46,24,16,0.75)',
        }}>Keisha.</div>
      </div>
    </div>

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

    {/* PULL QUOTE — featured, set apart from body ────────── */}
    <figure style={{
      margin: '34px 0 0', padding: 0,
      maxWidth: 460,
    }}>
      {/* brass hairline above + below to set the quote apart */}
      <div aria-hidden="true" style={{
        height: 1, width: 36, background: 'var(--t-accent)',
        marginBottom: 22,
      }} />
      <blockquote style={{
        margin: 0, padding: 0,
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 'clamp(24px, 7vw, 30px)', lineHeight: 1.22,
        letterSpacing: '-0.012em',
        color: 'var(--t-text)',
        textWrap: 'pretty',
      }}>
        "She does not call herself '<span style={{ color: 'var(--t-accent)' }}>tech-savvy</span>'.{' '}
        She uses more technology daily than people who self-identify as '<span style={{ color: 'var(--t-accent)' }}>tech-savvy</span>'."
      </blockquote>
    </figure>

    {/* BODY · three short paragraphs on the running ───────── */}
    <div style={{ padding: '28px 0 0' }}>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-2)', margin: '0 0 14px', maxWidth: 460,
        textWrap: 'pretty',
      }}>
        She runs the morning. She runs the calendar. She does work
        she has not been formally trained on.
      </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',
      }}>
        Living Digitally<sup style={{ fontSize: 9 }}>™</sup> is the
        platform where she stops running{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>'on automatic'</em>{' '}
        &amp; starts employing systems{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>for her household</em>.
      </p>
    </div>
  </section>
);

Object.assign(window, { KeishaHero });