"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeLargeTitles"
        background="floatingGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Services",
          id: "services",
        },
        {
          name: "Work",
          id: "work",
        },
        {
          name: "Process",
          id: "process",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="ApexDigital"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "plain",
      }}
      title="Build Digital Excellence"
      description="We architect high-performance, conversion-driven websites for ambitious brands. Modern designs meet measurable business results."
      kpis={[
        {
          value: "150+",
          label: "Projects Launched",
        },
        {
          value: "98%",
          label: "Retention Rate",
        },
        {
          value: "5.0",
          label: "Client Rating",
        },
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Start Project",
          href: "#contact",
        },
        {
          text: "View Work",
          href: "#work",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241204.jpg?_wi=1"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
          alt: "Team member",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiley-professional-businesswoman-with-glasses-presentation_23-2148824824.jpg",
          alt: "Team member",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-confident-business-woman-with-executive-job-working-with-management-marketing-statistics-computer-office-worker-analyzing-research-charts-data-reports_482257-41126.jpg",
          alt: "Team member",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969905.jpg",
          alt: "Team member",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-pensive-mid-adult-businessman-touching-chin_1262-16147.jpg",
          alt: "Team member",
        },
      ]}
      avatarText="Trusted by 500+ global industry experts."
      marqueeItems={[
        {
          type: "text",
          text: "Next.js",
        },
        {
          type: "text",
          text: "React",
        },
        {
          type: "text",
          text: "Tailwind",
        },
        {
          type: "text",
          text: "TypeScript",
        },
        {
          type: "text",
          text: "Node.js",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="Your Partner in Digital Growth"
      description="We bridge the gap between creative design and complex engineering, delivering seamless digital experiences that scale."
      bulletPoints={[
        {
          title: "Scalable Engineering",
          description: "Rock-solid foundations for long-term growth.",
        },
        {
          title: "Conversion-First Design",
          description: "Visuals that serve your business goals.",
        },
        {
          title: "Agile Development",
          description: "Fast turnarounds without compromising quality.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/young-woman-working-animation-studio_23-2149208024.jpg?_wi=1"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Corporate Websites",
          description: "High-end corporate presence sites built for trust.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nutritional-counter-app-composition_23-2149880622.jpg?_wi=1",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/smartphone-shopping-cart-with-sheep-e-commerce-promotion_187299-47584.jpg?_wi=1",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241204.jpg?_wi=2",
          imageAlt: "digital agency office background",
        },
        {
          title: "E-Commerce Platforms",
          description: "Seamless shopping experiences for global brands.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nutritional-counter-app-composition_23-2149880622.jpg?_wi=2",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/smartphone-shopping-cart-with-sheep-e-commerce-promotion_187299-47584.jpg?_wi=2",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-animation-studio_23-2149208024.jpg?_wi=2",
          imageAlt: "designers working on computers",
        },
        {
          title: "SaaS Applications",
          description: "Intuitive interfaces for complex software platforms.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nutritional-counter-app-composition_23-2149880622.jpg?_wi=3",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/smartphone-shopping-cart-with-sheep-e-commerce-promotion_187299-47584.jpg?_wi=3",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nutritional-counter-app-composition_23-2149880622.jpg?_wi=4",
          imageAlt: "smartphone ui design dashboard",
        },
      ]}
      showStepNumbers={true}
      title="Our Agency Services"
      description="Tailored solutions for your digital ecosystem."
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Microsoft",
        "Google",
        "Apple",
        "Amazon",
        "Tesla",
        "Netflix",
        "Adobe",
      ]}
      title="Trusted by Industry Leaders"
      description="We help ambitious organizations achieve their digital vision."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",
          name: "Startup Launch",
          price: "$12,000",
          features: [
            "Responsive Landing Page",
            "Essential SEO",
            "Performance Optimization",
            "2 Weeks Support",
          ],
          buttons: [
            {
              text: "Get Started",
              href: "#contact",
            },
          ],
        },
        {
          id: "pro",
          name: "Business Growth",
          price: "$25,000",
          features: [
            "Multi-Page Website",
            "Advanced SEO/Analytics",
            "E-Commerce Ready",
            "1 Month Dedicated Support",
          ],
          buttons: [
            {
              text: "Get Started",
              href: "#contact",
            },
          ],
        },
        {
          id: "enterprise",
          name: "Enterprise Scale",
          price: "Custom",
          features: [
            "Full Web App Design",
            "Custom CMS Integration",
            "Advanced Data Architecture",
            "Priority 24/7 Support",
          ],
          buttons: [
            {
              text: "Contact Us",
              href: "#contact",
            },
          ],
        },
      ]}
      title="Transparent Pricing"
      description="Scalable plans designed for your growth."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah Miller",
          handle: "@sarah_tech",
          testimonial: "ApexDigital transformed our online presence. Their attention to detail and UI expertise is unmatched.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
        },
        {
          id: "2",
          name: "James Chen",
          handle: "@j_chen",
          testimonial: "Delivered a high-converting platform ahead of schedule. Truly professional team.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-professional-businesswoman-with-glasses-presentation_23-2148824824.jpg",
        },
        {
          id: "3",
          name: "Emily Watson",
          handle: "@emily_w",
          testimonial: "Seamless process and a beautiful result. They truly understand our brand identity.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-business-woman-with-executive-job-working-with-management-marketing-statistics-computer-office-worker-analyzing-research-charts-data-reports_482257-41126.jpg",
        },
        {
          id: "4",
          name: "Marcus Thorne",
          handle: "@m_thorne",
          testimonial: "Scaling our application with their team was the best decision we made this year.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969905.jpg",
        },
        {
          id: "5",
          name: "Elena Rodriguez",
          handle: "@elena_r",
          testimonial: "Exceptional communication and design sense. Highly recommended for premium brands.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-pensive-mid-adult-businessman-touching-chin_1262-16147.jpg",
        },
      ]}
      showRating={true}
      title="Client Success Stories"
      description="Hear what our partners have to say about our process and results."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",
          title: "How long does a typical project take?",
          content: "Most projects are completed within 4-8 weeks, depending on the complexity of functionality and design requirements.",
        },
        {
          id: "2",
          title: "Do you offer ongoing support?",
          content: "Yes, we provide maintenance and performance support packages to ensure your digital product stays ahead of the curve.",
        },
        {
          id: "3",
          title: "What platforms do you work with?",
          content: "We specialize in modern web stacks, including Next.js, React, Tailwind, and custom CMS integrations.",
        },
      ]}
      sideTitle="Questions? Answers."
      sideDescription="Everything you need to know about our web building process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Contact Us"
      title="Ready to Build?"
      description="Tell us about your project, and we'll show you how we can elevate your brand."
      imageSrc="http://img.b2bpic.net/free-photo/overhead-view-digital-tablet-with-coffee-earphone-pen-holders-gray-desk_23-2148052597.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="ApexDigital"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "Press",
              href: "#",
            },
          ],
        },
        {
          title: "Solutions",
          items: [
            {
              label: "Corporate",
              href: "#services",
            },
            {
              label: "E-Commerce",
              href: "#services",
            },
            {
              label: "SaaS Apps",
              href: "#services",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Use",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2025 ApexDigital | Built for Growth"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
