"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Crown, Gem, Heart, Star, Users, MessageCircle, MessageSquare, Home, DollarSign, Globe, BarChart3 } 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="Luxe Properties"
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "About", id: "about" },
            { name: "Team", id: "team" },
            { name: "Insights", id: "metrics" },
            { name: "Testimonials", id: "testimonials" }
          ]}
          button={{ text: "Schedule Tour", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Discover Exceptional Luxury Homes"
          description="Explore our curated collection of premium properties in the world's most sought-after locations. Where elegance meets excellence."
          background={{ variant: "plain" }}
          tag="Exclusive Listings"
          tagIcon={Crown}
          tagAnimation="slide-up"
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/modern-dining-room-living-room-with-luxury-decor_105762-1672.jpg", imageAlt: "Luxury penthouse interior" },
            { imageSrc: "http://img.b2bpic.net/free-photo/minimalist-architecture-space_23-2151912527.jpg", imageAlt: "Beachfront villa" },
            { imageSrc: "http://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg", imageAlt: "City skyline view" },
            { imageSrc: "http://img.b2bpic.net/free-photo/part-modern-kitchen-interior-with-oven_169016-19754.jpg", imageAlt: "Gourmet kitchen" },
            { imageSrc: "http://img.b2bpic.net/free-photo/positive-calm-woman-light-summer-dress-straw-hat-tropical-location_343596-3151.jpg", imageAlt: "Modern villa exterior" }
          ]}
          mediaAnimation="slide-up"
          buttons={[
            { text: "Browse Listings", href: "properties" },
            { text: "Schedule Viewing", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardFour
          title="Featured Properties"
          description="Our most prestigious properties currently available. Each residence represents the pinnacle of luxury and sophistication."
          tag="Premium Selection"
          tagIcon={Gem}
          tagAnimation="slide-up"
          products={[
            {
              id: "prop-001",              name: "Oceanfront Penthouse Suite",              price: "$8,500,000",              variant: "3 Bedrooms  5 Bathrooms  Floor Plan",              imageSrc: "http://img.b2bpic.net/free-photo/positive-calm-woman-light-summer-dress-straw-hat-tropical-location_343596-3151.jpg",              imageAlt: "Luxury oceanfront penthouse"
            },
            {
              id: "prop-002",              name: "Downtown Metropolitan Loft",              price: "$5,200,000",              variant: "2 Bedrooms  3 Bathrooms  City Views",              imageSrc: "http://img.b2bpic.net/free-vector/keeping-room-apartment-composition_1284-21909.jpg",              imageAlt: "Modern downtown loft"
            },
            {
              id: "prop-003",              name: "Private Estate with Gardens",              price: "$12,000,000",              variant: "5 Bedrooms  7 Bathrooms  Pool & Spa",              imageSrc: "http://img.b2bpic.net/free-photo/umbrella-chair-around-swimming-pool-neary-sea-ocean-beach-with-blue-sky-white-cloud_74190-8487.jpg",              imageAlt: "Private luxury estate"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View All Listings", href: "properties" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Experience Luxury Real Estate Excellence"
          description="For over 20 years, Luxe Properties has been connecting discerning buyers with the world's most exceptional residences. Our expertise spans global luxury markets, ensuring every client receives personalized service and access to exclusive opportunities."
          tag="Our Story"
          tagIcon={Heart}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/colleagues-looking-charts-sofa_23-2147707738.jpg"
          imageAlt="Luxury real estate office"
          useInvertedBackground={false}
          buttons={[
            { text: "Learn More", href: "about" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Why Choose Luxe Properties"
          description="Our commitment to excellence distinguishes us in the luxury real estate market."
          tag="Our Advantages"
          tagIcon={Star}
          tagAnimation="slide-up"
          features={[
            {
              id: "01",              title: "Luxury Expertise",              description: "Specialized knowledge of high-end properties and global luxury markets.",              imageSrc: "http://img.b2bpic.net/free-photo/female-turning-light-using-remote-control_259150-57143.jpg",              imageAlt: "Luxury property features"
            },
            {
              id: "02",              title: "Prime Locations",              description: "Access to properties in the most prestigious neighborhoods worldwide.",              imageSrc: "http://img.b2bpic.net/free-photo/san-diego-dawn-early-morning-with-palm-tree-silhouette_649448-2514.jpg",              imageAlt: "Premium property location"
            },
            {
              id: "03",              title: "Investment Value",              description: "Properties selected for both lifestyle appeal and investment potential.",              imageSrc: "http://img.b2bpic.net/free-photo/savings-plans-housing-finance-banking-about-house-concep_1421-82.jpg",              imageAlt: "Real estate investment value"
            },
            {
              id: "04",              title: "Concierge Service",              description: "Personalized support throughout your entire purchasing journey.",              imageSrc: "http://img.b2bpic.net/free-photo/business-people-sitting-large-wooden-table-with-laptop_1262-761.jpg",              imageAlt: "Professional real estate service"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Schedule Consultation", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Team"
          description="Expert agents dedicated to finding your perfect luxury property."
          tag="Professional Team"
          tagIcon={Users}
          tagAnimation="slide-up"
          members={[
            {
              id: "1",              name: "Alexandra Sterling",              role: "Senior Luxury Advisor",              imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-holding-hand-pocket_23-2148095777.jpg",              imageAlt: "Alexandra Sterling, Senior Luxury Advisor"
            },
            {
              id: "2",              name: "Victoria Chen",              role: "International Specialist",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-woman-outdoor_23-2148317315.jpg",              imageAlt: "Victoria Chen, International Specialist"
            },
            {
              id: "3",              name: "Christopher North",              role: "Development Director",              imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-executive-using-smartphone-street_839833-9264.jpg",              imageAlt: "Christopher North, Development Director"
            },
            {
              id: "4",              name: "Sophia Delacroix",              role: "Luxury Portfolio Manager",              imageSrc: "http://img.b2bpic.net/free-photo/professional-businesswoman-with-plan_23-2147702119.jpg",              imageAlt: "Sophia Delacroix, Luxury Portfolio Manager"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Market Leadership"
          description="Proven track record in luxury real estate transactions."
          tag="By The Numbers"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          metrics={[
            { id: "1", icon: Home, title: "Properties Sold", value: "500+" },
            { id: "2", icon: DollarSign, title: "Total Sales Value", value: "$2.5B" },
            { id: "3", icon: Globe, title: "Global Locations", value: "25+" },
            { id: "4", icon: Users, title: "Satisfied Clients", value: "1,200+" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Client Testimonials"
          description="Hear from our satisfied clients about their luxury property experiences."
          tag="Client Stories"
          tagIcon={MessageCircle}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "James Richardson, CEO",              date: "Date: 15 October 2024",              title: "Exceptional Service and Attention to Detail",              quote: "Luxe Properties exceeded all our expectations. The team's expertise in luxury markets and dedication to finding the perfect property was remarkable. We now own an incredible penthouse that perfectly matches our vision.",              tag: "Premium Client",              avatarSrc: "http://img.b2bpic.net/free-photo/man-suit-outside-church-waving-welcoming-woman_181624-23201.jpg",              avatarAlt: "James Richardson",              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-friends-sitting-table-applauding_23-2147668908.jpg",              imageAlt: "Luxury home interior"
            },
            {
              id: "2",              name: "Catherine Moore, Entrepreneur",              date: "Date: 28 September 2024",              title: "Professional Excellence in Every Transaction",              quote: "From initial consultation through closing, every step was handled with professionalism and care. The team truly understood our requirements and delivered beyond expectations. Our new estate is everything we dreamed of.",              tag: "Trusted Partner",              avatarSrc: "http://img.b2bpic.net/free-photo/two-businesspeople-discussing-contract-office_23-2147923307.jpg",              avatarAlt: "Catherine Moore",              imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-working-from-home_23-2148415842.jpg",              imageAlt: "Luxury home office"
            },
            {
              id: "3",              name: "Marcus Wellington, Investor",              date: "Date: 12 August 2024",              title: "Unmatched Market Knowledge and Access",              quote: "As a repeat client, I continue to be impressed by their market insight and exclusive access to premium properties. They helped us secure a beachfront villa that appreciated significantly within the first year.",              tag: "Repeat Client",              avatarSrc: "http://img.b2bpic.net/free-photo/business-partners-worried-woman-table_1262-1692.jpg",              avatarAlt: "Marcus Wellington",              imageSrc: "http://img.b2bpic.net/free-photo/tidy-bathroom-with-shiny-tiles_1203-1501.jpg",              imageAlt: "Luxury spa bathroom"
            },
            {
              id: "4",              name: "Isabella Santos, Executive",              date: "Date: 5 July 2024",              title: "A Truly Luxury Experience",              quote: "The level of personalized attention we received was outstanding. Every detail mattered, and the team made navigating the international luxury market seamless. We're thrilled with our new residence.",              tag: "VIP Member",              avatarSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3861.jpg",              avatarAlt: "Isabella Santos",              imageSrc: "http://img.b2bpic.net/free-photo/life-style_1122-1851.jpg",              imageAlt: "Luxury dining entertainment"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Discover Your Dream Home?"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          title="Connect With Our Luxury Specialists"
          description="Let our expert team guide you through finding your perfect luxury property. Schedule a private consultation today and discover exclusive opportunities available only to our clientele."
          buttons={[
            { text: "Schedule Consultation", href: "contact" },
            { text: "Browse Properties", href: "properties" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Properties",              items: [
                { label: "All Listings", href: "#properties" },
                { label: "Featured", href: "#properties" },
                { label: "New Arrivals", href: "#properties" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#team" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Market Insights", href: "#metrics" },
                { label: "Investment Guide", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Luxe Properties. All rights reserved."
          bottomRightText="Exceptional Luxury Real Estate"
        />
      </div>
    </ThemeProvider>
  );
}