import React, { useState, useEffect } from 'react';
import { 
  Wind, 
  Leaf, 
  Heart, 
  CheckCircle, 
  ArrowRight, 
  Play, 
  Menu, 
  X, 
  ShieldCheck, 
  Users,
  Flower,
  Coffee,
  Sun
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [formData, setFormData] = useState({ name: '', phone: '' });
  const [formSubmitted, setFormSubmitted] = useState(false);

  // WhatsApp Link
  const whatsappLink = "https://wa.link/qulddv";

  const handleWhatsApp = () => {
    window.open(whatsappLink, '_blank');
  };

  const toggleModal = () => setIsModalOpen(!isModalOpen);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({ ...prevState, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Simulate form submission
    setFormSubmitted(true);
    setTimeout(() => {
      setFormSubmitted(false);
      window.open(whatsappLink, '_blank'); // Redirect to WA after form submit too
      setIsModalOpen(false);
      setFormData({ name: '', phone: '' });
    }, 2000);
  };

  // Handle scroll for navbar styling
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const curriculum = [
    {
      week: "ആഴ്ച 1",
      title: "ശ്വാസത്തിന്റെ അടിസ്ഥാനങ്ങൾ (Foundations)",
      desc: "ശ്വാസകോശത്തിന്റെ ശേഷി വർദ്ധിപ്പിക്കാനുള്ള ലളിതമായ വ്യായാമങ്ങളും ഡയഫ്രമാറ്റിക് ബ്രീത്തിംഗും."
    },
    {
      week: "ആഴ്ച 2",
      title: "രോഗപ്രതിരോധ ഭക്ഷണക്രമം (Diet)",
      desc: "കഫം കുറയ്ക്കുന്നതും വീക്കം (Inflammation) തടയുന്നതുമായ ഭക്ഷണങ്ങൾ. മഞ്ഞൾ, ഇഞ്ചി എന്നിവയുടെ ശരിയായ ഉപയോഗം."
    },
    {
      week: "ആഴ്ച 3",
      title: "ശാരീരിക പരിശീലനങ്ങൾ (Physical Practices)",
      desc: "നെഞ്ച് വികസിപ്പിക്കുന്നതിനും ശ്വാസോച്ഛ്വാസം സുഗമമാക്കുന്നതിനും സഹായിക്കുന്ന പ്രത്യേക പരിശീലനങ്ങൾ."
    },
    {
      week: "ആഴ്ച 4",
      title: "സ്ട്രെസ് മാനേജ്‌മെന്റ് & പ്രതിരോധം",
      desc: "മാനസിക സമ്മർദ്ദം ആസ്ത്മയെ ബാധിക്കുന്നത് എങ്ങനെ? വിശ്രമ പരിശീലനത്തിലൂടെ (Relaxation Practice) മനസ്സിനെ ശാന്തമാക്കാം."
    }
  ];

  return (
    <div className="font-sans text-slate-700 antialiased bg-white selection:bg-teal-100 selection:text-teal-800">
      
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-3' : 'bg-transparent py-5'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="bg-teal-600 p-2 rounded-full text-white shadow-lg">
              <Wind size={24} />
            </div>
            <span className="text-2xl font-bold text-slate-800 tracking-tight">BreathWell</span>
          </div>
          
          {/* Desktop Menu */}
          <div className="hidden md:flex items-center space-x-8">
            <a href="#problems" className="text-slate-600 hover:text-teal-600 font-medium transition-colors text-lg">പ്രശ്നങ്ങൾ</a>
            <a href="#method" className="text-slate-600 hover:text-teal-600 font-medium transition-colors text-lg">രീതികൾ</a>
            <a href="#curriculum" className="text-slate-600 hover:text-teal-600 font-medium transition-colors text-lg">പാഠ്യപദ്ധതി</a>
            <button 
              onClick={handleWhatsApp}
              className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-2.5 rounded-full font-bold transition-all transform hover:scale-105 shadow-lg shadow-teal-200/50"
            >
              ഇപ്പോൾ ചേരൂ
            </button>
          </div>

          {/* Mobile Menu Button */}
          <div className="md:hidden">
            <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-slate-800 p-2 hover:bg-slate-100 rounded-lg transition-colors">
              {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
            </button>
          </div>
        </div>

        {/* Mobile Dropdown */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t p-4 absolute w-full shadow-xl">
            <div className="flex flex-col space-y-4 text-center">
              <a href="#problems" onClick={() => setIsMenuOpen(false)} className="text-slate-600 font-medium py-2">പ്രശ്നങ്ങൾ</a>
              <a href="#method" onClick={() => setIsMenuOpen(false)} className="text-slate-600 font-medium py-2">രീതികൾ</a>
              <a href="#curriculum" onClick={() => setIsMenuOpen(false)} className="text-slate-600 font-medium py-2">പാഠ്യപദ്ധതി</a>
              <button onClick={() => {handleWhatsApp(); setIsMenuOpen(false);}} className="bg-teal-600 text-white py-3 rounded-lg font-bold w-full shadow-md">
                ഇപ്പോൾ ചേരൂ
              </button>
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <header className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-gradient-to-br from-teal-50 via-white to-blue-50">
        <div className="absolute inset-0 z-0">
          <div className="absolute top-20 right-0 w-96 h-96 bg-teal-100/50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse"></div>
          <div className="absolute bottom-0 left-0 w-96 h-96 bg-blue-100/50 rounded-full mix-blend-multiply filter blur-3xl opacity-70"></div>
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center space-x-2 bg-white border border-teal-100 px-4 py-1.5 rounded-full mb-8 shadow-sm">
            <span className="flex h-2 w-2 rounded-full bg-teal-500 animate-ping"></span>
            <span className="text-sm font-semibold text-teal-800">പുതിയ ബാച്ച് ഉടൻ ആരംഭിക്കുന്നു</span>
          </div>
          
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-slate-900 tracking-tight mb-6 leading-tight">
            സ്വാഭാവികമായ <span className="text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-emerald-600">ശ്വാസം</span>,<br />
            ആരോഗ്യമുള്ള <span className="text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-emerald-600">ജീവിതം.</span>
          </h1>
          
          <p className="max-w-2xl mx-auto text-lg md:text-xl text-slate-600 mb-10 leading-relaxed font-medium">
            ശാസ്ത്രീയമായ പരിശീലനത്തിലൂടെയും ഭക്ഷണക്രമത്തിലൂടെയും ആസ്ത്മയെയും അലർജിയെയും നിയന്ത്രിക്കാം. ഇൻഹേലറുകളെ അമിതമായി ആശ്രയിക്കുന്നത് കുറയ്ക്കാം.
          </p>
          
          <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4">
            <button onClick={handleWhatsApp} className="w-full sm:w-auto px-8 py-4 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-bold text-lg shadow-xl shadow-teal-200 transition-all transform hover:-translate-y-1 flex items-center justify-center">
              സൗജന്യ കൺസൾട്ടേഷൻ നേടൂ <ArrowRight className="ml-2" size={20} />
            </button>
            <button onClick={handleWhatsApp} className="w-full sm:w-auto px-8 py-4 bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 rounded-full font-bold text-lg shadow-sm transition-all flex items-center justify-center group">
              <Play className="mr-2 text-teal-500 fill-current" size={20} />
               കൂടുതൽ അറിയാൻ
            </button>
          </div>

          <div className="mt-12 flex flex-wrap justify-center gap-6 text-slate-500 font-medium">
            <div className="flex items-center bg-white px-4 py-2 rounded-lg shadow-sm"><ShieldCheck size={20} className="mr-2 text-teal-500"/> 100% Natural</div>
            <div className="flex items-center bg-white px-4 py-2 rounded-lg shadow-sm"><Users size={20} className="mr-2 text-teal-500"/> 500+ Happy Students</div>
            <div className="flex items-center bg-white px-4 py-2 rounded-lg shadow-sm"><Heart size={20} className="mr-2 text-teal-500"/> Holistic Care</div>
          </div>
        </div>
      </header>

      {/* Problem Awareness Section */}
      <section id="problems" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-4">നിങ്ങൾ ഈ ബുദ്ധിമുട്ടുകൾ അനുഭവിക്കുന്നുണ്ടോ?</h2>
            <div className="w-20 h-1 bg-teal-500 mx-auto rounded-full"></div>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-slate-50 p-8 rounded-2xl hover:shadow-lg transition-shadow border border-slate-100">
              <div className="bg-red-100 w-14 h-14 rounded-full flex items-center justify-center mb-6 text-red-600">
                <Wind size={28} />
              </div>
              <h3 className="text-xl font-bold mb-3 text-slate-800">ശ്വാസംമുട്ടൽ</h3>
              <p className="text-slate-600">ചെറിയൊരു ജോലി ചെയ്യുമ്പോഴേക്കും കിതപ്പും ശ്വാസംമുട്ടലും അനുഭവപ്പെടുന്നുണ്ടോ?</p>
            </div>
            
            <div className="bg-slate-50 p-8 rounded-2xl hover:shadow-lg transition-shadow border border-slate-100">
              <div className="bg-orange-100 w-14 h-14 rounded-full flex items-center justify-center mb-6 text-orange-600">
                <Flower size={28} />
              </div>
              <h3 className="text-xl font-bold mb-3 text-slate-800">സീസണൽ അലർജി</h3>
              <p className="text-slate-600">കാലാവസ്ഥ മാറുമ്പോൾ തുമ്മൽ, മൂക്കൊലിപ്പ്, കണ്ണിനു ചൊറിച്ചിൽ എന്നിവ ഉണ്ടാകുന്നുണ്ടോ?</p>
            </div>
            
            <div className="bg-slate-50 p-8 rounded-2xl hover:shadow-lg transition-shadow border border-slate-100">
              <div className="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-6 text-blue-600">
                <Coffee size={28} />
              </div>
              <h3 className="text-xl font-bold mb-3 text-slate-800">ഭക്ഷണ അലർജി</h3>
              <p className="text-slate-600">ചില ഭക്ഷണങ്ങൾ കഴിക്കുമ്പോൾ കഫക്കെട്ടും അസ്വസ്ഥതകളും വർദ്ധിക്കുന്നുണ്ടോ?</p>
            </div>
          </div>
        </div>
      </section>

      {/* Solution/Method Section */}
      <section id="method" className="py-20 bg-teal-900 text-white relative overflow-hidden">
        {/* Background Patterns */}
        <div className="absolute top-0 right-0 w-64 h-64 bg-teal-800 rounded-full mix-blend-overlay filter blur-3xl opacity-20"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-teal-700 rounded-full mix-blend-overlay filter blur-3xl opacity-20"></div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 leading-tight">ഇതൊരു മാറ്റത്തിന്റെ തുടക്കമാണ്</h2>
              <p className="text-teal-100 text-lg mb-8 leading-relaxed">
                മരുന്നുകൾ ലക്ഷണങ്ങളെ മാത്രം മാറ്റുമ്പോൾ, ശരിയായ പരിശീലനവും ഭക്ഷണക്രമവും രോഗത്തിന്റെ കാരണത്തെയാണ് ചികിത്സിക്കുന്നത്. ഞങ്ങളുടെ 6 ആഴ്ചത്തെ കോഴ്സിലൂടെ നിങ്ങൾക്ക് ലഭിക്കുന്നത്:
              </p>
              
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="bg-teal-800 p-2 rounded-lg mr-4 mt-1">
                    <Sun size={24} className="text-yellow-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-bold text-white">പ്രാണായാമം (Breathing)</h3>
                    <p className="text-teal-200 mt-1">ശ്വാസകോശത്തിന്റെ കാര്യക്ഷമത വർദ്ധിപ്പിക്കുന്ന പ്രത്യേക ശ്വസനക്രിയകൾ.</p>
                  </div>
                </div>
                
                <div className="flex items-start">
                  <div className="bg-teal-800 p-2 rounded-lg mr-4 mt-1">
                    <Leaf size={24} className="text-green-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-bold text-white">പ്രകൃതിദത്ത ഡയറ്റ്</h3>
                    <p className="text-teal-200 mt-1">ശരീരത്തിലെ അനാവശ്യ നീർക്കെട്ടും കഫവും ഇല്ലാതാക്കുന്ന ഭക്ഷണരീതികൾ.</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-teal-800 p-2 rounded-lg mr-4 mt-1">
                    <Heart size={24} className="text-pink-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-bold text-white">സമ്പൂർണ്ണ ആരോഗ്യം</h3>
                    <p className="text-teal-200 mt-1">മാനസിക സമ്മർദ്ദം കുറച്ച് മികച്ച ഉറക്കവും ഉന്മേഷവും നൽകുന്നു.</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="relative">
              <div className="absolute inset-0 bg-teal-500 rounded-2xl rotate-3 transform opacity-20"></div>
              <div className="bg-gradient-to-br from-teal-800 to-teal-900 border border-teal-700 p-8 rounded-2xl relative shadow-2xl">
                <div className="space-y-4">
                  <div className="bg-white/10 p-4 rounded-xl backdrop-blur-sm">
                    <p className="text-lg italic">"വർഷങ്ങളായി ഇൻഹേലർ ഉപയോഗിച്ചിരുന്ന എനിക്ക് ഇപ്പോൾ ശ്വാസംമുട്ടൽ വളരെ കുറവാണ്. പരിശീലന ക്ലാസ്സുകൾ വളരെ ലളിതമാണ്."</p>
                    <div className="mt-3 flex items-center">
                      <div className="w-10 h-10 bg-teal-200 rounded-full flex items-center justify-center text-teal-800 font-bold">R</div>
                      <div className="ml-3">
                        <p className="font-bold text-sm">രമേഷ് നായർ</p>
                        <p className="text-xs text-teal-300">കൊച്ചി</p>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-white/10 p-4 rounded-xl backdrop-blur-sm">
                    <p className="text-lg italic">"ഭക്ഷണത്തിൽ വരുത്തിയ ചെറിയ മാറ്റങ്ങൾ വലിയ അത്ഭുതമാണ് ഉണ്ടാക്കിയത്. എനിക്ക് ഇപ്പോൾ കൂടുതൽ ഉന്മേഷം തോന്നുന്നു."</p>
                    <div className="mt-3 flex items-center">
                      <div className="w-10 h-10 bg-purple-200 rounded-full flex items-center justify-center text-purple-800 font-bold">S</div>
                      <div className="ml-3">
                        <p className="font-bold text-sm">സരിത പി.</p>
                        <p className="text-xs text-teal-300">തിരുവനന്തപുരം</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Curriculum Section */}
      <section id="curriculum" className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-4">കോഴ്സിൽ എന്തൊക്കെ പഠിക്കാം?</h2>
            <p className="text-slate-600 max-w-2xl mx-auto">4 ആഴ്ചത്തെ സമഗ്രമായ പരിശീലന പരിപാടി</p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {curriculum.map((item, index) => (
              <div key={index} className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:border-teal-300 transition-all group">
                <div className="flex items-start">
                  <div className="bg-teal-100 text-teal-700 font-bold py-1 px-3 rounded text-sm mb-2 inline-block">
                    {item.week}
                  </div>
                </div>
                <h3 className="text-xl font-bold text-slate-800 mb-2 group-hover:text-teal-600 transition-colors">{item.title}</h3>
                <p className="text-slate-600">{item.desc}</p>
              </div>
            ))}
          </div>

          <div className="mt-12 text-center">
             <button onClick={handleWhatsApp} className="bg-slate-800 hover:bg-slate-900 text-white px-8 py-4 rounded-full font-bold text-lg shadow-lg transition-transform transform hover:-translate-y-1">
               ഇപ്പോൾ രജിസ്റ്റർ ചെയ്യൂ
             </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white border-t border-slate-100 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center">
          <div className="flex items-center space-x-2 mb-4 md:mb-0">
            <div className="bg-teal-600 p-2 rounded-full text-white">
              <Wind size={20} />
            </div>
            <span className="text-xl font-bold text-slate-800">BreathWell</span>
          </div>
          <p className="text-slate-500 text-sm">© 2024 BreathWell. All rights reserved.</p>
        </div>
      </footer>

      {/* Enrollment Modal */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm transition-all duration-300">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 relative">
            <button 
              onClick={toggleModal}
              className="absolute top-4 right-4 text-slate-400 hover:text-slate-600 transition-colors"
            >
              <X size={24} />
            </button>
            
            <div className="text-center mb-8">
              <div className="bg-teal-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-teal-600">
                <CheckCircle size={32} />
              </div>
              <h2 className="text-2xl font-bold text-slate-800">ആരോഗ്യത്തിലേക്കുള്ള ആദ്യ ചുവട്</h2>
              <p className="text-slate-500 mt-2">നിങ്ങളുടെ വിവരങ്ങൾ നൽകുക. ഞങ്ങൾ നിങ്ങളെ ഉടൻ ബന്ധപ്പെടും.</p>
            </div>

            {formSubmitted ? (
              <div className="bg-green-50 text-green-700 p-4 rounded-lg text-center animate-pulse">
                <p className="font-bold">നന്ദി! നിങ്ങളുടെ അപേക്ഷ ലഭിച്ചു.</p>
                <p className="text-sm mt-2">WhatsApp-ലേക്ക് റീഡയറക്ട് ചെയ്യുന്നു...</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">പേര്</label>
                  <input 
                    type="text" 
                    name="name"
                    required
                    value={formData.name}
                    onChange={handleInputChange}
                    className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all"
                    placeholder="നിങ്ങളുടെ പേര്"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">ഫോൺ നമ്പർ</label>
                  <input 
                    type="tel" 
                    name="phone"
                    required
                    value={formData.phone}
                    onChange={handleInputChange}
                    className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all"
                    placeholder="നിങ്ങളുടെ മൊബൈൽ നമ്പർ"
                  />
                </div>
                <button 
                  type="submit"
                  className="w-full bg-teal-600 hover:bg-teal-700 text-white font-bold py-3.5 rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-0.5"
                >
                  സബ്മിറ്റ് ചെയ്യുക
                </button>
              </form>
            )}
            <p className="text-xs text-center text-slate-400 mt-6">നിങ്ങളുടെ വിവരങ്ങൾ സുരക്ഷിതമായിരിക്കും.</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;