import React, { useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import { Phone } from 'lucide-react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import Highlights from './components/Highlights';
import About from './components/About';
import Amenities from './components/Amenities';
import Specifications from './components/Specifications';
import Gallery from './components/Gallery';
import VideoGallery from './components/VideoGallery';
import Location from './components/Location';
import Footer from './components/Footer';
import EnquiryModal from './components/EnquiryModal';

import PrivacyPolicy from './pages/PrivacyPolicy';
import TermsConditions from './pages/TermsConditions';

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
    
    // Dynamically manage canonical URL for SEO indexing
    const canonical = document.querySelector('link[rel="canonical"]');
    if (canonical) {
      const canonicalUrl = `https://legacykairos.legacylifespaces.co.in${pathname === '/' ? '' : pathname}`;
      canonical.setAttribute('href', canonicalUrl);
    }

    // Set page defaults on the home route
    if (pathname === '/') {
      document.title = "Legacy Kairos | Premium 3.5 & 4 BHK Homes in Rahatani, Pune";
      const metaDesc = document.querySelector('meta[name="description"]');
      if (metaDesc) {
        metaDesc.setAttribute("content", "Discover Legacy Kairos in Rahatani, Pune. Premium 3.5 & 4 BHK homes by Legacy Lifespaces. Explore amenities, floor plans, and prime location. Book now!");
      }
    }
  }, [pathname]);

  return null;
}

function HomePage() {
  return (
    <>
      <main className="flex-grow">
        <Hero />
        <About />
        <Amenities />
        <Specifications />
        <Gallery />
        <VideoGallery />
        <Location />
        <Highlights />
      </main>
    </>
  );
}

export default function App() {
  return (
    <div className="min-h-screen flex flex-col font-sans text-gray-800 bg-transparent">
      <ScrollToTop />
      <Navbar />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
        <Route path="/terms-and-conditions" element={<TermsConditions />} />
      </Routes>
      <Footer />
      <EnquiryModal />
      
      {/* Fixed Call Button */}
      <button
        onClick={() => window.dispatchEvent(new CustomEvent('open-enquiry'))}
        className="fixed bottom-6 right-6 z-50 bg-primary text-white p-4 rounded-full shadow-2xl hover:bg-primary/90 transition-transform hover:scale-110 flex items-center justify-center"
        aria-label="Open Enquiry Form"
      >
        <Phone className="w-6 h-6" />
      </button>
    </div>
  );
}

