'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 invertedClass = useInvertedBackground ? 'bg-slate-900 text-white' : '';

  return (
    <section className={`relative py-20 px-4 sm:px-6 lg:px-8 ${bgClass}`}>
      <div className="max-w-4xl 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 text-slate-900">
          {title}
        </h2>

        {/* Description */}
        <p className="text-lg text-center text-slate-600 mb-12 max-w-2xl mx-auto">
          {description}
        </p>

        {/* Form Container */}
        <div className={`rounded-2xl p-8 sm:p-12 ${invertedClass} ${!useInvertedBackground ? 'bg-white shadow-lg border border-slate-200' : 'bg-slate-900'}`}>
          <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
            <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-colors focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                useInvertedBackground
                  ? 'bg-slate-800 border-slate-700 text-white placeholder-slate-400'
                  : 'bg-slate-50 border-slate-300 text-slate-900 placeholder-slate-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"
            >
              {buttonText}
            </button>
          </form>

          {/* Success Message */}
          {isSubmitted && (
            <div className="mt-4 p-3 bg-green-100 border border-green-300 rounded-lg text-green-800 text-sm font-medium animate-in fade-in">
              ✓ Thank you for signing up!
            </div>
          )}

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