"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="fluid"
        cardStyle="subtle-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Growix Marketer"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      title="Scaling Your Digital Presence with Precision"
      description="Growix Marketer builds high-performance web applications and marketing platforms that drive measurable revenue growth for your business."
      testimonials={[
        {
          name: "Alex Rivet",
          handle: "@rivet",
          testimonial: "Growix transformed our platform speed instantly.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/office-workspace-with-computers-grayscale_53876-138028.jpg?_wi=1",
          imageAlt: "digital agency office background",
        },
        {
          name: "Sarah Chen",
          handle: "@schen",
          testimonial: "Unbeatable development expertise and vision.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-checking-report-tablet_482257-120320.jpg?_wi=1",
          imageAlt: "digital agency office background",
        },
        {
          name: "Markus Wolf",
          handle: "@mwolf",
          testimonial: "Delivered ahead of schedule. Exceptional work.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/call-center-manager-guiding-intern-how-use-ai-chatbot-office-desk-pc_482257-125768.jpg?_wi=1",
          imageAlt: "digital agency office background",
        },
        {
          name: "Elena Rossi",
          handle: "@erossi",
          testimonial: "The best technical partners we have ever had.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-patriot-day-commemoration_52683-94468.jpg?_wi=1",
          imageAlt: "digital agency office background",
        },
        {
          name: "David Park",
          handle: "@dpark",
          testimonial: "Game changing results for our SaaS metrics.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-sale-busioness-background-banner-design-multipurpose_1340-16803.jpg?_wi=1",
          imageAlt: "digital agency office background",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/office-workspace-with-computers-grayscale_53876-138028.jpg?_wi=2"
      mediaAnimation="blur-reveal"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/room-set-with-digital-devices-meeting_482257-119178.jpg",
          alt: "Team member 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-computer-supplies-wooden-desk-empty-startup-space-monitor-with-business-charts-display-instruments-work-financial-project-modern-workspace-decor_482257-36859.jpg",
          alt: "Team member 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-118761.jpg",
          alt: "Team member 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/stylish-empty-desk-high-end-loft-apartment-workspace_482257-120872.jpg",
          alt: "Team member 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/shareholders-production-plant-doing-doing-research-laptops_482257-123409.jpg",
          alt: "Team member 5",
        },
      ]}
      avatarText="Trusted by 500+ professionals"
      marqueeItems={[
        {
          type: "text",
          text: "React.js",
        },
        {
          type: "text",
          text: "Next.js",
        },
        {
          type: "text",
          text: "Node.js",
        },
        {
          type: "text",
          text: "Cloud Infrastructure",
        },
        {
          type: "text",
          text: "AI Integration",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Driven by Innovation, Defined by Quality"
      description="We specialize in modern, scalable software solutions. Our team bridges the gap between complex engineering and beautiful, user-centric experiences."
      metrics={[
        {
          value: "150+",
          title: "Apps Launched",
        },
        {
          value: "99.9%",
          title: "System Uptime",
        },
        {
          value: "500k",
          title: "Users Reached",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/businessman-checking-report-tablet_482257-120320.jpg?_wi=2"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "Custom Web Development",
          description: "High performance React and Next.js applications.",
          imageSrc: "http://img.b2bpic.net/free-photo/call-center-manager-guiding-intern-how-use-ai-chatbot-office-desk-pc_482257-125768.jpg?_wi=2",
          imageAlt: "Dev",
        },
        {
          title: "SaaS Platform Design",
          description: "Scalable cloud infrastructures for your business.",
          imageSrc: "http://img.b2bpic.net/free-photo/hologram-projector-screen-with-cloud-system-technology_53876-108503.jpg",
          imageAlt: "SaaS",
        },
        {
          title: "API Integration",
          description: "Seamless connectivity for your digital ecosystems.",
          imageSrc: "http://img.b2bpic.net/free-photo/cloud-storage-network-server-online-backup-graphic_53876-132757.jpg",
          imageAlt: "API",
        },
      ]}
      title="What We Build"
      description="End-to-end development services tailored to your specific requirements."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Microsoft",
        "Google",
        "Amazon",
        "Netflix",
        "Tesla",
        "Nvidia",
        "Adobe",
      ]}
      title="Trusted by Industry Leaders"
      description="Empowering global companies to reach their digital potential."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          tag: "Essentials",
          price: "$2,999",
          period: "/mo",
          description: "Ideal for startups",
          button: {
            text: "Get Started",
          },
          featuresTitle: "Included",
          features: [
            "Custom UI",
            "Next.js Core",
            "5 Page App",
          ],
        },
        {
          id: "pro",
          tag: "Growth",
          price: "$5,999",
          period: "/mo",
          description: "Scale your operations",
          button: {
            text: "Get Started",
          },
          featuresTitle: "Everything in Basic, plus:",
          features: [
            "Custom UI",
            "Next.js Core",
            "Unlimited Pages",
            "Marketing API",
          ],
        },
        {
          id: "enterprise",
          tag: "Enterprise",
          price: "Custom",
          period: "",
          description: "Full-scale solutions",
          button: {
            text: "Talk to Sales",
          },
          featuresTitle: "Tailored Solutions",
          features: [
            "Cloud Migration",
            "Dedicated Team",
            "24/7 Priority Support",
          ],
        },
      ]}
      title="Simple Pricing"
      description="Choose the right growth stage for your business."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split-description"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "How long does a typical build take?",
          content: "Most projects take 4-8 weeks depending on complexity.",
        },
        {
          id: "q2",
          title: "Do you provide post-launch support?",
          content: "Yes, we offer ongoing maintenance and support packages.",
        },
        {
          id: "q3",
          title: "What stacks do you support?",
          content: "Next.js, React, Node.js, and cloud-native services.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/high-angle-patriot-day-commemoration_52683-94468.jpg?_wi=2"
      mediaAnimation="slide-up"
      title="Common Questions"
      description="Need more clarity? Here are answers to common questions about our agency process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get in Touch"
      title="Ready to Build Your Future?"
      description="Let's discuss how Growix Marketer can elevate your business."
      buttons={[
        {
          text: "Contact Our Team",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/abstract-sale-busioness-background-banner-design-multipurpose_1340-16803.jpg?_wi=2"
      logoText="Growix Marketer"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "Web Dev",
              href: "#features",
            },
            {
              label: "Marketing",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2025 Growix Marketer"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
