'use client'

import Image from 'next/image'
import {
  Wallet,
  Sprout,
  Wheat,
  ShieldCheck,
  Recycle,
  ArrowRight,
} from 'lucide-react'
import { Reveal, StaggerGroup, StaggerItem } from './motion-primitives'

const objectives = [
  { icon: Wallet, text: 'Meningkatkan pendapatan rumah tangga peternak.' },
  { icon: Sprout, text: 'Memperluas budidaya dan pembibitan domba Garut.' },
  { icon: Wheat, text: 'Meningkatkan ketahanan pangan.' },
  { icon: ShieldCheck, text: 'Membangun usaha peternakan pedesaan yang tangguh.' },
  { icon: Recycle, text: 'Menciptakan mata pencaharian yang berkelanjutan.' },
]

const valueChain = ['Pembibitan', 'Budidaya', 'Pakan', 'Pasar', 'Pendapatan']

export function ProgramGS4P() {
  return (
    <section id="program" className="relative overflow-hidden bg-cream py-20 lg:py-28">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <Reveal className="mx-auto max-w-3xl text-center">
          <span className="font-button inline-flex items-center rounded-full bg-secondary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-secondary">
            Program Unggulan
          </span>
          <h2 className="mt-5 font-display text-4xl font-extrabold tracking-tight text-primary sm:text-5xl">
            GS4P
          </h2>
          <p className="mt-2 font-display text-lg font-semibold text-secondary">
            Garut Sheep for Prosperity
          </p>
          <p className="mt-5 text-pretty leading-relaxed text-muted-foreground">
            GS4P adalah program peternakan inklusif berbasis domba Garut yang
            bertujuan untuk memperkuat perekonomian pedesaan. Program ini fokus
            pada pengembangan rantai nilai (value chain) domba Garut serta
            memberdayakan rumah tangga peternak.
          </p>
        </Reveal>

        {/* Value chain illustration */}
        <Reveal delay={0.1} className="mt-14">
          <div className="rounded-3xl border border-border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8">
            <p className="mb-6 text-center font-button text-sm font-semibold uppercase tracking-[0.14em] text-muted-foreground">
              Value Chain Domba Garut
            </p>
            <div className="flex flex-wrap items-center justify-center gap-3">
              {valueChain.map((step, i) => (
                <div key={step} className="flex items-center gap-3">
                  <span className="rounded-full bg-primary/5 px-5 py-2.5 font-button text-sm font-semibold text-primary transition-colors hover:bg-secondary hover:text-secondary-foreground">
                    {step}
                  </span>
                  {i < valueChain.length - 1 && (
                    <ArrowRight className="h-4 w-4 shrink-0 text-secondary" />
                  )}
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        <div className="mt-14 grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          <Reveal direction="right">
            <div className="relative overflow-hidden rounded-3xl shadow-xl shadow-primary/10 ring-1 ring-primary/10">
              <Image
                src="/program-farmer.png"
                alt="Peternak desa tersenyum bersama domba Garut yang sehat"
                width={760}
                height={620}
                className="h-full w-full object-cover transition-transform duration-700 hover:scale-105"
              />
            </div>
          </Reveal>

          <div>
            <Reveal direction="left">
              <h3 className="font-display text-2xl font-bold text-primary">
                Objective Program
              </h3>
            </Reveal>
            <StaggerGroup className="mt-6 space-y-3">
              {objectives.map((o) => (
                <StaggerItem key={o.text}>
                  <div className="group flex items-start gap-4 rounded-2xl border border-border bg-card p-4 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-secondary/40 hover:shadow-lg">
                    <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent/40 text-primary transition-colors group-hover:bg-secondary group-hover:text-secondary-foreground">
                      <o.icon className="h-5 w-5" />
                    </span>
                    <p className="pt-1.5 text-sm font-medium leading-relaxed text-foreground/90">
                      {o.text}
                    </p>
                  </div>
                </StaggerItem>
              ))}
            </StaggerGroup>
          </div>
        </div>
      </div>
    </section>
  )
}
