import React, { useState } from 'react';
import { Navbar } from './components/Navbar';
import { Hero } from './components/Hero';
import { AboutSection } from './components/AboutSection';
import { ServicesSection } from './components/ServicesSection';
import { PricingSection } from './components/PricingSection';
import { ReviewsSection } from './components/ReviewsSection';
import { FlyerSection } from './components/FlyerSection';
import { ContactSection } from './components/ContactSection';
import { ContactModal } from './components/ContactModal';
import { FloatingCallButton } from './components/FloatingCallButton';

export function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="min-h-screen bg-[#f4eee1] text-[#333333] font-inter selection:bg-[#7097a8] selection:text-white">
      {/* Sticky Navbar */}
      <Navbar />

      {/* Main Single Page Content */}
      <main>
        {/* 1. Hero Banner */}
        <Hero />

        {/* 2. Business Overview & Tagline */}
        <AboutSection />

        {/* 3. Services Grid */}
        <ServicesSection />

        {/* 4. Pricing & Packages */}
        <PricingSection />

        {/* 5. Customer Reviews */}
        <ReviewsSection />

        {/* 6. Promotional Flyer & Services at a Glance */}
        <FlyerSection />

        {/* 7. Contact Footer */}
        <ContactSection onOpenModal={() => setIsModalOpen(true)} />
      </main>

      {/* Interactive Contact / Callback Modal */}
      <ContactModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />

      {/* Floating Call Button for Mobile */}
      <FloatingCallButton />
    </div>
  );
}

export default App;