"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeLargeTitles"
        background="none"
        cardStyle="subtle-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Commitment",
          id: "#commitment",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="KLEOS RIVIERA"
    />
  </div>

  <div id="home" data-section="home">
      <HeroOverlay
      title="Experience Unrivaled Luxury on the French Riviera"
      description="KLEOS RIVIERA ensures seamless property management, offering discreet and exceptional service in your absence."
      buttons={[
        {
          text: "Discover Our Services",
          href: "#services",
        },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EywH5PBKHbu5cPOXnOBmQcvjjT/uploaded-1781176974868-lon18sid.jpg"
      imageAlt="Luxury villa overlooking the French Riviera"
      showDimOverlay={true}
      showBlur={true}
      textPosition="bottom"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-man-with-keys-just-bought-new-appartment_1303-28896.jpg",
          alt: "Happy client 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/airbnb-host-welcoming-guests_23-2149872045.jpg",
          alt: "Happy client 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiley-embraced-couple-conversing-with-female-realtor_23-2148895486.jpg",
          alt: "Happy client 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/side-view-people-working-as-real-estate-agents_23-2151064915.jpg",
          alt: "Happy client 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
          alt: "Happy client 5",
        },
      ]}
      avatarText="Trusted by over 100 discerning clients"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Who We Are: Your Trusted Partner on the Riviera"
      description="KLEOS RIVIERA is a leading property management service specializing in the administration of exceptional properties on the French Riviera. We represent our clients' best interests, ensuring peace of mind and exquisite care for their luxurious estates."
      metrics={[
        {
          value: "10+",
          title: "Years of Expertise",
        },
        {
          value: "50+",
          title: "Properties Managed",
        },
        {
          value: "100%",
          title: "Client Satisfaction",
        },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EywH5PBKHbu5cPOXnOBmQcvjjT/uploaded-1781176974869-74ty5ryk.jpg"
      imageAlt="Elegant interior of a luxury villa"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "garden",
          title: "Garden Maintenance",
          subtitle: "Impeccable landscapes year-round.",
          category: "Outdoor",
          value: "Expert Care",
        },
        {
          id: "pool",
          title: "Pool & Outdoor Equipment",
          subtitle: "Sparkling pools and pristine facilities.",
          category: "Outdoor",
          value: "Regular Upkeep",
        },
        {
          id: "cleaning",
          title: "Housekeeping & Laundry",
          subtitle: "Flawless interiors for ultimate comfort.",
          category: "Indoor",
          value: "High Standards",
        },
        {
          id: "repairs",
          title: "Small Repairs & Interventions",
          subtitle: "Prompt solutions for any unexpected issue.",
          category: "Maintenance",
          value: "Rapid Response",
        },
      ]}
      title="Comprehensive Management Services"
      description="From meticulous garden care to proactive maintenance, our bespoke services ensure your property remains immaculate year-round, even in your absence."
    />
  </div>

  <div id="commitment" data-section="commitment">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "Discretion",
          title: "Uncompromised Privacy",
          description: "Your peace of mind is our priority.",
          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-architecture-space_23-2151912524.jpg",
          imageAlt: "Aerial view of a luxury villa",
        },
        {
          id: "m2",
          value: "Reliability",
          title: "Consistent, Trusted Service",
          description: "Confidence in every management aspect.",
          imageSrc: "http://img.b2bpic.net/free-photo/cool-woman-winking-showing-big-thumbs-up-pretty-girl-black-jacket-widely-smiling-looking-into-camera-isolated-background_197531-18491.jpg",
          imageAlt: "Happy client smiling",
        },
        {
          id: "m3",
          value: "Excellence",
          title: "High-End Management",
          description: "Attention to the smallest details.",
          imageSrc: "http://img.b2bpic.net/free-photo/positive-jolly-business-colleagues-working-report-discussing-data-city-cafe_1262-12419.jpg",
          imageAlt: "Professional team meeting",
        },
      ]}
      title="Our Commitment to Excellence"
      description="We manage every detail with the highest standards of professionalism and discretion, ensuring your property is cared for seamlessly and securely."
    />
  </div>

  <div id="trust" data-section="trust">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Luxury Estates",
        "Riviera Holdings",
        "Elite Residences",
        "Coastal Properties",
        "Azure Management",
        "Prestige Villas",
        "Sovereign Living",
      ]}
      title="Trusted by Discerning Property Owners"
      description="Our reputation is built on discretion, reliability, and unparalleled service, making us the preferred choice for luxury villa management on the French Riviera."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sophia Laurent",
          role: "Villa Owner",
          company: "Nice",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-showing-thumbs-up-sign_93675-133117.jpg",
          imageAlt: "Sophia Laurent",
        },
        {
          id: "2",
          name: "Marc Dubois",
          role: "Property Investor",
          company: "Cannes",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
          imageAlt: "Marc Dubois",
        },
        {
          id: "3",
          name: "Isabelle Martin",
          role: "Private Client",
          company: "Saint-Tropez",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/expressive-woman-posing-indoor_344912-1827.jpg",
          imageAlt: "Isabelle Martin",
        },
        {
          id: "4",
          name: "Antoine Girard",
          role: "Estate Owner",
          company: "Monaco",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-working-as-real-estate-agents_23-2151064813.jpg",
          imageAlt: "Antoine Girard",
        },
        {
          id: "5",
          name: "Chloe Lefevre",
          role: "Homeowner",
          company: "Antibes",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-calm-happy-pretty-woman-with-bright-evening-makeup-wearing-summer-yellow-dress-sea-shell-necklace_343596-3836.jpg",
          imageAlt: "Chloe Lefevre",
        },
      ]}
      kpiItems={[
        {
          value: "99%",
          label: "Client Retention",
        },
        {
          value: "5-Star",
          label: "Service Rating",
        },
        {
          value: "24/7",
          label: "Dedicated Support",
        },
      ]}
      title="What Our Clients Say"
      description="Hear from the discerning owners who entrust KLEOS RIVIERA with their prized properties, enjoying peace of mind and impeccable service."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",
          title: "What areas do you cover for property management?",
          content: "KLEOS RIVIERA specializes in property management across the entire French Riviera, including Nice, Cannes, Saint-Tropez, Antibes, Monaco, and surrounding areas.",
        },
        {
          id: "faq2",
          title: "How do you ensure the security of my property?",
          content: "We implement rigorous security protocols, including regular inspections, advanced surveillance options, and discreet personnel to safeguard your property at all times.",
        },
        {
          id: "faq3",
          title: "Can I customize the services for my specific needs?",
          content: "Absolutely. KLEOS RIVIERA offers bespoke property management solutions tailored to your unique requirements. We work closely with you to create a personalized service plan.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Find answers to common inquiries about our luxury property management services on the French Riviera."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      tag="Contact Us"
      title="Entrust Your Property to Experts"
      description="Reach out today to discuss your property management needs on the French Riviera and discover how KLEOS RIVIERA can offer you unparalleled peace of mind."
      imageSrc="http://img.b2bpic.net/free-photo/luxury-villa-with-pool_23-2151961782.jpg"
      imageAlt="Luxury villa in French Riviera"
      mediaAnimation="blur-reveal"
      mediaPosition="right"
      inputPlaceholder="Enter your email"
      buttonText="Inquire Now"
      termsText="By submitting, you agree to our Terms and Conditions and Privacy Policy."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="KLEOS RIVIERA"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Villa Management",
              href: "#services",
            },
            {
              label: "Garden Care",
              href: "#services",
            },
            {
              label: "Maintenance",
              href: "#services",
            },
            {
              label: "Housekeeping",
              href: "#services",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Testimonials",
              href: "#testimonials",
            },
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 KLEOS RIVIERA. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
