"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="grid"
        cardStyle="glass-depth"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "About",          id: "about"},
        {
          name: "Services",          id: "features"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="AgencyFlow"
      button={{
        text: "Let's Talk",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "gradient-bars"}}
      title="Drive Growth With Precision"
      description="We build high-performance marketing strategies tailored to your brand's unique needs, driving revenue and engagement."
      buttons={[
        {
          text: "Get Started",          href: "#contact"},
      ]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/computer-screen-empty-software-development-agency-showing-code_482257-125515.jpg", imageAlt: "Hero 1" },
        { imageSrc: "http://img.b2bpic.net/free-photo/employee-working-marketing-setting_23-2151871167.jpg?_wi=1", imageAlt: "Hero 2" },
        { imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg?_wi=1", imageAlt: "Hero 3" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="A Data-Driven Approach to Your Success"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "SEO Strategy",          description: "Optimize your visibility and reach target audiences with advanced organic search tactics.",          imageSrc: "http://img.b2bpic.net/free-photo/employee-working-marketing-setting_23-2151871167.jpg?_wi=2"},
        {
          title: "Social Media Growth",          description: "Build authentic connections and drive engagement across all social media platforms.",          imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg?_wi=2"},
        {
          title: "Content Strategy",          description: "Craft compelling narratives that position your brand as an industry authority.",          imageSrc: "http://img.b2bpic.net/free-photo/bullet-journal-desk-supplies-high-angle_23-2149740044.jpg"},
      ]}
      title="Our Specialized Services"
      description="Comprehensive marketing solutions to help you scale your business globally."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "1",          name: "Starter Boost",          price: "$1,999",          imageSrc: "http://img.b2bpic.net/free-photo/shampoo-bottle_187299-45792.jpg"},
        {
          id: "2",          name: "Growth Engine",          price: "$3,499",          imageSrc: "http://img.b2bpic.net/free-photo/goal-oriented-entrepreneur-luxurious-corporate-office-plans-strategy_482257-128191.jpg"},
        {
          id: "3",          name: "Enterprise Scale",          price: "$5,999",          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-with-project-statistics-preparing-report-team-meeting_1163-3899.jpg"},
        {
          id: "4",          name: "Social Essentials",          price: "$999",          imageSrc: "http://img.b2bpic.net/free-photo/man-working-coffee-shop-cafe-concept_53876-30132.jpg"},
        {
          id: "5",          name: "Email Automation",          price: "$1,499",          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-marketing-agency-logo_23-2150546812.jpg"},
        {
          id: "6",          name: "Brand Design",          price: "$2,499",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-picture-office-supplies_171337-13045.jpg"},
      ]}
      title="Our Agency Packages"
      description="Choose the perfect plan to boost your marketing efforts."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",          value: "150+",          description: "Successful Campaigns"},
        {
          id: "2",          value: "200%",          description: "Average Revenue Growth"},
        {
          id: "3",          value: "5M+",          description: "Total Reach"},
      ]}
      title="Our Impact in Numbers"
      description="We deliver measurable results for every client we serve."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Sarah Miller",          role: "CEO",          company: "TechInnovate",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling-outside-office-building_107420-74332.jpg"},
        {
          id: "2",          name: "David Chen",          role: "Marketing Director",          company: "GrowthLoop",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-with-arms-crossed-outside-modern-office-building_1139-1077.jpg"},
        {
          id: "3",          name: "Emily Watson",          role: "Founder",          company: "CreativeStudio",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-business-coach-posing-training-room_74855-3026.jpg"},
        {
          id: "4",          name: "James Wilson",          role: "Operations Manager",          company: "ScaleUp Inc",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-work_1098-286.jpg"},
        {
          id: "5",          name: "Olivia Rose",          role: "CMO",          company: "BrightIdeas",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/furious-mature-business-man-conference-room_1262-3010.jpg"},
        {
          id: "6",          name: "Michael Reed",          role: "CTO",          company: "FutureTech",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-executive-looking-information_1098-2091.jpg"},
      ]}
      kpiItems={[
        {
          value: "4.9/5",          label: "Satisfaction Rate"},
        {
          value: "95%",          label: "Retention Rate"},
        {
          value: "12+",          label: "Industries Served"},
      ]}
      title="Client Success Stories"
      description="What our clients say about our partnership."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      tag="Ready to get started?"
      title="Transform Your Marketing"
      description="Get in touch for a custom consultation and see how we can grow your business together."
      imageSrc="http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-999.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="AgencyFlow"
      columns={[
        {
          title: "Services",          items: [
            {
              label: "SEO",              href: "#"},
            {
              label: "Ads",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About",              href: "#"},
            {
              label: "Careers",              href: "#"},
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
