MotionWebStudio/pages/demos/BlueWave.tsx

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

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

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [activePage]);

  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: 'blog', label: 'Blog', icon: BookOpen },
    { id: 'about', label: 'Rólunk', 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">
      {/* Back to main site button */}
      <div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-[60]">
        <Link to="/#references">
          <button className="bg-gray-900 text-white shadow-2xl px-4 md:px-5 py-2.5 md:py-3 rounded-lg md:rounded-xl text-xs md:text-sm font-sans font-bold flex items-center hover:bg-[#0284c7] transition-all transform hover:-translate-y-1">
            <ArrowLeft className="w-4 h-4 mr-2" /> Vissza a portfólióhoz
          </button>
        </Link>
      </div>

      {/* Top Bar */}
      <div className="bg-[#0f172a] text-gray-300 py-2.5 px-4 text-[10px] md:text-xs font-semibold hidden sm:block border-b border-gray-800">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <div className="flex space-x-6">
            <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.hu</span>
          </div>
          <div className="flex space-x-6">
             <span className="text-[#38bdf8] uppercase tracking-widest text-[9px]">Ingyenes felmérés az ország egész területén</span>
          </div>
        </div>
      </div>

      {/* Navbar */}
      <nav className={`sticky top-0 z-50 transition-all duration-500 border-b ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-xl py-0 border-gray-100' : 'bg-white py-2 md: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-16 md: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-100 group-hover:rotate-12 transition-transform">
                <Sun className="w-6 h-6 md:w-8 md:h-8 text-white" />
              </div>
              <div className="leading-none">
                <span className="block text-xl md:text-2xl font-black text-gray-900 tracking-tighter uppercase">BlueWave</span>
                <span className="block text-[8px] md:text-[10px] font-black text-[#0284c7] uppercase tracking-[0.3em] ml-0.5">Napenergia Stúdió</span>
              </div>
            </div>
            
            <div className="hidden lg:flex items-center space-x-2">
              {navItems.map((item) => (
                <button
                  key={item.id}
                  onClick={() => setActivePage(item.id as any)}
                  className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${
                    activePage === item.id 
                      ? 'text-[#0284c7] bg-sky-50' 
                      : 'text-gray-500 hover:text-[#0284c7] hover:bg-gray-50'
                  }`}
                >
                  {item.label}
                </button>
              ))}
              <div className="pl-6 ml-4 border-l border-gray-100">
                <button 
                  onClick={() => setActivePage('contact')}
                  className="bg-[#0284c7] hover:bg-gray-900 text-white px-6 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all shadow-lg shadow-sky-100 active:scale-95"
                >
                  Ajánlatkérés
                </button>
              </div>
            </div>

            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="lg:hidden p-2 text-gray-600 bg-gray-50 rounded-lg">
                {mobileMenuOpen ? <X /> : <Menu />}
            </button>
          </div>
        </div>
        
        {mobileMenuOpen && (
          <div className="lg:hidden bg-white border-t border-gray-100 p-6 space-y-3 shadow-2xl 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-5 py-4 rounded-2xl text-base font-bold ${activePage === item.id ? 'bg-sky-50 text-[#0284c7]' : 'text-gray-600'}`}
              >
                <item.icon className="w-5 h-5 mr-4 opacity-50" />
                {item.label}
              </button>
            ))}
            <button 
              onClick={() => { setActivePage('contact'); setMobileMenuOpen(false); }}
              className="w-full mt-6 bg-gray-900 text-white py-5 rounded-2xl font-black uppercase tracking-widest text-xs"
            >
              Ingyenes Konzultáció
            </button>
          </div>
        )}
      </nav>

      {/* Main Content Area */}
      <main className="flex-grow">
        <div key={activePage} className="animate-fade-in">
        
        {/* --- HOME PAGE --- */}
        {activePage === 'home' && (
          <>
            {/* Hero */}
            <section className="relative min-h-[85vh] flex items-center pt-20 overflow-hidden px-4">
              <div className="absolute inset-0 z-0 scale-105">
                <img src="https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" alt="Home Solar" className="w-full h-full object-cover" />
                <div className="absolute inset-0 bg-gradient-to-r from-white via-white/80 to-transparent"></div>
              </div>
              <div className="relative z-10 max-w-7xl mx-auto w-full">
                <div className="max-w-2xl">
                   <div className="inline-flex items-center px-4 py-2 rounded-full bg-sky-50 text-[#0284c7] text-[10px] md:text-xs font-black uppercase tracking-widest mb-8 border border-sky-100 shadow-sm animate-fade-in-up">
                     <Star className="w-3 h-3 mr-2 fill-current" /> 2024 Év Kivitelezője Díj
                   </div>
                   <h1 className="text-4xl md:text-7xl font-black text-gray-900 mb-8 leading-[0.9] tracking-tighter animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
                     A NAPENERGIA <br/>
                     <span className="text-[#0284c7]">MINDENKIÉ.</span>
                   </h1>
                   <p className="text-lg md:text-xl text-gray-600 mb-10 leading-relaxed font-medium animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
                     Felejtse el a villanyszámlát. Komplett napelemes rendszerek telepítése 0% önerővel, teljes körű állami támogatás ügyintézéssel.
                   </p>
                   <div className="flex flex-col sm:flex-row gap-4 animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
                     <button onClick={() => setActivePage('contact')} className="bg-[#0284c7] hover:bg-gray-900 text-white px-10 py-5 rounded-2xl font-black text-sm uppercase tracking-widest transition-all shadow-xl shadow-sky-200 flex items-center justify-center">
                       Kérjen ajánlatot <ArrowUpRight className="ml-2 w-5 h-5" />
                     </button>
                     <button onClick={() => setActivePage('services')} className="bg-white hover:bg-gray-50 text-gray-900 border-2 border-gray-100 px-10 py-5 rounded-2xl font-black text-sm uppercase tracking-widest transition-all">
                       Ismerje meg a technológiát
                     </button>
                   </div>
                </div>
              </div>
            </section>

            {/* Status Grid */}
            <section className="py-20 bg-white border-b border-gray-100">
               <div className="max-w-7xl mx-auto px-4">
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
                     {[
                       { val: '1200+', label: 'Telepített rendszer' },
                       { val: '25 Év', label: 'Garancia' },
                       { val: '99%', label: 'Ügyfél-elégedettség' },
                       { val: '24 Óra', label: 'Válaszidő' }
                     ].map((s, i) => (
                       <div key={i} className="text-center">
                          <p className="text-3xl md:text-5xl font-black text-gray-900 mb-2">{s.val}</p>
                          <p className="text-[10px] md:text-xs font-black text-[#0284c7] uppercase tracking-[0.2em]">{s.label}</p>
                       </div>
                     ))}
                  </div>
               </div>
            </section>

            {/* Featured Section */}
            <section className="py-24 bg-gray-50">
               <div className="max-w-7xl mx-auto px-4">
                  <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                     <div className="max-w-2xl">
                        <h2 className="text-sm font-black text-[#0284c7] uppercase tracking-[0.3em] mb-4">Prémium Szolgáltatás</h2>
                        <p className="text-3xl md:text-5xl font-black text-gray-900 leading-tight tracking-tighter">Miért a BlueWave a legjobb választás?</p>
                     </div>
                     <button onClick={() => setActivePage('about')} className="text-sm font-bold text-gray-400 hover:text-[#0284c7] transition-colors flex items-center group">
                        Tudjon meg többet rólunk <ChevronRight className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
                     </button>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                     {[
                       { icon: Sun, title: 'Csúcskategóriás Panelek', desc: 'Csak Tier-1 besorolású, bizonyítottan tartós napelemeket használunk a legnagyobb hatásfokért.' },
                       { icon: Battery, title: 'Intelligens Tárolás', desc: 'Hibrid invertereink és akkumulátoros rendszereink révén akár éjszaka is tiszta energiát használhat.' },
                       { icon: Shield, title: '25 Év Teljes Biztonság', desc: 'Nemcsak a termékekre, hanem a munkavégzésre is kiemelkedő garanciális feltételeket biztosítunk.' }
                     ].map((f, i) => (
                       <div key={i} className="bg-white p-10 rounded-[32px] shadow-sm hover:shadow-xl transition-all group">
                          <div className="w-16 h-16 bg-sky-50 rounded-2xl flex items-center justify-center text-[#0284c7] mb-8 group-hover:bg-[#0284c7] group-hover:text-white transition-colors">
                             <f.icon className="w-8 h-8" />
                          </div>
                          <h3 className="text-xl font-black text-gray-900 mb-4 uppercase tracking-tighter">{f.title}</h3>
                          <p className="text-gray-500 text-sm leading-relaxed font-medium">{f.desc}</p>
                       </div>
                     ))}
                  </div>
               </div>
            </section>
          </>
        )}

        {/* --- SERVICES PAGE --- */}
        {activePage === 'services' && (
           <div className="py-24 bg-white min-h-screen px-4">
              <div className="max-w-7xl mx-auto">
                <div className="text-center mb-20">
                  <span className="text-[#0284c7] font-black uppercase tracking-[0.4em] text-xs mb-4 block">Szolgáltatások</span>
                  <h2 className="text-4xl md:text-6xl font-black text-gray-900 mb-8 tracking-tighter">Komplex Energetikai Megoldások</h2>
                  <p className="text-lg text-gray-500 max-w-3xl mx-auto font-medium leading-relaxed">Saját mérnöki csapattal, alvállalkozók nélkül végezzük a teljes kivitelezést.</p>
                </div>
                
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
                   <div className="bg-gray-900 rounded-[40px] overflow-hidden group shadow-2xl">
                      <div className="h-80 overflow-hidden relative">
                         <img src="https://images.unsplash.com/photo-1613665813446-82a78c468a1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Res" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80" />
                         <div className="absolute top-8 left-8 bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20 text-white text-[10px] font-black uppercase tracking-widest">Családi Házak</div>
                      </div>
                      <div className="p-10 md:p-12">
                         <h3 className="text-3xl font-black text-white mb-6 uppercase tracking-tighter">Lakossági Napelem</h3>
                         <p className="text-gray-400 mb-10 leading-relaxed font-medium">Optimalizálja otthona fenntartási költségeit. Teljes körű engedélyeztetés, H-tarifa ügyintézés és statikai tervezés.</p>
                         <button onClick={() => setActivePage('contact')} className="w-full py-5 border-2 border-white/10 text-white font-black rounded-2xl hover:bg-white hover:text-gray-900 transition-all uppercase tracking-widest text-xs">
                            Kérjen lakossági ajánlatot
                         </button>
                      </div>
                   </div>

                   <div className="bg-[#0284c7] rounded-[40px] overflow-hidden group shadow-2xl">
                      <div className="h-80 overflow-hidden relative">
                         <img src="https://images.unsplash.com/photo-1624397640148-949b1732bb0a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Comm" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80" />
                         <div className="absolute top-8 left-8 bg-white/20 backdrop-blur-md px-4 py-2 rounded-full border border-white/30 text-white text-[10px] font-black uppercase tracking-widest">Ipar & Mezőgazdaság</div>
                      </div>
                      <div className="p-10 md:p-12 text-white">
                         <h3 className="text-3xl font-black mb-6 uppercase tracking-tighter">Vállalati Rendszerek</h3>
                         <p className="text-sky-100 mb-10 leading-relaxed font-medium">Csökkentse cége rezsiköltségét ipari méretű naperőművekkel. Megtérülési számítások és pályázati tanácsadás professzionálisan.</p>
                         <button onClick={() => setActivePage('contact')} className="w-full py-5 bg-white text-[#0284c7] font-black rounded-2xl hover:bg-gray-900 hover:text-white transition-all uppercase tracking-widest text-xs">
                            Ipari konzultáció kérése
                         </button>
                      </div>
                   </div>
                </div>
              </div>
           </div>
        )}

        {/* --- BLOG PAGE --- */}
        {activePage === 'blog' && (
           <div className="py-24 bg-gray-50 min-h-screen px-4">
              <div className="max-w-7xl mx-auto">
                 <div className="text-center mb-20">
                    <span className="text-[#0284c7] font-black uppercase tracking-[0.4em] text-xs mb-4 block">Tudástár</span>
                    <h2 className="text-4xl md:text-6xl font-black text-gray-900 tracking-tighter">Friss hírek & Cikkek</h2>
                 </div>
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {[
                      { date: '2024.03.15', title: 'Új napelemes pályázatok: Mire számíthatunk?', img: 'https://images.unsplash.com/photo-1559302504-64aae6ca6b6d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                      { date: '2024.03.02', title: 'Hibrid vagy szigetüzemű rendszer? Segítünk dönteni.', img: 'https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                      { date: '2024.02.20', title: 'Hogyan tartsuk karban napelemes rendszerünket?', img: 'https://images.unsplash.com/photo-1548550023-2bdb3c5beed7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }
                    ].map((post, i) => (
                      <article key={i} className="bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all group">
                         <div className="h-60 overflow-hidden">
                            <img src={post.img} alt={post.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                         </div>
                         <div className="p-8">
                            <time className="text-[10px] font-black text-[#0284c7] uppercase tracking-widest">{post.date}</time>
                            <h3 className="text-xl font-black text-gray-900 mt-3 mb-6 leading-tight uppercase tracking-tighter">{post.title}</h3>
                            <button className="flex items-center text-xs font-black text-gray-400 hover:text-[#0284c7] uppercase tracking-widest transition-colors">
                               Tovább olvasom <ArrowRight className="w-4 h-4 ml-2" />
                            </button>
                         </div>
                      </article>
                    ))}
                 </div>
              </div>
           </div>
        )}

        {/* --- ABOUT PAGE --- */}
        {activePage === 'about' && (
           <div className="py-24 bg-white min-h-screen px-4">
              <div className="max-w-5xl mx-auto">
                 <h2 className="text-4xl md:text-7xl font-black text-gray-900 mb-12 tracking-tighter uppercase leading-[0.9]">Több mint egy <br/><span className="text-[#0284c7]">kivitelező cég.</span></h2>
                 <div className="grid md:grid-cols-2 gap-16 items-center">
                    <div className="space-y-6">
                       <p className="text-lg text-gray-600 leading-relaxed font-medium">A BlueWave Solar azért jött létre, hogy a megújuló energiát elérhetővé, egyszerűvé és átláthatóvá tegye mindenki számára. Csapatunk több mint 10 éves tapasztalattal rendelkezik a villamosenergia-szektorban.</p>
                       <p className="text-lg text-gray-600 leading-relaxed font-medium">Saját mérnökeinkkel és telepítő csapatunkkal garantáljuk, hogy minden rendszerünk évtizedekig hibátlanul működjön. Számunkra nemcsak a panelek felrakása a cél, hanem egy fenntarthatóbb jövő építése.</p>
                       <div className="pt-10 flex gap-6">
                          <div className="p-4 bg-sky-50 rounded-2xl border border-sky-100">
                             <p className="text-2xl font-black text-[#0284c7]">10+</p>
                             <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Év tapasztalat</p>
                          </div>
                          <div className="p-4 bg-sky-50 rounded-2xl border border-sky-100">
                             <p className="text-2xl font-black text-[#0284c7]">HU</p>
                             <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Országos lefedettség</p>
                          </div>
                       </div>
                    </div>
                    <div className="rounded-[40px] overflow-hidden shadow-2xl">
                       <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Team" className="w-full h-full object-cover" />
                    </div>
                 </div>
              </div>
           </div>
        )}

        {/* --- CONTACT PAGE --- */}
        {activePage === 'contact' && (
           <div className="py-20 bg-gray-50 min-h-screen px-4">
              <div className="max-w-6xl mx-auto">
                 <div className="grid grid-cols-1 lg:grid-cols-5 bg-white rounded-[48px] shadow-2xl overflow-hidden border border-gray-100">
                    {/* Contact Info Card */}
                    <div className="lg:col-span-2 bg-[#0284c7] p-10 md:p-14 text-white flex flex-col justify-between relative overflow-hidden">
                       <div className="relative z-10">
                          <h3 className="text-3xl font-black mb-8 tracking-tighter uppercase">Keressen bizalommal</h3>
                          <div className="space-y-8">
                             <div className="flex items-start gap-5">
                                <div className="p-3 bg-white/10 rounded-xl"><Phone className="w-6 h-6" /></div>
                                <div><p className="text-[10px] font-bold text-sky-200 uppercase tracking-widest mb-1">Hívjon minket</p><p className="text-lg font-bold">+36 30 999 8888</p></div>
                             </div>
                             <div className="flex items-start gap-5">
                                <div className="p-3 bg-white/10 rounded-xl"><Mail className="w-6 h-6" /></div>
                                <div><p className="text-[10px] font-bold text-sky-200 uppercase tracking-widest mb-1">Írjon nekünk</p><p className="text-lg font-bold">info@bluewave-solar.hu</p></div>
                             </div>
                             <div className="flex items-start gap-5">
                                <div className="p-3 bg-white/10 rounded-xl"><MapPin className="w-6 h-6" /></div>
                                <div><p className="text-[10px] font-bold text-sky-200 uppercase tracking-widest mb-1">Irodánk</p><p className="text-lg font-bold">1117 Budapest, Napelem u. 1.</p></div>
                             </div>
                          </div>
                       </div>
                       
                       <div className="mt-16 pt-10 border-t border-white/10 relative z-10">
                          <div className="flex gap-4">
                             <button className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-all"><Share2 className="w-5 h-5" /></button>
                             <button className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-all"><Play className="w-5 h-5" /></button>
                          </div>
                       </div>

                       {/* Decorative elements */}
                       <div className="absolute -bottom-20 -right-20 w-64 h-64 bg-sky-500 rounded-full opacity-30 blur-3xl"></div>
                    </div>

                    {/* FORM SECTION */}
                    <div className="lg:col-span-3 p-10 md:p-14 bg-[#0f172a]">
                       <h2 className="text-2xl md:text-3xl font-black text-white mb-10 tracking-tighter uppercase">Ajánlatkérés</h2>
                       <form className="space-y-6">
                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                             <div>
                                <label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Teljes Név</label>
                                <input type="text" className="w-full px-5 py-4 rounded-2xl border-none bg-white text-black font-bold focus:ring-4 focus:ring-[#0ea5e9]/30 outline-none transition-all placeholder:text-gray-300" placeholder="Kovács János" />
                             </div>
                             <div>
                                <label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Telefonszám</label>
                                <input type="tel" className="w-full px-5 py-4 rounded-2xl border-none bg-white text-black font-bold focus:ring-4 focus:ring-[#0ea5e9]/30 outline-none transition-all placeholder:text-gray-300" placeholder="+36 30 ..." />
                             </div>
                          </div>
                          
                          <div className="p-6 md:p-8 bg-[#1e293b] rounded-[32px] border border-gray-800 space-y-6">
                             <div className="flex items-center gap-3 text-[#38bdf8] font-black text-xs uppercase tracking-widest">
                                <Calculator className="w-5 h-5" /> Villám Kalkulátor
                             </div>
                             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                <div>
                                    <label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Havi villanyszámla (Ft)</label>
                                    <input type="number" className="w-full px-5 py-4 rounded-2xl border-none bg-white text-black font-bold placeholder:text-gray-300" placeholder="Pl: 15.000" />
                                </div>
                                <div>
                                    <label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Helyszín</label>
                                    <input type="text" className="w-full px-5 py-4 rounded-2xl border-none bg-white text-black font-bold placeholder:text-gray-300" placeholder="Irányítószám / Város" />
                                </div>
                             </div>
                          </div>

                          <div className="pt-4">
                             <button type="button" className="w-full bg-[#0284c7] hover:bg-white hover:text-gray-900 text-white font-black py-6 rounded-2xl shadow-2xl transition-all active:scale-95 uppercase tracking-[0.2em] text-xs">
                                Ingyenes Kalkuláció Kérése
                             </button>
                             <p className="text-center text-gray-500 text-[10px] mt-6 font-bold uppercase tracking-widest">Kollégánk 24 órán belül keresni fogja Önt.</p>
                          </div>
                       </form>
                    </div>
                 </div>

                 {/* Google Map Placeholder */}
                 <div className="mt-12 bg-white rounded-[40px] overflow-hidden h-[400px] shadow-sm border border-gray-100 relative group">
                    <div className="absolute inset-0 bg-gray-200 flex items-center justify-center overflow-hidden">
                       <img src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Map" className="w-full h-full object-cover opacity-50 grayscale group-hover:grayscale-0 transition-all duration-700" />
                       <div className="absolute inset-0 bg-sky-900/10 group-hover:bg-transparent transition-all"></div>
                       <div className="relative z-10 bg-white p-6 rounded-3xl shadow-2xl text-center border border-gray-100">
                          <MapPin className="w-10 h-10 text-[#0284c7] mx-auto mb-3" />
                          <p className="font-black text-gray-900 uppercase tracking-widest text-xs">Interaktív Térkép</p>
                          <p className="text-[10px] text-gray-400 font-bold mt-1">1117 BUDAPEST, NAPELEM U. 1.</p>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        )}
        
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-20 border-t border-gray-800 px-4">
         <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-16">
               <div className="sm:col-span-2">
                  <div className="flex items-center mb-8">
                     <div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-3 rounded-2xl mr-4">
                        <Sun className="w-6 h-6 text-white" />
                     </div>
                     <span className="text-2xl font-black uppercase tracking-tighter">BlueWave<span className="text-[#38bdf8]">Solar</span></span>
                  </div>
                  <p className="text-gray-400 max-w-sm text-sm leading-relaxed font-medium mb-10">
                     A jövő energiája ma kezdődik. Segítünk elszakadni a hálózati függőségtől és csökkenteni ökológiai lábnyomát professzionális technológiával.
                  </p>
                  <div className="flex gap-4">
                     <div className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-[#0284c7] transition-all cursor-pointer"><FacebookIcon className="w-4 h-4" /></div>
                     <div className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-[#0284c7] transition-all cursor-pointer"><InstagramIcon className="w-4 h-4" /></div>
                  </div>
               </div>
               <div>
                  <h4 className="font-black text-xs mb-8 text-white uppercase tracking-[0.3em]">Navigáció</h4>
                  <ul className="space-y-4 text-xs font-bold text-gray-500 uppercase tracking-widest">
                     <li onClick={() => setActivePage('home')} className="cursor-pointer hover:text-white transition-colors">Főoldal</li>
                     <li onClick={() => setActivePage('services')} className="cursor-pointer hover:text-white transition-colors">Megoldások</li>
                     <li onClick={() => setActivePage('blog')} className="cursor-pointer hover:text-white transition-colors">Blog</li>
                     <li onClick={() => setActivePage('contact')} className="cursor-pointer hover:text-white transition-colors">Kapcsolat</li>
                  </ul>
               </div>
               <div>
                  <h4 className="font-black text-xs mb-8 text-white uppercase tracking-[0.3em]">Kapcsolat</h4>
                  <ul className="space-y-4 text-xs font-bold text-gray-500">
                     <li className="flex items-center gap-3"><MapPin className="w-4 h-4 text-[#38bdf8]" /> 1117 Budapest, Napelem u. 1.</li>
                     <li className="flex items-center gap-3"><Phone className="w-4 h-4 text-[#38bdf8]" /> +36 30 999 8888</li>
                     <li className="flex items-center gap-3"><Mail className="w-4 h-4 text-[#38bdf8]" /> info@bluewave-solar.hu</li>
                  </ul>
               </div>
            </div>
            <div className="border-t border-gray-800 mt-20 pt-10 flex flex-col md:flex-row justify-between items-center gap-6">
               <p className="text-gray-600 text-[10px] font-bold uppercase tracking-widest">&copy; 2024 BlueWave Solar Kft. Minden jog fenntartva.</p>
               <div className="flex gap-8 text-[10px] font-bold text-gray-600 uppercase tracking-widest">
                  <span className="hover:text-white cursor-pointer transition-colors">Adatvédelem</span>
                  <span className="hover:text-white cursor-pointer transition-colors">ÁSZF</span>
               </div>
            </div>
         </div>
      </footer>
    </div>
  );
};

// Internal social icons to avoid extra lucide-react dependency issues in demo
const Shield = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
);
const FacebookIcon = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
);
const InstagramIcon = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
);