// keisha-about.jsx — About Lacey R. Hardy, JD — Mom & Founder.
//
// Section 4 — The doubling section. This page IS Keisha's
// Lifestyle page AND the About-the-Founder page. The
// Keeping Room ends on the Lacey↔Keisha bridge paragraph;
// this section opens on the same ground (champagne) and
// settles the reader in with the Founder's own voice.
//
// Pattern:
//   1) Brass eyebrow — ALSO IN THIS ROOM
//   2) Editorial headline — About Lacey R. Hardy, JD ·
//      Mom & Founder
//   3) Portrait inset (left) + opening paragraph (right)
//   4) Body — paragraphs in the Founder's own voice
//   5) Brass hairline → script signature → attribution

const KeishaAboutLacey = () => (
  <section id="about" data-screen-label="Keisha · 04 About Lacey"
    style={{
      background: 'var(--t-ground)',
      color: 'var(--t-text)',
      padding: '76px 24px 84px',
      position: 'relative',
      borderTop: '1px solid var(--t-line)',
    }}>

    {/* ── 1 · Brass eyebrow ─────────────────────────────────── */}
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 700,
      fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
      color: 'var(--t-accent)',
      marginBottom: 18,
    }}>
      Also In This Room
    </div>

    {/* ── 2 · Editorial headline — the section name ──────────
        Per direction, the name + credentials carry the
        headline weight on this section so it functions
        cleanly as the About page. */}
    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 'clamp(30px, 8.2vw, 40px)', lineHeight: 1.04,
      letterSpacing: '-0.018em',
      color: 'var(--t-text)',
      margin: '0 0 36px', maxWidth: 460,
    }}>
      About <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>
        Lacey R. Hardy, JD
      </em>{' '}· Mom &amp; Founder
    </h2>

    {/* ── 3 · Portrait inset + opening paragraph ───────────── */}
    <div style={{
      display: 'grid',
      gridTemplateColumns: '128px 1fr',
      gap: 22,
      alignItems: 'start',
      maxWidth: 460,
      marginBottom: 24,
    }}>
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 5',
        background: 'var(--t-structure)',
        border: '1px solid var(--t-line-strong)',
        borderRadius: 2,
        overflow: 'hidden',
        boxShadow: 'var(--t-shadow)',
      }}>
        <img
          src="assets/lacey-portrait.jpg"
          alt="Lacey R. Hardy, JD — a candid portrait. She rests her hand near her ear, wearing a denim jacket and pearl earring, looking softly to the side."
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            objectPosition: 'center 18%',
            display: 'block',
          }}
        />
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(46,24,16,0) 60%, rgba(46,24,16,0.30) 100%)',
        }} />
        <div aria-hidden="true" style={{
          position: 'absolute', left: 8, bottom: 8,
          fontFamily: 'var(--font-script)',
          fontSize: 18, color: 'var(--t-accent-2)',
          lineHeight: 1, letterSpacing: 0,
          textShadow: '0 1px 6px rgba(46,24,16,0.65)',
        }}>L.</div>
      </div>

      <div>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.78,
          color: 'var(--t-text)', margin: 0,
          textWrap: 'pretty',
        }}>
          I am as much a creative as I am an academic. There are
          draft essays on my desk, ecosystems being built in my
          notebooks, and photographs of ordinary things in my
          camera roll.
        </p>
      </div>
    </div>

    {/* ── 4 · Body — the Founder's own voice ───────────────── */}
    <div style={{ maxWidth: 460 }}>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-2)', margin: '0 0 16px',
        textWrap: 'pretty',
      }}>
        Spending the day in library archives and museums may be
        one of my favorite pastimes, but still make sure to
        invite me to the card party. I won't come every time,
        but when I do, the dance floor is in for a treat. At my
        core, I am a South Louisiana bred{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-text)' }}>
          BaptiCat
        </em>, who converted to Catholicism two years ago. I am
        always authentically me, no matter how I am perceived by
        the world.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-2)', margin: '0 0 16px',
        textWrap: 'pretty',
      }}>
        Three children keep this house honest. At ages twelve,
        ten, &amp; seventeen months, there is never a dull
        moment.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-2)', margin: '0 0 16px',
        textWrap: 'pretty',
      }}>
        It has been{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-text)' }}>
          137 days
        </em>{' '}since I last saw them. They have not been
        returned to me, despite the Judge's order. The immense
        grief and pain I am holding are indescribable. It has
        only been through the love of Jesus Christ, Mary the
        Mother of God, my church family, friends, &amp;
        community that I have been able to weather this storm.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-2)', margin: '0 0 16px',
        textWrap: 'pretty',
      }}>
        I can imagine the older two will have plenty to say
        about the work being built, as they often serve as my
        unofficial business partners. The youngest spent the
        first twelve months of his life in my lap, beside the
        laptop. I look forward to our reunion and simply being
        able to cook, laugh, and be with them.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.78,
        color: 'var(--t-text-2)', margin: '0 0 28px',
        textWrap: 'pretty',
      }}>
        I teach them that the love of Jesus is meant to be lived
        out through service &amp; through how you treat others.
        It is not enough to simply proclaim your faith.{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-text)' }}>
          Service is not a separate column on a resume, but a
          way of life.
        </em>{' '}Living Digitally<sup style={{ fontSize: 9 }}>™</sup>{' '}
        exists because the room a woman like Keisha needs did
        not exist. I did what the women before me did, and
        built. As my cousin Ernestine often tells me, "Use what
        you have." With what was on hand, I did just that.
      </p>

      {/* ── close · the line the section earns ─────────────── */}
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 'clamp(22px, 6.5vw, 26px)', lineHeight: 1.32,
        letterSpacing: '-0.008em',
        color: 'var(--t-text)', margin: '0 0 36px',
        textWrap: 'pretty',
      }}>
        This is the platform and room I built{' '}
        <span style={{ color: 'var(--t-accent)' }}>for others.</span>{' '}
        I am sitting in it too.
      </p>

      {/* ── 5 · Signature block ──────────────────────────── */}
      <div aria-hidden="true" style={{
        height: 1, width: 56, background: 'var(--t-accent)',
        margin: '0 0 20px',
      }} />

      <div style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 17, color: 'var(--t-text-2)',
        margin: '0 0 4px',
      }}>— Lacey</div>

      <div style={{
        fontFamily: 'var(--font-script)', fontWeight: 400,
        fontSize: 56, lineHeight: 1.0,
        color: 'var(--t-accent)',
        margin: '0 0 16px',
        letterSpacing: '-0.005em',
      }}>
        Lacey.
      </div>

      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: 'var(--t-text-2)',
        lineHeight: 1.55,
      }}>
        Founder · The Art of Living Digitally<sup style={{ fontSize: 7 }}>™</sup>
      </div>
    </div>
  </section>
);

Object.assign(window, { KeishaAboutLacey });
