'use client';

import React, { useState } from 'react';
import { LucideIcon } from 'lucide-react';

interface ContactCenterProps {
  tag: string;
  title: string;
  description: string;
  tagIcon: LucideIcon;
  tagAnimation?: string;
  background?: {
    variant: string;
  };
  useInvertedBackground?: boolean;
  inputPlaceholder: string;
  buttonText: string;
  termsText: string;
}

export default function ContactCenter({
  tag,
  title,
  description,
  tagIcon: TagIcon,
  tagAnimation = 'slide-up',
  background = { variant: 'radial-gradient' },
  useInvertedBackground = false,
  inputPlaceholder,
  buttonText,
  termsText,
}: ContactCenterProps) {
  const [email, setEmail] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email.trim()) {
      setIsSubmitted(true);
      setEmail('');
      setTimeout(() => setIsSubmitted(false), 3000);
    }
  };

  const bgClass =
    background.variant === 'radial-gradient'
      ? 'bg-gradient-to-br from-blue-50 via-white to-purple-50'
      : 'bg-white';

  const invertedBg = useInvertedBackground ? 'bg-slate-900 text-white' : '';

  return (
    <section className={`relative py-20 px-4 sm:px-6 lg:px-8 ${bgClass} ${invertedBg}`}>
      <div className="max-w-2xl mx-auto">
        {/* Tag */}
        <div
          className={`flex items-center justify-center gap-2 mb-6 ${
            tagAnimation === 'slide-up' ? 'animate-in slide-in-from-bottom-4' : ''
          }`}
        >
          <TagIcon className="w-5 h-5 text-blue-600" />
          <span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">
            {tag}
          </span>
        </div>

        {/* Title */}
        <h2 className="text-4xl sm:text-5xl font-bold text-center mb-4 leading-tight">
          {title}
        </h2>

        {/* Description */}
        <p className={`text-center text-lg mb-10 ${useInvertedBackground ? 'text-gray-300' : 'text-gray-600'}`}>
          {description}
        </p>

        {/* Form */}
        <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 mb-6">
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder={inputPlaceholder}
            required
            className={`flex-1 px-4 py-3 rounded-lg border transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 ${
              useInvertedBackground
                ? 'bg-slate-800 border-slate-700 text-white placeholder-gray-400'
                : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
            }`}
          />
          <button
            type="submit"
            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 whitespace-nowrap"
          >
            {isSubmitted ? '✓ Subscribed' : buttonText}
          </button>
        </form>

        {/* Terms Text */}
        <p className={`text-center text-sm ${useInvertedBackground ? 'text-gray-400' : 'text-gray-500'}`}>
          {termsText}
        </p>
      </div>
    </section>
  );
}