/* ================================================================
   home.jsx — Hero, Capabilities, NumberStrip, Quote, HomeCTA
================================================================ */

function Hero() {
  return (
    <section className="hero-section rm-section" style={{
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      padding: '96px 60px 72px'
    }}>
      {/* Faint monogram watermark */}
      <img src="assets/rm-monogram.png" alt="" aria-hidden="true" style={{
        position: 'absolute', right: '-6%', top: '50%', transform: 'translateY(-50%)',
        height: '108%', width: 'auto', opacity: 0.04, pointerEvents: 'none'
      }} />

      {/* Radial glow behind stat numeral */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: '4%', top: '28%',
        width: '38%', height: '52%', pointerEvents: 'none',
        background: 'radial-gradient(circle, rgba(150,158,170,.15) 0%, transparent 65%)'
      }} />


      {/* Single-column content stack */}
      <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column' }}>

        {/* 1. Eyebrow */}
        <span className="hero-animate" style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
          letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)',
          marginBottom: 36
        }}>Revenue Architect · CRO Mandates</span>

        {/* 3. Stat composition — ONLY / numeral | rule | caption + attribution */}
        <div className="hero-stat-row hero-animate d2" style={{
          display: 'flex', alignItems: 'center',
          flexWrap: 'wrap', gap: 0, marginBottom: 60
        }}>

          {/* Left: ONLY stacked above 2% */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4 }}>
            <span style={{
              fontFamily: 'var(--font-sans)', fontWeight: 600,
              fontSize: 'clamp(1.6rem, 2.2vw, 2.2rem)',
              letterSpacing: '.14em', textTransform: 'uppercase',
              color: 'var(--fg-2)', lineHeight: 1, padding: "0px 0px 0px 40px"
            }}>ONLY</span>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(7rem, 9.5vw, 11rem)',
              fontWeight: 600, lineHeight: 0.85,
              background: 'var(--metal-silver)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              backgroundClip: 'text'
            }}>2%</div>
          </div>

          {/* Vertical metal rule */}
          <div aria-hidden="true" style={{
            width: 1,
            alignSelf: 'stretch',
            background: 'var(--rule-metal)',
            margin: '0 28px',
            flexShrink: 0
          }} />

          {/* Right: caption + attribution */}
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10 }}>
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 18, fontWeight: 400,
              lineHeight: 1.55, color: 'var(--fg-1)', margin: 0
            }}>of Canadian businesses using AI<br />are seeing a measurable return</p>
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 400,
              letterSpacing: '.05em', color: 'var(--fg-3)', margin: 0
            }}>93% are using it &nbsp;·&nbsp; KPMG Canada &nbsp;·&nbsp; 2025</p>
          </div>

        </div>

        {/* 4. H1 — full width, two lines */}
        <h1 className="hero-animate d3" style={{
          margin: '0 0 28px', fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(2.4rem, 3.8vw, 4.2rem)', lineHeight: 1.1, letterSpacing: '.02em'
        }}>
          <span style={{ display: 'block', color: 'var(--fg-1)', whiteSpace: 'nowrap' }}>That's not a technology problem.</span>
          <span style={{ display: 'block', background: 'var(--metal-silver-v)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', whiteSpace: 'nowrap' }}>It's a revenue engine problem.</span>
        </h1>

        {/* 5. Subhead */}
        <p className="hero-animate d4" style={{
          margin: '0 0 28px', maxWidth: 560, fontFamily: 'var(--font-sans)',
          fontWeight: 300, fontSize: 'clamp(1rem, 1.3vw, 1.12rem)',
          lineHeight: 1.72, color: 'var(--fg-2)'
        }}>
          I re-engineer the revenue engine underneath AI and own the number it produces. In production, in the P&amp;L. Not pilots.
        </p>

        {/* 6. CTAs */}
        <div className="hero-animate d4" style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 24 }}>
          <Button href="#experience">See the outcomes</Button>
          <Button href="#contact" variant="ghost">Let's talk</Button>
        </div>

      </div>
    </section>);

}

/* ── Capability cards ──────────────────────────────────────── */
function CapCard({ icon, 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: '32px 28px',
      boxShadow: h ?
      'var(--shadow-lg), var(--shadow-inset-top)' :
      'var(--shadow-md), var(--shadow-inset-top)',
      transform: h ? 'translateY(-4px)' : 'none',
      transition: 'all 240ms cubic-bezier(.22,1,.36,1)',
      display: 'flex', flexDirection: 'column', gap: 18
    }}>
      <i data-lucide={icon} style={{ width: 20, height: 20, strokeWidth: 1.5, color: 'var(--silver-500)' }}></i>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <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>
    </div>);

}

function Capabilities() {
  const cards = [
  { icon: 'trending-up', title: 'Revenue Architecture',
    body: 'The commercial engine underneath growth. Data, systems, pricing, and process re-engineered so revenue compounds instead of stalling. Repeatable growth, not heroics.' },
  { icon: 'bot', title: 'AI in Production',
    body: 'Not pilots. AI agents and automation deployed into live operations and reflected in the P&L, cutting cost to serve and multiplying team capacity.' },
  { icon: 'cpu', title: 'Digital Transformation',
    body: 'Technology investment turned into commercial advantage, from ERP to data infrastructure, with the change management that makes it last beyond the launch.' }];

  return (
    <section className="rm-section" style={{ padding: '100px 56px',
      borderTop: '1px solid var(--ink-line-soft)' }}>
      <SectionHead
        eyebrow="Expertise"
        title="One diagnosis. Three disciplines."
        intro="Stalled growth is an infrastructure problem. These are the disciplines that fix it." />
      <div className="caps-grid reveal"
      style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {cards.map((c) => <CapCard key={c.title} {...c} />)}
      </div>
    </section>);

}

/* ── Numbers strip ─────────────────────────────────────────── */
function NumberStrip() {
  const nums = [
  { value: '68%', label: 'Profitability unlocked', sub: 'From half the cost of delivery' },
  { value: '$5M', label: 'Revenue architected', sub: 'From $40K in under 2 years' },
  { value: '63%', label: 'Call reduction via AI', sub: 'Agents deployed in production' },
  { value: '26', label: 'Years of consequence', sub: 'Strategy · Technology · Growth' }];

  return (
    <section style={{ background: 'var(--ink-deep)',
      borderTop: '1px solid var(--ink-line-soft)', borderBottom: '1px solid var(--ink-line-soft)' }}>
      <div className="numbers-grid"
      style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        maxWidth: 1440, margin: '0 auto' }}>
        {nums.map((n, i) =>
        <div key={n.label} className="reveal"
        style={{ padding: '48px 36px',
          borderLeft: i > 0 ? '1px solid var(--ink-line-soft)' : 'none',
          display: 'flex', flexDirection: 'column', gap: 9 }}>
            <span className="rm-metal" style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(2.2rem, 3.2vw, 3.4rem)', lineHeight: 0.86 }}>{n.value}</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
            color: 'var(--fg-1)', letterSpacing: '.03em' }}>{n.label}</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12,
            color: 'var(--fg-3)', lineHeight: 1.4 }}>{n.sub}</span>
          </div>
        )}
      </div>
    </section>);

}

/* ── Philosophy quote ──────────────────────────────────────── */
function Quote() {
  return (
    <section className="rm-section" style={{ padding: '120px 56px',
      position: 'relative', overflow: 'hidden',
      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: 840,
        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.5rem, 2.6vw, 2.4rem)', lineHeight: 1.38,
          color: 'var(--fg-1)' }}>
          "Stalled growth is almost never a strategy problem. The data, the systems, and the people stopped compounding. My job is to re-engineer the engine and own the number it produces. Everything else follows from that."
        </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>);

}

/* ── Home CTA ──────────────────────────────────────────────── */
function HomeCTA() {
  return (
    <section className="rm-section" style={{ padding: '108px 56px', textAlign: 'center' }}>
      <div className="reveal" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
          letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>The next step</span>
        <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(2rem, 3.4vw, 3rem)', lineHeight: 1.06, color: 'var(--fg-1)',
          maxWidth: 520 }}>Let's talk about<br />what's next.</h2>
        <Button href="contact.html">Start a conversation</Button>
      </div>
    </section>);

}

Object.assign(window, { Hero, Capabilities, NumberStrip, Quote, HomeCTA });