const Problem = () => {
  const items = [
    {
      n: '01',
      t: 'Workflows that should run themselves',
      d: 'still need people.',
      sub: 'Approvals, handoffs, status chases — humans become the integration layer.',
      color: '#E63329',
    },
    {
      n: '02',
      t: 'Decisions that should be instant',
      d: 'still wait on reports.',
      sub: 'Dashboards refresh weekly. Action lags signal. Opportunities decay in the queue.',
      color: '#F5C518',
    },
    {
      n: '03',
      t: 'Processes that should take hours',
      d: 'still take weeks.',
      sub: 'Onboarding. Reconciliation. Compliance. Linear effort against exponential demand.',
      color: '#1B7BD6',
    },
  ];

  return (
    <Section
      id="problem"
      eyebrow="The operating gap"
      title={<>The work is digital.<br/>The bottlenecks are human.</>}
      sub="Every modern enterprise has the same three frictions. They're not a software problem — they're a missing intelligence layer."
    >
      <div className="grid md:grid-cols-3 gap-5 md:gap-6">
        {items.map((it, i) => (
          <div key={i} className="reveal card p-7 md:p-8 flex flex-col group hover:shadow-card transition-shadow"
               style={{transitionDelay: `${i*60}ms`}}>
            <div className="flex items-center justify-between mb-10">
              <span className="font-mono text-[11px] tracking-[0.16em] text-muted">{it.n}</span>
              <span className="w-2 h-2 rounded-full" style={{background: it.color}}/>
            </div>
            <h3 className="display text-[26px] md:text-[30px] leading-[1.05]">
              {it.t}<br/>
              <span className="text-muted">{it.d}</span>
            </h3>
            <p className="mt-6 text-[15px] text-muted leading-relaxed">{it.sub}</p>
            <div className="mt-10 pt-6 border-t border-token flex items-center gap-2 text-[12px] font-mono text-muted">
              <span className="w-1 h-1 rounded-full bg-brand-red"/> friction.detected
            </div>
          </div>
        ))}
      </div>

      {/* Transformation statement */}
      <div className="mt-16 md:mt-20 reveal">
        <div className="card overflow-hidden relative">
          <div className="absolute inset-0 opacity-[0.04] grid-bg pointer-events-none"/>
          <div className="relative p-8 md:p-12 grid md:grid-cols-12 gap-8 items-center">
            <div className="md:col-span-8">
              <Eyebrow>The shift</Eyebrow>
              <h3 className="display text-[32px] md:text-[44px] mt-4 leading-[1.05]">
                We fix this with <span className="brand-gradient-text">AI-Driven Development</span>.
              </h3>
              <p className="mt-5 text-[16px] md:text-[17px] text-muted max-w-xl leading-relaxed">
                AIDD is how Webever ships outcome-driven systems: AI is not a feature bolted on — it's the architecture that data flows through, that decisions are made in, and that work executes from.
              </p>
            </div>
            <div className="md:col-span-4 flex md:justify-end">
              <a href="#aidd" className="btn btn-primary text-[15px] px-5 py-3">
                See the framework <I.Arrow size={14}/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

window.Problem = Problem;