const useCases = [
  {
    icon: "🏢",
    title: "Enterprise Automation",
    description: "Deploy AI agents to automate complex business processes across departments",
    metrics: "75% reduction in manual tasks",
  },
  {
    icon: "🔬",
    title: "Research & Analysis",
    description: "Run parallel research agents that analyze documents, data, and web content",
    metrics: "10x faster literature review",
  },
  {
    icon: "🛠️",
    title: "DevOps & SRE",
    description: "Intelligent agents that monitor, diagnose, and remediate infrastructure issues",
    metrics: "60% faster incident response",
  },
  {
    icon: "🎯",
    title: "Sales & Marketing",
    description: "Personalized outreach agents that research leads and craft custom messages",
    metrics: "3x higher response rates",
  },
  {
    icon: "📊",
    title: "Data Processing",
    description: "ETL agents that clean, transform, and analyze data at scale",
    metrics: "Process 1M+ records/hour",
  },
  {
    icon: "🤝",
    title: "Customer Support",
    description: "Multi-agent support teams that handle inquiries with human-level nuance",
    metrics: "90% resolution rate",
  },
]

export default function UseCases() {
  return (
    <section className="px-6 py-16">
      <div className="mx-auto max-w-6xl">
        <h2 className="text-center font-display text-2xl font-bold">
          Built for <span className="gradient-text">Every Use Case</span>
        </h2>
        <p className="mx-auto mt-4 max-w-lg text-center text-text-muted">
          From startups to enterprises, BlackRoad powers AI agents across industries
        </p>
        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {useCases.map((uc) => (
            <div
              key={uc.title}
              className="group rounded-xl border border-border bg-surface p-6 transition hover:-translate-y-0.5 hover:border-border-hover"
            >
              <div className="text-3xl">{uc.icon}</div>
              <h3 className="mt-4 font-display font-semibold group-hover:text-accent">
                {uc.title}
              </h3>
              <p className="mt-2 text-sm text-text-muted">{uc.description}</p>
              <p className="mt-4 text-xs font-medium text-accent">{uc.metrics}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}