/* ================================================================
   about.jsx — AboutHero, BioSection, PillarSection, SpeakingSection
================================================================ */

function AboutHero() {
  return (
    <section className="rm-section" style={{ padding: '160px 56px 80px',
      position: 'relative', overflow: 'hidden' }}>
      <img src="assets/rm-monogram.png" alt="" aria-hidden="true" style={{
        position: 'absolute', right: '-6%', top: '-12%',
        height: '80%', width: 'auto', opacity: 0.04, pointerEvents: 'none'
      }} />
      <div style={{ position: 'relative', maxWidth: 740 }}>
        <span className="hero-animate" style={{ display: 'block', marginBottom: 18,
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
          letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>About</span>
        <h1 className="hero-animate d1" style={{ margin: 0, fontFamily: 'var(--font-display)',
          fontWeight: 600, fontSize: 'clamp(2.6rem, 5vw, 5rem)',
          lineHeight: 0.95, letterSpacing: '.02em', color: 'var(--fg-1)' }}>
          The work behind<br /><span className="rm-metal">the outcomes.</span>
        </h1>
      </div>
    </section>);

}

/* ── Bio ───────────────────────────────────────────────────── */
function BioSection() {
  return (
    <section id="about" className="rm-section" style={{ padding: '20px 56px 100px',
      borderTop: '1px solid var(--ink-line-soft)' }}>
      <div className="bio-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 72, alignItems: 'start', marginTop: 60 }}>
        <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 17, lineHeight: 1.74, color: 'var(--fg-2)' }}>
            Ryan Morin is a Revenue Architect. Companies bring him in when ambition has outgrown the engine underneath it. He has re-engineered the commercial operations of national specialty healthcare businesses, taken online marketplaces from $40K to $5M, restored ERP uptime from 75% to 99%, and put AI agents into production that changed how organizations operate.
          </p>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 17, lineHeight: 1.74, color: 'var(--fg-2)' }}>
            He does not advise from the sidelines. He owns the mandate, builds the team, and owns the number. Twenty-six years across pharmaceutical, healthcare, distribution, and technology, always where the complexity is highest and the margin for error is lowest.
          </p>
          <div style={{ paddingTop: 8 }}>
            <Button href="#experience" variant="ghost">See where it was built</Button>
          </div>
        </div>

        <div className="bio-col-portrait reveal d1" style={{ position: 'relative' }}>
          <div aria-hidden="true" style={{
            position: 'absolute', left: '50%', top: '28%',
            width: '80%', aspectRatio: '1', pointerEvents: 'none',
            transform: 'translate(-50%,-50%)',
            background: 'radial-gradient(circle, rgba(150,158,170,.16), transparent 60%)'
          }} />
          <img src="assets/ryan-headshot-clean.png" alt="Ryan Morin" style={{
            position: 'relative', width: '100%', maxWidth: 420, display: 'block',
            filter: 'saturate(0.82) contrast(1.02)',
            maskImage: 'linear-gradient(to bottom, black 80%, transparent 100%)',
            WebkitMaskImage: 'linear-gradient(to bottom, black 80%, transparent 100%)'
          }} />
        </div>
      </div>
    </section>);

}

/* ── Pillar cards ──────────────────────────────────────────── */
function PCard({ eyebrow, title, body }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      background: h ? 'var(--ink-elevated)' : 'var(--ink-raised)',
      borderRadius: 8, padding: '30px 26px',
      boxShadow: h ?
      'var(--shadow-lg), var(--shadow-inset-top)' :
      'var(--shadow-md), var(--shadow-inset-top)',
      transform: h ? 'translateY(-3px)' : 'none',
      transition: 'all 240ms cubic-bezier(.22,1,.36,1)',
      display: 'flex', flexDirection: 'column', gap: 14
    }}>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
        letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{eyebrow}</span>
      <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
        fontSize: 22, lineHeight: 1.1,
        color: h ? 'var(--fg-1)' : 'var(--silver-300)', transition: 'color 200ms' }}>{title}</h3>
      <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 14.5,
        lineHeight: 1.62, color: 'var(--fg-2)' }}>{body}</p>
    </div>);

}

function PillarSection() {
  const pillars = [
  { eyebrow: 'Strategy', title: 'Commercial Strategy',
    body: 'Aligning go-to-market, pricing, and commercial operations around a single coherent growth thesis — not a collection of disconnected initiatives.' },
  { eyebrow: 'Technology', title: 'Digital Transformation',
    body: 'From legacy modernization to AI adoption, building the technical foundation that lets organizations scale without breaking under their own weight.' },
  { eyebrow: 'Growth', title: 'Revenue Architecture',
    body: 'Designing the systems, processes, and incentive structures that make growth repeatable — not reliant on heroics or a single exceptional quarter.' },
  { eyebrow: 'Impact', title: 'Operational Excellence',
    body: 'Turning operational complexity into competitive advantage through clarity, accountability, and relentless focus on what actually moves the needle.' }];

  return (
    <section className="rm-section" style={{ padding: '80px 56px 100px',
      background: 'var(--ink-deep)',
      borderTop: '1px solid var(--ink-line-soft)', borderBottom: '1px solid var(--ink-line-soft)' }}>
      <SectionHead eyebrow="Four Pillars" title="The disciplines behind every engagement." />
      <div className="pillar-grid reveal"
      style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {pillars.map((p) => <PCard key={p.eyebrow} {...p} />)}
      </div>
    </section>);

}

/* ── Speaking section ──────────────────────────────────────── */
function SpeakingSection() {
  const topics = [
  'AI in Healthcare & Regulated Industries',
  'Revenue Architecture for Complex Organizations',
  'Digital Transformation at Scale',
  'Leadership in High-Complexity Environments',
  'The Commercial Case for Intelligent Automation'];

  return (
    <section id="speaking" className="rm-section" style={{ padding: '100px 56px 110px' }}>
      <div className="speaking-grid"
      style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'start' }}>
        <div className="reveal">
          <SectionHead eyebrow="Speaking & Advisory"
          title="Thought leadership with commercial teeth." />
          <p style={{ margin: '0 0 30px', fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 16.5, lineHeight: 1.72, color: 'var(--fg-2)' }}>
            Ryan brings the same directness and commercial precision to the stage and boardroom as
            he does to transformations. No theory without proof. No claim without a number.
          </p>
          <Button href="#contact" variant="ghost">Inquire about speaking</Button>
        </div>

        <div className="reveal d1">
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
            letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)',
            display: 'block', marginBottom: 22 }}>Topics</span>
          {topics.map((t, i) =>
          <div key={t} style={{ padding: '15px 0',
            borderBottom: i < topics.length - 1 ? '1px solid var(--ink-line-soft)' : 'none',
            display: 'flex', alignItems: 'center', gap: 16,
            fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-2)' }}>
              <span style={{ color: 'var(--silver-700)', fontFamily: 'var(--font-display)',
              fontSize: 20, lineHeight: 1, flexShrink: 0 }}>—</span>
              {t}
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { AboutHero, BioSection, PillarSection, SpeakingSection });