'use client';

import { Workflow, Database, Server } from 'lucide-react';
import { FeatureIcon } from './ui/FeatureIcon';

const problems = [
  {
    title: 'Universal Agent API',
    desc: 'Claude Code, Codex, OpenCode, and Amp each have different APIs. We provide a single interface to control them all.',
    icon: Workflow,
    color: 'text-accent',
  },
  {
    title: 'Universal Transcripts',
    desc: 'Every agent has its own event format. Our universal schema normalizes them all — stream, store, and replay with ease.',
    icon: Database,
    color: 'text-purple-400',
  },
  {
    title: 'Run Anywhere',
    desc: 'Lightweight Rust daemon runs locally or in any environment. One command to bridge coding agents to your system.',
    icon: Server,
    color: 'text-green-400',
  },
];

export function ProblemsSolved() {
  return (
    <section id="features" className="py-24 bg-zinc-950 border-y border-white/5">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold text-white mb-4">Why Coding Agent SDK?</h2>
          <p className="text-zinc-400 max-w-xl mx-auto">
            Solving the three fundamental friction points of agentic software development.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {problems.map((item, idx) => (
            <div
              key={idx}
              className="group p-8 rounded-2xl bg-zinc-900/40 border border-white/5 hover:border-accent/30 transition-all duration-300"
            >
              <FeatureIcon icon={item.icon} color={item.color} />
              <h3 className="text-xl font-bold text-white mb-3">{item.title}</h3>
              <p className="text-zinc-400 text-sm leading-relaxed">{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}