'use client'

import {
  Dna,
  GraduationCap,
  Stethoscope,
  Leaf,
  LineChart,
  Users,
} from 'lucide-react'
import { Reveal, StaggerGroup, StaggerItem } from './motion-primitives'

const areas = [
  { icon: Dna, title: 'Breeding & Genetics', desc: 'Pengembangan genetika domba Garut unggul.' },
  { icon: GraduationCap, title: 'Training', desc: 'Peningkatan kapasitas dan keterampilan peternak.' },
  { icon: Stethoscope, title: 'Animal Health', desc: 'Layanan kesehatan hewan yang menyeluruh.' },
  { icon: Leaf, title: 'Feed Innovation', desc: 'Inovasi pakan bergizi dan efisien.' },
  { icon: LineChart, title: 'Market Development', desc: 'Perluasan jaringan dan akses pasar.' },
  { icon: Users, title: 'Community Empowerment', desc: 'Pemberdayaan komunitas pedesaan.' },
]

export function FocusAreas() {
  return (
    <section id="fokus" className="bg-background py-20 lg:py-28">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="font-button inline-flex items-center rounded-full bg-accent/40 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-primary">
            Fokus Area
          </span>
          <h2 className="mt-5 text-balance font-display text-3xl font-extrabold tracking-tight text-primary sm:text-4xl">
            Enam Pilar Keunggulan Kami
          </h2>
          <p className="mt-4 text-pretty leading-relaxed text-muted-foreground">
            Setiap pilar dirancang untuk memastikan dampak yang menyeluruh dan
            berkelanjutan.
          </p>
        </Reveal>

        <StaggerGroup className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {areas.map((a) => (
            <StaggerItem key={a.title}>
              <div className="group relative h-full overflow-hidden rounded-2xl border border-border bg-card p-7 shadow-sm transition-all duration-300 hover:-translate-y-2 hover:border-secondary/40 hover:shadow-xl hover:shadow-primary/10">
                <span className="pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full bg-accent/20 transition-transform duration-500 group-hover:scale-150" />
                <span className="relative flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/5 text-primary transition-all duration-300 group-hover:bg-secondary group-hover:text-secondary-foreground">
                  <a.icon className="h-7 w-7" />
                </span>
                <h3 className="relative mt-6 font-display text-lg font-bold text-primary">
                  {a.title}
                </h3>
                <p className="relative mt-2 text-sm leading-relaxed text-muted-foreground">
                  {a.desc}
                </p>
              </div>
            </StaggerItem>
          ))}
        </StaggerGroup>
      </div>
    </section>
  )
}
