/* ================================================================
   v2-outcomes.jsx — OutcomesV2 (proof-based) + LogoStripV2
   Replaces the chronological career timeline.
================================================================ */

function OutcomeBlock({ num, category, headline, body, proof, isLast }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    className="outcome-block"
    style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 5vw, 80px)',
      padding: '52px 0',
      borderBottom: isLast ? 'none' : '1px solid var(--ink-line-soft)' }}>

      {/* Left — narrative */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
          <span className="rm-metal" style={{ fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(1.6rem, 2.2vw, 2.1rem)', lineHeight: 1, opacity: h ? 1 : 0.82,
            transition: 'opacity 200ms' }}>0{num}</span>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
            letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{category}</span>
        </div>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(1.5rem, 2.3vw, 2.05rem)', lineHeight: 1.12,
          color: h ? 'var(--fg-1)' : 'var(--silver-300)', transition: 'color 200ms' }}>{headline}</h3>
        <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
          fontSize: 15.5, lineHeight: 1.72, color: 'var(--fg-2)', maxWidth: 460 }}>{body}</p>
      </div>

      {/* Right — proof list */}
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 2 }}>
        {proof.map((p, i) =>
        <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start',
          padding: '13px 0',
          borderTop: i === 0 ? 'none' : '1px solid var(--ink-line-soft)' }}>
            <span style={{ color: 'var(--silver-600)', fontFamily: 'var(--font-sans)',
            fontSize: 14, lineHeight: 1.5, flexShrink: 0, marginTop: 1 }}>—</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.5,
            color: 'var(--fg-2)' }}
          dangerouslySetInnerHTML={{ __html: p }} />
          </div>
        )}
      </div>
    </div>);

}

function OutcomesV2() {
  const blocks = [
  { num: 1, category: 'Revenue Growth',
    headline: 'Revenue moved when the commercial path was rebuilt.',
    body: 'Growth was not unlocked by more activity. It came from fixing the path between market demand, customer response, sales execution, data visibility, and operating discipline.',
    proof: [
    'Grew online revenue from <strong style="color:var(--fg-1);font-weight:600">$40K to $5M</strong> in under two years',
    'Secured <strong style="color:var(--fg-1);font-weight:600">$1M+</strong> in new and stabilized at-risk accounts',
    'Identified <strong style="color:var(--fg-1);font-weight:600">$1.2M</strong> in wasted ad spend and built the recovery plan',
    'Built commercial infrastructure across industrial distribution, specialty healthcare, safety technology, and global pharmaceutical environments']
  },
  { num: 2, category: 'AI & Automation in Production',
    headline: 'AI became valuable when it entered the work.',
    body: 'AI only creates value when people use it inside real workflows. Ryan moved AI from idea to production, where adoption, capacity, effort, cost-to-serve, and business impact could be measured.',
    proof: [
    'Put AI agents into production before AI became a boardroom talking point',
    'Reduced call volume by up to <strong style="color:var(--fg-1);font-weight:600">63%</strong>',
    'Reduced manual labour by <strong style="color:var(--fg-1);font-weight:600">40%</strong>',
    'Increased team capacity without simply adding headcount',
    'Turned automation into measurable operating leverage']
  },
  { num: 3, category: 'Data, Margin & Revenue Visibility',
    headline: 'Hidden value appeared when the data became accountable.',
    body: 'The issue was not that data was missing. The issue was that it was not connected to decisions, billing, margin, service, and revenue ownership.',
    proof: [
    'Turned data operations from structural loss to <strong style="color:var(--fg-1);font-weight:600">68%</strong> profitability',
    'Recovered <strong style="color:var(--fg-1);font-weight:600">$500K</strong> annually in previously unbilled services',
    'Closed a <strong style="color:var(--fg-1);font-weight:600">$1.5M</strong> commercial blind spot in billing and revenue capture',
    'Restored ERP uptime from <strong style="color:var(--fg-1);font-weight:600">75% to 99%</strong>',
    'Recovered <strong style="color:var(--fg-1);font-weight:600">$250K</strong> monthly through operational system recovery']
  },
  { num: 4, category: 'Operating Flow & Leadership Scale',
    headline: 'The business moved faster when the system stopped depending on heroics.',
    body: 'Transformation fails when people, systems, and decisions are treated separately. Ryan builds trust, creates clarity, and moves fast enough to make progress without losing the team.',
    proof: [
    'Launched platforms that reached <strong style="color:var(--fg-1);font-weight:600">80%</strong> adoption',
    'Saved care teams <strong style="color:var(--fg-1);font-weight:600">20 hours</strong> weekly',
    'Cut quote delivery time by <strong style="color:var(--fg-1);font-weight:600">80%</strong>',
    'Drove SharePoint adoption across business units',
    'Raised productivity by <strong style="color:var(--fg-1);font-weight:600">40%</strong> through process improvement',
    'TEIQue: <strong style="color:var(--fg-1);font-weight:600">92nd percentile</strong> · High D / High I leadership profile']
  }];


  return (
    <section id="outcomes" 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)' }}>
      <SectionHeadV2
        eyebrow="Outcomes"
        title="What changed when the revenue system was fixed."
        intro="The companies were different. The pattern was the same: ambition had outgrown the revenue system underneath the business. Ryan found the constraint, rebuilt the connection between people, systems, data, technology, customers, and commercial execution, and made the number move."
        maxIntro={760} />

      <div className="reveal" style={{ borderTop: '1px solid var(--ink-line-soft)' }}>
        {blocks.map((b, i) =>
        <OutcomeBlock key={b.num} {...b} isLast={i === blocks.length - 1} />
        )}
      </div>

      <p className="reveal" style={{ marginTop: 44, fontFamily: 'var(--font-sans)', fontSize: 13.5,
        lineHeight: 1.7, color: 'var(--fg-3)', maxWidth: 720 }}>
        Outcomes built across specialty healthcare, industrial distribution, safety technology, global pharmaceutical, and independent advisory work.
      </p>
    </section>);

}

/* ── Understated experience strip ──────────────────────────── */
function LogoStripV2() {
  const names = ['Specialty Healthcare', 'Industrial Distribution', 'Safety Technology', 'Global Pharmaceutical', 'Independent Advisory'];
  return (
    <section className="rm-section" style={{ padding: '64px 56px',
      borderBottom: '1px solid var(--ink-line-soft)' }}>
      <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 30 }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
          letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
          Built inside complex operating environments
        </span>
        <div className="logo-strip-row" style={{ display: 'flex', alignItems: 'center',
          flexWrap: 'wrap', columnGap: 'clamp(32px, 4.5vw, 64px)', rowGap: 18 }}>
          {names.map((n) =>
          <span key={n} style={{ fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(1.05rem, 1.5vw, 1.35rem)', letterSpacing: '.01em',
            color: 'var(--silver-500)', whiteSpace: 'nowrap' }}>{n}</span>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { OutcomesV2, LogoStripV2 });