'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { Send, CheckCircle, Loader2, Users, Sparkles, Gift } from 'lucide-react';
import { VoiceInputButton } from '@/components/ui/voice-input';

const companySizes = [
  '1-20 employees',
  '21-50 employees',
  '51-100 employees',
  '101-200 employees',
  '200+ employees',
];

const useCases = [
  'Operations Automation',
  'Finance & Accounting',
  'Customer Support',
  'Sales Operations',
  'Compliance & Risk',
  'IT & DevOps',
  'HR & People Ops',
  'Other',
];

export default function DesignPartnerSection() {
  const { ref, inView } = useInView({ threshold: 0.1, triggerOnce: true });
  const [formData, setFormData] = useState({
    companyName: '',
    contactName: '',
    email: '',
    companySize: '',
    useCase: '',
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError('');

    try {
      const response = await fetch('/api/design-partner', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Submission failed');
      }

      setIsSubmitted(true);
    } catch (err) {
      setError('Something went wrong. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  return (
    <section id="design-partner" className="py-24 relative" ref={ref}>
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-brand-secondary/10 to-brand-deep/10" />
      
      <div className="max-w-[1200px] mx-auto px-6 relative z-10">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Content */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6 }}
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-6">
              <Gift className="w-4 h-4 text-brand" />
              <span className="text-sm text-gray-300">Only 10 spots. Once they&apos;re gone, they&apos;re gone.</span>
            </div>
            
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              The <span className="gradient-text">Founding Partner</span> Offer
            </h2>
            <p className="text-gray-400 mb-8">
              White-glove onboarding, direct founder access, and a co-branded case study&mdash;all 
              at founding-partner pricing locked in forever. We set up your Familiars, train it on 
              your workflows, and stay in your corner until it&apos;s running like clockwork.
            </p>

            <div className="space-y-4">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-lg bg-brand-deep/20 flex items-center justify-center flex-shrink-0">
                  <Sparkles className="w-5 h-5 text-brand" />
                </div>
                <div>
                  <h4 className="text-white font-medium">We Do the Setup. You See the Results.</h4>
                   <p className="text-gray-400 text-sm">Full onboarding handled by our team. You don&apos;t configure anything&mdash;we do it for you.</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-lg bg-brand-secondary/20 flex items-center justify-center flex-shrink-0">
                  <Users className="w-5 h-5 text-brand-secondary-light" />
                </div>
                <div>
                  <h4 className="text-white font-medium">Direct Line to the Founders</h4>
                   <p className="text-gray-400 text-sm">Private Slack channel with Scott and the team. Shape the roadmap alongside us.</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-lg bg-brand-deep/20 flex items-center justify-center flex-shrink-0">
                  <Gift className="w-5 h-5 text-brand" />
                </div>
                <div>
                  <h4 className="text-white font-medium">Founding Pricing&mdash;Locked In Forever</h4>
                   <p className="text-gray-400 text-sm">The price you get now never goes up. Period.</p>
                </div>
              </div>
            </div>
          </motion.div>

          {/* Form */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <div className="glass-card rounded-2xl p-8">
              {isSubmitted ? (
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  className="text-center py-12"
                >
                  <div className="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-6">
                    <CheckCircle className="w-8 h-8 text-green-400" />
                  </div>
                  <h3 className="text-2xl font-bold text-white mb-2">Application Received!</h3>
                  <p className="text-gray-400">We'll review your application and reach out within 48 hours.</p>
                </motion.div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-5">
                  <h3 className="text-xl font-semibold text-white mb-6">Apply for Design Partner Access</h3>
                  
                  <div>
                    <label className="block text-sm text-gray-400 mb-2">Company Name</label>
                    <div className="flex items-center gap-2">
                      <input
                        type="text"
                        name="companyName"
                        value={formData.companyName}
                        onChange={handleChange}
                        required
                        className="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-brand-deep/50 focus:ring-1 focus:ring-brand-deep/50 transition-all"
                        placeholder="Acme Inc."
                      />
                      <VoiceInputButton 
                        onTranscript={(text) => setFormData(prev => ({ ...prev, companyName: prev.companyName + text }))}
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>
                  
                  <div>
                    <label className="block text-sm text-gray-400 mb-2">Your Name</label>
                    <div className="flex items-center gap-2">
                      <input
                        type="text"
                        name="contactName"
                        value={formData.contactName}
                        onChange={handleChange}
                        required
                        className="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-brand-deep/50 focus:ring-1 focus:ring-brand-deep/50 transition-all"
                        placeholder="Jane Smith"
                      />
                      <VoiceInputButton 
                        onTranscript={(text) => setFormData(prev => ({ ...prev, contactName: prev.contactName + text }))}
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>
                  
                  <div>
                    <label className="block text-sm text-gray-400 mb-2">Work Email</label>
                    <div className="flex items-center gap-2">
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                        className="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-brand-deep/50 focus:ring-1 focus:ring-brand-deep/50 transition-all"
                        placeholder="jane@acme.com"
                      />
                      <VoiceInputButton 
                        onTranscript={(text) => setFormData(prev => ({ ...prev, email: prev.email + text.toLowerCase().replace(/\s+/g, '') }))}
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>
                  
                  <div>
                    <label className="block text-sm text-gray-400 mb-2">Company Size</label>
                    <select
                      name="companySize"
                      value={formData.companySize}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:border-brand-deep/50 focus:ring-1 focus:ring-brand-deep/50 transition-all appearance-none cursor-pointer"
                    >
                      <option value="" className="bg-brand-bg">Select company size</option>
                      {companySizes.map((size) => (
                        <option key={size} value={size} className="bg-brand-bg">{size}</option>
                      ))}
                    </select>
                  </div>
                  
                  <div>
                    <label className="block text-sm text-gray-400 mb-2">Primary Use Case</label>
                    <select
                      name="useCase"
                      value={formData.useCase}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:border-brand-deep/50 focus:ring-1 focus:ring-brand-deep/50 transition-all appearance-none cursor-pointer"
                    >
                      <option value="" className="bg-brand-bg">Select primary use case</option>
                      {useCases.map((useCase) => (
                        <option key={useCase} value={useCase} className="bg-brand-bg">{useCase}</option>
                      ))}
                    </select>
                  </div>

                  {error && (
                    <p className="text-red-400 text-sm">{error}</p>
                  )}
                  
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full py-4 bg-gradient-to-r from-brand-deep to-brand-secondary-deep text-white font-semibold rounded-lg hover:from-brand hover:to-brand-secondary transition-all shadow-lg shadow-brand-deep/25 hover:shadow-brand-deep/40 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {isSubmitting ? (
                      <><Loader2 className="w-5 h-5 animate-spin" /> Submitting...</>
                    ) : (
                      <><Send className="w-5 h-5" /> Apply Now</>
                    )}
                  </button>
                  
                  <p className="text-xs text-gray-400 text-center">
                    By applying, you agree to be contacted about the Design Partner Program.
                  </p>
                </form>
              )}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}