'use client'

import Image from 'next/image'
import { ArrowRight, Phone } from 'lucide-react'
import { Reveal } from './motion-primitives'

export function CTA() {
  return (
    <section className="bg-cream py-20 lg:py-28">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <Reveal direction="zoom-in">
          <div className="relative overflow-hidden rounded-[2rem] bg-primary px-6 py-16 shadow-2xl shadow-primary/25 sm:px-12 lg:px-16">
            <Image
              src="/cta-landscape.png"
              alt="Padang rumput hijau dengan domba saat golden hour"
              fill
              className="object-cover opacity-25"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/90 to-primary/70" />

            <div className="relative mx-auto max-w-3xl text-center text-primary-foreground">
              <h2 className="text-balance font-display text-3xl font-extrabold tracking-tight sm:text-5xl">
                Mari Bekerja Sama!
              </h2>
              <p className="mx-auto mt-5 max-w-2xl text-pretty leading-relaxed text-primary-foreground/80">
                Kami menyambut baik kemitraan yang dapat memberikan dampak nyata
                bagi komunitas pedesaan demi membangun masa depan yang lebih
                baik.
              </p>
              <div className="mt-9 flex flex-wrap items-center justify-center gap-4">
                <a
                  href="#kontak"
                  className="font-button group inline-flex items-center gap-2 rounded-full bg-accent px-7 py-3.5 text-sm font-semibold text-primary shadow-lg transition-all duration-300 hover:-translate-y-0.5 hover:bg-primary-foreground"
                >
                  Menjadi Mitra
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </a>
                <a
                  href="#kontak"
                  className="font-button group inline-flex items-center gap-2 rounded-full border border-primary-foreground/30 bg-primary-foreground/5 px-7 py-3.5 text-sm font-semibold text-primary-foreground backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:bg-primary-foreground/15"
                >
                  <Phone className="h-4 w-4 transition-transform group-hover:rotate-12" />
                  Hubungi Kami
                </a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  )
}
