"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardCarouselSplit from '@/components/sections/hero/HeroBillboardCarouselSplit';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { CheckCircle, Facebook, HelpCircle, Instagram, Linkedin, Mail, Quote, Star, TrendingUp, Twitter, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="noiseGradient"
      cardStyle="spotlight"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="LuxeProp"
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "About", id: "about" },
            { name: "How It Works", id: "howitworks" },
            { name: "Contact", id: "contact" },
            { name: "FAQ", id: "faq" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero" className="w-full min-h-screen flex items-center justify-center">
        <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
          <HeroBillboardCarouselSplit
            title="Find Your Dream Property in 14 Days—Legally Verified, Zero Hassle"
            mediaItems={[
              {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704138951-siri0kwa.jpg",
                imageAlt: "Luxury modern apartment interior"
              },
              {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704134924-wdmxpe16.jpg",
                imageAlt: "Contemporary villa exterior"
              },
              {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713943618-9avc0npf.jpg",
                imageAlt: "Penthouse with city views"
              },
              {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713943931-pttgnt7a.jpg",
                imageAlt: "Modern family home with garden"
              },
              {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713944252-m8yauy3n.jpg",
                imageAlt: "Premium office commercial space"
              }
            ]}
            buttons={[
              { text: "View Properties", href: "properties" },
              { text: "Book a Viewing", href: "contact" }
            ]}
            className="relative"
            titleClassName="text-4xl md:text-6xl font-bold tracking-tight"
          />
        </div>
      </div>

      <div id="properties" data-section="properties" className="w-full py-20 md:py-32">
        <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
          <ProductCardSix
            title="Featured Properties"
            description="Handpicked luxury listings in prime locations. Verified documentation, transparent pricing, investment-grade properties."
            tag="NEW LISTINGS ADDED THIS WEEK"
            products={[
              {
                id: "1",
                name: "Modern Downtown Penthouse",
                price: "€750,000",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713944580-t50bl2q8.jpg",
                imageAlt: "Luxury penthouse in downtown area"
              },
              {
                id: "2",
                name: "Beachfront Villa & Resort",
                price: "€1,200,000",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713945061-ghf2enkw.jpg",
                imageAlt: "Exclusive beachfront villa with ocean views"
              },
              {
                id: "3",
                name: "Suburban Family Estate",
                price: "€580,000",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713945515-m0fhkwxh.jpg",
                imageAlt: "Spacious suburban family home"
              },
              {
                id: "4",
                name: "Investment Apartment Block",
                price: "€2,100,000",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713944580-t50bl2q8.jpg",
                imageAlt: "Multi-unit investment property"
              }
            ]}
            gridVariant="two-columns-alternating-heights"
            textboxLayout="default"
            animationType="slide-up"
            useInvertedBackground="noInvert"
            textBoxTitleClassName="text-4xl md:text-5xl font-bold"
            cardNameClassName="text-2xl md:text-3xl font-semibold"
          />
        </div>
      </div>

      <div id="about" data-section="about" className="w-full py-20 md:py-32">
        <div className="w-full max-w-6xl mx-auto px-6 md:px-12">
          <TestimonialAboutCard
            tag="TRUSTED BY 1,500+ INVESTORS"
            title="Why Choose LuxeProp? Verified Listings. Legal Support. End-to-End Excellence."
            description="Michael Torres"
            subdescription="Real Estate Investor, Dubai"
            icon={CheckCircle}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713951443-hznr1vfy.jpg"
            imageAlt="Professional real estate team"
            useInvertedBackground="noInvert"
            tagIcon={Star}
            titleClassName="text-3xl md:text-4xl font-bold leading-tight"
            descriptionClassName="text-lg font-semibold"
            subdescriptionClassName="text-sm opacity-75"
          />
        </div>
      </div>

      <div id="howitworks" data-section="howitworks" className="w-full py-20 md:py-32">
        <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
          <FeatureCardTwelve
            title="Three Simple Steps to Your Dream Property"
            description="From selection to purchase—transparent, verified, legally secured."
            tag="PROCESS"
            tagIcon={Zap}
            features={[
              {
                id: "step1",
                label: "01",
                title: "Browse & Select Premium Properties",
                items: [
                  "Verified listings with full documentation",
                  "Advanced filters (location, price, type)",
                  "High-quality images and virtual tours",
                  "Transparent pricing—no hidden fees"
                ]
              },
              {
                id: "step2",
                label: "02",
                title: "Schedule Viewing & Due Diligence",
                items: [
                  "Private showings with property advisors",
                  "Legal compliance verification",
                  "Investment ROI analysis (if applicable)",
                  "Professional inspection support"
                ]
              },
              {
                id: "step3",
                label: "03",
                title: "Complete Purchase or Lease Agreement",
                items: [
                  "Secure transaction handling",
                  "Legal documentation assistance",
                  "Dedicated support throughout process",
                  "Post-purchase advisory services"
                ]
              }
            ]}
            animationType="opacity"
            textboxLayout="default"
            useInvertedBackground="noInvert"
            textBoxTitleClassName="text-3xl md:text-4xl font-bold"
            textBoxDescriptionClassName="text-lg opacity-90"
          />
        </div>
      </div>

      <div id="testimonials" data-section="testimonials" className="w-full py-20 md:py-32">
        <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
          <TestimonialCardThirteen
            title="What Our Clients Say"
            description="Real results from real investors, buyers, and families who trusted LuxeProp."
            tag="CLIENT TESTIMONIALS"
            tagIcon={Quote}
            testimonials={[
              {
                id: "1",
                name: "Sarah Johnson",
                handle: "Investor",
                testimonial: "Closed in 14 days with zero complications. The team handled all legalities—I just enjoyed my investment success.",
                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713946188-4zqnc679.jpg",
                imageAlt: "Sarah Johnson"
              },
              {
                id: "2",
                name: "Marcus Chen",
                handle: "Property Investor",
                testimonial: "12% ROI in the first year. Best decision I made. The transparency and support made it effortless.",
                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548564562-b1jeu7ji.jpg",
                imageAlt: "Marcus Chen"
              },
              {
                id: "3",
                name: "Elena Rodriguez",
                handle: "Family Buyer",
                testimonial: "Found our dream home in 3 weeks. The advisors were patient, knowledgeable, and genuinely cared about finding the perfect fit.",
                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767628982911-1s4yv6qh.jpg",
                imageAlt: "Elena Rodriguez"
              },
              {
                id: "4",
                name: "James Patel",
                handle: "Commercial Investor",
                testimonial: "Smooth process from start to finish. Legal support was comprehensive. Highly recommend for serious investors.",
                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713946511-9orni04w.jpg",
                imageAlt: "James Patel"
              },
              {
                id: "5",
                name: "Lisa Andersson",
                handle: "Relocation Client",
                testimonial: "Moving internationally was stressful until LuxeProp made it simple. Everything was handled professionally.",
                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713946781-8jky1wc4.jpg",
                imageAlt: "Lisa Andersson"
              },
              {
                id: "6",
                name: "David Kim",
                handle: "Portfolio Investor",
                testimonial: "Built my portfolio with 5 properties through LuxeProp. Each transaction was seamless and profitable.",
                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713947152-l80uph6l.jpg",
                imageAlt: "David Kim"
              }
            ]}
            showRating={true}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground="noInvert"
            textBoxTitleClassName="text-4xl md:text-5xl font-bold"
            textBoxDescriptionClassName="text-lg opacity-90"
          />
        </div>
      </div>

      <div id="metrics" data-section="metrics" className="w-full py-20 md:py-32">
        <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
          <MetricCardEleven
            title="Proven Track Record"
            description="Numbers that speak to our commitment to excellence and client satisfaction."
            tag="BY THE NUMBERS"
            tagIcon={TrendingUp}
            metrics={[
              {
                id: "1",
                value: "1,500+",
                title: "Satisfied Clients",
                description: "Investors, families, and businesses who trusted us",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713944580-t50bl2q8.jpg",
                imageAlt: "Happy clients at property"
              },
              {
                id: "2",
                value: "14 Days",
                title: "Average Deal Time",
                description: "From viewing to closing agreement completed",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713945061-ghf2enkw.jpg",
                imageAlt: "Fast transaction process"
              },
              {
                id: "3",
                value: "$2.4B+",
                title: "Total Transactions",
                description: "Value of properties successfully sold and leased",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713945515-m0fhkwxh.jpg",
                imageAlt: "Large transaction portfolio"
              },
              {
                id: "4",
                value: "45+",
                title: "Cities Worldwide",
                description: "Global coverage with local expertise in every market",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704143191-84klapap.jpg",
                imageAlt: "International coverage"
              }
            ]}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground="noInvert"
            textBoxTitleClassName="text-4xl md:text-5xl font-bold"
            valueClassName="text-5xl md:text-6xl font-bold"
          />
        </div>
      </div>

      <div id="faq" data-section="faq" className="w-full py-20 md:py-32">
        <div className="w-full max-w-4xl mx-auto px-6 md:px-12">
          <FaqBase
            title="Frequently Asked Questions"
            description="Everything you need to know about buying, investing, or renting through LuxeProp."
            tag="FAQ"
            tagIcon={HelpCircle}
            animationType="smooth"
            textboxLayout="default"
            useInvertedBackground="noInvert"
            faqs={[
              {
                id: "1",
                title: "Are all properties legally verified?",
                content: "Yes. Every listing undergoes comprehensive legal verification including title deeds, property ownership confirmation, and compliance checks. We guarantee zero legal complications. Our legal team reviews all documentation before listing."
              },
              {
                id: "2",
                title: "What is the typical timeline from viewing to purchase?",
                content: "Our average deal time is 14 days. This includes property viewing, due diligence, legal documentation, and final agreement. For complex investments, timelines may extend based on client needs. We never rush critical decisions."
              },
              {
                id: "3",
                title: "Are there hidden fees?",
                content: "Absolutely not. We believe in transparent pricing. All costs—agent commission, legal fees, administrative charges—are clearly disclosed upfront. You'll know exactly what you're paying before committing."
              },
              {
                id: "4",
                title: "Do you provide ROI analysis for investment properties?",
                content: "Yes. Our investment advisors provide detailed ROI projections, rental yield calculations, and market analysis for investor clients. We help you make data-driven decisions backed by market research."
              },
              {
                id: "5",
                title: "What support is available after purchase?",
                content: "Post-purchase support includes property management referrals, maintenance coordination, tax advisory connections, and ongoing market updates. Your success is our success."
              },
              {
                id: "6",
                title: "Can I schedule a virtual tour?",
                content: "Absolutely. All properties include high-quality image galleries and 360° virtual tours. For serious buyers, we arrange professional video tours and live video consultations with property advisors."
              }
            ]}
            textBoxTitleClassName="text-4xl md:text-5xl font-bold"
            textBoxDescriptionClassName="text-lg opacity-90"
          />
        </div>
      </div>

      <div id="contact" data-section="contact" className="w-full py-20 md:py-32">
        <div className="w-full max-w-2xl mx-auto px-6 md:px-12">
          <ContactCenterForm
            title="Schedule Your Private Viewing Today"
            description="Tell us about your ideal property. Our advisors will match you with curated listings and arrange exclusive viewings. Dedicated support from inquiry to closing."
            useInvertedBackground="noInvert"
            inputs={[
              { name: "name", type: "text", placeholder: "Your full name", required: true },
              { name: "email", type: "email", placeholder: "Email address", required: true },
              { name: "phone", type: "tel", placeholder: "Phone number", required: true },
              { name: "propertyType", type: "text", placeholder: "Property type (Apartment, Villa, Commercial, etc.)", required: false },
              { name: "priceRange", type: "text", placeholder: "Budget range (e.g., €500K - €1M)", required: false }
            ]}
            textarea={{
              name: "message",
              placeholder: "Tell us about your ideal property, investment goals, or any special requirements. We'll find the perfect match.",
              rows: 4,
              required: false
            }}
            buttonText="Request Viewing & Details"
            titleClassName="text-4xl md:text-5xl font-bold"
            descriptionClassName="text-lg opacity-90"
          />
        </div>
      </div>

      <div id="footer" data-section="footer" className="w-full">
        <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
          <FooterBaseSocial
            logoText="LuxeProp"
            description="Premium real estate platform connecting discerning buyers, investors, and families with verified luxury properties worldwide. Transparent. Secure. Proven."
            copyrightText="© 2025 LuxeProp. All rights reserved."
            columns={[
              {
                title: "Properties",
                items: [
                  { label: "View All Listings", href: "properties" },
                  { label: "Buy", href: "properties" },
                  { label: "Rent", href: "properties" },
                  { label: "Investment Properties", href: "properties" }
                ]
              },
              {
                title: "Company",
                items: [
                  { label: "About LuxeProp", href: "about" },
                  { label: "How It Works", href: "howitworks" },
                  { label: "Our Team", href: "about" },
                  { label: "Careers", href: "#" }
                ]
              },
              {
                title: "Support",
                items: [
                  { label: "FAQ", href: "faq" },
                  { label: "Contact Us", href: "contact" },
                  { label: "Schedule Viewing", href: "contact" },
                  { label: "Legal Documentation", href: "#" }
                ]
              },
              {
                title: "Legal",
                items: [
                  { label: "Privacy Policy", href: "#" },
                  { label: "Terms of Service", href: "#" },
                  { label: "Cookie Policy", href: "#" },
                  { label: "Compliance", href: "#" }
                ]
              }
            ]}
            socialLinks={[
              { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
              { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
              { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
              { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
              { icon: Mail, href: "mailto:info@luxeprop.com", ariaLabel: "Email" }
            ]}
            logoWidth={140}
            logoHeight={45}
            descriptionClassName="text-sm opacity-85 leading-relaxed"
            columnTitleClassName="text-sm font-semibold tracking-wide"
          />
        </div>
      </div>
    </ThemeProvider>
  );
}