"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="grid"
        cardStyle="glass-depth"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "about" },
        { name: "Properties", id: "properties" },
        { name: "Contact", id: "contact" },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DXy8yrvjnxPhDkl0lrG4JRwPo3/uploaded-1778446079029-gwdmqa3e.jpg"
      brandName="Bright View"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="BrightVeiw Real Estate "
      description="Discover premium properties in world-class locations. Bright View connects discerning investors with exceptional opportunities that combine prestige, growth, and lifestyle excellence."
      testimonials={[
        { name: "James Anderson", handle: "@janderson", testimonial: "Bright View's expertise in luxury real estate is unmatched.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DXy8yrvjnxPhDkl0lrG4JRwPo3/iconic-view-of-burj-khalifa-in-dubai-at--1778446101474-0c0c55f9.png?_wi=1" },
        { name: "Elena Rodriguez", handle: "@erodriguez", testimonial: "The portfolio provided was exactly what I was looking for.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DXy8yrvjnxPhDkl0lrG4JRwPo3/uploaded-1778446079029-gwdmqa3e.jpg" },
        { name: "Marcus Thorne", handle: "@mthorne", testimonial: "Professional, transparent, and absolutely high-end results.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DXy8yrvjnxPhDkl0lrG4JRwPo3/luxury-modern-interior-living-room-in-a--1778446111043-449abad5.png?_wi=1" },
      ]}
      buttons={[
        { text: "Explore Properties", href: "#properties" },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DXy8yrvjnxPhDkl0lrG4JRwPo3/uploaded-1778447371471-ey92r1wm.jpg"
      showBlur={true}
      textPosition="bottom"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Defining Excellence in Global Luxury Real Estate"
      buttons={[
        { text: "Contact Us", href: "#contact" },
      ]}
    />
  </div>

  <div id="properties" data-section="properties">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        { id: "1", name: "Skyline Penthouse", price: "$8.5M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DXy8yrvjnxPhDkl0lrG4JRwPo3/luxury-modern-interior-living-room-in-a--1778446111043-449abad5.png?_wi=2" },
        { id: "2", name: "Coastal Villa Estate", price: "$12.0M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DXy8yrvjnxPhDkl0lrG4JRwPo3/luxury-marble-bathroom-in-a-high-end-man-1778446120861-578eaa11.png?_wi=2" },
        { id: "3", name: "Modern Urban Mansion", price: "$6.2M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DXy8yrvjnxPhDkl0lrG4JRwPo3/ultra-luxury-modern-kitchen-in-a-villa-m-1778446131050-16452c77.png?_wi=2" },
      ]}
      title="Curated Luxury Portfolio"
      description="Exceptional homes for the discerning investor."
      buttons={[
        { text: "View Full Portfolio", href: "/inventory" },
        { text: "Explore", href: "#properties" }
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="depth-3d"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        { id: "1", value: "$500M+", title: "Portfolio Managed", items: ["Commercial", "Residential"] },
        { id: "2", value: "150+", title: "Closed Deals", items: ["Premium", "Global"] },
        { id: "3", value: "20+", title: "Countries", items: ["Operations", "Reach"] },
      ]}
      title="Market Authority"
      description="Evidence-backed excellence in every transaction."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        { id: "1", title: "How do I get started?", content: "Our team schedules a discovery call." },
        { id: "2", title: "What markets are covered?", content: "We cover premium markets globally." },
      ]}
      title="Common Questions"
      description="Transparency is our foundation."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={["Global Invest", "Premier Build", "Luxury Group", "Elite Finance"]}
      title="Trusted Partners"
      description="Collaborating with elite industry leaders."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "gradient-bars" }}
      tag="Inquire"
      title="Begin Your Journey"
      description="Reach out for exclusive investment opportunities."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Bright View"
      copyrightText="© 2025 Bright View Real Estate | All Rights Reserved"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}