import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { homepage } from "@/marketing/content/homepage";

export function Features() {
  return (
    <section id="features" className="w-full py-16 md:py-24">
      <div className="container mx-auto px-6">
        <div className="mx-auto flex max-w-[980px] flex-col items-center gap-4 mb-12">
        <h2 className="text-3xl font-bold leading-tight tracking-tighter md:text-5xl text-center">
          {homepage.features.title}
        </h2>
        <p className="max-w-[750px] text-center text-lg text-muted-foreground md:text-xl">
          {homepage.features.description}
        </p>
      </div>
      <div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        {homepage.features.list.map((feature, index) => (
          <Card key={index} className="transition-all hover:border-primary/50">
            <CardHeader>
              <CardTitle className="text-lg">{feature.title}</CardTitle>
              <CardDescription className="text-base leading-relaxed">
                {feature.description}
              </CardDescription>
            </CardHeader>
          </Card>
        ))}
      </div>
      </div>
    </section>
  );
}