const Outcomes = () => {
  const kpis = [
    { v: '70%', label: 'Reduction in manual work',
      sub: 'across approval, document, and reconciliation flows', color: '#E63329' },
    { v: '14×', label: 'Faster decision cycles',
      sub: 'from days-to-report to minutes-to-action', color: '#14A04A' },
    { v: '6 wk', label: 'Median time-to-value',
      sub: 'from kickoff to first automated outcome in production', color: '#1B7BD6' },
    { v: '98.6%', label: 'Extraction accuracy',
      sub: 'on production document pipelines, human-in-loop on exceptions', color: '#F5C518' },
  ];

  // Mini chart data - cycle time before vs after
  const before = [86, 92, 78, 88, 90, 84, 81];
  const after  = [22, 18, 14, 12, 10, 9, 7];
  const max = 100;

  return (
    <Section
      id="outcomes"
      eyebrow="Measured outcomes"
      title="Less ceremony. More throughput."
      sub="Every Webever engagement is instrumented from day one. These are the deltas our customers report after the first AIDD loop closes."
      className="border-t border-token"
    >
      <div className="grid lg:grid-cols-12 gap-5 md:gap-6">
        {/* KPI cards */}
        <div className="lg:col-span-7 grid sm:grid-cols-2 gap-5 md:gap-6">
          {kpis.map((k, i) => (
            <div key={i} className="reveal card p-7 relative overflow-hidden" style={{transitionDelay: `${i*60}ms`}}>
              <div className="absolute -top-px left-7 right-7 h-px" style={{background: k.color, opacity: .8}}/>
              <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-muted mb-6">Metric · {String(i+1).padStart(2,'0')}</div>
              <div className="display text-[60px] md:text-[68px] leading-none" style={{color: k.color}}>{k.v}</div>
              <div className="mt-4 text-[15px] font-medium">{k.label}</div>
              <div className="mt-1.5 text-[13px] text-muted leading-relaxed">{k.sub}</div>
            </div>
          ))}
        </div>

        {/* Cycle-time chart */}
        <div className="lg:col-span-5 reveal card p-7 flex flex-col">
          <div className="flex items-center justify-between mb-2">
            <div>
              <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-muted">Before / After</div>
              <h3 className="display text-[22px] mt-1">Cycle time, weekly</h3>
            </div>
            <div className="flex items-center gap-3 text-[11px] font-mono">
              <span className="inline-flex items-center gap-1.5 text-muted"><span className="w-2 h-2 rounded-sm bg-ink-300"/>before</span>
              <span className="inline-flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm bg-brand-green"/>aidd</span>
            </div>
          </div>

          <div className="mt-6 flex-1 flex items-end gap-3">
            {before.map((b, i) => (
              <div key={i} className="flex-1 flex flex-col items-center gap-1.5">
                <div className="relative w-full h-[200px] flex items-end gap-1">
                  <div className="flex-1 bg-ink-200 rounded-t-sm" style={{height: `${(b/max)*100}%`}}/>
                  <div className="flex-1 rounded-t-sm" style={{height: `${(after[i]/max)*100}%`, background:'#14A04A'}}/>
                </div>
                <div className="font-mono text-[10px] text-muted">w{i+1}</div>
              </div>
            ))}
          </div>

          <div className="mt-6 pt-5 border-t border-token flex items-center justify-between">
            <div className="text-[13px] text-muted">Avg. process: <span className="font-mono">invoice → posting</span></div>
            <div className="text-[13px] font-medium text-brand-green">−87% in 7 weeks</div>
          </div>
        </div>
      </div>

      {/* Quote strip */}
      <div className="mt-16 reveal">
        <div className="card p-8 md:p-12 grid md:grid-cols-12 gap-8 items-center">
          <div className="md:col-span-2 flex md:justify-start">
            <div className="w-14 h-14 rounded-full brand-gradient spin-slow"
                 style={{
                   WebkitMask: 'radial-gradient(circle, transparent 16px, #000 17px, #000 26px, transparent 27px)',
                   mask: 'radial-gradient(circle, transparent 16px, #000 17px, #000 26px, transparent 27px)',
                 }}/>
          </div>
          <div className="md:col-span-8">
            <p className="font-serif text-[26px] md:text-[32px] leading-[1.25] text-[var(--text)]">
              "Webever didn't deliver a tool — they delivered an operating loop. Our finance ops are now a function of one button, not five people."
            </p>
            <div className="mt-5 flex items-center gap-3 text-[13px]">
              <div className="w-8 h-8 rounded-full stripe-placeholder border border-token"/>
              <div>
                <div className="font-medium">VP Operations · Mid-market manufacturing</div>
                <div className="text-muted font-mono text-[11px] tracking-[0.12em] uppercase">Reference customer</div>
              </div>
            </div>
          </div>
          <div className="md:col-span-2 flex md:justify-end">
            <a href="#contact" className="btn btn-ghost text-[13px]">Read case <I.ArrowUR size={12}/></a>
          </div>
        </div>
      </div>
    </Section>
  );
};

window.Outcomes = Outcomes;