"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, Home, Shield, Users, MapPin, Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Kuriosity Homes"
          navItems={[
            { name: "Amenities", id: "amenities" },
            { name: "Safety", id: "safety" },
            { name: "Location", id: "location" },
            { name: "Contact Us", id: "contact" }
          ]}
          button={{ text: "Enquire Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Elite Girls PG in Kirti Nagar"
          description="Experience unparalleled comfort and luxury living designed specifically for modern students and professionals. Your home away from home awaits."
          background={{ variant: "gradient-bars" }}
          tag="Luxury Living"
          tagIcon={Sparkles}
          buttons={[{ text: "Book a Visit", href: "contact" }]}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg?_wi=1", imageAlt: "Luxurious room interior" },
            { imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920926.jpg?_wi=1", imageAlt: "Building exterior" },
            { imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920931.jpg", imageAlt: "Common area" }
          ]}
          mediaAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Facility Highlights"
          description="State-of-the-art facilities ensuring a premium living experience."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            { id: "1", icon: Home, title: "Fully Furnished", value: "100%" },
            { id: "2", icon: Users, title: "Community", value: "Exclusive" },
            { id: "3", icon: Shield, title: "Safety Score", value: "24/7" }
          ]}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardThree
          title="Premium Amenities"
          description="Everything you need for a comfortable and productive stay."
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            { title: "High Speed Wi-Fi", description: "Uninterrupted connectivity for study and work.", imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg?_wi=2" },
            { title: "Professional Housekeeping", description: "Regular cleaning services to keep your space pristine.", imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg?_wi=3" }
          ]}
        />
      </div>

      <div id="safety" data-section="safety">
        <MediaAbout
          title="Safety First Approach"
          description="Your security is our top priority. We offer 24/7 biometric access, round-the-clock CCTV surveillance, and dedicated on-site security personnel to ensure complete peace of mind."
          tag="Unmatched Security"
          imageSrc="https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920926.jpg?_wi=2"
          useInvertedBackground={true}
        />
      </div>

      <div id="location" data-section="location">
        <MediaAbout
          title="Prime Location in Kirti Nagar"
          description="Strategically located in the heart of Kirti Nagar, providing easy access to transport hubs, educational institutions, and shopping districts."
          tag="Connectivity"
          tagIcon={MapPin}
          imageSrc="https://img.b2bpic.net/free-photo/shanghai-night-china_1127-3170.jpg"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Contact Us"
          tagIcon={Phone}
          title="Ready to join our community?"
          description="Book a personal tour of our facilities or enquire about current availability today."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[{ text: "Schedule Tour", href: "#" }]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            { title: "Quick Links", items: [{ label: "Amenities", href: "#amenities" }, { label: "Safety", href: "#safety" }, { label: "Location", href: "#location" }, { label: "Contact Us", href: "#contact" }] }
          ]}
          bottomLeftText="© 2025 Kuriosity Homes. All rights reserved."
          bottomRightText="Elite Living in Kirti Nagar"
        />
      </div>
    </ThemeProvider>
  );
}