'use client';

import Link from 'next/link';
import { ArrowRight, Check, Play } from 'lucide-react';
import { CTASectionProps } from '@/lib/page-builder/types';

const backgroundClasses = {
  gradient: "bg-linear-to-r from-blue-600 to-purple-600",
  primary: "bg-blue-600",
  secondary: "bg-gray-900"
};

export default function CTASection({
  title = "Start Building Today",
  description = "Get the complete starter kit and launch your next project in hours, not weeks.",
  primaryCtaText = "Get Started Now",
  primaryCtaLink = "/register",
  secondaryCtaText = "Live Demo",
  secondaryCtaLink = "/demo",
  guarantees = ["Instant access", "Full source code", "Free updates"],
  background = "gradient",
  className = "",
  id
}: CTASectionProps) {
  return (
    <section id={id} className={`py-20 px-4 relative overflow-hidden ${className}`}>
      <div className={`absolute inset-0 ${backgroundClasses[background]}`} />
      <div className="absolute inset-0 bg-grid-white/10" />
      
      <div className="max-w-4xl mx-auto text-center relative">
        <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">{title}</h2>
        <p className="text-xl text-white/90 mb-8">{description}</p>
        
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link
            href={primaryCtaLink}
            className="group inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-gray-900 rounded-xl hover:bg-gray-100 transition-all shadow-xl text-lg font-semibold"
          >
            {primaryCtaText}
            <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </Link>
          <Link
            href={secondaryCtaLink}
            className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-white/30 text-white rounded-xl hover:bg-white/10 transition-all text-lg font-semibold"
          >
            <Play className="w-5 h-5" />
            {secondaryCtaText}
          </Link>
        </div>
        
        {guarantees && guarantees.length > 0 && (
          <div className="flex items-center justify-center gap-8 mt-8 text-sm text-white/80">
            {guarantees.map((guarantee, index) => (
              <div key={index} className="flex items-center gap-2">
                <Check className="w-4 h-4" />
                <span>{guarantee}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}