"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import SplitAboutCards from '@/components/sections/about/SplitAboutCards';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { AlertCircle, TrendingUp, Users, Clock, Star, Package } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="large"
      background="animatedGrid"
      cardStyle="gradient-mesh"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="LuxeEstate"
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "Why Us", id: "why-invest" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Viewing",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero" className="relative min-h-screen flex items-center justify-center">
        <HeroBillboardRotatedCarousel
          title="Premium Properties in Prime Locations"
          description="Carefully selected luxury residences with verified documentation. Smart real estate investments backed by legal certainty and transparent pricing."
          tag="Only 3 Units Left"
          tagIcon={AlertCircle}
          buttons={[
            { text: "View Properties", href: "properties" },
            { text: "Get Details", href: "contact" }
          ]}
          carouselItems={[
            {
              id: "carousel-1",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717779085-50vqh5db.jpg",              imageAlt: "Modern luxury apartment living room"
            },
            {
              id: "carousel-2",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717788118-n2pwtw3g.jpg",              imageAlt: "Contemporary villa exterior with landscaping"
            },
            {
              id: "carousel-3",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717789967-65mmi17p.jpg",              imageAlt: "Premium penthouse with city view"
            },
            {
              id: "carousel-4",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717792878-teh4xlyn.jpg",              imageAlt: "Luxury kitchen and dining area"
            },
            {
              id: "carousel-5",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717795700-db580lpa.jpg",              imageAlt: "Modern residential building facade"
            },
            {
              id: "carousel-6",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717799831-74bn25y0.jpg",              imageAlt: "Apartment balcony with skyline view"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={5000}
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardFive
          title="Featured Properties Available Now"
          description="Discover our handpicked selection of premium residential and investment properties. Each listing is verified and ready for immediate viewing."
          tag="Investment Opportunities"
          tagIcon={TrendingUp}
          buttons={[
            { text: "View All", href: "contact" }
          ]}
          textboxLayout="default"
          products={[
            {
              id: "prop-1",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717801488-r4xnhpss.jpg",              imageAlt: "Luxury 3-bedroom townhouse",              button: { text: "€425,000 - View Details" }
            },
            {
              id: "prop-2",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717804432-h8z2sdau.jpg",              imageAlt: "Modern 4-bedroom villa with garden",              button: { text: "€575,000 - Schedule Viewing" }
            },
            {
              id: "prop-3",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717806587-fe8lvzak.jpg",              imageAlt: "Premium 2-bedroom apartment",              button: { text: "€325,000 - Request Info" }
            },
            {
              id: "prop-4",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717808918-pqg0utgz.jpg",              imageAlt: "Exclusive penthouse with terrace",              button: { text: "€750,000 - Book Tour" }
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="why-invest" data-section="why-invest">
        <FeatureCardTwelve
          title="Why Invest With LuxeEstate"
          description="We combine premium properties with unmatched expertise and transparent processes. Every investment is protected by verified documentation and dedicated support."
          textboxLayout="default"
          features={[
            {
              id: "feature-1",              label: "Verified",              title: "All Properties Legally Verified",              items: [
                "Complete title documentation",                "Legal compliance certification",                "Transparent ownership records",                "Risk-free verification process"
              ]
            },
            {
              id: "feature-2",              label: "Support",              title: "End-to-End Transaction Support",              items: [
                "Dedicated property advisor",                "Legal representation included",                "Financing assistance",                "Post-purchase support"
              ]
            }
          ]}
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          title="Trusted by Investors Worldwide"
          description="Our track record speaks for itself. Real numbers backing real results."
          textboxLayout="default"
          metrics={[
            {
              id: "metric-1",              value: "1,500+",              tag: "Buyers",              tagIcon: Users,
              title: "Satisfied Clients Across 12 Countries"
            },
            {
              id: "metric-2",              value: "€850M+",              tag: "Volume",              tagIcon: TrendingUp,
              title: "Total Transaction Value"
            },
            {
              id: "metric-3",              value: "14 Days",              tag: "Average",              tagIcon: Clock,
              title: "Average Deal Closure Time"
            },
            {
              id: "metric-4",              value: "98%",              tag: "Satisfaction",              tagIcon: Star,
              title: "Client Satisfaction Rating"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Trusted by Industry Leaders"
          description="Real investors sharing their success stories. See why clients choose LuxeEstate."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "testi-1",              title: "Seamless Investment Experience",              quote: "The entire process from viewing to closing was handled professionally. My property advisor was exceptional—answered every question and expedited everything. Closed in just 12 days.",              name: "Sarah Mitchell",              role: "International Investor",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717813471-6tvo56uc.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "testi-2",              title: "Investment with Confidence",              quote: "As a first-time buyer in the market, I appreciated the transparent pricing and legal support. No hidden fees, no surprises. This is how real estate should work.",              name: "Michael Chen",              role: "Portfolio Investor",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716855990-2d90w2l5.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "testi-3",              title: "Family Relocation Made Easy",              quote: "We were relocating from abroad and needed a smooth transition. LuxeEstate handled everything—from property selection to final signing. Highly recommended.",              name: "Emma Rodriguez",              role: "Family Buyer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717815042-u3wfxvra.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "testi-4",              title: "Exceptional ROI Performance",              quote: "Invested in three properties over two years. All exceeded projected ROI. The market analysis and property selection here are unmatched. Best financial decision I made.",              name: "David Kim",              role: "Real Estate Investor",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711802548-atxknmjb.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SplitAboutCards
          title="Trusted Partner Network"
          description="We collaborate with leading financial institutions, developers, and legal experts to ensure every transaction is secure and transparent."
          useInvertedBackground="noInvert"
          features={[
            {
              id: "partner-1",              title: "Global Banking Partners",              description: "Connected with 50+ international banks offering competitive financing solutions and secure payment processing.",              label: "7+ Partners"
            },
            {
              id: "partner-2",              title: "Legal & Compliance Certified",              description: "Licensed legal experts and compliance certifications ensuring every property meets international standards and local regulations.",              label: "100% Verified"
            }
          ]}
          buttons={[
            { text: "Learn More", href: "contact" }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Common Questions"
          sideDescription="Everything you need to know about buying, investing, and renting properties with LuxeEstate."
          textPosition="left"
          useInvertedBackground="invertDefault"
          faqs={[
            {
              id: "faq-1",              title: "What makes LuxeEstate properties different?",              content: "Every property is handpicked for location, quality, and investment potential. We verify all documentation, ensure legal compliance, and provide transparent pricing with no hidden fees. Our properties are selected specifically for high ROI potential and market stability."
            },
            {
              id: "faq-2",              title: "How long does the buying process typically take?",              content: "Our average transaction time is 14 days from viewing to closure. This includes legal verification, financing coordination, and all documentation. We streamline every step to ensure fast, secure transactions without compromising on due diligence."
            },
            {
              id: "faq-3",              title: "Are financing options available?",              content: "Yes. We work with leading international banks to offer competitive mortgage rates and flexible payment plans. Our team can assist with financing pre-approval and help structure the best option for your investment profile."
            },
            {
              id: "faq-4",              title: "What legal protections are included?",              content: "Full legal representation is included in our service. We conduct complete title verification, ensure compliance with local regulations, and handle all documentation. Every transaction is protected by escrow and legal review."
            },
            {
              id: "faq-5",              title: "Can I rent out properties immediately after purchase?",              content: "Yes. All our properties are rental-ready. We provide rental management support, tenant screening, and lease agreement templates. Our advisors can guide you through the rental process and market analysis for your specific property."
            },
            {
              id: "faq-6",              title: "What about post-purchase support?",              content: "We offer ongoing support including property management coordination, maintenance referrals, tax documentation assistance, and resale consultation. Your dedicated advisor remains available for all your real estate needs."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Ready to Invest? Get Started Today"
          description="Schedule a private consultation with a property advisor. No spam. Your information is protected."
          useInvertedBackground="noInvert"
          inputs={[
            {
              name: "fullName",              type: "text",              placeholder: "Your Full Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email Address",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "Phone Number",              required: true
            },
            {
              name: "propertyType",              type: "text",              placeholder: "Property Type (Apartment, Villa, Investment)",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your investment goals and preferences...",            rows: 5,
            required: false
          }}
          buttonText="Schedule Free Consultation"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="LuxeEstate"
          copyrightText="© 2025 LuxeEstate. Premium Real Estate Investments. All rights reserved."
          columns={[
            {
              title: "Properties",              items: [
                { label: "Featured Listings", href: "#properties" },
                { label: "Investment Properties", href: "#properties" },
                { label: "Rentals", href: "#properties" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About LuxeEstate", href: "#why-invest" },
                { label: "Our Process", href: "#why-invest" },
                { label: "Testimonials", href: "#testimonials" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Contact Us", href: "#contact" },
                { label: "Book a Viewing", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Legal Verification", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}