/* ================================================================
   v2-about.jsx — AboutV2, QuoteV2, LeadershipV2 (How I Work), SpeakingV2
================================================================ */

function AboutV2() {
  return (
    <section id="about" className="rm-section" style={{ padding: '104px 56px',
      position: 'relative', overflow: 'hidden' }}>
      <div className="bio-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr',
        gap: 72, alignItems: 'center' }}>
        <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
            letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>About</span>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(1.9rem, 3vw, 2.7rem)', lineHeight: 1.08, color: 'var(--fg-1)' }}>
            A Revenue Architect, not an advisor on the sidelines.
          </h2>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 16.5, lineHeight: 1.74, color: 'var(--fg-2)' }}>
            Ryan Morin is a Revenue Architect who helps companies turn AI, data, systems, people, and commercial operations into measurable revenue growth.
          </p>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 16.5, lineHeight: 1.74, color: 'var(--fg-2)' }}>
            Companies bring him in when ambition has outgrown the revenue system underneath it: disconnected systems, weak adoption, slow decisions, manual work, unclear data, customer friction, margin leakage, and commercial execution that does not reach the P&amp;L.
          </p>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 16.5, lineHeight: 1.74, color: 'var(--fg-2)' }}>
            He has led commercial, digital, data, and AI transformation across national specialty healthcare, industrial distribution, safety technology, global pharmaceutical environments, and independent advisory work.
          </p>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 16.5, lineHeight: 1.74, color: 'var(--fg-2)' }}>
            His work is practical, measurable, and close to the work. Not pilots. Not decks. Production, adoption, execution, and outcomes.
          </p>
          <div style={{ paddingTop: 8 }}>
            <ButtonV2 href="#outcomes" variant="ghost">See what changed</ButtonV2>
          </div>
        </div>

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

}

/* ── Operating philosophy quote ────────────────────────────── */
function QuoteV2() {
  return (
    <section className="rm-section" style={{ padding: '120px 56px',
      position: 'relative', overflow: 'hidden',
      background: 'var(--ink-deep)',
      borderTop: '1px solid var(--ink-line-soft)', borderBottom: '1px solid var(--ink-line-soft)' }}>
      <img src="assets/rm-monogram.png" alt="" aria-hidden="true" style={{
        position: 'absolute', left: '-6%', bottom: '-22%',
        height: '130%', width: 'auto', opacity: 0.034, pointerEvents: 'none'
      }} />
      <div className="reveal" style={{ position: 'relative', maxWidth: 900,
        margin: '0 auto', textAlign: 'center',
        display: 'flex', flexDirection: 'column', gap: 30, alignItems: 'center' }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
          letterSpacing: '.26em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
          Operating Philosophy
        </span>
        <blockquote style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 500,
          fontStyle: 'italic', fontSize: 'clamp(1.4rem, 2.4vw, 2.25rem)', lineHeight: 1.4,
          color: 'var(--fg-1)' }}>
          "Revenue rarely stalls because ambition is missing. It stalls because the system underneath growth stops working. The data is unclear. The systems do not talk. The people are overloaded. The customer feels the friction. My job is to find where revenue is stuck and make the system move again."
        </blockquote>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 36, height: 1, background: 'var(--silver-600)' }}></div>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
            letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--silver-500)' }}>
            Ryan Morin
          </span>
          <div style={{ width: 36, height: 1, background: 'var(--silver-600)' }}></div>
        </div>
      </div>
    </section>);

}

/* ── Leadership Operating System (How I Work) ──────────────── */
function LeadershipV2() {
  const proof = [
  'TEIQue: 92nd percentile',
  'High D / High I leadership profile',
  'Competitive girls hockey coach and mentor',
  'Built teams that move faster without losing trust',
  'Known for turning complex problems into accountable execution'];

  return (
    <section id="how-i-work" className="rm-section" style={{ padding: '104px 56px' }}>
      <div className="leadership-grid" style={{ display: 'grid',
        gridTemplateColumns: '1fr 1fr', gap: 'clamp(48px, 6vw, 88px)', alignItems: 'start' }}>

        {/* Left — narrative */}
        <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
            letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
            Leadership Operating System
          </span>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(1.9rem, 3vw, 2.7rem)', lineHeight: 1.08, color: 'var(--fg-1)' }}>
            Revenue scales when leaders stop becoming the bottleneck.
          </h2>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 16.5, lineHeight: 1.74, color: 'var(--fg-2)' }}>
            AI can automate tasks, summarize data, and accelerate decisions. It cannot walk into a room, earn trust, calm resistance, build belief, or unlock the discretionary effort of the people doing the work.
          </p>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 16.5, lineHeight: 1.74, color: 'var(--fg-2)' }}>
            Ryan helps build the leadership cadence, decision rights, accountability, communication rhythm, and capability required for teams to move faster without waiting for permission.
          </p>
          <div style={{ paddingTop: 6 }}>
            <ButtonV2 href="#contact" variant="ghost">How Ryan leads</ButtonV2>
          </div>
        </div>

        {/* Right — operating philosophy + proof */}
        <div className="reveal d1" style={{ display: 'flex', flexDirection: 'column', gap: 30 }}>
          <div style={{ background: 'var(--ink-raised)', borderRadius: 10,
            boxShadow: 'var(--shadow-md), var(--shadow-inset-top)', padding: '32px 30px',
            display: 'flex', flexDirection: 'column', gap: 10 }}>
            <span className="rm-metal" style={{ fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 'clamp(2.2rem, 3.4vw, 3.1rem)', lineHeight: 1, letterSpacing: '.01em' }}>Accountability.</span>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10,
              fontFamily: 'var(--font-display)', fontWeight: 500,
              fontSize: 'clamp(0.95rem, 1.3vw, 1.15rem)', color: 'var(--silver-600)' }}>
              <span>Effort.</span>
              <span style={{ color: 'var(--silver-700)' }}>·</span>
              <span>Attitude.</span>
            </div>
          </div>

          <div>
            {proof.map((p, i) =>
            <div key={p} style={{ display: 'flex', gap: 14, alignItems: 'flex-start',
              padding: '15px 0',
              borderBottom: i < proof.length - 1 ? '1px solid var(--ink-line-soft)' : 'none' }}>
                <span style={{ color: 'var(--silver-700)', fontFamily: 'var(--font-display)',
                fontSize: 20, lineHeight: 1, flexShrink: 0 }}>—</span>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.5,
                color: 'var(--fg-2)' }}>{p}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ── Speaking & Advisory ───────────────────────────────────── */
function SpeakingV2() {
  const topics = [
  'Why AI ROI is a revenue system problem',
  'Finding where revenue gets stuck',
  'AI adoption beyond pilots and theatre',
  'Revenue systems for high-growth environments',
  'Leadership operating systems for scale',
  'Building commercial infrastructure that can keep up with ambition',
  'People, trust, and behaviour change inside transformation'];

  return (
    <section id="speaking" className="rm-section" style={{ padding: '104px 56px',
      background: 'var(--ink-deep)',
      borderTop: '1px solid var(--ink-line-soft)', borderBottom: '1px solid var(--ink-line-soft)' }}>
      <div className="speaking-grid"
      style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'start' }}>
        <div className="reveal">
          <SectionHeadV2 eyebrow="Speaking & Advisory"
          title="Commercial clarity for the AI era." />
          <p style={{ margin: '-24px 0 30px', fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 16.5, lineHeight: 1.72, color: 'var(--fg-2)', maxWidth: 460 }}>
            Ryan speaks and advises on the commercial reality behind AI, data, transformation, and growth. No theatre. No buzzwords. Practical lessons from putting systems, teams, and AI into production where the outcomes had to show up in the business.
          </p>
          <ButtonV2 href="#contact" variant="ghost">Inquire about speaking</ButtonV2>
        </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: 'flex-start', gap: 16,
            fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.5, 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, { AboutV2, QuoteV2, LeadershipV2, SpeakingV2 });