/* ================================================================
   v2-home.jsx — HeroV2, ExpertiseV2, ProofBandV2
================================================================ */

function HeroV2() {
  return (
    <section id="top" className="hero-section rm-section" style={{
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      padding: '150px 60px 96px'
    }}>
      {/* 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 */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: '4%', top: '24%',
        width: '40%', height: '56%', pointerEvents: 'none',
        background: 'radial-gradient(circle, rgba(150,158,170,.13) 0%, transparent 66%)'
      }} />

      <div className="hero-grid" style={{ position: 'relative', zIndex: 2,
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) clamp(300px, 36vw, 500px)',
        gap: 'clamp(20px, 4vw, 64px)', alignItems: 'stretch' }}>

        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>

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

        {/* Stat lockup — opening hook */}
        <div className="hero-stat-row hero-animate d1" style={{
          display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0,
          marginBottom: 44, maxWidth: 880
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4 }}>
            <span style={{
              fontFamily: 'var(--font-sans)', fontWeight: 600,
              fontSize: 'clamp(1.5rem, 2vw, 2rem)',
              letterSpacing: '.14em', textTransform: 'uppercase',
              color: 'var(--fg-2)', lineHeight: 1
            }}>ONLY</span>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(5.5rem, 8vw, 8.5rem)',
              fontWeight: 600, lineHeight: 0.85,
              background: 'var(--metal-silver)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              backgroundClip: 'text'
            }}>2%</div>
          </div>

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

          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 9 }}>
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 18, fontWeight: 400,
              lineHeight: 1.5, color: 'var(--fg-1)', margin: 0
            }}>of Canadian businesses using AI<br />report measurable ROI</p>
            <a href="https://kpmg.com/ca/en/home/insights.html" target="_blank" rel="noreferrer" style={{
              fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 400,
              letterSpacing: '.04em', color: 'var(--fg-3)', textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 7, width: 'fit-content',
              transition: 'color 150ms'
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--fg-1)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-3)'}
            >Source: KPMG Canada, 2025
              <i data-lucide="arrow-up-right" style={{ width: 13, height: 13, strokeWidth: 1.5 }}></i>
            </a>
          </div>
        </div>

        {/* H1 */}
        <h1 className="hero-animate d2" style={{
          margin: '0 0 26px', fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(1.9rem, 3.1vw, 3.2rem)', lineHeight: 1.16, letterSpacing: '.02em',
          color: 'var(--fg-1)'
        }}>
          That's not a technology problem.<br />
          <span className="rm-metal">It's a revenue system problem.</span>
        </h1>

        {/* Body */}
        <div className="hero-animate d3" style={{ maxWidth: 600, display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 34 }}>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 'clamp(1.02rem, 1.3vw, 1.16rem)', lineHeight: 1.7, color: 'var(--fg-2)' }}>
            Most companies do not need another AI strategy deck. They need the revenue system underneath the business to work differently.
          </p>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 'clamp(1.02rem, 1.3vw, 1.16rem)', lineHeight: 1.7, color: 'var(--fg-2)' }}>
            Ryan helps companies turn AI, data, systems, people, and commercial operations into measurable revenue growth by fixing how work, decisions, customers, technology, and execution move through the business.
          </p>
        </div>

        {/* CTAs */}
        <div className="hero-animate d4" style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <ButtonV2 href="#outcomes">See the outcomes</ButtonV2>
          <ButtonV2 href="#diagnostic" variant="ghost">Explore the diagnostic</ButtonV2>
        </div>

        </div>

        {/* Compass hero image */}
        <div className="hero-compass hero-animate d3" style={{
          position: 'relative', alignSelf: 'stretch',
          minHeight: 380, overflow: 'visible',
          marginRight: -60, marginTop: -60, marginBottom: -96,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <img src="assets/hero-compass-new.png" alt="" aria-hidden="true" style={{
            width: '150%', height: 'auto',
            objectFit: 'contain',
            display: 'block',
            filter: 'saturate(0.9) contrast(1.05) drop-shadow(0 24px 48px rgba(9,12,20,0.6))',
            WebkitMaskImage: 'linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 99%), linear-gradient(to bottom, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 99%)',
            WebkitMaskComposite: 'destination-in',
            maskImage: 'linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 99%), linear-gradient(to bottom, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 99%)',
            maskComposite: 'intersect',
          }} />
        </div>

      </div>
    </section>
  );
}

/* ── Expertise ─────────────────────────────────────────────── */
function ExpCard({ 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: 11 }}>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 22, lineHeight: 1.12,
          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.64, color: 'var(--fg-2)' }}>{body}</p>
      </div>
    </div>
  );
}

function ExpertiseV2() {
  const cards = [
    { icon: 'layers', title: 'Revenue Architecture',
      body: 'The commercial infrastructure underneath growth: market focus, revenue model, customer strategy, sales motion, pricing, data visibility, and revenue operations.' },
    { icon: 'bot', title: 'AI in Production',
      body: 'Not pilots. Not theatre. AI agents and automation deployed into real workflows where adoption, cost-to-serve, effort, capacity, and business impact can be measured.' },
    { icon: 'git-merge', title: 'Operating Flow',
      body: 'How work, customers, data, systems, decisions, and teams move through the business. When the flow breaks, revenue slows, margin leaks, and leaders lose visibility.' },
  ];
  return (
    <section className="rm-section" style={{ padding: '104px 56px',
      borderTop: '1px solid var(--ink-line-soft)' }}>
      <SectionHeadV2
        eyebrow="Expertise"
        title="One problem. Three ways revenue gets unstuck."
        intro="Revenue does not stall in one place. It gets stuck in the system: the way people, data, systems, customers, technology, decisions, and commercial execution work together to produce growth." />
      <div className="caps-grid reveal"
        style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {cards.map(c => <ExpCard key={c.title} {...c} />)}
      </div>
    </section>
  );
}

/* ── Proof Metrics band ────────────────────────────────────── */
function ProofBandV2() {
  const nums = [
    { value: '68%',   label: 'Profitability unlocked',     sub: 'Data operations recovered' },
    { value: '$5M',   label: 'Online revenue built',        sub: 'From $40K in under two years' },
    { value: '63%',   label: 'AI-enabled call reduction',   sub: 'Agents deployed in production' },
    { value: '$1.5M', label: 'Revenue blind spot recovered',sub: 'Billing leakage exposed and fixed' },
    { value: '$1M+',  label: 'New and stabilized accounts', sub: 'Revenue protected and won' },
  ];
  return (
    <section style={{ background: 'var(--ink-deep)',
      borderTop: '1px solid var(--ink-line-soft)', borderBottom: '1px solid var(--ink-line-soft)' }}>
      <div className="proof-band-grid"
        style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
          maxWidth: 1440, margin: '0 auto' }}>
        {nums.map((n, i) => (
          <div key={n.label} className="reveal proof-band-cell"
            style={{ padding: '46px 30px',
              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.1rem, 2.9vw, 3.1rem)', lineHeight: 0.86 }}>{n.value}</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
              color: 'var(--fg-1)', letterSpacing: '.02em', lineHeight: 1.3 }}>{n.label}</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5,
              color: 'var(--fg-3)', lineHeight: 1.45 }}>{n.sub}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HeroV2, ExpertiseV2, ProofBandV2 });