const AIDD = () => {
  const stages = [
    {
      n: '01', label: 'Data', icon: 'Database', color: '#E63329',
      desc: 'Unify signals from systems, documents, sensors, and conversations into one observable substrate.',
      bullets: ['Connectors & ingestion', 'Schema normalization', 'Vector + relational stores'],
    },
    {
      n: '02', label: 'Intelligence', icon: 'Spark', color: '#F5C518',
      desc: 'Domain-tuned models reason over your data — classification, extraction, prediction, generation.',
      bullets: ['Custom + foundation models', 'Retrieval & evaluation', 'Guardrails'],
    },
    {
      n: '03', label: 'Automation', icon: 'Bolt', color: '#14A04A',
      desc: 'Decisions become actions. Workflows execute end-to-end with humans on the loop, not in it.',
      bullets: ['Agentic orchestration', 'Approval & escalation', 'Native system writes'],
    },
    {
      n: '04', label: 'Outcomes', icon: 'Target', color: '#1B7BD6',
      desc: 'Measure what changed: cost, cycle time, conversion, error rate. Loop the result back into the model.',
      bullets: ['Outcome telemetry', 'Continuous learning', 'Compounding ROI'],
    },
  ];

  return (
    <Section
      id="aidd"
      eyebrow="The AIDD framework"
      title={<>How Webever ships AI<br/>that actually changes the P&amp;L.</>}
      sub="Four stages, one continuous loop. AIDD treats AI as the operating system of work — not a model you call from a dashboard."
      className="border-t border-token"
    >
      {/* Pipeline visual */}
      <div className="card p-6 md:p-10 reveal overflow-hidden relative">
        <div className="absolute inset-0 opacity-[0.04] grid-bg pointer-events-none"/>

        {/* Connecting flow line (desktop) */}
        <div className="hidden lg:block absolute left-10 right-10 top-[140px] h-px pointer-events-none">
          <svg width="100%" height="2" viewBox="0 0 1000 2" preserveAspectRatio="none">
            <defs>
              <linearGradient id="aiddFlow" x1="0" x2="1">
                <stop offset="0%" stopColor="#E63329"/>
                <stop offset="33%" stopColor="#F5C518"/>
                <stop offset="66%" stopColor="#14A04A"/>
                <stop offset="100%" stopColor="#1B7BD6"/>
              </linearGradient>
            </defs>
            <line x1="0" y1="1" x2="1000" y2="1" stroke="url(#aiddFlow)" strokeWidth="1.5" strokeDasharray="4 6" className="dash-flow"/>
          </svg>
        </div>

        <div className="relative grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-4">
          {stages.map((s, i) => {
            const IconCmp = I[s.icon];
            return (
              <div key={i} className="reveal" style={{transitionDelay: `${i*80}ms`}}>
                <div className="flex flex-col items-start">
                  {/* Stage chip on the line */}
                  <div className="relative mb-6">
                    <div className="w-[88px] h-[88px] rounded-2xl border border-token flex items-center justify-center"
                         style={{background: 'var(--surface)', color: s.color}}>
                      <IconCmp size={30}/>
                    </div>
                    <div className="absolute -top-2 -right-2 px-1.5 py-0.5 rounded-md font-mono text-[10px] tracking-[0.12em]"
                         style={{background: s.color, color: '#fff'}}>
                      {s.n}
                    </div>
                  </div>

                  <div className="font-mono text-[11px] tracking-[0.16em] uppercase text-muted">Stage {s.n}</div>
                  <h3 className="display text-[28px] mt-1">{s.label}</h3>
                  <p className="mt-3 text-[14.5px] text-muted leading-relaxed">{s.desc}</p>

                  <ul className="mt-5 space-y-2 text-[13.5px]">
                    {s.bullets.map((b, k) => (
                      <li key={k} className="flex items-start gap-2">
                        <span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0" style={{background: s.color}}/>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            );
          })}
        </div>

        {/* Loop indicator */}
        <div className="mt-12 pt-8 border-t border-token flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-full border border-token flex items-center justify-center text-muted">
              <I.Loop size={16}/>
            </div>
            <div>
              <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-muted">Continuous learning</div>
              <div className="text-[14px] mt-0.5">Outcomes feed back into the data layer — the system gets sharper every cycle.</div>
            </div>
          </div>
          <div className="flex items-center gap-2 font-mono text-[11px] text-muted">
            <span className="w-1.5 h-1.5 rounded-full bg-brand-green animate-pulse"/>
            cycle.t = 142ms · n = 12,480/min
          </div>
        </div>
      </div>
    </Section>
  );
};

window.AIDD = AIDD;