"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="medium"
        background="noiseDiagonalGradient"
        cardStyle="inset"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Dashboard",
          id: "/",
        },
        {
          name: "Localization",
          id: "/localization",
        },
        {
          name: "Influencers",
          id: "/influencers",
        },
      ]}
      brandName="K-Beauty Export AI"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated",
      }}
      title="AI-Powered K-Beauty Global Export"
      description="Automate your global marketing, analyze cross-border KPIs, and optimize your exports with deep AI insights."
      buttons={[
        {
          text: "Get Started",
          href: "#",
        },
      ]}
      carouselItems={[
        {
          id: "c1",
          imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg",
          imageAlt: "k-beauty analytics dashboard",
        },
        {
          id: "c2",
          imageSrc: "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-13959.jpg",
          imageAlt: "export marketing data",
        },
        {
          id: "c3",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-analyzing-data-charts-files-computer-plan-financial-project-business-woman-wokring-with-documents-design-marketing-strategy-company-development_482257-33674.jpg",
          imageAlt: "influencer analytics chart",
        },
        {
          id: "c4",
          imageSrc: "http://img.b2bpic.net/free-photo/work-elegant-web-america-communication_1232-3758.jpg",
          imageAlt: "global business map",
        },
        {
          id: "c5",
          imageSrc: "http://img.b2bpic.net/free-photo/high-speed-optical-cable-fast-data-broadband-transfer-fiber-connection-abstract-tech-background_272375-5412.jpg",
          imageAlt: "marketing dashboard kpi",
        },
        {
          id: "c6",
          imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg",
          imageAlt: "growth metrics interface",
        },
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Performance Analytics"
      tag="Export Insights"
      metrics={[
        {
          id: "m1",
          value: "92%",
          description: "Predicted Success Rate",
        },
        {
          id: "m2",
          value: "4.2x",
          description: "ROAS Efficiency",
        },
        {
          id: "m3",
          value: "15K",
          description: "Global Conversions",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "AI Analytics",
          description: "Real-time global market trends.",
          buttonIcon: "Zap",
          imageSrc: "http://img.b2bpic.net/free-photo/african-american-entrepreneur-pitching-new-project-idea-stakeholders_482257-118564.jpg",
          imageAlt: "African american entrepreneur pitching a new project idea to stakeholders",
        },
        {
          title: "Localized Branding",
          description: "Auto-generated assets.",
          buttonIcon: "Palette",
          imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg",
          imageAlt: "African american entrepreneur pitching a new project idea to stakeholders",
        },
        {
          title: "Influencer Matching",
          description: "Data-driven partnerships.",
          buttonIcon: "UserCheck",
          imageSrc: "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-13959.jpg",
          imageAlt: "African american entrepreneur pitching a new project idea to stakeholders",
        },
        {
          title: "Export Logic",
          description: "Simplified customs and taxes.",
          buttonIcon: "Globe",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-analyzing-data-charts-files-computer-plan-financial-project-business-woman-wokring-with-documents-design-marketing-strategy-company-development_482257-33674.jpg",
          imageAlt: "African american entrepreneur pitching a new project idea to stakeholders",
        },
      ]}
      title="Platform Capabilities"
      description="Built for scale, speed, and accuracy."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Min-ji Kim",
          role: "CEO",
          company: "K-Glow Labs",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-confident-young-professional-posing-outside_1262-21131.jpg",
        },
        {
          id: "t2",
          name: "Hiroshi Tanaka",
          role: "Director",
          company: "BeautyJapan",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-mature-asian-man-with-hands-chin_1262-1560.jpg",
        },
        {
          id: "t3",
          name: "Sarah Lee",
          role: "Marketing",
          company: "VeganSkin",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg",
        },
        {
          id: "t4",
          name: "John Doe",
          role: "Founder",
          company: "GlobalBeauty",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
        },
        {
          id: "t5",
          name: "Alice Chen",
          role: "Head of Export",
          company: "AquaBeauty",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-laptop_23-2149739334.jpg",
        },
      ]}
      kpiItems={[
        {
          value: "120+",
          label: "Companies",
        },
        {
          value: "45%",
          label: "Revenue Growth",
        },
        {
          value: "3x",
          label: "Time Saved",
        },
      ]}
      title="Trusted by Brands"
      description="See why top exporters choose our platform."
    />
  </div>

  <div id="contact-home" data-section="contact-home">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      tag="Contact Us"
      title="Start your global expansion."
      description="Ready to scale your K-Beauty business to the world?"
      buttons={[
        {
          text: "Contact Support",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/blue-hex-backgrounds-networking_23-2149755768.jpg"
      logoText="K-Beauty Export AI"
      columns={[
        {
          title: "Platform",
          items: [
            {
              label: "Features",
              href: "/#features",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "/about",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
