"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Award, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeMediumTitles"
        background="noise"
        cardStyle="soft-shadow"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Projects",          id: "#case-studies"},
        {
          name: "Studio",          id: "#about"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/flat-design-y2k-logo-template_23-2150544171.jpg"
      logoAlt="Axion Studio logo"
      brandName="Axion Studio"
      button={{
        text: "Book a strategy call",        href: "#"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "plain"}}
      title="We craft digital experiences"
      description="for brands ready to dominate their category online."
      kpis={[
        {
          value: "200+",          label: "Clients"},
        {
          value: "500+",          label: "Projects"},
        {
          value: "10+",          label: "Awards"},
      ]}
      enableKpiAnimation={true}
      tag="Axion Studio"
      buttons={[
        {
          text: "Start a project",          href: "#"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/white-geometric-texture-background_23-2151966075.jpg"
      imageAlt="Abstract creative background"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/smiley-girl-with-pink-hair-hoodie_23-2148629699.jpg",          alt: "Profile of a professional designer"},
        {
          src: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-632052.jpg",          alt: "Profile of a creative director"},
        {
          src: "http://img.b2bpic.net/free-photo/front-view-business-male-with-laptop_23-2148479543.jpg",          alt: "Profile of a marketing specialist"},
        {
          src: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",          alt: "Profile of a branding expert"},
        {
          src: "http://img.b2bpic.net/free-photo/happy-man-with-eyeglasses-smiling-office_329181-14553.jpg",          alt: "Profile of a lead developer"},
      ]}
      avatarText="Join our growing list of success stories"
      marqueeItems={[
        {
          type: "text",          text: "Brand Strategy"},
        {
          type: "text",          text: "UI/UX Design"},
        {
          type: "text",          text: "Web Development"},
        {
          type: "text",          text: "Digital Marketing"},
        {
          type: "text",          text: "Creative Direction"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Strategy-led creatives, delivering results in digital and beyond."
      metrics={[
        {
          icon: Award,
          label: "Years in Business",          value: "12"},
        {
          icon: Sparkles,
          label: "Successful Projects",          value: "500+"},
        {
          icon: Award,
          label: "Industry Awards",          value: "10+"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="case-studies" data-section="case-studies">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "narrativ",          title: "Narrativ",          author: "Client Success",          description: "Winner of Site of the Month 2025 - an interactive 3D showcase driving record engagement",          tags: [],
          videoSrc: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_122702_390f5305-8719-41d5-ae80-d23ab3796c28.mp4",          videoAriaLabel: "Narrativ project video"
        },
        {
          id: "luminar",          title: "Luminar",          author: "Client Success",          description: "Transforming a dated platform into a conversion-focused brand experience",          tags: [],
          videoSrc: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_123323_f909c2b8-ff6c-4edf-882b-ebcdbe389b5.mp4",          videoAriaLabel: "Luminar project video"
        }
      ]}
      title="Our projects"
      description="Explore our featured client work, delivering impactful digital experiences."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="What our partners say"
      description="Hear directly from the clients who've trusted us to bring their vision to life."
      testimonials={[
        {
          id: "testimonial-1",          name: "Sarah Chen",          role: "Marketing Director",          company: "Innovate Corp",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-vector/various-types-code-logo-flat-design_23-2148821508.jpg",          imageAlt: "Avatar of Sarah Chen"
        },
        {
          id: "testimonial-2",          name: "Michael Wong",          role: "CEO",          company: "FutureTech Solutions",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-vector/designer-elements-background_1172-580.jpg",          imageAlt: "Avatar of Michael Wong"
        },
        {
          id: "testimonial-3",          name: "Emily Rodriguez",          role: "Brand Manager",          company: "Global Brands Inc.",          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-vector/graphic-designer-workplace_23-2147548083.jpg",          imageAlt: "Avatar of Emily Rodriguez"
        },
        {
          id: "testimonial-4",          name: "David Lee",          role: "Founder",          company: "Velocity Ventures",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-vector/graphic-designer-infographic-template_1172-39.jpg",          imageAlt: "Avatar of David Lee"
        },
        {
          id: "testimonial-5",          name: "Jessica Kim",          role: "Product Lead",          company: "Apex Digital",          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13675.jpg",          imageAlt: "Avatar of Jessica Kim"
        },
        {
          id: "testimonial-6",          name: "Robert Johnson",          role: "CTO",          company: "Streamline SaaS",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-background_52683-118916.jpg",          imageAlt: "Avatar of Robert Johnson"
        }
      ]}
      kpiItems={[
        {
          value: "98%",          label: "Client Retention"
        },
        {
          value: "250+",          label: "Projects Launched"
        },
        {
          value: "4.9/5",          label: "Average Rating"
        }
      ]}
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      title="Trusted by industry leaders"
      description="We've had the privilege of partnering with a diverse range of companies, from startups to established enterprises."
      names={[
        "Innovate Corp",        "FutureTech Solutions",        "Global Brands Inc.",        "Velocity Ventures",        "Apex Digital",        "Streamline SaaS",        "Pioneer Group"
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="http://img.b2bpic.net/free-vector/flat-design-y2k-logo-template_23-2150544171.jpg"
      logoAlt="Axion Studio logo"
      columns={[
        {
          items: [
            {
              label: "Projects",              href: "#case-studies"
            },
            {
              label: "Studio",              href: "#about"
            },
            {
              label: "Journal",              href: "#"
            }
          ]
        },
        {
          items: [
            {
              label: "Privacy Policy",              href: "#"
            },
            {
              label: "Terms of Service",              href: "#"
            }
          ]
        }
      ]}
      logoText="Axion Studio"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
