"use client";
import { Heading } from "./heading";
import { Subheading } from "./subheading";

export const CaseStudies = () => {
  const cases = [
    {
      title: "B2B SaaS Scale-up",
      metric: "+45 Replies in 30 Days",
      description: "Using Clay-style enrichment to target high-intent founders in the UK market.",
    },
    {
      title: "Professional Services Firm",
      metric: "12% Reply Rate, 8 Meetings",
      description: "Hyper-personalized outreach to Head of Growth roles at mid-market companies.",
    },
  ];

  return (
    <section className="py-20 lg:py-40 relative z-20">
      <Heading as="h2">Proof of Concept</Heading>
      <Subheading className="text-center mb-12">
        Real results from our predictable outbound engine.
      </Subheading>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto px-6">
        {cases.map((item, index) => (
          <div key={index} className="p-8 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
            <h3 className="text-2xl font-bold text-black dark:text-white mb-2">{item.metric}</h3>
            <p className="text-lg font-semibold text-blue-600 dark:text-blue-400 mb-4">{item.title}</p>
            <p className="text-muted dark:text-muted-dark">{item.description}</p>
          </div>
        ))}
      </div>
    </section>
  );
};