// Transformation scroll section
// Three states: Manual → Automated → AI-Driven. Built as a horizontal flow with progress.

const STAGES = [
  {
    key: 'manual',
    label: '01 · Manual Operations',
    title: 'Spreadsheets, tickets, copy-paste.',
    desc: 'Ops teams hold the system together by force of will. Knowledge lives in heads. Errors are absorbed, not detected.',
    metric: { v: '~38h', l: 'weekly toil per ops engineer' },
  },
  {
    key: 'automated',
    label: '02 · Automated Systems',
    title: 'Workflows compile. Errors surface.',
    desc: 'Manual steps replaced by versioned pipelines. Every node logs its inputs. Failures become tickets, not catastrophes.',
    metric: { v: '99.94%', l: 'SLA on automated paths' },
  },
  {
    key: 'ai',
    label: '03 · AI-Driven Operations',
    title: 'Agents reason. Systems self-correct.',
    desc: 'RAG agents triage anomalies, propose fixes, and route exceptions to humans only when judgment is required.',
    metric: { v: '0.21s', l: 'avg. agent decision latency' },
  },
];

function TransformVis({ active }) {
  // 3-layer system diagram — each stage adds more structure
  return (
    <div className="so-tx-vis">
      <svg viewBox="0 0 480 260" width="100%" height="260">
        {/* shared grid */}
        <defs>
          <pattern id="tx-grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--grid-line)" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="480" height="260" fill="url(#tx-grid)" opacity="0.6"/>

        {/* MANUAL: scattered, no connections */}
        <g opacity={active === 0 ? 1 : 0.15} style={{ transition: 'opacity 400ms' }}>
          <g fill="var(--surface-hi)" stroke="var(--border-strong)" strokeDasharray="2 3" strokeWidth="1">
            <rect x="40" y="40" width="60" height="30" rx="3"/>
            <rect x="200" y="60" width="60" height="30" rx="3"/>
            <rect x="360" y="30" width="60" height="30" rx="3"/>
            <rect x="100" y="160" width="60" height="30" rx="3"/>
            <rect x="280" y="180" width="60" height="30" rx="3"/>
          </g>
          <g fill="var(--ink-muted)" fontFamily="JetBrains Mono, monospace" fontSize="9">
            <text x="70" y="59" textAnchor="middle">excel</text>
            <text x="230" y="79" textAnchor="middle">email</text>
            <text x="390" y="49" textAnchor="middle">slack</text>
            <text x="130" y="179" textAnchor="middle">notion</text>
            <text x="310" y="199" textAnchor="middle">jira</text>
          </g>
        </g>

        {/* AUTOMATED: connected nodes */}
        <g opacity={active === 1 ? 1 : 0.15} style={{ transition: 'opacity 400ms' }}>
          <g fill="var(--surface-hi)" stroke="var(--signal-line)" strokeWidth="1">
            <rect x="40" y="115" width="60" height="30" rx="3"/>
            <rect x="160" y="65" width="60" height="30" rx="3"/>
            <rect x="160" y="165" width="60" height="30" rx="3"/>
            <rect x="280" y="115" width="60" height="30" rx="3"/>
            <rect x="400" y="115" width="60" height="30" rx="3"/>
          </g>
          <g fill="none" stroke="var(--signal)" strokeWidth="1.5" strokeDasharray="3 4" className="so-dash">
            <path d="M 100 130 Q 130 130 160 80"/>
            <path d="M 100 130 Q 130 130 160 180"/>
            <path d="M 220 80 Q 250 80 280 130"/>
            <path d="M 220 180 Q 250 180 280 130"/>
            <path d="M 340 130 L 400 130"/>
          </g>
          <g fill="var(--signal)">
            <circle cx="70" cy="130" r="2"/>
            <circle cx="190" cy="80" r="2"/>
            <circle cx="190" cy="180" r="2"/>
            <circle cx="310" cy="130" r="2"/>
            <circle cx="430" cy="130" r="2"/>
          </g>
          <g fill="var(--ink-muted)" fontFamily="JetBrains Mono, monospace" fontSize="9">
            <text x="70" y="134" textAnchor="middle">intake</text>
            <text x="190" y="84" textAnchor="middle">parse</text>
            <text x="190" y="184" textAnchor="middle">enrich</text>
            <text x="310" y="134" textAnchor="middle">route</text>
            <text x="430" y="134" textAnchor="middle">release</text>
          </g>
        </g>

        {/* AI: graph w/ agent + feedback loops */}
        <g opacity={active === 2 ? 1 : 0.15} style={{ transition: 'opacity 400ms' }}>
          {/* central agent */}
          <circle cx="240" cy="130" r="34" fill="rgba(61,245,165,0.10)" stroke="var(--signal)" strokeWidth="1.5"/>
          <text x="240" y="125" textAnchor="middle" fill="var(--signal)" fontFamily="JetBrains Mono, monospace" fontSize="9">RAG</text>
          <text x="240" y="138" textAnchor="middle" fill="var(--signal)" fontFamily="JetBrains Mono, monospace" fontSize="9">AGENT</text>
          {/* perimeter nodes */}
          <g fill="var(--surface-hi)" stroke="var(--border-strong)" strokeWidth="1">
            <circle cx="60"  cy="80"  r="14"/>
            <circle cx="60"  cy="180" r="14"/>
            <circle cx="420" cy="80"  r="14"/>
            <circle cx="420" cy="180" r="14"/>
            <circle cx="240" cy="30"  r="14"/>
            <circle cx="240" cy="230" r="14"/>
          </g>
          {/* curved feedback connectors */}
          <g fill="none" stroke="var(--signal)" strokeWidth="1.2" opacity="0.7">
            <path d="M 74 80 Q 150 100 206 130" strokeDasharray="3 3"/>
            <path d="M 74 180 Q 150 160 206 130" strokeDasharray="3 3"/>
            <path d="M 274 130 Q 350 100 406 80" strokeDasharray="3 3"/>
            <path d="M 274 130 Q 350 160 406 180" strokeDasharray="3 3"/>
            <path d="M 240 44  L 240 96"  strokeDasharray="3 3"/>
            <path d="M 240 164 L 240 216" strokeDasharray="3 3"/>
          </g>
          <g fill="var(--ink-muted)" fontFamily="JetBrains Mono, monospace" fontSize="8">
            <text x="60"  y="82"  textAnchor="middle">obs</text>
            <text x="60"  y="182" textAnchor="middle">db</text>
            <text x="420" y="82"  textAnchor="middle">act</text>
            <text x="420" y="182" textAnchor="middle">log</text>
            <text x="240" y="32"  textAnchor="middle">in</text>
            <text x="240" y="232" textAnchor="middle">out</text>
          </g>
        </g>
      </svg>
    </div>
  );
}

function TransformSection() {
  const [active, setActive] = React.useState(0);
  return (
    <section className="so-section so-tx" id="transform">
      <div className="so-section-head">
        <span className="so-mono-label">SCROLL · TRANSFORMATION</span>
        <h2 className="so-section-title">
          Manual → Automated → <span className="signal">AI-driven.</span>
        </h2>
        <p className="so-section-lede">
          Every engagement moves an operation through three states. We design the path and hand off each layer cleanly.
        </p>
      </div>

      <div className="so-tx-stage">
        <TransformVis active={active} />
        <div className="so-tx-stages">
          {STAGES.map((s, i) => (
            <button
              key={s.key}
              className={'so-tx-stage-card' + (active === i ? ' active' : '')}
              onClick={() => setActive(i)}
              onMouseEnter={() => setActive(i)}
            >
              <span className="so-mono-label">{s.label}</span>
              <div className="title">{s.title}</div>
              <div className="desc">{s.desc}</div>
              <div className="metric">
                <span className="v">{s.metric.v}</span>
                <span className="l">{s.metric.l}</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TransformSection });