"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Building2, MapPin, Mail, Phone, Shield, Sparkles, Star, TrendingUp, Users, Eye, Clock } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="noise"
      cardStyle="elevated-accent"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="LuxeProperties"
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "Why Us", id: "why-us" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Viewing",            href: "contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Modern Living in Prime Locations"
          description="Carefully selected premium properties with verified documentation. Trusted by 1,500+ buyers and investors across luxury real estate markets."
          tag="NEW LISTINGS ADDED THIS WEEK"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780533568-ur6ypsq1.jpg"
          imageAlt="Luxury modern apartment with panoramic city views"
          frameStyle="card"
          buttons={[
            { text: "View Properties", href: "properties" },
            { text: "Book a Viewing", href: "contact" }
          ]}
        />
      </div>
      
      <div id="properties" data-section="properties">
        <ProductCardFour
          title="Featured Properties"
          description="Handpicked luxury properties with premium amenities and investment potential"
          tag="LIMITED AVAILABILITY"
          tagIcon={Clock}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          buttons={[
            { text: "View All Properties", href: "properties" }
          ]}
          products={[
            {
              id: "villa-001",              name: "Beachfront Villa Estate",              price: "€2,500,000",              variant: "4 Bed · 3 Bath · 450m²",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780534698-jltgws2g.jpg",              imageAlt: "Luxury beachfront villa with infinity pool",              onProductClick: () => window.open('/property/villa-001', '_blank')
            },
            {
              id: "apt-002",              name: "Downtown Luxury Penthouse",              price: "€1,800,000",              variant: "3 Bed · 2.5 Bath · 320m²",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780537204-75l4uwot.jpg",              imageAlt: "Modern penthouse with city skyline views",              onProductClick: () => window.open('/property/apt-002', '_blank')
            },
            {
              id: "apt-003",              name: "Urban Center Apartment",              price: "€950,000",              variant: "2 Bed · 2 Bath · 180m²",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780535952-81f5g3d6.jpg",              imageAlt: "Contemporary urban apartment in prime location",              onProductClick: () => window.open('/property/apt-003', '_blank')
            },
            {
              id: "villa-004",              name: "Hillside Contemporary Villa",              price: "€1,950,000",              variant: "4 Bed · 3 Bath · 420m²",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780539291-zee4kc9e.jpg",              imageAlt: "Modern villa with panoramic views",              onProductClick: () => window.open('/property/villa-004', '_blank')
            },
            {
              id: "commercial-005",              name: "Premium Office Suite",              price: "€1,200,000",              variant: "2 Floor · 550m² · Lease or Own",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780538201-7g3vfb2i.jpg",              imageAlt: "Professional office space in business district",              onProductClick: () => window.open('/property/commercial-005', '_blank')
            },
            {
              id: "apt-006",              name: "Riverside Luxury Apartment",              price: "€1,350,000",              variant: "3 Bed · 2 Bath · 280m²",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780535952-81f5g3d6.jpg",              imageAlt: "Modern riverside apartment with contemporary design",              onProductClick: () => window.open('/property/apt-006', '_blank')
            }
          ]}
          actionButtonClassName="bg-primary/90 hover:bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm font-medium transition-colors backdrop-blur-sm border border-primary/20"
        />
      </div>
      
      <div id="why-us" data-section="why-us">
        <FeatureCardEighteen
          title="Why Choose Our Properties"
          description="Our vetted portfolio delivers verified investments with comprehensive support at every stage"
          tag="OUR ADVANTAGE"
          tagIcon={Shield}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          negativeCard={{
            title: "Without Dedicated Support",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780540324-89ytqced.jpg",            imageAlt: "Standard market property process",            items: [
              "Uncertain documentation and legal status",              "Limited transparency on property condition",              "No dedicated advisor guidance",              "Lengthy closing timeline (6-9 months)",              "Hidden fees and surprise costs",              "Unclear investment ROI potential"
            ]
          }}
          positiveCard={{
            title: "With Our Premium Service",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780541147-72ska1ka.jpg",            imageAlt: "Our streamlined property process",            items: [
              "100% verified legal documentation",              "Professional property inspections included",              "Dedicated property advisor assigned",              "Express closing in just 30-60 days",              "Transparent pricing with no surprises",              "Clear ROI projections and market analysis"
            ]
          }}
        />      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Track Record"
          description="Proven results across premium real estate markets with investor satisfaction as our priority"
          tag="RESULTS DRIVEN"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="invertCard"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "1,500+",              title: "Happy Buyers",              description: "Satisfied clients across 8 countries",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780533568-ur6ypsq1.jpg",              imageAlt: "Successful buyer testimonials"
            },
            {
              id: "2",              value: "€850M+",              title: "Portfolio Value",              description: "Total investments successfully matched",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780534698-jltgws2g.jpg",              imageAlt: "Premium property portfolio"
            },
            {
              id: "3",              value: "45 Days",              title: "Average Close Time",              description: "Fastest in-market transaction timeline",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780537204-75l4uwot.jpg",              imageAlt: "Fast closing process illustration"
            },
            {
              id: "4",              value: "8+%",              title: "Average Annual Return",              description: "For qualifying rental and investment properties",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780539291-zee4kc9e.jpg",              imageAlt: "Investment property returns"
            }
          ]}
        />
      </div>
      
      <div id="team" data-section="team">
        <TeamCardSix
          title="Meet Your Property Advisors"
          description="Dedicated experts committed to finding your perfect property match"
          tag="EXPERT TEAM"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          members={[
            {
              id: "1",              name: "Michael Richardson",              role: "Senior Property Advisor",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780648962-i5hr5022.jpg",              imageAlt: "Michael Richardson"
            },
            {
              id: "2",              name: "Sarah Mitchell",              role: "Investment Specialist",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780650694-xgs5o0p4.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "3",              name: "David Chen",              role: "Legal Compliance Officer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780652025-0l2nlsrj.jpg",              imageAlt: "David Chen"
            },
            {
              id: "4",              name: "Emma Thompson",              role: "Client Relations Manager",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780653338-nuk3pc0t.jpg",              imageAlt: "Emma Thompson"
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven
          title="Client Success Stories"
          description="Hear from investors and buyers who achieved their real estate goals with us"
          tag="PROVEN RESULTS"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              nameTitle: "James Peterson, CEO - Tech Investor",              quote: "Closed in 28 days with zero complications. The team handled every detail professionally. Already seeing excellent ROI on my investment.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780654454-9ccgbt30.jpg",              imageAlt: "James Peterson"
            },
            {
              id: "2",              nameTitle: "Emma Rossi, Family Relocating",              quote: "The process was transparent and easy. Our dedicated advisor understood exactly what we needed. We found our dream home in just 2 weeks.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780542539-1w5rj1gp.jpg",              imageAlt: "Emma Rossi"
            },
            {
              id: "3",              nameTitle: "Thomas Mueller, Real Estate Investor",              quote: "The best ROI I've seen in 15 years of investing. Legal verification was thorough, closing was smooth. Highly recommend.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780656252-xtl3ty4i.jpg",              imageAlt: "Thomas Mueller"
            },
            {
              id: "4",              nameTitle: "Sophia Chen, Executive Buyer",              quote: "Professional, efficient, and results-driven. They found me the perfect luxury penthouse in my preferred location within 3 weeks.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780657533-1iew32yt.jpg",              imageAlt: "Sophia Chen"
            },
            {
              id: "5",              nameTitle: "Marco Rossi, Family Investor",              quote: "Our family's transition to the new property was completely stress-free. The team's attention to detail was exceptional.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780658895-8qxw43uo.jpg",              imageAlt: "Marco Rossi"
            },
            {
              id: "6",              nameTitle: "Lisa Wagner, Portfolio Manager",              quote: "Excellent documentation and market insights. This is my go-to partner for premium property acquisitions.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780660259-2ebmgprl.jpg",              imageAlt: "Lisa Wagner"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="INTERESTED?"
          title="Request Your Property Details"
          description="Fill in your preferences and we'll send you a curated list of properties matching your investment criteria within 24 hours."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780537204-75l4uwot.jpg"
          imageAlt="Luxury lifestyle and property investment"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Get Details"
          termsText="No spam. Your data is protected and never shared. We respect your privacy."
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="LuxeProperties"
          title="Premium Real Estate Investments with Verified Legal Protection"
          columns={[
            {
              title: "Properties",              items: [
                { label: "View Listings", href: "properties" },
                { label: "Investment Guide", href: "#" },
                { label: "Market Reports", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Our Team", href: "team" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "FAQ", href: "#" },
                { label: "Privacy Policy", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Terms & Conditions", href: "#" },
                { label: "Verification Standards", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            }
          ]}
          contactItems={[
            { icon: Phone, text: "+1 (914) 820-5734" },
            { icon: Mail, text: "advisors@luxeproperties.com" },
            { icon: MapPin, text: "Multiple offices across 8 countries" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}