import React, { useState, useEffect } from 'react';
import { 
  Menu, X, Phone, Calendar, ArrowRight, CheckCircle2, 
  MapPin, MessageCircle, ChevronRight, Award, Ruler, 
  ShieldCheck, Briefcase, Info, LayoutGrid, Star
} from 'lucide-react';

// --- Assets ---
const IMAGES = {
  hero: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&q=80&w=2000",
  bathroom: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?auto=format&fit=crop&q=80&w=1200",
  floor: "https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&q=80&w=1200",
  project: "https://images.unsplash.com/photo-1613553507447-557423e88a00?auto=format&fit=crop&q=80&w=1200",
  b2b: "https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1200"
};

const App = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setIsScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    window.scrollTo(0, 0);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [currentPage]);

  const navigate = (page) => {
    setCurrentPage(page);
    setIsMenuOpen(false);
  };

  // --- Shared Components ---
  const SectionTitle = ({ subtitle, title, centered = false }) => (
    <div className={`mb-12 ${centered ? 'text-center' : ''}`}>
      <span className="text-xs uppercase tracking-[0.3em] text-amber-700 font-semibold mb-3 block">
        {subtitle}
      </span>
      <h2 className="text-3xl md:text-4xl font-light text-zinc-900 leading-tight">
        {title}
      </h2>
    </div>
  );

  const ConversionBlock = () => (
    <section className="bg-zinc-900 py-24 px-6 text-white text-center">
      <div className="max-w-3xl mx-auto">
        <h2 className="text-3xl md:text-5xl font-light mb-8">Klaar om uw droomproject te starten?</h2>
        <p className="text-zinc-400 text-lg mb-10 leading-relaxed">
          Bezoek onze showroom voor een persoonlijk ontwerpadvies. Onze experts staan klaar om uw visie te vertalen naar een tijdloos interieur.
        </p>
        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <button 
            onClick={() => navigate('contact')}
            className="bg-amber-700 hover:bg-amber-800 transition-colors px-10 py-5 text-sm uppercase tracking-widest font-medium"
          >
            Plan showroomafspraak
          </button>
          <button 
            className="border border-zinc-700 hover:bg-zinc-800 transition-colors px-10 py-5 text-sm uppercase tracking-widest font-medium"
          >
            Vraag advies aan
          </button>
        </div>
      </div>
    </section>
  );

  // --- Pages ---
  const HomePage = () => (
    <>
      {/* Hero */}
      <section className="relative h-screen flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img src={IMAGES.hero} alt="Luxe Badkamer" className="w-full h-full object-cover brightness-[0.4]" />
        </div>
        <div className="relative z-10 text-center text-white px-6 max-w-5xl">
          <span className="text-xs uppercase tracking-[0.4em] mb-6 block animate-fade-in">Saray Select | Premium Interieurs</span>
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-light mb-8 leading-tight">
            Tijdloze esthetiek. <br />
            <span className="italic">Onberispelijk</span> vakmanschap.
          </h1>
          <button 
            onClick={() => navigate('contact')}
            className="mt-8 border border-white/30 hover:bg-white hover:text-black transition-all px-12 py-6 text-sm uppercase tracking-widest font-medium backdrop-blur-sm"
          >
            Ontdek de collectie
          </button>
        </div>
      </section>

      {/* Intro */}
      <section className="py-24 px-6 max-w-7xl mx-auto grid md:grid-cols-2 gap-20 items-center">
        <div>
          <SectionTitle 
            subtitle="Welkom bij Saray Select" 
            title="De nieuwe standaard in high-end badkamers en luxe vloeren." 
          />
          <p className="text-zinc-600 leading-relaxed mb-6 text-lg">
            Bij Saray Select geloven we dat luxe niet zit in overdaad, maar in de perfecte balans tussen textuur, licht en ruimte. Wij ontwerpen en realiseren exclusieve badkamers en vloeren voor zij die geen genoegen nemen met minder dan perfectie.
          </p>
          <div className="grid grid-cols-2 gap-8 mt-12">
            <div>
              <span className="block text-3xl font-light mb-2">15+</span>
              <span className="text-xs uppercase tracking-widest text-zinc-500">Jaar Ervaring</span>
            </div>
            <div>
              <span className="block text-3xl font-light mb-2">500+</span>
              <span className="text-xs uppercase tracking-widest text-zinc-500">Projecten</span>
            </div>
          </div>
        </div>
        <div className="relative aspect-[4/5] overflow-hidden">
          <img src={IMAGES.bathroom} alt="Detail" className="w-full h-full object-cover" />
        </div>
      </section>

      {/* Categories */}
      <section className="py-24 px-6 bg-zinc-50">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-2 gap-1">
            <div className="group relative h-[600px] overflow-hidden cursor-pointer" onClick={() => navigate('badkamers')}>
              <img src={IMAGES.bathroom} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105 brightness-75" alt="Badkamers" />
              <div className="absolute inset-0 flex flex-col justify-end p-12 text-white">
                <h3 className="text-4xl font-light mb-4">Luxe Badkamers</h3>
                <p className="text-zinc-200 mb-6 max-w-sm">Van vrijstaande baden tot handgekozen natuursteen.</p>
                <span className="inline-flex items-center text-xs uppercase tracking-widest font-bold">Bekijk meer <ArrowRight className="ml-2 w-4 h-4" /></span>
              </div>
            </div>
            <div className="group relative h-[600px] overflow-hidden cursor-pointer" onClick={() => navigate('vloeren')}>
              <img src={IMAGES.floor} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105 brightness-75" alt="Vloeren" />
              <div className="absolute inset-0 flex flex-col justify-end p-12 text-white">
                <h3 className="text-4xl font-light mb-4">Luxe Vloeren</h3>
                <p className="text-zinc-200 mb-6 max-w-sm">Grootformaat tegels en exclusief natuursteen.</p>
                <span className="inline-flex items-center text-xs uppercase tracking-widest font-bold">Bekijk meer <ArrowRight className="ml-2 w-4 h-4" /></span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <ConversionBlock />
    </>
  );

  const BadkamersPage = () => (
    <div className="pt-32 pb-24">
      <div className="max-w-7xl mx-auto px-6">
        <SectionTitle subtitle="Collectie" title="High-end badkamer ontwerp" />
        <div className="grid lg:grid-cols-3 gap-12 mt-16">
          <div className="lg:col-span-2">
            <p className="text-xl text-zinc-600 leading-relaxed mb-8">
              Een high-end badkamer van Saray Select is een harmonieus samenspel van hoogwaardige materialen en functioneel design. Wij creëren ruimtes die rust ademen en uw dagelijkse rituelen transformeren naar een wellness-ervaring.
            </p>
            <img src={IMAGES.bathroom} className="w-full h-[500px] object-cover mb-12" alt="Premium Design" />
            <h3 className="text-2xl mb-6">Maatwerk in elk detail</h3>
            <div className="grid md:grid-cols-2 gap-8 text-zinc-600">
              <p>Onze ontwerpen integreren naadloos met uw architectuur. Van kranen in geborsteld goud tot wanden van keramisch marmer zonder zichtbare voegen.</p>
              <p>Wij werken uitsluitend met premium merken die de grenzen van innovatie en duurzaamheid verleggen.</p>
            </div>
          </div>
          <div className="bg-zinc-50 p-10 h-fit sticky top-32">
            <h4 className="text-sm uppercase tracking-widest font-bold mb-6">Kenmerken</h4>
            <ul className="space-y-4">
              {["Vrijstaande baden", "Grootformaat tegels", "Inloopdouches met regensensatie", "Maatwerk wastafels", "Slimme verlichting"].map((item, i) => (
                <li key={i} className="flex items-center text-zinc-600">
                  <CheckCircle2 className="w-5 h-5 mr-3 text-amber-700" /> {item}
                </li>
              ))}
            </ul>
            <button onClick={() => navigate('contact')} className="w-full mt-10 bg-zinc-900 text-white py-5 text-sm uppercase tracking-widest font-medium hover:bg-zinc-800 transition-colors">
              Plan een ontwerpafspraak
            </button>
          </div>
        </div>
      </div>
      <ConversionBlock />
    </div>
  );

  const VloerenPage = () => (
    <div className="pt-32 pb-24">
      <div className="max-w-7xl mx-auto px-6">
        <SectionTitle subtitle="Vloerkunst" title="Exclusieve vloeren & Natuursteen" />
        <div className="grid md:grid-cols-2 gap-16 items-center mb-24">
          <div className="order-2 md:order-1">
            <img src={IMAGES.floor} className="w-full aspect-square object-cover" alt="Grootformaat tegels" />
          </div>
          <div className="order-1 md:order-2">
            <h3 className="text-3xl font-light mb-8">De kracht van grootformaat</h3>
            <p className="text-zinc-600 leading-relaxed mb-8">
              Grootformaat tegels (tot 300cm) creëren een rustige, naadloze basis in uw interieur. Bij Saray Select zijn we gespecialiseerd in het leggen van deze XXL-slabs, waarbij de tekening van het natuursteen perfect doorloopt.
            </p>
            <div className="space-y-6">
              <div className="border-b border-zinc-200 pb-4">
                <span className="font-medium text-zinc-900 block">Keramisch Marmer</span>
                <span className="text-sm text-zinc-500 italic">De look van natuursteen, het gemak van keramiek.</span>
              </div>
              <div className="border-b border-zinc-200 pb-4">
                <span className="font-medium text-zinc-900 block">Echt Natuursteen</span>
                <span className="text-sm text-zinc-500 italic">Unieke slabs uit de beste groeves ter wereld.</span>
              </div>
              <div className="border-b border-zinc-200 pb-4">
                <span className="font-medium text-zinc-900 block">Modern Betonlook</span>
                <span className="text-sm text-zinc-500 italic">Een strakke, industriële basis voor minimalisten.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ConversionBlock />
    </div>
  );

  const ProjectenPage = () => (
    <div className="pt-32 pb-24">
      <div className="max-w-7xl mx-auto px-6">
        <SectionTitle subtitle="Portfolio" title="Gerealiseerde Projecten" />
        <div className="grid md:grid-cols-2 gap-8 mt-12">
          {[1, 2, 3, 4].map((p) => (
            <div key={p} className="group cursor-pointer">
              <div className="relative overflow-hidden aspect-video mb-6">
                <img src={IMAGES.project} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Project" />
              </div>
              <h3 className="text-xl font-medium mb-2">Modern Penthouse Amsterdam</h3>
              <p className="text-zinc-500 text-sm uppercase tracking-widest">Badkamer & Vloeren</p>
            </div>
          ))}
        </div>
      </div>
      <ConversionBlock />
    </div>
  );

  const ContactPage = () => (
    <div className="pt-32 pb-24">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-20">
          <div>
            <SectionTitle subtitle="Contact" title="Bezoek onze showroom" />
            <p className="text-zinc-600 mb-10 text-lg">
              Wilt u onze materialen in het echt zien of een project bespreken? Maak een afspraak voor een persoonlijke rondleiding in onze showroom.
            </p>
            <div className="space-y-8">
              <div className="flex items-start">
                <MapPin className="w-6 h-6 mr-6 text-amber-700" />
                <div>
                  <h4 className="font-bold mb-1">Locatie</h4>
                  <p className="text-zinc-600 italic">Voorbeeldstraat 123, 1000 AB Amsterdam</p>
                </div>
              </div>
              <div className="flex items-start">
                <Phone className="w-6 h-6 mr-6 text-amber-700" />
                <div>
                  <h4 className="font-bold mb-1">Telefoon</h4>
                  <p className="text-zinc-600">+31 (0)20 123 4567</p>
                </div>
              </div>
              <div className="flex items-start">
                <Calendar className="w-6 h-6 mr-6 text-amber-700" />
                <div>
                  <h4 className="font-bold mb-1">Openingstijden</h4>
                  <p className="text-zinc-600">Di - Za: 10:00 - 17:00 (Op afspraak)</p>
                </div>
              </div>
            </div>
          </div>
          <div className="bg-zinc-50 p-12 shadow-sm border border-zinc-100">
            <h3 className="text-2xl font-light mb-8">Plan uw afspraak</h3>
            <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <label className="text-xs uppercase tracking-widest font-bold mb-2 block">Naam</label>
                  <input type="text" className="w-full bg-white border border-zinc-200 px-4 py-3 outline-none focus:border-amber-700 transition-colors" placeholder="Uw naam" />
                </div>
                <div>
                  <label className="text-xs uppercase tracking-widest font-bold mb-2 block">Telefoon</label>
                  <input type="tel" className="w-full bg-white border border-zinc-200 px-4 py-3 outline-none focus:border-amber-700 transition-colors" placeholder="06 12345678" />
                </div>
              </div>
              <div>
                <label className="text-xs uppercase tracking-widest font-bold mb-2 block">Projecttype</label>
                <select className="w-full bg-white border border-zinc-200 px-4 py-3 outline-none focus:border-amber-700 transition-colors">
                  <option>Nieuwe badkamer</option>
                  <option>Luxe vloer</option>
                  <option>Totaalrenovatie</option>
                  <option>Zakelijk/Partner</option>
                </select>
              </div>
              <div>
                <label className="text-xs uppercase tracking-widest font-bold mb-2 block">Bericht</label>
                <textarea className="w-full bg-white border border-zinc-200 px-4 py-3 h-32 outline-none focus:border-amber-700 transition-colors" placeholder="Uw wensen..."></textarea>
              </div>
              <button className="w-full bg-zinc-900 text-white py-5 text-sm uppercase tracking-widest font-medium hover:bg-amber-700 transition-all">
                Afspraak bevestigen
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );

  const B2BPage = () => (
    <div className="pt-32 pb-24">
      <div className="max-w-7xl mx-auto px-6">
        <SectionTitle subtitle="Business to Business" title="Samenwerken met Saray Select" />
        <div className="grid md:grid-cols-2 gap-16 items-center mb-24">
          <div>
            <p className="text-xl text-zinc-600 leading-relaxed mb-8">
              Wij zijn de preferred partner voor architecten, interieurontwerpers en projectontwikkelaars die op zoek zijn naar onderscheidende kwaliteit en betrouwbare realisatie.
            </p>
            <div className="grid grid-cols-1 gap-6">
              {[
                { icon: <Ruler className="w-5 h-5"/>, title: "Technische Expertise", desc: "DWG/BIM bestanden en technische ondersteuning." },
                { icon: <Briefcase className="w-5 h-5"/>, title: "Private Label Service", desc: "Showroombezoek met uw eigen klanten." },
                { icon: <LayoutGrid className="w-5 h-5"/>, title: "Exclusieve Samples", desc: "Toegang tot onze stalenbibliotheek." }
              ].map((item, i) => (
                <div key={i} className="flex gap-4 p-6 bg-zinc-50 hover:bg-white border border-zinc-100 transition-colors">
                  <div className="text-amber-700">{item.icon}</div>
                  <div>
                    <h4 className="font-bold mb-1">{item.title}</h4>
                    <p className="text-sm text-zinc-500">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <img src={IMAGES.b2b} className="w-full h-full object-cover grayscale opacity-80" alt="B2B Office" />
        </div>
      </div>
      <ConversionBlock />
    </div>
  );

  const AboutPage = () => (
    <div className="pt-32 pb-24">
      <div className="max-w-4xl mx-auto px-6 text-center">
        <SectionTitle subtitle="Onze Visie" title="Passie voor Perfectie" centered />
        <p className="text-xl text-zinc-600 leading-relaxed mb-12">
          Saray Select is ontstaan vanuit de behoefte om echte luxe tastbaar te maken. Voor ons is luxe geen prijskaartje, maar een gevoel van thuiskomen in een ruimte waar elk detail klopt.
        </p>
        <div className="grid md:grid-cols-3 gap-12 text-center mt-20">
          <div>
            <Award className="w-10 h-10 mx-auto text-amber-700 mb-6" />
            <h4 className="font-bold mb-2">Kwaliteit</h4>
            <p className="text-sm text-zinc-500 italic">Alleen de allerbeste materialen.</p>
          </div>
          <div>
            <ShieldCheck className="w-10 h-10 mx-auto text-amber-700 mb-6" />
            <h4 className="font-bold mb-2">Garantie</h4>
            <p className="text-sm text-zinc-500 italic">Jarenlange zorgeloze beleving.</p>
          </div>
          <div>
            <Star className="w-10 h-10 mx-auto text-amber-700 mb-6" />
            <h4 className="font-bold mb-2">Exclusiviteit</h4>
            <p className="text-sm text-zinc-500 italic">Uniek design voor elke klant.</p>
          </div>
        </div>
      </div>
      <ConversionBlock />
    </div>
  );

  return (
    <div className="min-h-screen bg-white font-sans text-zinc-900 selection:bg-amber-100 selection:text-amber-900">
      
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-500 ${isScrolled || isMenuOpen ? 'bg-white shadow-md py-4' : 'bg-transparent py-8'}`}>
        <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
          <div className="flex flex-col cursor-pointer" onClick={() => navigate('home')}>
            <span className={`text-2xl tracking-[0.2em] font-light ${!isScrolled && !isMenuOpen && currentPage === 'home' ? 'text-white' : 'text-zinc-900'}`}>SARAY SELECT</span>
            <span className={`text-[8px] uppercase tracking-[0.4em] mt-1 ${!isScrolled && !isMenuOpen && currentPage === 'home' ? 'text-zinc-300' : 'text-zinc-500'}`}>Premium Bathrooms & Floors</span>
          </div>

          <div className="hidden lg:flex items-center space-x-10">
            {['Badkamers', 'Vloeren', 'Projecten', 'Over ons'].map((page) => (
              <button 
                key={page}
                onClick={() => navigate(page.toLowerCase().replace(' ', '-'))}
                className={`text-xs uppercase tracking-widest font-medium hover:text-amber-700 transition-colors ${!isScrolled && currentPage === 'home' ? 'text-white' : 'text-zinc-900'}`}
              >
                {page}
              </button>
            ))}
            <button 
              onClick={() => navigate('contact')}
              className={`text-xs uppercase tracking-widest font-bold border-b-2 transition-all ${!isScrolled && currentPage === 'home' ? 'text-white border-white hover:text-zinc-300' : 'text-zinc-900 border-amber-700 hover:text-amber-700'}`}
            >
              Showroomafspraak
            </button>
          </div>

          <button className="lg:hidden p-2" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X /> : <Menu className={!isScrolled && currentPage === 'home' ? 'text-white' : 'text-zinc-900'} />}
          </button>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="lg:hidden absolute top-full left-0 w-full bg-white h-screen p-12 flex flex-col space-y-8 text-center animate-fade-in">
            {['Badkamers', 'Vloeren', 'Inspiratie', 'Projecten', 'Merken', 'Werkwijze', 'Over ons', 'Voor Professionals', 'Contact'].map((item) => (
              <button 
                key={item}
                onClick={() => navigate(item.toLowerCase().replace(' ', '-'))}
                className="text-2xl font-light hover:text-amber-700"
              >
                {item}
              </button>
            ))}
          </div>
        )}
      </nav>

      {/* Main Content */}
      <main>
        {currentPage === 'home' && <HomePage />}
        {currentPage === 'badkamers' && <BadkamersPage />}
        {currentPage === 'vloeren' && <VloerenPage />}
        {currentPage === 'projecten' && <ProjectenPage />}
        {currentPage === 'contact' && <ContactPage />}
        {currentPage === 'voor-professionals' && <B2BPage />}
        {currentPage === 'over-ons' && <AboutPage />}
        {/* Simplified fallbacks for demo */}
        {['inspiratie', 'merken', 'werkwijze'].includes(currentPage) && (
          <div className="pt-48 pb-24 text-center">
            <SectionTitle subtitle="Komt Binnenkort" title={currentPage.toUpperCase()} centered />
            <button onClick={() => navigate('home')} className="mt-8 text-amber-700 font-bold uppercase tracking-widest text-xs underline">Terug naar home</button>
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-zinc-50 pt-24 pb-12 px-6 border-t border-zinc-200">
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
          <div>
            <div className="mb-6">
              <span className="text-xl tracking-[0.2em] font-light">SARAY SELECT</span>
              <p className="text-[10px] text-zinc-500 uppercase tracking-widest mt-2">Premium Interieurontwerp</p>
            </div>
            <p className="text-zinc-500 text-sm leading-relaxed max-w-xs">
              De autoriteit in exclusieve badkamerinrichting en grootformaat vloerkunst. Bezoek onze showroom voor inspiratie.
            </p>
          </div>
          <div>
            <h4 className="text-xs uppercase tracking-widest font-bold mb-8">Navigatie</h4>
            <ul className="space-y-4 text-sm text-zinc-500">
              {['Badkamers', 'Vloeren', 'Inspiratie', 'Portfolio', 'Merken'].map(item => (
                <li key={item} className="hover:text-amber-700 cursor-pointer transition-colors" onClick={() => navigate(item.toLowerCase())}>{item}</li>
              ))}
            </ul>
          </div>
          <div>
            <h4 className="text-xs uppercase tracking-widest font-bold mb-8">Service</h4>
            <ul className="space-y-4 text-sm text-zinc-500">
              {['Werkwijze', 'Voor Professionals', 'Garantie', 'Showroom Afspraak', 'Contact'].map(item => (
                <li key={item} className="hover:text-amber-700 cursor-pointer transition-colors" onClick={() => navigate(item.toLowerCase().replace(' ', '-'))}>{item}</li>
              ))}
            </ul>
          </div>
          <div>
            <h4 className="text-xs uppercase tracking-widest font-bold mb-8">Showroom</h4>
            <p className="text-sm text-zinc-500 mb-4 italic">Alleen op afspraak geopend voor een optimale beleving.</p>
            <div className="flex items-center text-amber-700 font-bold text-lg mb-4 cursor-pointer">
              <Phone className="w-5 h-5 mr-3" /> +31 (0)20 123 4567
            </div>
            <div className="flex items-center text-zinc-400 hover:text-zinc-600 cursor-pointer transition-colors">
              <MessageCircle className="w-5 h-5 mr-3" /> WhatsApp ons direct
            </div>
          </div>
        </div>
        <div className="max-w-7xl mx-auto mt-24 pt-8 border-t border-zinc-200 flex flex-col md:flex-row justify-between items-center text-[10px] uppercase tracking-widest text-zinc-400">
          <p>© {new Date().getFullYear()} Saray Select. Alle rechten voorbehouden.</p>
          <div className="flex space-x-8 mt-4 md:mt-0">
            <span className="cursor-pointer hover:text-zinc-600">Privacy Policy</span>
            <span className="cursor-pointer hover:text-zinc-600">Cookies</span>
            <span className="cursor-pointer hover:text-zinc-600">Sitemap</span>
          </div>
        </div>
      </footer>

      {/* Sticky Mobile CTA */}
      <div className="lg:hidden fixed bottom-6 right-6 z-50 flex flex-col space-y-4">
        <button className="bg-green-500 text-white p-4 rounded-full shadow-lg">
          <MessageCircle className="w-6 h-6" />
        </button>
        <button 
          onClick={() => navigate('contact')}
          className="bg-amber-700 text-white p-4 rounded-full shadow-lg"
        >
          <Calendar className="w-6 h-6" />
        </button>
      </div>
    </div>
  );
};

export default App;