import React, { useState, useRef, useEffect } from 'react';
import { 
  Camera, 
  ShieldCheck, 
  Sun, 
  Wind, 
  Droplets, 
  Sparkles, 
  CheckCircle2, 
  Clock, 
  FileText,
  Upload,
  User,
  Mail,
  Phone,
  MapPin,
  ChevronRight,
  ChevronDown,
  Image as ImageIcon
} from 'lucide-react';

const App = () => {
  const formRef = useRef(null);
  const fileInputRef = useRef(null);
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    zipCode: '',
    furnitureType: 'Both',
    lastCleaned: '',
    workingWithDesigner: false
  });
  const [files, setFiles] = useState([]);
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const scrollToForm = () => {
    formRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleFileChange = (e) => {
    const selectedFiles = Array.from(e.target.files);
    setFiles(selectedFiles);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    // Prepare Multipart Data for Hostinger PHP
    const data = new FormData();
    data.append('firstName', formData.firstName);
    data.append('lastName', formData.lastName);
    data.append('email', formData.email);
    data.append('phone', formData.phone);
    data.append('zipCode', formData.zipCode);
    data.append('furnitureType', formData.furnitureType);
    
    files.forEach((file) => {
      data.append('photos[]', file);
    });

    try {
      const response = await fetch('save_lead.php', {
        method: 'POST',
        body: data
      });
      
      const responseText = await response.text();
      
      try {
        const result = JSON.parse(responseText);
        if (result.status === 'success') {
          // Track the Lead event in Meta Ads if pixel is present
          if (window.fbq) window.fbq('track', 'Lead');
          setSubmitted(true);
        } else {
          throw new Error(result.message || "Failed to save lead");
        }
      } catch (parseError) {
        // Log raw response if server sends HTML error instead of JSON
        console.error("Server Raw Response:", responseText);
        throw new Error("Server returned an invalid response. Please check your save_lead.php credentials.");
      }
    } catch (err) {
      console.error("Submission error:", err);
      alert("Submission error: " + err.message);
    } finally {
      setLoading(false);
    }
  };

  const CTAButton = ({ className = "" }) => (
    <button 
      onClick={scrollToForm}
      className={`bg-emerald-600 hover:bg-emerald-700 text-white font-black py-4 px-8 rounded-full shadow-lg transition-all transform hover:scale-105 uppercase tracking-wide flex items-center justify-center gap-2 ${className}`}
    >
      Upload Photos & Get My Plan
      <ChevronRight size={20} />
    </button>
  );

  return (
    <div className="min-h-screen font-sans text-slate-900 bg-white selection:bg-emerald-100">
      
      {/* HERO SECTION */}
      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&q=80&w=2000" 
            alt="Beautifully protected outdoor furniture" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-slate-900/90 to-slate-900/40"></div>
        </div>

        <div className="container mx-auto px-6 relative z-10 text-white max-w-4xl">
          <div className="inline-block px-4 py-1 rounded-full bg-emerald-500/20 border border-emerald-500/30 text-emerald-400 font-medium text-sm mb-6 animate-fade-in uppercase tracking-widest">
            TEXAS SPRING SPECIAL: VIRTUAL ASSESSMENT
          </div>
          <h1 className="text-5xl md:text-7xl font-bold leading-tight mb-6">
            Spring Is Coming. <br/>
            <span className="text-emerald-400">Is Your Furniture Ready?</span>
          </h1>
          <p className="text-xl md:text-2xl text-slate-200 mb-10 leading-relaxed max-w-2xl">
            Upload a few photos of your indoor or outdoor furniture and receive a personalized Protection Plan — including whether cleaning is required first.
          </p>
          
          <div className="flex flex-col items-start gap-4">
            <CTAButton />
            <p className="text-sm font-medium text-slate-400 ml-2 uppercase tracking-widest">
              Indoor • Outdoor • Patio • Poolside • White Upholstery
            </p>
          </div>

          <div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-white/10 pt-8">
            <div className="flex items-center gap-2 text-slate-200">
              <ShieldCheck className="text-emerald-500" size={20} />
              <span className="text-sm">No Guesswork</span>
            </div>
            <div className="flex items-center gap-2 text-slate-200">
              <CheckCircle2 className="text-emerald-500" size={20} />
              <span className="text-sm">No Pressure</span>
            </div>
            <div className="flex items-center gap-2 text-slate-200">
              <Clock className="text-emerald-500" size={20} />
              <span className="text-sm">24hr Response</span>
            </div>
            <div className="flex items-center gap-2 text-slate-200">
              <Sparkles className="text-emerald-500" size={20} />
              <span className="text-sm">Nanotech Assessment</span>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 2 – THE PROBLEM */}
      <section className="py-20 bg-slate-50 border-y border-slate-100">
        <div className="container mx-auto px-6">
          <div className="max-w-4xl mx-auto text-center mb-16">
            <h2 className="text-4xl font-bold mb-4 uppercase tracking-tighter">Clean Isn’t Protected.</h2>
            <div className="h-1.5 w-24 bg-emerald-500 mx-auto rounded-full"></div>
          </div>

          <div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto items-center">
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-slate-800">Texas spring brings specific threats:</h3>
              <ul className="space-y-4">
                {[
                  { icon: <Sun className="text-orange-500" />, title: "UV Exposure", desc: "Intense sun weakens fibers and destroys dyes." },
                  { icon: <Wind className="text-blue-400" />, title: "Pollen & Dust", desc: "Spring blooms settle deep into cushion cores." },
                  { icon: <Droplets className="text-emerald-500" />, title: "Moisture & Mildew", desc: "Humidity leads to deep-seated odor and bacteria." },
                  { icon: <Sparkles className="text-amber-500" />, title: "Fiber Breakdown", desc: "Heat accelerates the degradation of unprotected fabric." }
                ].map((item, idx) => (
                  <li key={idx} className="flex gap-4 p-5 bg-white rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
                    <div className="mt-1">{item.icon}</div>
                    <div>
                      <h4 className="font-bold text-slate-900">{item.title}</h4>
                      <p className="text-slate-500 text-sm leading-relaxed">{item.desc}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-slate-900 rounded-[2.5rem] p-10 text-white shadow-2xl relative overflow-hidden">
              <div className="absolute top-0 right-0 p-6">
                <ShieldCheck size={48} className="text-emerald-500/20" />
              </div>
              <h3 className="text-2xl font-bold mb-8 uppercase tracking-tight">Why DIY Solutions Fail</h3>
              <div className="space-y-6">
                <div className="border-l-4 border-emerald-500 pl-4 py-1">
                  <p className="font-medium text-slate-300">Older silicone-based "stain guards" break down fast and actually attract oils/dirt over time.</p>
                </div>
                <div className="border-l-4 border-emerald-500 pl-4 py-1">
                  <p className="font-medium text-slate-300">Protection applied over dirty fabric fails to bond and traps bacteria inside pieces.</p>
                </div>
                <div className="border-l-4 border-emerald-500 pl-4 py-1">
                  <p className="font-medium text-slate-300">Protection without specific UV defense won't last a single Texas summer season.</p>
                </div>
              </div>
              <div className="mt-12">
                <button onClick={scrollToForm} className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-black py-4 rounded-xl uppercase tracking-widest transition-all">Get Protected</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 5 – LEAD FORM */}
      <section ref={formRef} className="py-24 bg-white relative overflow-hidden">
        <div className="container mx-auto px-6 max-w-4xl">
          <div className="bg-slate-50 rounded-[3rem] shadow-2xl border border-slate-100 overflow-hidden">
            <div className="bg-emerald-600 p-10 text-white text-center">
              <h2 className="text-3xl font-black mb-2 uppercase tracking-tighter leading-none">Get Your Free Protection Plan</h2>
              <p className="text-emerald-100 font-medium">Simple 2-minute process. No obligation assessment.</p>
            </div>

            <div className="p-8 md:p-12 bg-white">
              {submitted ? (
                <div className="text-center py-20 animate-fade-in">
                  <div className="inline-flex items-center justify-center w-24 h-24 bg-emerald-100 text-emerald-600 rounded-full mb-8">
                    <CheckCircle2 size={56} />
                  </div>
                  <h3 className="text-3xl font-black mb-4 uppercase tracking-tight">Plan Request Received!</h3>
                  <p className="text-slate-600 text-xl mb-10 max-w-md mx-auto">One of our fabric specialists is reviewing your photos. Check your inbox within 24 hours.</p>
                  <button onClick={() => setSubmitted(false)} className="text-emerald-600 font-bold underline text-lg">Submit another piece</button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 ml-1">
                        <User size={14} /> First Name
                      </label>
                      <input 
                        required name="firstName" value={formData.firstName} onChange={handleInputChange}
                        className="w-full px-4 py-4 rounded-xl border-2 border-slate-100 focus:border-emerald-500 outline-none transition-all font-medium"
                        placeholder="John"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 ml-1">
                        <User size={14} /> Last Name
                      </label>
                      <input 
                        required name="lastName" value={formData.lastName} onChange={handleInputChange}
                        className="w-full px-4 py-4 rounded-xl border-2 border-slate-100 focus:border-emerald-500 outline-none transition-all font-medium"
                        placeholder="Doe"
                      />
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 ml-1">
                        <Mail size={14} /> Email Address
                      </label>
                      <input 
                        required type="email" name="email" value={formData.email} onChange={handleInputChange}
                        className="w-full px-4 py-4 rounded-xl border-2 border-slate-100 focus:border-emerald-500 outline-none transition-all font-medium"
                        placeholder="john@example.com"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 ml-1">
                        <Phone size={14} /> Phone Number
                      </label>
                      <input 
                        required name="phone" value={formData.phone} onChange={handleInputChange}
                        className="w-full px-4 py-4 rounded-xl border-2 border-slate-100 focus:border-emerald-500 outline-none transition-all font-medium"
                        placeholder="(512) 555-0123"
                      />
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 ml-1">
                        <MapPin size={14} /> Zip Code
                      </label>
                      <input 
                        required name="zipCode" value={formData.zipCode} onChange={handleInputChange}
                        className="w-full px-4 py-4 rounded-xl border-2 border-slate-100 focus:border-emerald-500 outline-none transition-all font-medium"
                        placeholder="78701"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 ml-1">
                         Furniture Environment
                      </label>
                      <div className="relative group">
                        <select 
                          name="furnitureType" value={formData.furnitureType} onChange={handleInputChange}
                          className="w-full px-4 py-4 rounded-xl border-2 border-slate-100 focus:border-emerald-500 outline-none transition-all appearance-none bg-white font-medium pr-10 cursor-pointer"
                        >
                          <option>Indoor</option>
                          <option>Outdoor</option>
                          <option>Both</option>
                        </select>
                        <div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none text-slate-400 group-hover:text-emerald-500 transition-colors">
                          <ChevronDown size={20} />
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-5">
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 ml-1">
                        <Camera size={14} /> Snap Photos (Take photo or upload)
                      </label>
                      <div 
                        onClick={() => fileInputRef.current?.click()}
                        className={`border-2 border-dashed rounded-[2rem] p-10 text-center transition-all cursor-pointer ${files.length > 0 ? 'border-emerald-500 bg-emerald-50/30' : 'border-slate-200 bg-slate-50 hover:border-emerald-500'}`}
                      >
                        <div className="flex justify-center gap-3 mb-3">
                          <Camera size={36} className={files.length > 0 ? 'text-emerald-600' : 'text-slate-400'} />
                          <ImageIcon size={36} className={files.length > 0 ? 'text-emerald-600' : 'text-slate-400'} />
                        </div>
                        <p className="text-slate-900 font-bold text-lg leading-none">
                          {files.length > 0 ? `${files.length} Photos Ready` : "Tap to Snap Photos"}
                        </p>
                        <p className="text-xs text-slate-400 mt-2 font-medium">Real-time mobile camera supported</p>
                      </div>
                      <input 
                        type="file" multiple ref={fileInputRef} className="hidden" 
                        accept="image/*" onChange={handleFileChange}
                      />
                    </div>

                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest ml-1">When was it last cleaned?</label>
                      <input 
                        name="lastCleaned" value={formData.lastCleaned} onChange={handleInputChange}
                        className="w-full px-4 py-4 rounded-xl border-2 border-slate-100 focus:border-emerald-500 outline-none font-medium"
                        placeholder="e.g. Never, 6 months ago, Brand New"
                      />
                    </div>

                    <label className="flex items-center gap-4 p-4 border-2 border-slate-50 rounded-2xl cursor-pointer select-none bg-slate-50/30">
                      <input 
                        type="checkbox" name="workingWithDesigner" checked={formData.workingWithDesigner} onChange={handleInputChange}
                        className="w-6 h-6 rounded-lg text-emerald-600 focus:ring-emerald-500 border-slate-200 transition-all"
                      />
                      <span className="text-sm text-slate-600 font-bold leading-none">I’m currently working with an interior designer</span>
                    </label>
                  </div>

                  <div className="pt-6">
                    <button 
                      disabled={loading}
                      type="submit"
                      className="w-full bg-slate-900 hover:bg-black text-white font-black py-6 rounded-2xl shadow-xl transition-all transform active:scale-95 uppercase tracking-widest text-xl leading-none"
                    >
                      {loading ? (
                        <div className="flex items-center justify-center gap-3">
                           <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                           <span>Sending...</span>
                        </div>
                      ) : "Send My Plan"}
                    </button>
                    <p className="text-center text-[10px] text-slate-400 mt-4 font-bold uppercase tracking-widest italic">
                      Response within 24 hours • No obligation • Secure Assessment
                    </p>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-white py-12 border-t border-slate-100">
        <div className="container mx-auto px-6 text-center">
          <p className="text-slate-400 font-black uppercase tracking-[0.2em] text-[10px] mb-8">Pure Tech Nanotechnology Assessment Center</p>
          <div className="flex flex-wrap justify-center gap-8 md:gap-16 opacity-30 grayscale pointer-events-none select-none">
            <span className="font-black text-xl text-slate-900 uppercase">Spills</span>
            <span className="font-black text-xl text-slate-900 uppercase">UV Fade</span>
            <span className="font-black text-xl text-slate-900 uppercase">Odor</span>
            <span className="font-black text-xl text-slate-900 uppercase">Pollen</span>
          </div>
          <p className="mt-12 text-slate-400 text-[10px] font-bold uppercase tracking-widest opacity-60">© {new Date().getFullYear()} Pure Tech Protection. Designed for Texas Real Living.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;