"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Home, Zap, Star, Heart, Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="PropertyHub"
          navItems={[
            { name: "Browse", id: "properties" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Find Your Dream Property Today"
          description="Discover the perfect home from thousands of verified listings. Expert agents, transparent pricing, and seamless transactions."
          tag="Premier Real Estate"
          tagIcon={Home}
          buttons={[
            { text: "Browse Properties", href: "#properties" },
            { text: "Schedule Tour", href: "#contact" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg",              imageAlt: "Luxury modern home"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-photo/swimming-pool-beach-luxury-hotel-type-entertainment-complex-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer-turkey_146671-18719.jpg",              imageAlt: "Contemporary apartment"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/happy-successful-business-team-members-posing-office_1262-20245.jpg",              imageAlt: "Suburban family home"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/happy-caucasian-woman-short-summer-dress-outside-villa-hotel-by-tree-blue-swimming-pool_343596-691.jpg",              imageAlt: "Luxury penthouse"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Beachfront villa"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg",              imageAlt: "Urban townhouse"
            }
          ]}
          background={{ variant: "plain" }}
          autoPlay={true}
          autoPlayInterval={5000}
        />
      </div>

      <div id="search-filters" data-section="search-filters">
        <FeatureCardSeven
          title="Advanced Search & Filters"
          description="Use our powerful search tools to narrow down properties by location, price, size, and more. Find exactly what you're looking for."
          tag="Smart Search"
          tagIcon={Zap}
          features={[
            {
              id: 1,
              title: "Location-Based Search",              description: "Filter properties by neighborhood, city, or radius from a specific point. Explore different areas with our interactive map.",              imageSrc: "https://img.b2bpic.net/free-vector/house-searching-landing-page-concept_23-2148319532.jpg"
            },
            {
              id: 2,
              title: "Advanced Filters",              description: "Customize your search by bedrooms, bathrooms, price range, property type, and more amenities.",              imageSrc: "https://img.b2bpic.net/free-vector/real-estate-background-design_1212-415.jpg"
            },
            {
              id: 3,
              title: "Map Integration",              description: "View properties directly on our interactive map. See neighborhoods, transit, schools, and nearby amenities.",              imageSrc: "https://img.b2bpic.net/free-vector/real-estate-searching-illustrated_23-2148659626.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Start Searching", href: "#properties" }
          ]}
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardThree
          title="Featured Property Listings"
          description="Browse our latest premium properties. Each listing includes detailed information, professional photos, and immediate inquiry options."
          tag="Available Now"
          tagIcon={Star}
          products={[
            {
              id: "1",              name: "Modern Downtown Loft - $450,000",              price: "$450K",              imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571921.jpg",              imageAlt: "Modern downtown loft",              initialQuantity: 1,
              priceButtonProps: { className: "w-full" }
            },
            {
              id: "2",              name: "Luxury Waterfront Penthouse - $1,200,000",              price: "$1.2M",              imageSrc: "https://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg",              imageAlt: "Luxury waterfront penthouse",              initialQuantity: 1,
              priceButtonProps: { className: "w-full" }
            },
            {
              id: "3",              name: "Suburban Family Home - $580,000",              price: "$580K",              imageSrc: "https://img.b2bpic.net/free-photo/happy-caucasian-woman-short-summer-dress-outside-villa-hotel-by-tree-blue-swimming-pool_343596-695.jpg",              imageAlt: "Suburban family home",              initialQuantity: 1,
              priceButtonProps: { className: "w-full" }
            },
            {
              id: "4",              name: "Contemporary City Condo - $750,000",              price: "$750K",              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-resort_1150-17976.jpg",              imageAlt: "Contemporary city condo",              initialQuantity: 1,
              priceButtonProps: { className: "w-full" }
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Listings", href: "#" }
          ]}
        />
      </div>

      <div id="map-integration" data-section="map-integration">
        <MetricCardTen
          title="Interactive Map View"
          description="Explore properties on our interactive map. Zoom in to see neighborhoods, nearby schools, transit stations, and amenities."
          tag="Coming Soon"
          metrics={[
            {
              id: "1",              title: "Downtown District",              subtitle: "124 properties available",              category: "Urban",              value: "Avg. $520K",              buttons: [
                { text: "View on Map", href: "#" }
              ]
            },
            {
              id: "2",              title: "Suburban Neighborhoods",              subtitle: "89 properties available",              category: "Residential",              value: "Avg. $420K",              buttons: [
                { text: "View on Map", href: "#" }
              ]
            },
            {
              id: "3",              title: "Waterfront Area",              subtitle: "45 luxury properties",              category: "Premium",              value: "Avg. $950K",              buttons: [
                { text: "View on Map", href: "#" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Why Choose PropertyHub for Your Real Estate Needs" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn Our Story", href: "#" },
            { text: "Meet Our Agents", href: "#" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="What Sets Us Apart"
          description="We combine cutting-edge technology with expert knowledge to help you find the perfect property."
          features={[
            {
              id: 1,
              title: "Expert Agent Network",              description: "Our team of certified, experienced agents knows every neighborhood and can guide you through every step of your journey.",              imageSrc: "https://img.b2bpic.net/free-vector/house-searching-concept-landing-page_23-2148329982.jpg"
            },
            {
              id: 2,
              title: "24/7 Customer Support",              description: "Questions about a property? Need to schedule a tour? Our dedicated support team is always available to help.",              imageSrc: "https://img.b2bpic.net/free-vector/real-estate-searching_23-2148686372.jpg"
            },
            {
              id: 3,
              title: "Transparent Pricing",              description: "No hidden fees. We believe in complete transparency so you know exactly what you're paying for.",              imageSrc: "https://img.b2bpic.net/free-vector/searching-house-background_1133-239.jpg"
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Happy Homeowners Share Their Experience"
          description="Real stories from real clients who found their dream homes with PropertyHub."
          tag="Client Stories"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "First-Time Homebuyer",              company: "Tech Industry Professional",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg"
            },
            {
              id: "2",              name: "Michael Johnson",              role: "Investment Portfolio Manager",              company: "Real Estate Investor",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg"
            },
            {
              id: "3",              name: "Jennifer Lopez",              role: "Interior Designer",              company: "Design Studio Owner",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg"
            },
            {
              id: "4",              name: "David Chen",              role: "Executive Director",              company: "Corporate Executive",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-ethnic-executive-woman-looking-camera_1098-20037.jpg"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactFaq
          ctaTitle="Ready to Find Your Perfect Home?"
          ctaDescription="Schedule a personalized consultation with one of our expert agents to explore properties that match your vision and budget."
          ctaButton={{
            text: "Schedule Free Consultation",            href: "#contact"
          }}
          ctaIcon={Phone}
          faqs={[
            {
              id: "1",              title: "How long does the home buying process typically take?",              content: "On average, the home buying process takes 30-45 days from offer acceptance to closing. This can vary based on financing, inspections, and appraisals."
            },
            {
              id: "2",              title: "What should I prepare before viewing a property?",              content: "Get pre-approved for a mortgage, prepare a list of must-haves vs. nice-to-haves, and plan to visit properties at different times of day to see how light and traffic flow changes."
            },
            {
              id: "3",              title: "Do you charge commission fees?",              content: "Our agents work on commission paid by the seller's side of the transaction. There are no fees charged to buyers when you work with PropertyHub."
            },
            {
              id: "4",              title: "Can I view properties virtually?",              content: "Yes! We offer 3D virtual tours, video walkthroughs, and video conferencing tours for interested buyers who cannot visit in person."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Explore",              items: [
                { label: "Browse Listings", href: "#properties" },
                { label: "Search Properties", href: "#search-filters" },
                { label: "View Map", href: "#map-integration" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Agents", href: "#" },
                { label: "Testimonials", href: "#testimonials" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "#cta" },
                { label: "FAQ", href: "#cta" },
                { label: "Schedule Tour", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Buying Guide", href: "#" },
                { label: "Market Trends", href: "#" },
                { label: "Blog", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 PropertyHub. All rights reserved."
          bottomRightText="Connecting buyers with their dream homes"
        />
      </div>
    </ThemeProvider>
  );
}