"use client";

import { useState } from 'react';
import { Phone, Check, ArrowRight } from 'lucide-react';
import ScrollReveal from './ScrollReveal';

const buildingTypes = ['Climatisé', 'Non climatisé'];
const sectors = ['Industrie', 'Pharma', 'Aéronautique / Défense', 'Agroalimentaire', 'Tertiaire', 'Collectivités', 'Autre'];

const reassurance = [
  'Budget travaux indicatif',
  'Calcul de vos primes CEE si éligible',
  'Aucun engagement',
];

const inputClass =
  'w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-primary';

const FinalCTA = () => {
  const [form, setForm] = useState({
    name: '',
    email: '',
    phone: '',
    surface: '',
    buildingType: '',
    sector: '',
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert('Merci ! Nous vous recontactons sous 24h.');
  };

  return (
    <section id="contact" className="relative py-24 lg:py-32 bg-[#192A3A] text-white overflow-hidden">
      {/* Blobs décoratifs teal — cohérent avec WinterObjectionSection */}
      <img
        src="/images/applicateur-blobs.svg"
        alt=""
        aria-hidden="true"
        className="absolute -right-[15%] -top-[40%] w-[60%] opacity-20 pointer-events-none select-none"
        style={{
          maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
          WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
        }}
      />
      <img
        src="/images/applicateur-blobs.svg"
        alt=""
        aria-hidden="true"
        className="absolute -left-[20%] -bottom-[40%] w-[50%] opacity-15 pointer-events-none select-none rotate-180"
        style={{
          maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
          WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
        }}
      />

      <div className="relative container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="text-center mb-12">
            <h2 className="text-3xl lg:text-4xl mb-3">
              Votre budget en 24h.
            </h2>
            <p className="text-white/60 text-lg max-w-xl mx-auto font-body">
              Fourchette travaux, primes CEE si éligible, coût net. Sans engagement.
            </p>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 max-w-4xl mx-auto">
            <form onSubmit={handleSubmit} className="space-y-4 bg-navy-light rounded-xl p-8">
              <input
                type="text"
                placeholder="Nom"
                required
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
                className={inputClass}
              />
              <input
                type="email"
                placeholder="Email professionnel"
                required
                value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })}
                className={inputClass}
              />
              <input
                type="tel"
                placeholder="Téléphone"
                value={form.phone}
                onChange={(e) => setForm({ ...form, phone: e.target.value })}
                className={inputClass}
              />
              <input
                type="text"
                placeholder="Surface approximative (m²)"
                required
                value={form.surface}
                onChange={(e) => setForm({ ...form, surface: e.target.value })}
                className={inputClass}
              />
              <select
                value={form.buildingType}
                onChange={(e) => setForm({ ...form, buildingType: e.target.value })}
                required
                className={`${inputClass} appearance-none`}
              >
                <option value="" disabled className="text-foreground bg-card">
                  Climatisé ou non climatisé ?
                </option>
                {buildingTypes.map((t) => (
                  <option key={t} value={t} className="text-foreground bg-card">
                    {t}
                  </option>
                ))}
              </select>
              <select
                value={form.sector}
                onChange={(e) => setForm({ ...form, sector: e.target.value })}
                required
                className={`${inputClass} appearance-none`}
              >
                <option value="" disabled className="text-foreground bg-card">
                  Secteur d'activité
                </option>
                {sectors.map((s) => (
                  <option key={s} value={s} className="text-foreground bg-card">
                    {s}
                  </option>
                ))}
              </select>
              <button
                type="submit"
                className="group w-full cta-gradient text-white font-semibold py-3.5 rounded-full transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] hover:shadow-[0_8px_40px_rgba(153,20,55,0.35)] active:scale-[0.98] flex items-center justify-center gap-3"
              >
                <span>Recevoir mon budget indicatif</span>
                <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
                  <ArrowRight className="w-4 h-4" />
                </span>
              </button>
              <p className="text-sm text-white/40 text-center">Réponse sous 24h · Sans engagement</p>
            </form>

            <div className="flex flex-col justify-center space-y-8">
              <div className="space-y-5">
                {reassurance.map((item) => (
                  <div key={item} className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                      <Check className="w-4 h-4 text-primary" />
                    </div>
                    <p className="text-white/80 text-base">{item}</p>
                  </div>
                ))}
              </div>

              <div className="border-t border-white/10 pt-6">
                <p className="text-white/50 text-sm mb-3">Vous préférez nous parler ?</p>
                <a
                  href="tel:+33000000000"
                  className="inline-flex items-center gap-2 text-white hover:text-primary transition-colors font-semibold"
                >
                  <Phone className="w-5 h-5" /> Nous appeler : 02 XX XX XX XX
                </a>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default FinalCTA;