/* ================================================================
   v2-diagnostic.jsx — DiagnosticV2 (Revenue System Diagnostic)
   A connected four-stage system + Leadership Operating System callout.
================================================================ */

function DiagStage({ num, title, question, looksAt, failure, isLast }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      className="diag-stage"
      style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 40,
        padding: '40px 0',
        borderBottom: isLast ? 'none' : '1px solid var(--ink-line-soft)' }}>

      {/* Numeral + connector */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
        <span className="rm-metal" style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(3rem, 4vw, 4rem)', lineHeight: 0.8,
          opacity: h ? 1 : 0.82, transition: 'opacity 220ms' }}>0{num}</span>
      </div>

      {/* Content */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 760 }}>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(1.5rem, 2.2vw, 1.95rem)', lineHeight: 1.1,
          color: h ? 'var(--fg-1)' : 'var(--silver-300)', transition: 'color 200ms' }}>{title}</h3>

        <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 500, fontSize: 'clamp(1.05rem, 1.5vw, 1.3rem)', lineHeight: 1.45,
          color: 'var(--fg-1)' }}>{question}</p>
      </div>
    </div>
  );
}

function DiagnosticV2() {
  const stages = [
    { num: 1, title: 'Revenue Foundation',
      question: 'Is the business clear on where revenue will come from and what must be true to capture it?',
      looksAt: 'Market focus, revenue model, customer clarity, offer strategy, pricing, margin logic, and growth thesis.',
      failure: 'The company is chasing activity without a clear revenue path.' },
    { num: 2, title: 'Commercial Alignment',
      question: 'Are leadership, teams, incentives, decisions, and data aligned to the same revenue objective?',
      looksAt: 'Executive alignment, cross-functional ownership, accountability, decision rights, incentives, team structure, and operating rhythm.',
      failure: 'Everyone is busy, but not everyone is building the same outcome.' },
    { num: 3, title: 'Operating Flow',
      question: 'Can work, customers, data, systems, and decisions move through the business without friction?',
      looksAt: 'CRM, ERP, handoffs, customer experience, manual work, process constraints, revenue leakage, margin leakage, and AI opportunities.',
      failure: 'Revenue is being slowed, hidden, or lost inside the business.' },
    { num: 4, title: 'Scalable Revenue',
      question: 'Can the business grow without adding complexity faster than capacity?',
      looksAt: 'Repeatability, adoption, automation, AI in production, leadership cadence, performance rhythm, and reduced dependence on heroic effort.',
      failure: 'Growth depends on effort the system cannot sustain.' },
  ];

  return (
    <section id="diagnostic" className="rm-section" style={{ padding: '104px 56px',
      position: 'relative', overflow: 'hidden',
      borderTop: '1px solid var(--ink-line-soft)' }}>
      <img src="assets/rm-monogram.png" alt="" aria-hidden="true" style={{
        position: 'absolute', right: '-8%', top: '6%',
        height: '70%', width: 'auto', opacity: 0.035, pointerEvents: 'none'
      }} />

      <div style={{ position: 'relative' }}>
        <SectionHeadV2
          eyebrow="Diagnostic"
          title="Find where revenue is getting stuck."
          intro="Revenue does not stall in one place. It gets stuck somewhere inside the system: market focus, commercial alignment, operating flow, data visibility, technology adoption, leadership cadence, or scalable execution. Ryan uses the Revenue System Diagnostic to identify where AI, data, systems, people, and commercial operations are failing to convert into measurable revenue growth."
          maxIntro={760} />

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

        {/* CTAs */}
        <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 14,
          flexWrap: 'wrap', marginTop: 44 }}>
          <ButtonV2 href="#contact">Explore the diagnostic</ButtonV2>
          <ButtonV2 href="#contact" variant="ghost">Talk about your revenue system</ButtonV2>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DiagnosticV2 });