'use client';

import React from 'react';
import { Button } from '@/components/ui/Button';
import { motion } from 'framer-motion';

export interface CallToActionProps {
  title?: string;
  description?: string;
  ctaLabel?: string;
  ctaHref?: string;
  theme?: 'light' | 'dark';
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
  },
};

export const CallToAction: React.FC<CallToActionProps> = ({
  title = 'Bereit für Ihr Projekt?',
  description = 'Wir suchen stets nach neuen Herausforderungen und starken Partnern. Kontaktieren Sie uns für eine unverbindliche Beratung zu Ihrem Vorhaben.',
  ctaLabel = 'Jetzt Kontakt aufnehmen',
  ctaHref = '/de/kontakt',
  theme = 'light'
}) => {
  const isDark = theme === 'dark';
  
  return (
    <div className={`py-24 text-center ${isDark ? 'bg-primary-dark text-white' : 'bg-neutral-50 border-t border-neutral-100'}`}>
      <motion.div 
        className="container max-w-3xl mx-auto px-4"
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-100px" }}
      >
        <motion.h2 variants={itemVariants} className={`font-heading text-4xl font-extrabold mb-6 ${isDark ? 'text-white' : 'text-neutral-dark'}`}>
          {title}
        </motion.h2>
        <motion.p variants={itemVariants} className={`text-xl mb-10 leading-relaxed ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>
          {description}
        </motion.p>
        <motion.div variants={itemVariants}>
          <Button 
            href={ctaHref} 
            size="xl"
            variant={isDark ? 'white' : 'primary'}
          >
            {ctaLabel}
          </Button>
        </motion.div>
      </motion.div>
    </div>
  );
};