'use client'

import { motion } from 'framer-motion'
import {
  Home,
  GraduationCap,
  Truck,
  Wrench,
  Store,
  BadgeDollarSign,
} from 'lucide-react'
import { Reveal } from './motion-primitives'

const steps = [
  { icon: Home, title: 'Community Breeding Centre', desc: 'Pusat pembibitan domba Garut unggul.' },
  { icon: GraduationCap, title: 'Farmer Academy', desc: 'Pelatihan keterampilan bagi peternak.' },
  { icon: Truck, title: 'Sheep Distribution', desc: 'Distribusi domba kepada mitra peternak.' },
  { icon: Wrench, title: 'Technical Assistance', desc: 'Pendampingan teknis berkelanjutan.' },
  { icon: Store, title: 'Market Access', desc: 'Akses pasar yang luas dan adil.' },
  { icon: BadgeDollarSign, title: 'Sustainable Income', desc: 'Pendapatan yang stabil dan berkelanjutan.' },
]

export function HowItWorks() {
  return (
    <section id="cara-kerja" 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">
            Cara Kerja
          </span>
          <h2 className="mt-5 text-balance font-display text-3xl font-extrabold tracking-tight text-primary sm:text-4xl">
            Dari Pembibitan Menuju Kesejahteraan
          </h2>
          <p className="mt-4 text-pretty leading-relaxed text-muted-foreground">
            Enam langkah terukur yang membawa setiap peternak menuju pendapatan
            yang berkelanjutan.
          </p>
        </Reveal>

        <div className="relative mt-16">
          {/* connecting line - desktop */}
          <div className="absolute left-0 right-0 top-8 hidden h-0.5 bg-border lg:block" />
          <motion.div
            initial={{ scaleX: 0 }}
            whileInView={{ scaleX: 1 }}
            viewport={{ once: true, amount: 0.3 }}
            transition={{ duration: 1.4, ease: 'easeInOut' }}
            className="absolute left-0 right-0 top-8 hidden h-0.5 origin-left bg-secondary lg:block"
          />

          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-6 lg:gap-4">
            {steps.map((step, i) => (
              <motion.div
                key={step.title}
                initial={{ opacity: 0, y: 40 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, amount: 0.3 }}
                transition={{
                  duration: 0.6,
                  delay: i * 0.12,
                  ease: [0.22, 1, 0.36, 1],
                }}
                className="relative flex flex-col items-center text-center lg:items-center"
              >
                <div className="relative z-10 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg shadow-primary/25 transition-transform duration-300 hover:-translate-y-1.5 hover:bg-secondary">
                  <step.icon className="h-7 w-7" />
                  <span className="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-brown font-button text-xs font-bold text-brown-foreground shadow">
                    {i + 1}
                  </span>
                </div>
                <h3 className="mt-5 font-display text-sm font-bold leading-snug text-primary">
                  {step.title}
                </h3>
                <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
                  {step.desc}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
