MotionWebStudio/pages/demos/BlueWave.tsx

import React, { useState, useEffect } from 'react';
import { ArrowLeft, Sun, Battery, Zap, ChevronRight, Menu, X, Phone, Mail, CheckCircle, Home, Info, Briefcase, Calculator, ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';

export const BlueWave: React.FC = () => {
  const [activePage, setActivePage] = useState<'home' | 'services' | 'about' | 'contact'>('home');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  // Smooth scroll to top when "changing pages" in this SPA simulation
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [activePage]);

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

  const navItems = [
    { id: 'home', label: 'Főoldal', icon: Home },
    { id: 'services', label: 'Megoldások', icon: Zap },
    { id: 'about', label: 'Cégünkről', icon: Info },
    { id: 'contact', label: 'Kapcsolat', icon: Phone },
  ];

  return (
    <div className="font-sans text-gray-800 bg-white min-h-screen flex flex-col selection:bg-[#0284c7] selection:text-white">
      {/* Return to Main Site */}
      <div className="fixed bottom-6 right-6 z-[60]">
        <Link to="/#references">
          <button className="bg-gray-900 text-white shadow-xl px-5 py-3 rounded-xl text-sm font-sans font-medium flex items-center hover:bg-gray-800 hover:-translate-y-1 transition-all duration-300">
            <ArrowLeft className="w-4 h-4 mr-2" /> Vissza a referenciákhoz
          </button>
        </Link>
      </div>

      {/* Top Bar */}
      <div className="bg-[#0f172a] text-gray-300 py-2.5 px-4 text-xs font-medium hidden md:block border-b border-gray-800">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <div className="flex space-x-8">
            <span className="flex items-center hover:text-white transition-colors cursor-pointer"><Phone className="w-3.5 h-3.5 mr-2 text-[#38bdf8]" /> +36 30 999 8888</span>
            <span className="flex items-center hover:text-white transition-colors cursor-pointer"><Mail className="w-3.5 h-3.5 mr-2 text-[#38bdf8]" /> info@bluewave-solar.demo</span>
          </div>
          <div className="flex space-x-6">
             <a href="#" className="hover:text-white transition-colors">Lakossági</a>
             <a href="#" className="hover:text-white transition-colors">Ipari</a>
             <a href="#" className="hover:text-white transition-colors text-[#38bdf8]">Partnerprogram</a>
          </div>
        </div>
      </div>

      {/* Navbar */}
      <nav className={`sticky top-0 z-50 transition-all duration-300 border-b ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-0 border-gray-200' : 'bg-white py-4 border-transparent'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            <div className="flex items-center cursor-pointer group" onClick={() => setActivePage('home')}>
              <div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-2.5 rounded-xl mr-3 shadow-lg shadow-sky-200 group-hover:scale-105 transition-transform duration-300">
                <Sun className="w-7 h-7 text-white" />
              </div>
              <div className="leading-none">
                <span className="block text-2xl font-bold text-gray-900 tracking-tight">BlueWave</span>
                <span className="block text-xs font-bold text-[#0284c7] uppercase tracking-widest ml-0.5">Solar Systems</span>
              </div>
            </div>
            
            <div className="hidden md:flex items-center space-x-1">
              {navItems.map((item) => (
                <button
                  key={item.id}
                  onClick={() => setActivePage(item.id as any)}
                  className={`relative px-5 py-2.5 rounded-lg text-sm font-semibold transition-all duration-300 ${
                    activePage === item.id 
                      ? 'text-[#0284c7] bg-sky-50' 
                      : 'text-gray-600 hover:text-[#0284c7] hover:bg-gray-50'
                  }`}
                >
                  {item.label}
                  {activePage === item.id && (
                    <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/2 h-0.5 bg-[#0284c7] rounded-full"></span>
                  )}
                </button>
              ))}
              <div className="pl-4 ml-4 border-l border-gray-200">
                <button 
                  onClick={() => setActivePage('contact')}
                  className="bg-[#0284c7] hover:bg-[#0369a1] text-white px-6 py-3 rounded-lg font-bold text-sm transition-all shadow-lg shadow-sky-200 hover:-translate-y-0.5"
                >
                  Ingyenes felmérés
                </button>
              </div>
            </div>

            <div className="flex items-center gap-6 md:hidden">
              <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
                {mobileMenuOpen ? <X /> : <Menu />}
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-white border-t border-gray-100 p-4 space-y-2 shadow-xl absolute w-full animate-fade-in">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => { setActivePage(item.id as any); setMobileMenuOpen(false); }}
                className={`w-full flex items-center px-4 py-4 rounded-xl text-base font-medium ${activePage === item.id ? 'bg-sky-50 text-[#0284c7]' : 'text-gray-700 hover:bg-gray-50'}`}
              >
                <item.icon className="w-5 h-5 mr-3 opacity-70" />
                {item.label}
              </button>
            ))}
            <button 
              onClick={() => { setActivePage('contact'); setMobileMenuOpen(false); }}
              className="w-full mt-4 bg-[#0284c7] text-white px-4 py-4 rounded-xl font-bold shadow-md"
            >
              Ingyenes felmérés
            </button>
          </div>
        )}
      </nav>

      {/* Main Content Area - Simulating Routing with smooth fade */}
      <main className="flex-grow relative">
        <div key={activePage} className="animate-fade-in">
        
        {/* HOME PAGE */}
        {activePage === 'home' && (
          <>
            <section className="relative bg-[#0f172a] py-32 lg:py-48 overflow-hidden">
              <div className="absolute inset-0 z-0">
                <img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" alt="Solar Panels" className="w-full h-full object-cover opacity-30 scale-105 animate-pulse-slow" />
                <div className="absolute inset-0 bg-gradient-to-r from-[#0f172a] via-[#0f172a]/90 to-transparent"></div>
              </div>
              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="max-w-3xl">
                   <div className="inline-flex items-center px-4 py-2 rounded-full bg-[#0ea5e9]/10 text-[#38bdf8] text-sm font-bold mb-8 border border-[#0ea5e9]/20 backdrop-blur-sm animate-fade-in-up">
                     <CheckCircle className="w-4 h-4 mr-2" /> Hivatalos állami kivitelező partner
                   </div>
                   <h1 className="text-5xl md:text-7xl font-extrabold text-white mb-8 leading-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
                     Váltson tiszta energiára <br/>
                     <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#38bdf8] to-[#0ea5e9]">a jövőjéért</span>
                   </h1>
                   <p className="text-xl text-gray-300 mb-10 leading-relaxed max-w-2xl animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
                     Csökkentse rezsijét akár 100%-kal prémium napelem rendszereinkkel. Teljeskörű ügyintézés a tervezéstől a kulcsrakész átadásig, 25 év garanciával.
                   </p>
                   <div className="flex flex-col sm:flex-row gap-5 animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
                     <button onClick={() => setActivePage('contact')} className="bg-[#0284c7] hover:bg-[#0369a1] text-white px-10 py-4 rounded-xl font-bold text-lg transition-all flex items-center justify-center shadow-lg shadow-sky-900/50 hover:scale-105">
                       Kalkuláció kérése <ChevronRight className="w-5 h-5 ml-2" />
                     </button>
                     <button onClick={() => setActivePage('services')} className="bg-white/5 hover:bg-white/10 text-white backdrop-blur-sm px-10 py-4 rounded-xl font-bold text-lg transition-all border border-white/10 hover:border-white/30">
                       Rendszereink
                     </button>
                   </div>
                   
                   <div className="mt-16 flex items-center gap-8 text-gray-400 text-sm font-medium animate-fade-in-up" style={{ animationDelay: '0.5s' }}>
                      <div className="flex items-center gap-2">
                        <div className="w-2 h-2 rounded-full bg-green-500"></div> 1000+ elégedett ügyfél
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="w-2 h-2 rounded-full bg-green-500"></div> Országos lefedettség
                      </div>
                   </div>
                </div>
              </div>
            </section>

            <section className="py-24 bg-gray-50 relative">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-32 relative z-20">
                <div className="grid md:grid-cols-3 gap-8">
                  {[
                    { icon: Sun, color: 'text-[#0284c7]', bg: 'bg-sky-50', title: 'Prémium Panelek', desc: 'Tier-1 kategóriás napelemek 25 év teljesítménygaranciával és kiemelkedő hatásfokkal.' },
                    { icon: Battery, color: 'text-emerald-600', bg: 'bg-emerald-50', title: 'Energiatárolás', desc: 'Hibrid rendszerek és akkumulátoros megoldások a teljes függetlenségért.' },
                    { icon: Briefcase, color: 'text-orange-600', bg: 'bg-orange-50', title: 'Kulcsrakész', desc: 'Minden papírmunkát, pályázatot és engedélyeztetést elintézünk Ön helyett.' }
                  ].map((item, i) => (
                    <div key={i} className="bg-white p-10 rounded-2xl shadow-xl border border-gray-100 hover:-translate-y-2 transition-transform duration-300">
                      <div className={`w-16 h-16 ${item.bg} rounded-2xl flex items-center justify-center mb-8 ${item.color}`}>
                        <item.icon className="w-8 h-8" />
                      </div>
                      <h3 className="text-2xl font-bold mb-4 text-gray-900">{item.title}</h3>
                      <p className="text-gray-600 leading-relaxed">{item.desc}</p>
                    </div>
                  ))}
                </div>
              </div>
              
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-24">
                 <div className="text-center mb-16">
                    <h2 className="text-3xl font-bold text-gray-900 mb-4">Miért válassza a BlueWave-et?</h2>
                    <p className="text-xl text-gray-600">Szakértelem, minőség és megbízhatóság egy helyen.</p>
                 </div>
                 
                 <div className="grid md:grid-cols-2 gap-12 items-center">
                    <img src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Engineer" className="rounded-3xl shadow-2xl" />
                    <div className="space-y-8">
                       {[
                         { title: 'Szakértő Mérnökcsapat', text: 'Saját, magasan képzett mérnökeink tervezik meg rendszerét a maximális hatékonyság érdekében.' },
                         { title: 'Gyors Kivitelezés', text: 'A szerződéskötéstől számított 30 napon belül telepítjük rendszerét.' },
                         { title: 'Folyamatos Támogatás', text: 'Telepítés után sem engedjük el a kezét, távfelügyeletet és karbantartást biztosítunk.' }
                       ].map((feat, i) => (
                         <div key={i} className="flex gap-4">
                            <div className="w-8 h-8 rounded-full bg-[#0284c7] flex-shrink-0 flex items-center justify-center text-white font-bold mt-1">
                               {i + 1}
                            </div>
                            <div>
                               <h3 className="text-xl font-bold text-gray-900 mb-2">{feat.title}</h3>
                               <p className="text-gray-600 leading-relaxed">{feat.text}</p>
                            </div>
                         </div>
                       ))}
                       <button onClick={() => setActivePage('about')} className="mt-4 text-[#0284c7] font-bold flex items-center hover:underline">
                          Tudjon meg többet rólunk <ArrowRight className="w-5 h-5 ml-2" />
                       </button>
                    </div>
                 </div>
              </div>
            </section>
          </>
        )}

        {/* SERVICES PAGE */}
        {activePage === 'services' && (
           <div className="py-20 bg-gray-50 min-h-screen">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-20">
                  <span className="text-[#0284c7] font-bold uppercase tracking-wider text-sm mb-2 block">Megoldásaink</span>
                  <h2 className="text-4xl md:text-5xl font-extrabold text-gray-900 mb-6">Minden igényre van válaszunk</h2>
                  <p className="text-xl text-gray-600 max-w-3xl mx-auto">Legyen szó kis családi házról vagy hatalmas ipari létesítményről, mi megtaláljuk az optimális rendszert.</p>
                </div>
                
                <div className="grid lg:grid-cols-2 gap-16">
                   {/* Residential */}
                   <div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100">
                      <div className="h-80 overflow-hidden relative">
                         <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors z-10"></div>
                         <img src="https://images.unsplash.com/photo-1613665813446-82a78c468a1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Residential" className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" />
                         <div className="absolute bottom-6 left-6 z-20">
                            <span className="bg-white px-4 py-1 rounded-full text-sm font-bold text-[#0284c7] mb-2 inline-block">Lakossági</span>
                            <h3 className="text-3xl font-bold text-white">Családi Házak</h3>
                         </div>
                      </div>
                      <div className="p-10">
                         <p className="text-gray-600 mb-8 text-lg leading-relaxed">
                            Csökkentse otthona energiafüggőségét és növelje ingatlana értékét. Rendszereink diszkrétek, esztétikusak és okosotthon-kompatibilisek.
                         </p>
                         <div className="grid sm:grid-cols-2 gap-4 mb-8">
                            {['Rezsi nullázása', 'Hibrid Inverterek', 'Okos monitorozás', 'Elektromos autó töltés'].map((item, i) => (
                              <div key={i} className="flex items-center text-gray-700 font-medium">
                                 <CheckCircle className="w-5 h-5 text-green-500 mr-3" /> {item}
                              </div>
                            ))}
                         </div>
                         <button onClick={() => setActivePage('contact')} className="w-full py-4 border-2 border-[#0284c7] text-[#0284c7] font-bold rounded-xl hover:bg-[#0284c7] hover:text-white transition-all">
                            Ajánlatkérés Családi Házra
                         </button>
                      </div>
                   </div>

                   {/* Industrial */}
                   <div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100">
                      <div className="h-80 overflow-hidden relative">
                         <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors z-10"></div>
                         <img src="https://images.unsplash.com/photo-1624397640148-949b1732bb0a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Commercial" className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" />
                         <div className="absolute bottom-6 left-6 z-20">
                            <span className="bg-white px-4 py-1 rounded-full text-sm font-bold text-[#0284c7] mb-2 inline-block">Ipari</span>
                            <h3 className="text-3xl font-bold text-white">Vállalatok & Üzemek</h3>
                         </div>
                      </div>
                      <div className="p-10">
                         <p className="text-gray-600 mb-8 text-lg leading-relaxed">
                            Optimalizálja vállalkozása működési költségeit. Nagy teljesítményű rendszerek, amelyek fedezik a gépek és üzemcsarnokok energiaigényét.
                         </p>
                         <div className="grid sm:grid-cols-2 gap-4 mb-8">
                            {['Gyors megtérülés', '50kW - 5MW teljesítmény', 'ESG megfelelőség', 'Saját transzformátor'].map((item, i) => (
                              <div key={i} className="flex items-center text-gray-700 font-medium">
                                 <CheckCircle className="w-5 h-5 text-green-500 mr-3" /> {item}
                              </div>
                            ))}
                         </div>
                         <button onClick={() => setActivePage('contact')} className="w-full py-4 border-2 border-[#0284c7] text-[#0284c7] font-bold rounded-xl hover:bg-[#0284c7] hover:text-white transition-all">
                            Ipari Konzultáció Kérése
                         </button>
                      </div>
                   </div>
                </div>
              </div>
           </div>
        )}

        {/* ABOUT PAGE */}
        {activePage === 'about' && (
           <div className="py-20 bg-white">
              <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                 <div className="inline-block p-3 rounded-full bg-sky-100 mb-6 text-[#0284c7]">
                    <Sun className="w-8 h-8" />
                 </div>
                 <h2 className="text-4xl font-extrabold text-gray-900 mb-8">A BlueWave Küldetése</h2>
                 <p className="text-xl text-gray-700 leading-relaxed mb-12">
                    A BlueWave Solar Kft. 2015-ben azzal a céllal alakult, hogy elérhetővé tegye a napenergiát mindenki számára. Hiszünk abban, hogy a fenntarthatóság nem luxus, hanem a jövő záloga. Csapatunk okleveles mérnökökből, pályázati szakértőkből és tapasztalt kivitelezőkből áll.
                 </p>
                 
                 <div className="bg-gradient-to-br from-[#0f172a] to-[#1e293b] rounded-3xl p-12 text-white shadow-2xl mb-16 relative overflow-hidden">
                    <div className="relative z-10 grid grid-cols-1 md:grid-cols-3 gap-12">
                      <div>
                         <div className="text-5xl font-bold text-[#38bdf8] mb-2">500+</div>
                         <div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Telepített rendszer</div>
                      </div>
                      <div>
                         <div className="text-5xl font-bold text-[#38bdf8] mb-2">15MW</div>
                         <div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Össz teljesítmény</div>
                      </div>
                      <div>
                         <div className="text-5xl font-bold text-[#38bdf8] mb-2">100%</div>
                         <div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Ügyfél elégedettség</div>
                      </div>
                    </div>
                    {/* Background decorations */}
                    <div className="absolute top-0 right-0 w-64 h-64 bg-[#38bdf8] rounded-full filter blur-[100px] opacity-20"></div>
                 </div>

                 <div className="grid md:grid-cols-3 gap-8 text-left">
                    <div className="bg-gray-50 p-8 rounded-2xl">
                       <h3 className="font-bold text-xl mb-3">Minőség</h3>
                       <p className="text-gray-600">Kizárólag minősített, prémium gyártók termékeit használjuk, hogy rendszere évtizedekig működjön.</p>
                    </div>
                    <div className="bg-gray-50 p-8 rounded-2xl">
                       <h3 className="font-bold text-xl mb-3">Innováció</h3>
                       <p className="text-gray-600">Folyamatos követjük a technológia fejlődését, hogy a legmodernebb megoldásokat kínálhassuk.</p>
                    </div>
                    <div className="bg-gray-50 p-8 rounded-2xl">
                       <h3 className="font-bold text-xl mb-3">Garancia</h3>
                       <p className="text-gray-600">A kivitelezésre és a termékekre is kiemelkedő garanciális feltételeket biztosítunk.</p>
                    </div>
                 </div>
              </div>
           </div>
        )}

        {/* CONTACT PAGE */}
        {activePage === 'contact' && (
           <div className="py-20 bg-[#f8fafc] min-h-screen">
              <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div className="grid lg:grid-cols-5 gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
                    {/* Left Panel */}
                    <div className="lg:col-span-2 bg-[#0284c7] p-10 text-white flex flex-col justify-between relative overflow-hidden">
                       <div className="relative z-10">
                          <h3 className="text-2xl font-bold mb-6">Lépjen velünk kapcsolatba</h3>
                          <p className="text-sky-100 mb-8">
                             Töltse ki az űrlapot egy ingyenes, kötelezettségmentes előzetes kalkulációért. Mérnök kollégánk 24 órán belül keresni fogja.
                          </p>
                          <div className="space-y-6">
                             <div className="flex items-center gap-4">
                                <Phone className="w-6 h-6 text-sky-200" /> 
                                <span className="font-medium">+36 30 999 8888</span>
                             </div>
                             <div className="flex items-center gap-4">
                                <Mail className="w-6 h-6 text-sky-200" /> 
                                <span className="font-medium">info@bluewave-solar.demo</span>
                             </div>
                             <div className="flex items-center gap-4">
                                <Home className="w-6 h-6 text-sky-200" /> 
                                <span className="font-medium">1117 Budapest, Napelem u. 1.</span>
                             </div>
                          </div>
                       </div>
                       <div className="relative z-10 mt-12">
                          <p className="text-sm text-sky-200 opacity-80">
                             Nyitvatartás: H-P 8:00 - 17:00
                          </p>
                       </div>
                       {/* Circle decorations */}
                       <div className="absolute -bottom-10 -right-10 w-48 h-48 bg-sky-500 rounded-full opacity-50"></div>
                       <div className="absolute top-10 right-10 w-20 h-20 bg-sky-400 rounded-full opacity-30"></div>
                    </div>

                    {/* Right Panel - Form */}
                    <div className="lg:col-span-3 p-10">
                       <h2 className="text-2xl font-bold text-gray-900 mb-6">Ingyenes Ajánlatkérés</h2>
                       <form className="space-y-6">
                          <div className="grid md:grid-cols-2 gap-6">
                             <div>
                                <label className="block text-sm font-semibold text-gray-700 mb-2">Teljes Név</label>
                                <input type="text" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="Kovács János" />
                             </div>
                             <div>
                                <label className="block text-sm font-semibold text-gray-700 mb-2">Telefonszám</label>
                                <input type="tel" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="+36 30 123 4567" />
                             </div>
                          </div>
                          <div>
                             <label className="block text-sm font-semibold text-gray-700 mb-2">Email Cím</label>
                             <input type="email" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="janos@pelda.hu" />
                          </div>
                          
                          <div className="p-6 bg-sky-50 rounded-xl border border-sky-100">
                             <div className="flex items-center gap-2 mb-4 text-[#0284c7] font-bold">
                                <Calculator className="w-5 h-5" /> Gyors Kalkulátor Adatok
                             </div>
                             <div className="grid md:grid-cols-2 gap-6">
                                <div>
                                    <label className="block text-sm font-semibold text-gray-700 mb-2">Havi villanyszámla (kb.)</label>
                                    <input type="number" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] outline-none bg-white text-gray-900" placeholder="Pl: 25000" />
                                </div>
                                <div>
                                    <label className="block text-sm font-semibold text-gray-700 mb-2">Telepítés Helyszíne</label>
                                    <input type="text" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] outline-none bg-white text-gray-900" placeholder="Város / Irányítószám" />
                                </div>
                             </div>
                          </div>

                          <div className="pt-2">
                             <button type="button" className="w-full bg-[#0284c7] hover:bg-[#0369a1] text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                                Díjmentes Kalkuláció Kérése
                             </button>
                             <p className="text-center text-xs text-gray-500 mt-4">
                                Az ajánlatkérés nem jár kötelezettséggel. Adatvédelmi irányelveinket elfogadom.
                             </p>
                          </div>
                       </form>
                    </div>
                 </div>
              </div>
           </div>
        )}
        
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-[#0f172a] text-white py-16 border-t border-gray-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-4 gap-12 mb-12">
               <div className="col-span-1 md:col-span-2">
                  <div className="flex items-center mb-6">
                     <div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-2 rounded-lg mr-3">
                        <Sun className="w-6 h-6 text-white" />
                     </div>
                     <span className="text-2xl font-bold">BlueWave<span className="text-[#38bdf8]">Solar</span></span>
                  </div>
                  <p className="text-gray-400 max-w-sm leading-relaxed">
                     Magyarország vezető napenergia szolgáltatója. Célunk, hogy ügyfeleink számára energiafüggetlenséget és fenntartható jövőt biztosítsunk.
                  </p>
               </div>
               <div>
                  <h4 className="font-bold text-lg mb-6 text-white">Navigáció</h4>
                  <ul className="space-y-3 text-gray-400">
                     <li onClick={() => setActivePage('home')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Főoldal</li>
                     <li onClick={() => setActivePage('services')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Megoldások</li>
                     <li onClick={() => setActivePage('about')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Rólunk</li>
                     <li onClick={() => setActivePage('contact')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Kapcsolat</li>
                  </ul>
               </div>
               <div>
                  <h4 className="font-bold text-lg mb-6 text-white">Kapcsolat</h4>
                  <div className="space-y-3 text-gray-400">
                     <p>1117 Budapest, Napelem u. 1.</p>
                     <p>+36 30 999 8888</p>
                     <p>info@bluewave-solar.demo</p>
                  </div>
               </div>
            </div>
            <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm">
               <p>&copy; 2024 BlueWave Solar Kft. Minden jog fenntartva.</p>
               <p>Demonstrációs weboldal - MotionWeb Pro csomag</p>
            </div>
         </div>
      </footer>
    </div>
  );
};