"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Facebook, Instagram, Linkedin, Phone, Sparkles, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="small"
      sizing="largeSmallSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="outline"
      secondaryButtonStyle="outline"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "Why Us", id: "why-invest" },
            { name: "Process", id: "process" },
            { name: "Locations", id: "locations" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "View Properties",
            href: "properties"
          }}
          brandName="LUXEPROP"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="LUXEPROP"
          description="Carefully curated luxury properties in prime locations with verified documentation. Trusted investment opportunities for discerning buyers seeking premium returns and lifestyle."
          buttons={[
            { text: "View Properties", href: "properties" },
            { text: "Schedule Viewing", href: "contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700135728-vf1ms5lb.jpg"
          imageAlt="Luxury penthouse with stunning city views"
          frameStyle="card"
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardTwo
          title="Featured Properties"
          description="Handpicked luxury properties carefully selected for investment potential and lifestyle appeal. Browse our exclusive listings or request a detailed analysis."
          tag="Premium Selection"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",
              brand: "Modern Vista",
              name: "Luxury Penthouse - Central District",
              price: "€2,450,000",
              rating: 5,
              reviewCount: "47",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700137400-2dw0yeac.jpg",
              imageAlt: "Modern villa with pool"
            },
            {
              id: "2",
              brand: "Elite Residences",
              name: "Contemporary Villa - Waterfront",
              price: "€1,850,000",
              rating: 5,
              reviewCount: "38",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700138245-bks6qvv2.jpg",
              imageAlt: "Luxury apartment interior"
            },
            {
              id: "3",
              brand: "Prime Downtown",
              name: "Investor's Choice - Downtown Loft",
              price: "€1,200,000",
              rating: 5,
              reviewCount: "52",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700139032-a8bw7gg3.jpg",
              imageAlt: "Penthouse with city skyline view"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="three-columns-all-equal-width"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardEight
          title="Our Proven Process"
          description="Streamlined from selection to ownership. Four straightforward steps designed for transparency, trust, and speed."
          tag="How It Works"
          textboxLayout="default"
          features={[
            {
              id: 1,
              title: "Choose Property",
              description: "Browse verified listings with detailed specs, certifications, and verified pricing. Use filters for location, type, and budget.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700140943-o468yh5w.jpg"
            },
            {
              id: 2,
              title: "Viewing & Due Diligence",
              description: "Schedule private viewings with our expert agents. Full legal documentation review and market valuation analysis included.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700141639-gypjm7gj.jpg"
            },
            {
              id: 3,
              title: "Secure Purchase",
              description: "Finalize contract with legal support from our partners. Transparent pricing with zero hidden fees guaranteed.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700142529-xfd4uad9.jpg"
            },
            {
              id: 4,
              title: "Keys & Handover",
              description: "Final inspection, completion of formalities, and keys in hand. Dedicated post-sale support for any questions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700143285-4eh55nt1.jpg"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="why-invest" data-section="why-invest">
        <AboutPhoneTimeline
          tag="Why Choose LUXEPROP"
          title="Trust Built on Transparency & Results"
          description="We handle every detail so you can invest with confidence. Verified listings, legal expertise, and dedicated support from start to finish."
          textboxLayout="default"
          phoneOne={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700137400-2dw0yeac.jpg"
          }}
          phoneTwo={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700138245-bks6qvv2.jpg"
          }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Request Full Details", href: "contact" },
            { text: "Get ROI Calculator", href: "contact" }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <TestimonialCardTen
          tag="Client Success Stories"
          title="Trusted by 1,500+ Buyers & Investors"
          description="Real results from real clients. See how our transparent process and expert guidance delivered exceptional outcomes."
          textboxLayout="default"
          testimonials={[
            {
              id: "1",
              title: "Closed in 14 Days",
              quote: "LUXEPROP made the entire process seamless. From viewing to keys in hand in just two weeks. Their legal team was invaluable.",
              name: "Marcus Johnson",
              role: "International Investor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700143942-ubhcmhkt.jpg"
            },
            {
              id: "2",
              title: "Outstanding ROI Results",
              quote: "Invested in their recommended portfolio. Already seeing 12% annual returns. The transparency and market expertise are unmatched.",
              name: "Elena Rodriguez",
              role: "Investment Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700144314-brygjewp.jpg"
            },
            {
              id: "3",
              title: "Smooth Family Relocation",
              quote: "Found our dream home through LUXEPROP. The entire team guided us through every step. Now our family is settled and happy.",
              name: "James & Catherine Wei",
              role: "Family Buyers",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700145211-x9bffnd5.jpg"
            },
            {
              id: "4",
              title: "Legal Security Assured",
              quote: "Their legal verification process gave me complete confidence. Every document was explained clearly. I felt 100% protected.",
              name: "Philippe Dubois",
              role: "Corporate Real Estate",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700145798-csuflxcv.jpg"
            },
            {
              id: "5",
              title: "Best Deal I Could Find",
              quote: "The property expert network connected me to unlisted opportunities. Negotiated 15% below market in less than a month.",
              name: "Amara Okonkwo",
              role: "Portfolio Developer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700146304-4dkaui7i.jpg"
            },
            {
              id: "6",
              title: "Professional & Personal Touch",
              quote: "Corporate assigned agent, but felt like family. They understood my investment strategy and found exactly what I needed.",
              name: "David Chen",
              role: "CEO Tech Startup",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767700148104-8863tgoz.jpg"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Proven Track Record of Success & Market Leadership"
          tag="By The Numbers"
          metrics={[
            {
              id: "1",
              value: "1,500+",
              description: "Satisfied buyers and investors who have found their ideal property through our network"
            },
            {
              id: "2",
              value: "14 Days",
              description: "Average closing time from viewing to keys—faster than market standard of 60+ days"
            },
            {
              id: "3",
              value: "€2.4B",
              description: "Total transaction volume managed with zero disputed legal cases in 8 years"
            },
            {
              id: "4",
              value: "12%",
              description: "Average annual ROI for investor portfolios selected through our expert curation"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started Today"
          title="Schedule Your Private Consultation"
          description="Book a viewing, request detailed information, or discuss your investment strategy with our expert advisors. No pressure, no spam."
          tagIcon={Sparkles}
          inputPlaceholder="your@email.com"
          buttonText="Schedule Viewing"
          termsText="We respect your privacy. Your contact info is secured and used only for property inquiries. You can opt out anytime."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="LUXEPROP"
          description="Premium real estate platform connecting discerning buyers with verified luxury properties and investment opportunities worldwide."
          columns={[
            {
              title: "Explore",
              items: [
                { label: "Featured Properties", href: "properties" },
                { label: "Investment Guides", href: "properties" },
                { label: "Market Insights", href: "why-invest" },
                { label: "Our Process", href: "process" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About LUXEPROP", href: "why-invest" },
                { label: "Our Team", href: "social-proof" },
                { label: "Contact Us", href: "contact" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Legal Disclaimer", href: "#" },
                { label: "Data Protection", href: "#" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "WhatsApp Support", href: "https://wa.me/1234567890" },
                { label: "Book Consultation", href: "contact" },
                { label: "Download Brochure", href: "#" },
                { label: "Newsletter", href: "contact" }
              ]
            }
          ]}
          copyrightText="© 2025 LUXEPROP. All rights reserved. Premium Real Estate Solutions."
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Phone, href: "tel:+1234567890", ariaLabel: "Phone" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}