"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="glass-depth"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About Us",          id: "#about"},
        {
          name: "Services",          id: "#features"},
        {
          name: "Clients",          id: "#social-proof"},
        {
          name: "Team",          id: "#team"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="ESENTIA AGENCY"
      button={{
        text: "Get Started",        href: "#contact"}}
      animateOnLoad={true}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="ESENTIA"
      description="Strategic design and marketing that drives measurable growth. We turn vision into results for ambitious businesses."
      buttons={[
        {
          text: "See Our Work",          href: "#products"},
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-workmates-discussing-business-strategy-startup-office-colleagues-working-project-planning-presentation-company-development-growth-brainstorming-ideas_482257-40347.jpg",          imageAlt: "Digital marketing agency meeting in a modern office"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-designing-websites_23-2149930943.jpg",          imageAlt: "Creative business strategy planning session"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/target-written-notebook-with-pen_1357-145.jpg",          imageAlt: "Marketing team collaboration presentation"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/system-administrator-debugging-company-servers-preventing-failures_482257-124403.jpg",          imageAlt: "Modern workspace with digital screens showing data"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/data-analytics-tablet_23-2151957101.jpg",          imageAlt: "Successful project management with a creative team"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/happy-entrepreneur-joining-business-meeting-via-video-conference-call-talking-about-paperwork-with-his-colleagues_637285-6977.jpg",          imageAlt: "Brand strategy workshop and creative process"},
      ]}
      autoplayDelay={3000}
      showDimOverlay={false}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",          content: "Elevate Your Brand with Strategic Creativity"},
      ]}
      buttons={[
        {
          text: "Learn More",          href: "#features"},
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "Outdated brand identity",          "Inconsistent messaging",          "Limited digital presence",          "Stagnant engagement",          "Ineffective campaigns"],
      }}
      positiveCard={{
        items: [
          "Compelling brand story",          "Cohesive visual language",          "Strong online visibility",          "Engaged customer base",          "High-performing strategies"],
      }}
      title="Unlock Your Brand's Full Potential"
      description="We combine innovative design with data-driven marketing to deliver solutions that captivate audiences and drive measurable results."
      tag="Our Services"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "GlobalTech Solutions",        "Innovate Foods Co.",        "Urban Realty Group",        "MediCare Partners",        "FinWise Financial",        "EcoHarvest Organics",        "Summit Sports Wear"]}
      title="Trusted by Industry Leaders"
      description="Our collaborations speak for themselves, partnering with businesses to achieve their marketing and branding objectives."
      speed={40}
      showCard={true}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Our Impact, Quantified"
      tag="Results"
      metrics={[
        {
          id: "m1",          value: "300%",          description: "Average ROI for clients"},
        {
          id: "m2",          value: "200+",          description: "Satisfied clients served"},
        {
          id: "m3",          value: "95%",          description: "Client retention rate"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      members={[
        {
          id: "tm1",          name: "Marcus Aurelius",          role: "Chief Strategist",          imageSrc: "http://img.b2bpic.net/free-photo/older-man-with-silly-face_1149-277.jpg",          imageAlt: "Portrait of Marcus Aurelius, Chief Strategist"},
        {
          id: "tm2",          name: "Sophia Clarke",          role: "Creative Director",          imageSrc: "http://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg",          imageAlt: "Portrait of Sophia Clarke, Creative Director"},
        {
          id: "tm3",          name: "David Chen",          role: "Lead Marketer",          imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-134899.jpg",          imageAlt: "Portrait of David Chen, Lead Marketer"},
      ]}
      title="Meet the Minds Behind Esentia"
      description="Our diverse team of strategists, designers, and marketers are united by a passion for innovation and client success."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Esentia Agency transformed our brand's online presence, delivering a sophisticated design and a marketing strategy that truly resonates with our audience. Their collaborative approach and attention to detail were exceptional, leading to a significant boost in our market engagement."
      rating={5}
      author="Elena Rodriguez, Marketing Director at InnovateTech Solutions"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-smiling-woman-looking-camera_23-2148187139.jpg",          alt: "Elena Rodriguez"},
        {
          src: "http://img.b2bpic.net/free-photo/bearded-man-brown-suit-wearing-glasses-looking-camera-happy-positive-with-arms-crossed-standing-purple-background_141793-110749.jpg",          alt: "John Doe"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",          alt: "Sarah Lee"},
        {
          src: "http://img.b2bpic.net/free-photo/man-checking-his-checklist_1153-1152.jpg",          alt: "Michael Brown"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-disinterested-woman_23-2149022645.jpg",          alt: "Sophie Miller"},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      tag="Get in Touch"
      title="Ready to Elevate Your Brand?"
      description="Let's connect and discuss how Esentia Agency can transform your vision into market-leading success. Request a free consultation today."
      imageSrc="http://img.b2bpic.net/free-photo/hands-close-up-young-woman-using-laptop_1098-2423.jpg"
      imageAlt="Modern office setting with hands typing on a laptop, symbolizing communication and connection."
      mediaAnimation="blur-reveal"
      mediaPosition="right"
      inputPlaceholder="Your email address"
      buttonText="Send Message"
      termsText="By clicking Send Message you're confirming that you agree with our Privacy Policy."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="ESENTIA AGENCY"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}