import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { useSite } from "@/context/SiteContext"
import { MessageCircle } from "lucide-react"

export default function CTA() {
  const { data } = useSite()

  const scrollToPaket = () => {
    const el = document.querySelector("#paket")
    if (el) el.scrollIntoView({ behavior: "smooth" })
  }

  const openWhatsApp = () => {
    window.open(`https://wa.me/${data.contact.whatsapp}`, "_blank")
  }

  return (
    <section id="kontak" className="relative bg-orange-400 border-b-4 border-black py-16 sm:py-20 overflow-hidden">
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-5 left-10 w-32 h-32 bg-black rounded-full" />
        <div className="absolute bottom-10 right-10 w-40 h-40 bg-black rounded-full" />
        <div className="absolute top-1/2 left-1/2 w-20 h-20 bg-black rounded-full" />
      </div>

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5 }}
          viewport={{ once: true }}
          className="max-w-2xl mx-auto space-y-6"
        >
          <h2 className="text-3xl sm:text-5xl font-black text-white leading-tight">
            Siap Pasang Internet{" "}
            <span className="bg-black text-orange-400 px-2">Cepat & Stabil?</span>
          </h2>
          <p className="text-lg font-bold text-white/90">
            Daftar sekarang dan nikmati internet tanpa batas dengan harga terjangkau.
          </p>
          <div className="flex flex-wrap justify-center gap-4 pt-2">
            <Button
              variant="brutal"
              size="lg"
              className="bg-white hover:bg-gray-100 text-black text-base font-black"
              onClick={scrollToPaket}
            >
              Daftar Sekarang
            </Button>
            <Button
              variant="brutal"
              size="lg"
              className="bg-green-500 hover:bg-green-600 text-white text-base font-black"
              onClick={openWhatsApp}
            >
              <MessageCircle className="h-5 w-5 mr-2" />
              Hubungi WhatsApp
            </Button>
          </div>
        </motion.div>
      </div>
    </section>
  )
}