"use client"

import * as React from "react"
import { motion } from "framer-motion"
import { fadeUp, staggerContainer } from "@/lib/motion"

import { ArrowRight, Rocket } from "lucide-react"
import Link from "next/link"
import type { Route } from "next"

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  "ti-rocket": Rocket,
  "ti-arrow-right": ArrowRight,
}

function RenderIcon({ name, className }: { name?: string; className?: string }) {
  if (!name) return null
  const Icon = iconMap[name]
  if (!Icon) return null
  return <Icon className={className} />
}

interface CTAButton {
  text: string
  primary?: boolean
  icon?: string
  target?: string
}

interface CTAData {
  title: string
  description: string
  buttons: CTAButton[]
}

export function DataOneCTA({ data }: { data: CTAData }) {
  if (!data) return null

  const handleButtonClick = (target?: string, e?: React.MouseEvent) => {
    if (target?.startsWith("#")) {
      e?.preventDefault()
      const el = document.querySelector(target)
      if (el) {
        const y = el.getBoundingClientRect().top + window.pageYOffset - 66
        window.scrollTo({ top: y, behavior: "smooth" })
      }
    }
  }

  return (
    <section id="cta" className="bg-navy text-white py-[80px] relative overflow-hidden border-b border-ink">
      {/* Background pattern */}
      <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.045)_1px,transparent_1px)] bg-[size:28px_28px] pointer-events-none" />
      
      <div className="max-w-[800px] mx-auto px-7 relative z-10 text-center">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
          variants={staggerContainer}
          className="space-y-6 flex flex-col items-center"
        >
          <motion.div variants={fadeUp} className="space-y-3">
            <h2 className="font-display text-[36px] md:text-[40px] leading-[1.14] tracking-[-0.3px] text-white m-0">
              {data.title}
            </h2>
            <p className="text-[15.5px] leading-[1.78] font-light text-white/66 max-w-[620px] mx-auto m-0">
              {data.description}
            </p>
          </motion.div>
          
          <motion.div 
            variants={fadeUp} 
            className="flex flex-col sm:flex-row gap-3.5 justify-center items-center !mt-7"
          >
            {data.buttons.map((btn, i) => {
              const isPrimary = btn.primary === true
              const href = btn.target || "#"

              return (
                <Link 
                  key={i}
                  href={href as Route} 
                  className={
                    isPrimary 
                      ? 'bg-gold hover:bg-gold/90 text-ink border-none rounded-[3px] px-[26px] py-3 text-[14px] font-semibold transition-transform active:translate-y-px duration-150 cursor-pointer flex items-center justify-center gap-2 inline-flex' 
                      : 'bg-transparent text-white border border-white/20 hover:bg-white/5 rounded-[3px] px-[26px] py-3 text-[14px] font-semibold transition-transform active:translate-y-px duration-150 cursor-pointer flex items-center justify-center gap-2 inline-flex'
                  }
                  onClick={(e) => handleButtonClick(btn.target, e)}
                >
                  <RenderIcon name={btn.icon} className="size-4 shrink-0" />
                  <span>{btn.text}</span>
                </Link>
              )
            })}
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}