/* ================================================================
   experience.jsx — ExperienceHero, OutcomesGrid, Timeline, Testimonials
================================================================ */

function ExperienceHero() {
  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)' }}>
          Experience
        </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)' }}>
          Twenty-six years<br /><span className="rm-metal">of consequence.</span>
        </h1>
      </div>
    </section>
  );
}

/* ── Outcome metric cards ──────────────────────────────────── */
function MCard({ value, label, 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 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: 14,
    }}>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
        letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{label}</span>
      <span className="rm-metal" style={{ fontFamily: 'var(--font-display)', fontWeight: 700,
        fontSize: 'clamp(2.4rem, 3.2vw, 3.2rem)', lineHeight: 0.88 }}>{value}</span>
      <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 14.5,
        lineHeight: 1.56, color: 'var(--fg-2)' }}>{body}</p>
    </div>
  );
}

function OutcomesGrid() {
  const metrics = [
    { value: '68%',  label: 'Profitability',
      body: 'Transformed data operations from billing at half the cost of delivery — recovering $500K in annual unbilled services and closing a $1.5M commercial blind spot.' },
    { value: '$5M',  label: 'Marketplace Growth',
      body: 'Grew online marketplace sales from $40K to $5M annually in under two years by rebuilding the underlying infrastructure, not just the campaigns.' },
    { value: '63%',  label: 'Call Reduction via AI',
      body: 'Deployed AI agents Florence and Emily, reducing inbound call volumes by up to 63% and cutting manual labour by 40%.' },
    { value: '$1M+', label: 'Net New Business',
      body: 'Secured over $1M in net new business while rebuilding stakeholder confidence and stabilizing at-risk contracts worth significantly more.' },
  ];
  return (
    <section className="rm-section" style={{ padding: '40px 56px 100px',
      borderTop: '1px solid var(--ink-line-soft)' }}>
      <SectionHead eyebrow="Selected Outcomes" title="The result before the activity."
        intro="Specific, numeric, consequence-first." />
      <div className="outcomes-grid reveal"
        style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {metrics.map(m => <MCard key={m.label} {...m} />)}
      </div>
    </section>
  );
}

/* ── Career timeline ───────────────────────────────────────── */
function TRow({ period, role, org, body, isLast }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      className="timeline-row"
      style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 48,
        padding: '32px 0', borderBottom: isLast ? 'none' : '1px solid var(--ink-line-soft)',
        transition: 'all 200ms' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 7, paddingTop: 4 }}>
        <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12,
          color: h ? 'var(--silver-400)' : 'var(--silver-600)', transition: 'color 200ms',
          letterSpacing: '.02em', whiteSpace: 'nowrap' }}>{period}</span>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 600,
          letterSpacing: '.18em', textTransform: 'uppercase',
          color: 'var(--silver-500)', whiteSpace: 'nowrap' }}>{org}</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 23,
          lineHeight: 1.1, color: h ? 'var(--fg-1)' : 'var(--silver-300)',
          transition: 'color 200ms' }}>{role}</h3>
        <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 15,
          lineHeight: 1.64, color: 'var(--fg-2)', maxWidth: 560 }}>{body}</p>
      </div>
    </div>
  );
}

function Timeline() {
  const roles = [
    { period: 'Nov 2022 — Jan 2026', org: 'Bayshore Specialty Rx',
      role: 'National Director, Innovation, Marketing & Data',
      body: 'Led full digital transformation across data, marketing, and AI for a national specialty healthcare operation. Deployed AI agents reducing call volumes 63%, unlocked 68% data profitability, and recovered $500K in annual unbilled services.' },
    { period: '2014 — 2022', org: 'Concept Controls',
      role: 'Director, Marketing & Technology',
      body: 'Transformed a sales-driven distributor into an agile, data-led commercial operation across Canadian and US markets. Grew online revenue from $40K to $5M, restored ERP uptime from 75% to 99%, and secured $1M+ in net new business.' },
    { period: '2005 — 2014', org: 'GlaxoSmithKline',
      role: 'Business Account Manager & Systems Analyst',
      body: 'Grew from IT analyst to enterprise digital project lead for global pharmaceutical brands. Identified $1.2M in wasted ad spend and built the commercial case and recovery plan that followed.' },
    { period: '2002 — 2014', org: 'Gaintech Communications',
      role: 'Marketing & Technology Consultant',
      body: 'Independent practice serving healthcare and mid-market businesses. Developed one of the first scalable interactive multimedia platforms for the healthcare manufacturer market in Canada.' },
  ];
  return (
    <section id="experience" 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="Career" title="Where the outcomes were built." />
      <div className="reveal">
        {roles.map((r, i) => <TRow key={r.org} {...r} isLast={i === roles.length - 1} />)}
      </div>
    </section>
  );
}

/* ── Testimonials ──────────────────────────────────────────── */
function TCard({ quote, name, title }) {
  return (
    <div className="reveal" style={{
      background: 'var(--ink-raised)', borderRadius: 8, padding: '34px 30px',
      boxShadow: 'var(--shadow-md), var(--shadow-inset-top)',
      display: 'flex', flexDirection: 'column', gap: 22,
    }}>
      <div style={{ width: 28, height: 1, background: 'var(--silver-600)' }}></div>
      <blockquote style={{ margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 500, fontSize: 19, lineHeight: 1.48, color: 'var(--fg-1)' }}>
        "{quote}"
      </blockquote>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
          color: 'var(--fg-1)' }}>{name}</span>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12,
          color: 'var(--fg-3)', letterSpacing: '.04em' }}>{title}</span>
      </div>
    </div>
  );
}

function Testimonials() {
  const ts = [
    { quote: "Ryan doesn't just diagnose the problem — he builds the commercial case for solving it, then delivers.",
      name: '[ Your name here ]', title: 'Add a real endorsement — suggested: VP Operations or CEO' },
    { quote: "In a market where everyone talks transformation, Ryan is one of the few who can actually deliver it at scale.",
      name: '[ Your name here ]', title: 'Add a real endorsement — suggested: C-Suite peer' },
    { quote: "His ability to translate complex technology into commercial language is rare. The results speak for themselves.",
      name: '[ Your name here ]', title: 'Add a real endorsement — suggested: Board Director' },
  ];
  return (
    <section className="rm-section" style={{ padding: '100px 56px 110px' }}>
      <SectionHead eyebrow="Endorsements" title="Heard from the room." />
      <div className="testimonials-grid"
        style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {ts.map((t, i) => <TCard key={i} {...t} />)}
      </div>
    </section>
  );
}

Object.assign(window, { ExperienceHero, OutcomesGrid, Timeline, Testimonials });