import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  CreditCard, 
  Pointer, 
  CheckCircle, 
  TrendingUp, 
  Dumbbell, 
  ShoppingCart, 
  Clock,
  Send,
  Check,
  Loader2
} from 'lucide-react';

export default function App() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    city: '',
    headcount: '50-100 employees'
  });
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus('loading');

    try {
      const response = await fetch('https://formspree.io/f/xreanlkw', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        setStatus('success');
        setFormData({
          name: '',
          email: '',
          city: '',
          headcount: '50-100 employees'
        });
        // Reset status after 5 seconds
        setTimeout(() => setStatus('idle'), 5000);
      } else {
        setStatus('error');
      }
    } catch (error) {
      console.error('Error:', error);
      setStatus('error');
    }
  };

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

  return (
    <div className="bg-[#f5f8f8] dark:bg-[#101f22] font-sans text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden min-h-screen">
      {/* Top Navigation Bar */}
      <header className="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-[#f5f8f8]/80 dark:bg-[#101f22]/80 backdrop-blur-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 h-24 flex items-center">
          <div className="flex items-center gap-3 text-[#25d1f4]">
            <span className="font-black text-2xl tracking-tighter">INTEGRA</span>
          </div>
        </div>
      </header>

      <main>
        {/* Hero Section */}
        <section className="relative py-20 lg:py-32 overflow-hidden">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 flex flex-col lg:flex-row items-center gap-12">
            <motion.div 
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              className="flex-1 text-center lg:text-left z-10"
            >
              <span className="inline-block py-1 px-3 rounded-full bg-[#25d1f4]/10 text-[#25d1f4] text-xs font-bold tracking-widest uppercase mb-4">The Brands Your Team Loves</span>
              <h1 className="text-slate-900 dark:text-white text-5xl lg:text-7xl font-black leading-tight tracking-tight mb-6">Popular <span className="text-[#25d1f4]">Brands</span> for Your Team</h1>
              <p className="text-slate-600 dark:text-slate-400 text-lg lg:text-xl max-w-2xl mb-10 leading-relaxed">Make the workday better with a fridge full of warehouse favorites. From Doritos and Coca-Cola to high-protein snacks from Costco and Sam's Club, we bring everyone's favorites right to your breakroom.</p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <button className="h-14 px-8 rounded-lg bg-[#25d1f4] text-[#101f22] text-base font-bold shadow-xl shadow-[#25d1f4]/30 hover:scale-105 transition-transform">Check My Office</button>
                <button className="h-14 px-8 rounded-lg border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors text-base font-semibold">
                  See How it Works
                </button>
              </div>
            </motion.div>
            <motion.div 
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              className="flex-1 relative w-full max-w-[600px]"
            >
              <div className="absolute inset-0 bg-[#25d1f4]/20 blur-[120px] rounded-full"></div>
              <div className="relative rounded-2xl border-slate-300 dark:border-slate-700 shadow-2xl overflow-hidden h-auto bg-transparent">
                <img 
                  alt="Integra Vending Solutions Smart Fridge" 
                  className="w-full h-full object-contain" 
                  src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqC5ekL2zQ7pT69v7N4kOCiLK9HMmF1DI01nWNnNfGGhXp9Zt-RuLWg68TMlkblnMEsF-Sn0DWmEvOQnDyoWyMwfNlmcX0ZJ7BMCPHYdRqerR2pIuOUWmlR1Qzmxeb7pbIc4fpOwgxRKdm6j4U254NtD1nZgoHIu3jGJ4lbq-bLdDRwDi-8E14ZXp0DEGsD0Qu4JQ81YJnlwsh0P86tIhB31BIgvi7tK2T5SfssVQwl4S4rmNtUMfKOTDB4lEcsrgrikRLRSwZ2_cO"
                  referrerPolicy="no-referrer"
                />
                <div className="absolute bottom-6 right-6 p-4 rounded-xl backdrop-blur-md border bg-slate-900/80 border-[#25d1f4]/30 shadow-lg shadow-[#25d1f4]/20">
                  <div className="flex items-center gap-3">
                    <CreditCard className="text-[#25d1f4]" />
                    <div className="text-xs">
                      <p className="font-bold text-white">Tap to Open</p>
                      <p className="text-[#25d1f4]">Support all mobile wallets</p>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Tech Section */}
        <section className="py-24 bg-slate-100 dark:bg-slate-900/50" id="experience">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-5xl font-black text-slate-900 dark:text-white mb-4">How it Works</h2>
              <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto text-lg">Getting a snack should be the easiest part of your day. Here is how we make it happen.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                { icon: CreditCard, title: "1. Quick Tap", desc: "Just use your card or phone to say hello to the fridge. It's safe, secure, and ready when you are." },
                { icon: Pointer, title: "2. Pick Your Favorite", desc: "Open the door and grab whatever looks good! Our smart tech keeps track of what you take so you don't have to." },
                { icon: CheckCircle, title: "3. Head Back to Work", desc: "Close the door and you're all set. We'll send you a receipt for only what you took. No lines, no stress." }
              ].map((step, i) => (
                <div key={i} className="group p-8 rounded-2xl bg-white dark:bg-[#101f22] border border-slate-200 dark:border-slate-800 hover:border-[#25d1f4] transition-all shadow-sm">
                  <div className="w-14 h-14 rounded-xl bg-[#25d1f4]/10 flex items-center justify-center text-[#25d1f4] mb-6 group-hover:scale-110 transition-transform">
                    <step.icon size={32} />
                  </div>
                  <h3 className="text-xl font-bold mb-3 dark:text-white">{step.title}</h3>
                  <p className="text-slate-600 dark:text-slate-400 leading-relaxed">{step.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Benefits Section */}
        <section className="py-24" id="benefits">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-5xl font-black text-slate-900 dark:text-white mb-4">Why Teams Love Us</h2>
              <p className="text-slate-600 dark:text-slate-400 text-lg">We make sure everyone wins, from the first bite to the monthly report.</p>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
              <div className="relative overflow-hidden rounded-3xl bg-slate-100 dark:bg-slate-900 p-8 lg:p-12 border border-slate-200 dark:border-slate-800">
                <div className="flex items-center justify-between mb-8">
                  <h3 className="text-2xl font-black text-slate-900 dark:text-white">For the Team</h3>
                  <span className="py-1 px-4 rounded-full bg-[#25d1f4]/20 text-[#25d1f4] text-xs font-bold uppercase tracking-widest">Member Perks</span>
                </div>
                <ul className="space-y-6">
                  {[
                    { title: "The Brands You Crave", desc: "We stock up daily with the most popular snacks and drinks from the brands your team already knows and loves." },
                    { title: "No More Waiting", desc: "Skip the coffee shop line. Your favorites are right there in the office whenever you need a boost." },
                    { title: "Bulk Value, Zero Effort", desc: "Enjoy the best of warehouse club shopping without the trip. We handle the heavy lifting and restocking." }
                  ].map((item, i) => (
                    <li key={i} className="flex items-start gap-4">
                      <CheckCircle className="text-[#25d1f4] mt-1 shrink-0" />
                      <div>
                        <p className="font-bold text-lg dark:text-white">{item.title}</p>
                        <p className="text-slate-600 dark:text-slate-400">{item.desc}</p>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="relative overflow-hidden rounded-3xl bg-slate-900 dark:bg-slate-800 p-8 lg:p-12 border border-[#25d1f4]/30">
                <div className="flex items-center justify-between mb-8">
                  <h3 className="text-2xl font-black text-white">For the Office</h3>
                  <span className="py-1 px-4 rounded-full bg-[#25d1f4] text-[#101f22] text-xs font-bold uppercase tracking-widest">Business Value</span>
                </div>
                <ul className="space-y-6">
                  {[
                    { title: "Totally Free Setup", desc: "We take care of the installation and restocking. It's a premium perk with zero hassle for you." },
                    { title: "Boost Office Morale", desc: "A premium amenity stocked with everyone's favorites makes the office a place people want to be." },
                    { title: "Smart Inventory Insights", desc: "Access insights on what your team loves most via our dashboard." }
                  ].map((item, i) => (
                    <li key={i} className="flex items-start gap-4">
                      <TrendingUp className="text-[#25d1f4] mt-1 shrink-0" />
                      <div>
                        <p className="font-bold text-lg text-white">{item.title}</p>
                        <p className="text-slate-300">{item.desc}</p>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* Local Edge Section */}
        <section className="py-24 bg-[#f5f8f8] dark:bg-[#101f22] overflow-hidden" id="local">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
            <div className="flex flex-col lg:flex-row items-center gap-16">
              <div className="flex-1">
                <h2 className="text-3xl lg:text-5xl font-black text-slate-900 dark:text-white mb-6">Warehouse Club Favorites</h2>
                <p className="text-slate-600 dark:text-slate-400 text-lg mb-8 leading-relaxed">Enjoy the convenience of your favorite brands without leaving the office. We stock the best from Sam's Club and Costco, keeping your team fueled with popular chips, sodas, and high-protein options 24/7.</p>
                <div className="grid grid-cols-2 gap-6">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-[#25d1f4]/20 flex items-center justify-center text-[#25d1f4]"><Dumbbell size={20} /></div>
                    <span className="font-bold dark:text-white">Protein Bars</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-[#25d1f4]/20 flex items-center justify-center text-[#25d1f4]"><ShoppingCart size={20} /></div>
                    <span className="font-bold dark:text-white">Bulk Favorites</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-[#25d1f4]/20 flex items-center justify-center text-[#25d1f4]"><Clock size={20} /></div>
                    <span className="font-bold dark:text-white">24/7 Access</span>
                  </div>
                </div>
              </div>
              <div className="flex-1 w-full grid grid-cols-2 gap-4">
                <img 
                  alt="Warehouse club protein bars and snacks" 
                  className="h-64 w-full rounded-2xl object-cover shadow-lg" 
                  src="https://lh3.googleusercontent.com/aida-public/AB6AXuCW6-ZV3IhXN4l1QLpgNfHH7o95TFCR1fr962F704YR1mTzc6C0kn7CPZftWXycItt_AlzzGi_zYH_g94NaVz2LYGQ9hdiE1tDAu2tH6Lg6q7TtCWGwlSt-gz-OhN60h7yPJyACYXL8-X4XXlReWIwNIejybbcCXygKTz7LRAUxUcddqnit3kA6YRGjj3IliEfGuwhOSsLUxmQg0F7FV5FnzfuOGl7M_TKgi9TUsqPFT_3MzRDXIpGntfo_h__KJGNZVt42pxkOCPLf"
                  referrerPolicy="no-referrer"
                />
                <img 
                  alt="Bulk healthy office snacks" 
                  className="h-64 w-full rounded-2xl object-cover mt-8 shadow-lg" 
                  src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhWzjD3voSZJwHGidVhcEIN93VadhlQJukHdVEDj_F_36WOAhXi0BimlNqWU6U2j_e06TZ7KaycD4Zhy5uKsQATT6h7KW9V8yuMtnWsYagXm08BZoXX0t8TXMOLh97DRP8Mc6KIJCL2y1EPo2UQVWq-o1ZDfH7UP1_T_E-oa0trQtQ4aoOVPDYiQENhglttwnqJH_44XK8fQPHNzChwgAP-BTtRBbiomzRwPs5APGqr0WIOkc_NkWXScLyIMq5YDEhL5E4W9TDaqRi"
                  referrerPolicy="no-referrer"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Form Section */}
        <section className="py-24 bg-[#25d1f4]/5" id="contact">
          <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10 text-center">
            <h2 className="text-3xl lg:text-5xl font-black text-slate-900 dark:text-white mb-4">Let's Chat About Your Office</h2>
            <p className="text-slate-600 dark:text-slate-400 text-lg mb-12">Ready to upgrade your breakroom? Tell us a bit about your team and we'll reach out soon.</p>
            
            <motion.div 
              layout
              className="bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-xl border border-slate-200 dark:border-slate-800 overflow-hidden"
            >
              <AnimatePresence mode="wait">
                {status === 'success' ? (
                  <motion.div 
                    key="success"
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.9 }}
                    className="py-12 flex flex-col items-center gap-4"
                  >
                    <div className="w-20 h-20 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-500 mb-4">
                      <Check size={48} />
                    </div>
                    <h3 className="text-2xl font-bold dark:text-white">Message Sent!</h3>
                    <p className="text-slate-600 dark:text-slate-400">Thanks for reaching out. We'll get back to you shortly.</p>
                    <button 
                      onClick={() => setStatus('idle')}
                      className="mt-6 text-[#25d1f4] font-semibold hover:underline"
                    >
                      Send another message
                    </button>
                  </motion.div>
                ) : (
                  <motion.form 
                    key="form"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    onSubmit={handleSubmit} 
                    className="space-y-4 text-left"
                  >
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <label className="text-sm font-semibold dark:text-white">Full Name</label>
                        <input 
                          required
                          name="name"
                          value={formData.name}
                          onChange={handleChange}
                          className="w-full bg-slate-50 dark:bg-[#101f22] border-slate-200 dark:border-slate-700 rounded-lg px-4 py-3 focus:ring-[#25d1f4] focus:border-[#25d1f4]" 
                          placeholder="John Doe" 
                          type="text"
                        />
                      </div>
                      <div className="space-y-2">
                        <label className="text-sm font-semibold dark:text-white">Company Email</label>
                        <input 
                          required
                          name="email"
                          value={formData.email}
                          onChange={handleChange}
                          className="w-full bg-slate-50 dark:bg-[#101f22] border-slate-200 dark:border-slate-700 rounded-lg px-4 py-3 focus:ring-[#25d1f4] focus:border-[#25d1f4]" 
                          placeholder="john@company.com" 
                          type="email"
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-semibold dark:text-white">Office Location (City)</label>
                      <input 
                        name="city"
                        value={formData.city}
                        onChange={handleChange}
                        className="w-full bg-slate-50 dark:bg-[#101f22] border-slate-200 dark:border-slate-700 rounded-lg px-4 py-3 focus:ring-[#25d1f4] focus:border-[#25d1f4]" 
                        placeholder="e.g. Brickell, Miami" 
                        type="text"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-semibold dark:text-white">Estimated Headcount</label>
                      <select 
                        name="headcount"
                        value={formData.headcount}
                        onChange={handleChange}
                        className="w-full bg-slate-50 dark:bg-[#101f22] border-slate-200 dark:border-slate-700 rounded-lg px-4 py-3 focus:ring-[#25d1f4] focus:border-[#25d1f4]"
                      >
                        <option>50-100 employees</option>
                        <option>100-250 employees</option>
                        <option>250+ employees</option>
                      </select>
                    </div>
                    <button 
                      disabled={status === 'loading'}
                      className="w-full h-14 rounded-lg bg-[#25d1f4] text-[#101f22] text-lg font-bold shadow-lg shadow-[#25d1f4]/30 mt-4 hover:scale-[1.02] transition-transform flex items-center justify-center gap-2 disabled:opacity-70 disabled:hover:scale-100" 
                      type="submit"
                    >
                      {status === 'loading' ? (
                        <Loader2 className="animate-spin" />
                      ) : (
                        <>
                          <Send size={20} />
                          Send us a Message
                        </>
                      )}
                    </button>
                    {status === 'error' && (
                      <p className="text-red-500 text-sm text-center mt-2">Something went wrong. Please try again.</p>
                    )}
                    <p className="text-xs text-center text-slate-500 mt-4">We respect your privacy. No spam, ever.</p>
                  </motion.form>
                )}
              </AnimatePresence>
            </motion.div>
          </div>
        </section>
      </main>

      <footer className="py-12 border-t border-slate-200 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
          <div className="flex flex-col md:flex-row justify-between items-center gap-8">
            <div className="flex items-center gap-2 text-[#25d1f4]">
              <span className="font-black text-xl tracking-tighter">INTEGRA</span>
            </div>
            <div className="flex gap-8 text-sm text-slate-500">
              <a className="hover:text-[#25d1f4] transition-colors" href="#">Privacy Policy</a>
              <a className="hover:text-[#25d1f4] transition-colors" href="#">Terms of Service</a>
              <a className="hover:text-[#25d1f4] transition-colors" href="#">Cookie Policy</a>
            </div>
            <p className="text-sm text-slate-500">© 2024 Integra Vending Solutions. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}