// Founder.jsx — institutional record of the founder. Third-person, scholarly register.
// Three movements: I. Biography · II. Chronology · III. From Her Hand.
// Dash discipline: no em-dashes, no en-dashes, no compound-modifier hyphens.
// (wi-fi exception retained in pull quote.)

// ──────────────────────────────────────────────────────────────────────────
// HERO — institutional billboard. Name as title. Location anchor.
// ──────────────────────────────────────────────────────────────────────────
const FounderHero = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{
    position: 'relative',
    background: 'var(--ld-pearl-50)',
    paddingTop: isMobile ? 'clamp(56px, 12vw, 120px)' : 'clamp(96px, 12vw, 180px)',
    paddingBottom: isMobile ? 'clamp(44px, 9vw, 96px)' : 'clamp(72px, 9vw, 140px)',
    textAlign: 'center',
    overflow: 'hidden',
  }}>
    <div className="container-narrow">
      {/* Eyebrow — two lines, institutional record */}
      <div className="eyebrow-gold" style={{ marginBottom: 14 }}>
        An Institutional Record
      </div>
      <div className="eyebrow-ink" style={{ marginBottom: isMobile ? 24 : 32, color: 'var(--ld-ink-3)' }}>
        On the Founder
      </div>
      <hr className="rule-gold" style={{ margin: isMobile ? '0 auto 36px' : '0 auto 56px' }} />

      {/* Name — display + inline italic JD credential, Option B */}
      <h1 style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontWeight: 300,
        fontSize: isMobile ? 'clamp(36px, 10vw, 60px)' : 'clamp(52px, 7.2vw, 108px)',
        lineHeight: 1.02,
        letterSpacing: '-0.018em',
        color: 'var(--ld-navy)',
        margin: 0, textWrap: 'balance',
      }}>
        Lacey R. Hardy<span style={{
          fontFamily: 'Cormorant Garamond, serif',
          fontStyle: 'italic',
          color: 'var(--ld-gold)',
          fontSize: '0.5em',
          fontWeight: 400,
          letterSpacing: '0.02em',
          verticalAlign: 'baseline',
        }}>, JD</span>
      </h1>

      {/* Title */}
      <p style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontStyle: 'italic',
        fontWeight: 400,
        fontSize: isMobile ? 'clamp(15px, 4vw, 18px)' : 'clamp(20px, 2vw, 26px)',
        lineHeight: 1.4,
        color: 'var(--ld-ink-2)',
        margin: isMobile ? '24px auto 0' : '36px auto 0',
        textWrap: 'balance',
      }}>
        Founder, The Art of Living Digitally
        <sup style={{ fontSize: '0.5em', color: 'var(--ld-gold)' }}>™</sup>
      </p>

      <hr className="rule-gold" style={{ margin: isMobile ? '32px auto' : '48px auto' }} />

      {/* Defining line */}
      <p style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontWeight: 400,
        fontSize: isMobile ? 'clamp(17px, 4.6vw, 22px)' : 'clamp(22px, 2.4vw, 30px)',
        lineHeight: 1.45,
        color: 'var(--ld-navy)',
        maxWidth: 780,
        margin: '0 auto',
        textWrap: 'balance',
      }}>
        Architect of a cultural institution joining digital literacy,
        lifestyle, and access.
      </p>

      {/* Location anchor — small caps, enlarged */}
      <div style={{ marginTop: isMobile ? 'clamp(36px, 7vw, 64px)' : 'clamp(56px, 7vw, 88px)' }}>
        <div className="smallcap-display" style={{
          fontSize: isMobile ? 'clamp(14px, 3.6vw, 18px)' : 'clamp(20px, 1.9vw, 26px)',
          color: 'var(--ld-navy)',
          letterSpacing: isMobile ? '0.2em' : '0.26em',
          fontWeight: 500,
        }}>
          ·  St. Francisville, LA  ·
        </div>
      </div>
    </div>
  </section>
  );
};

// ──────────────────────────────────────────────────────────────────────────
// I. BIOGRAPHY — portrait plate + six-paragraph prose
// ──────────────────────────────────────────────────────────────────────────
const FounderBio = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{
    background: 'var(--ld-pearl-50)',
    paddingTop: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(80px, 10vw, 160px)',
    paddingBottom: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(80px, 10vw, 160px)',
    borderTop: '1px solid var(--ld-line)',
  }}>
    <div className="container" style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : 'minmax(180px, 1fr) minmax(0, 3fr)',
      gap: isMobile ? 32 : 'clamp(48px, 8vw, 120px)',
      alignItems: 'start',
    }}>
      <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
        <div className="eyebrow-gold" style={{ marginBottom: 18 }}>I.</div>
        <div className="smallcap-display" style={{
          fontSize: 22, color: 'var(--ld-navy)', lineHeight: 1.2, fontWeight: 400,
        }}>
          Biography
        </div>
        <hr className="rule-gold" style={{ marginTop: 20, width: 36 }} />
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(0, 1.4fr)',
        gap: isMobile ? 32 : 'clamp(40px, 5vw, 72px)',
        alignItems: 'start',
      }}>
        {/* Portrait plate — institutional reservation */}
        <figure style={{ margin: 0, position: isMobile ? 'static' : 'sticky', top: 120 }}>
          <div style={{
            position: 'relative',
            background: 'var(--ld-pearl-100)',
            padding: isMobile ? 14 : 'clamp(16px, 2vw, 28px)',
            boxShadow: '0 24px 60px rgba(13,27,61,0.12), 0 6px 12px rgba(13,27,61,0.08)',
            border: '1px solid rgba(13,27,61,0.08)',
          }}>
            <div style={{
              aspectRatio: '4 / 5',
              border: '1px solid var(--ld-line)',
              overflow: 'hidden',
              background: 'var(--ld-pearl-100)',
            }}>
              <img
                src="assets/founder-portrait.png"
                alt="Lacey R. Hardy, JD — Founder, The Art of Living Digitally"
                style={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                  display: 'block',
                  filter: 'contrast(1.02) saturate(0.98)',
                }}
              />
            </div>
          </div>
          <figcaption style={{
            fontFamily: 'Montserrat, sans-serif', fontWeight: 600,
            fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
            color: 'var(--ld-ink-3)',
            marginTop: 18, textAlign: 'center',
          }}>
            Plate I · The Founder
          </figcaption>
          <div style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontStyle: 'italic',
            fontSize: 13,
            color: 'var(--ld-ink-3)',
            marginTop: 6,
            textAlign: 'center',
            lineHeight: 1.5,
          }}>
            Lacey R. Hardy, JD
          </div>
        </figure>

        {/* Six-paragraph bio */}
        <div>
          {/* Opening — display weight */}
          <p style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontWeight: 400,
            fontSize: isMobile ? 'clamp(17px, 4.6vw, 22px)' : 'clamp(22px, 2vw, 28px)',
            lineHeight: 1.45,
            color: 'var(--ld-navy)',
            margin: 0, textWrap: 'pretty',
          }}>
            Lacey R. Hardy, JD, a graduate of Southern University Law
            Center, is the founder of The Art of Living Digitally
            <sup style={{ fontSize: '0.5em', color: 'var(--ld-gold)' }}>™</sup>.
            Her work brings literacy, lifestyle, and access together. These
            are the three terms by which the institution measures a culture.
          </p>

          <hr style={{ border: 'none', borderTop: '1px solid var(--ld-line)', margin: isMobile ? '28px 0' : '40px 0', width: 80 }} />

          {/* Small business room */}
          <p style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: isMobile ? 15 : 17, lineHeight: 1.8,
            color: 'var(--ld-ink-2)',
            margin: '0 0 24px',
          }}>
            Her early career took shape across two unrelated rooms. In the
            small business room, she founded The Brown Girls' Beverages Corp,
            a consumer brand. It began when Kimber Paynes did an "All Call"
            on social media for the "Bet on Yourself" popup shop. As it
            developed, it became available via online channels. The brand
            was sold in person exclusively at Grandmother's Buttons, in the
            founder's hometown.
          </p>

          {/* Institutional room */}
          <p style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: isMobile ? 15 : 17, lineHeight: 1.8,
            color: 'var(--ld-ink-2)',
            margin: '0 0 24px',
          }}>
            In the institutional room, she did Title IX work and diversity
            and inclusion training. The work happened inside organizations
            negotiating their own definitions of belonging.
          </p>

          {/* The lesson — stands alone for emphasis */}
          <p style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontStyle: 'italic',
            fontWeight: 400,
            fontSize: isMobile ? 'clamp(16px, 4.4vw, 20px)' : 'clamp(20px, 1.8vw, 24px)',
            lineHeight: 1.55,
            color: 'var(--ld-navy)',
            margin: isMobile ? '28px 0' : '40px 0',
            paddingLeft: isMobile ? 20 : 28,
            borderLeft: '1px solid var(--ld-gold)',
            textWrap: 'pretty',
          }}>
            The two rooms taught the same lesson in different vocabularies.
            Systems of access are inherited before they are chosen, and the
            work of any honest institution is to extend the inheritance.
          </p>

          {/* The doctrine bridge */}
          <p style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: isMobile ? 15 : 17, lineHeight: 1.8,
            color: 'var(--ld-ink-2)',
            margin: '0 0 24px',
          }}>
            That conviction carried her into the early study of digital
            citizenship as a way of life. She set aside a native application
            for D&amp;I training in order to participate in the Beta cohort
            of{' '}
            <span style={{ fontStyle: 'italic', color: 'var(--ld-navy)' }}>
              Jenna Soard's Secret AI Society
            </span>
            . The doctrine that now organizes The Art of Living Digitally
            <sup style={{ fontSize: '0.6em', color: 'var(--ld-gold)' }}>™</sup>{' '}
            was sharpened in that room.
          </p>

          {/* Motherhood / inheritance */}
          <p style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: isMobile ? 15 : 17, lineHeight: 1.8,
            color: 'var(--ld-ink-2)',
            margin: 0,
          }}>
            She is the mother of three. The institution she stewards is a
            cultural inheritance, for them, and for the world.
          </p>
        </div>
      </div>
    </div>
  </section>
  );
};

// ──────────────────────────────────────────────────────────────────────────
// II. CHRONOLOGY — seven Acts, scholarly register
// ──────────────────────────────────────────────────────────────────────────
const FounderChronology = () => {
  const isMobile = useIsMobile();
  const acts = [
    {
      act: 'Act I.',
      year: '2015 to 2017',
      kind: 'Institutional',
      title: 'Title IX Advisor and Perkins Grant Administrator, CLTCC',
      desc: "Served as Title IX Confidential Advisor and Perkins Grant Administrator at Central Louisiana Technical Community College. Secured funding for Louisiana's first Nontraditional Gender Career Campaign, produced as radio and television commercials throughout Central Louisiana, with an accompanying student planner distributed to high school seniors across CENLA. The Title IX work was accompanied by diversity and inclusion training inside the institution.",
    },
    {
      act: 'Act II.',
      year: '2019 to 2021, reactivated 2026',
      kind: 'Practice',
      title: 'Independent Consulting',
      desc: "Founded a business consulting practice serving businesses and nonprofits. Most notable engagement: securing funding from multiple sources for the St. Gabriel Mayor's Youth Council. The practice was reactivated in 2026 alongside the founding of the present institution.",
    },
    {
      act: 'Act III.',
      year: '2019 to 2022',
      kind: 'Institutional',
      title: 'Title IX System Level Practice, LCTCS',
      desc: 'Promoted to system level Title IX work for the Louisiana Community and Technical College System. The room where systems of access were studied at close range across multiple institutions.',
    },
    {
      act: 'Act IV.',
      year: '2020 to present',
      kind: 'Commerce',
      title: "The Brown Girls' Beverages Corp",
      desc: (
        <>
          What began as a popup lemonade sale at Kimber Paynes' "Bet on
          Yourself" event in Baton Rouge grew into The Brown Girls'
          Beverages Corp, the parent corporation that now anchors the
          institution's legal architecture. Retail partnerships included
          Junior League of Baton Rouge Hollydays (sponsor), Holls Special
          Events (featured), and Grandmother's Buttons of St. Francisville,
          Louisiana (stocked). Brand campaigns highlighted issues affecting
          girls. Archive:{' '}
          <a
            href="https://www.instagram.com/thebrowngirlsforever?igsh=OXhpMm82OHF5aHd1"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              fontStyle: 'italic',
              color: 'var(--ld-navy)',
              borderBottom: '1px solid var(--ld-gold)',
              paddingBottom: 1,
            }}
          >
            thebrowngirlsforever
          </a>{' '}
          on Instagram.
        </>
      ),
    },
    {
      act: 'Act V.',
      year: 'Spring 2025',
      kind: 'Beta Cohort',
      title: "Jenna Soard's Secret AI Society",
      desc: "Participated in the Beta cohort of Jenna Soard's Secret AI Society, an early study of digital citizenship inside a closed community. The cohort served as a working blueprint for what an institutional digital practice could be.",
    },
    {
      act: 'Act VI.',
      year: 'February 2026',
      kind: 'Rebrand',
      title: 'From Lacey & Tech™ to The Art of Living Digitally™',
      desc: 'Recognized in late 2025 that the doctrine had shifted. Formally completed the rebrand in February 2026, retiring the original Lacey & Tech™ identity and founding the present institution. The doctrine was articulated in its extended form as the long articulation of the work.',
    },
    {
      act: 'Act VII.',
      year: '2026',
      kind: 'Founding Year',
      title: 'The Impact Launch',
      desc: "The institution's public founding. The homepage, the doctrine, the letter, and the first articulation of the brand hierarchy.",
    },
  ];

  return (
    <section style={{
      background: 'var(--ld-pearl-100)',
      paddingTop: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(96px, 12vw, 180px)',
      paddingBottom: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(96px, 12vw, 180px)',
      borderTop: '1px solid var(--ld-line)',
    }}>
      <div className="container" style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(180px, 1fr) minmax(0, 3fr)',
        gap: isMobile ? 32 : 'clamp(48px, 8vw, 120px)',
        alignItems: 'start',
      }}>
        <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
          <div className="eyebrow-gold" style={{ marginBottom: 18 }}>II.</div>
          <div className="smallcap-display" style={{
            fontSize: 22, color: 'var(--ld-navy)', lineHeight: 1.2, fontWeight: 400,
          }}>
            Chronology
          </div>
          <hr className="rule-gold" style={{ marginTop: 20, width: 36 }} />
          <p style={{
            fontFamily: 'Montserrat, sans-serif', fontSize: 13, lineHeight: 1.75,
            color: 'var(--ld-ink-3)', marginTop: 24, maxWidth: 240,
          }}>
            The rooms that shaped the institution, in order. Each entry is
            one act in the story.
          </p>
        </div>

        <div>
          {acts.map((e, i) => (
            <article key={e.act} style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '140px 1fr',
              gap: isMobile ? 14 : 'clamp(24px, 4vw, 56px)',
              padding: isMobile ? '28px 0' : '44px 0',
              borderTop: i === 0 ? '1px solid var(--ld-line)' : 'none',
              borderBottom: '1px solid var(--ld-line)',
              alignItems: isMobile ? 'start' : 'baseline',
            }}>
              {/* Left rail — act + year */}
              <div style={isMobile ? { display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' } : null}>
                <div style={{
                  fontFamily: 'Cormorant Garamond, serif',
                  fontStyle: 'italic', fontWeight: 400, fontSize: isMobile ? 22 : 26,
                  color: 'var(--ld-gold)', lineHeight: 1.1,
                  marginBottom: isMobile ? 0 : 10,
                }}>{e.act}</div>
                <div style={{
                  fontFamily: 'Montserrat, sans-serif', fontWeight: 600,
                  fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: 'var(--ld-ink-3)', lineHeight: 1.45,
                }}>{e.year}</div>
              </div>

              {/* Body */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 2fr) minmax(0, 1.4fr)',
                gap: isMobile ? 16 : 'clamp(28px, 3vw, 48px)',
                alignItems: isMobile ? 'start' : 'baseline',
              }}>
                <div>
                  <div className="eyebrow-ink" style={{ marginBottom: 12 }}>{e.kind}</div>
                  <h3 style={{
                    fontFamily: 'Cormorant Garamond, serif',
                    fontStyle: 'italic',
                    fontWeight: 400,
                    fontSize: isMobile ? 'clamp(18px, 5vw, 24px)' : 'clamp(22px, 2.2vw, 30px)',
                    lineHeight: 1.25, letterSpacing: '-0.005em',
                    color: 'var(--ld-navy)', margin: 0,
                  }}>{e.title}</h3>
                </div>
                <p style={{
                  fontFamily: 'Montserrat, sans-serif',
                  fontSize: isMobile ? 14 : 14, lineHeight: 1.8,
                  color: 'var(--ld-ink-2)',
                  margin: 0,
                }}>{e.desc}</p>
              </div>
            </article>
          ))}

          {/* LinkedIn supplement */}
          <p style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontStyle: 'italic',
            fontSize: 15, lineHeight: 1.6,
            color: 'var(--ld-ink-3)',
            marginTop: isMobile ? 28 : 40,
            textAlign: isMobile ? 'left' : 'right',
          }}>
            For ongoing professional history,{' '}
            <a
              href="https://www.linkedin.com/in/lacey-hardy-217b413aa"
              target="_blank"
              rel="noopener noreferrer"
              style={{
                color: 'var(--ld-navy)',
                borderBottom: '1px solid var(--ld-gold)',
                paddingBottom: 1,
              }}
            >
              connect on LinkedIn
            </a>
            .
          </p>
        </div>
      </div>
    </section>
  );
};

// ──────────────────────────────────────────────────────────────────────────
// III. FROM HER HAND — pull quote, signed. The single personal moment.
// ──────────────────────────────────────────────────────────────────────────
const FounderClosing = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{
    background: 'var(--ld-pearl-50)',
    paddingTop: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(96px, 12vw, 180px)',
    paddingBottom: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(96px, 12vw, 180px)',
    borderTop: '1px solid var(--ld-line)',
    position: 'relative',
  }}>
    <div className="container-narrow" style={{ textAlign: 'center' }}>
      <div className="eyebrow-gold" style={{ marginBottom: 18 }}>III.</div>
      <div className="smallcap-display" style={{
        fontSize: 22, color: 'var(--ld-navy)', letterSpacing: '0.18em',
        marginBottom: isMobile ? 32 : 48, fontWeight: 400,
      }}>From Her Hand</div>
      <hr className="rule-gold" style={{ margin: isMobile ? '0 auto 40px' : '0 auto 64px' }} />

      <blockquote style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontStyle: 'italic', fontWeight: 300,
        fontSize: isMobile ? 'clamp(20px, 5.4vw, 30px)' : 'clamp(28px, 3.4vw, 44px)',
        lineHeight: 1.4,
        color: 'var(--ld-navy)',
        margin: 0, textWrap: 'balance',
      }}>
        Real access requires more than wi-fi. It requires digital literacy,
        and the dignity of being taught as someone who already belongs in
        the room.
      </blockquote>

      <hr className="rule-gold" style={{ margin: isMobile ? '40px auto 24px' : '64px auto 32px' }} />

      <div style={{
        fontFamily: 'Playwrite US Modern, "Caveat", cursive',
        fontSize: isMobile ? 'clamp(22px, 6vw, 30px)' : 'clamp(28px, 3vw, 38px)',
        color: 'var(--ld-gold)',
        lineHeight: 1.1, marginBottom: 18,
      }}>
        Lacey Rachelle
      </div>

      <div className="eyebrow-ink" style={{ letterSpacing: '0.28em' }}>
        Founder · The Art of Living Digitally™
      </div>
    </div>

    <div aria-hidden="true" style={{
      position: 'absolute', right: 'clamp(24px, 5vw, 80px)', bottom: 'clamp(24px, 5vw, 80px)',
      color: 'var(--ld-gold)', opacity: 0.2, fontSize: 22,
    }}>✦</div>
  </section>
  );
};

// Export
window.FounderHero = FounderHero;
window.FounderBio = FounderBio;
window.FounderChronology = FounderChronology;
window.FounderClosing = FounderClosing;
