"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 FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="aurora"
        cardStyle="glass-depth"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Features",          id: "#features"},
        {
          name: "About",          id: "#about"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="SiteShark"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "gradient-bars"}}
      title="Build Your Business Presence"
      description="We craft professional, high-performance websites tailored to scale your digital presence and drive revenue."
      kpis={[
        {
          value: "200+",          label: "Projects Completed"},
        {
          value: "95%",          label: "Retention Rate"},
        {
          value: "10x",          label: "Traffic Increase"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Start Project",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg"
      imageAlt="Agency interface"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg",          alt: "CEO analyst"},
        {
          src: "http://img.b2bpic.net/free-photo/modern-home-office-with-desktop-pc-monitor-displaying-business-analytics_482257-130255.jpg",          alt: "Modern office worker"},
        {
          src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",          alt: "Diagnostic tech"},
        {
          src: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",          alt: "Boardroom lead"},
        {
          src: "http://img.b2bpic.net/free-photo/laptop-wooden-desk-with-social-media-diagram_1134-64.jpg",          alt: "Data analyst"},
      ]}
      avatarText="Trusted by 500+ leaders worldwide"
      marqueeItems={[
        { type: "text", text: "SaaS Growth" },
        { type: "text", text: "E-commerce Scale" },
        { type: "text", text: "Modern UX/UI" },
        { type: "text", text: "Cloud Infrastructure" },
        { type: "text", text: "SEO Mastery" },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          id: "f1",          title: "Rapid Development",          subtitle: "Get to market faster",          category: "Dev",          value: "2 weeks"},
        {
          id: "f2",          title: "SEO Optimized",          subtitle: "Drive organic traffic",          category: "Marketing",          value: "100%"},
        {
          id: "f3",          title: "Cloud Hosting",          subtitle: "Maximum uptime",          category: "Infra",          value: "99.9%"},
      ]}
      title="Everything You Need to Scale"
      description="Powerful features designed to convert visitors into loyal customers."
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="We Are Growth Partners"
      description="More than just designers, we are business partners focused on your ROI. Our team brings technical excellence together with creative design to elevate your brand."
      bulletPoints={[
        {
          title: "Custom Strategy",          description: "Tailored solutions for every unique business need."},
        {
          title: "Data-Driven Design",          description: "Decisions based on real user behavior."},
        {
          title: "Ongoing Support",          description: "We are here for you long after launch."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/group-young-businesspeople-meeting-office_171337-7269.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", value: "$5M+", description: "Generated Revenue" },
        { id: "m2", value: "500k", description: "Active Users" },
        { id: "m3", value: "24/7", description: "Average Support Time" },
      ]}
      title="Proven Impact"
      description="Metrics that show real world results for our clients."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          handle: "@techcorp",          testimonial: "Excellent service and results, worth every penny.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg"},
        {
          id: "2",          name: "Michael K.",          handle: "@innovate",          testimonial: "They transformed our online revenue overnight.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg"},
        {
          id: "3",          name: "Emily R.",          handle: "@growth",          testimonial: "Highly recommended for any serious business.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-saleswoman-working-office-sitting-business-room-reading-writing-down_1258-193622.jpg"},
      ]}
      showRating={true}
      title="Loved by Businesses"
      description="See why top-performing companies choose our team."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "What is your design philosophy?",          content: "We focus on user-centric design that prioritizes accessibility and conversion."},
        {
          id: "q2",          title: "How do you handle responsiveness?",          content: "Our websites are mobile-first, ensuring a seamless experience on all devices."},
        {
          id: "q3",          title: "What tools do you use?",          content: "We leverage industry-standard modern frameworks and design tools to build scalable solutions."},
      ]}
      sideTitle="Common Design Questions"
      sideDescription="Answers to the most frequent inquiries about our web design process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      tag="Contact Us"
      title="Get In Touch"
      description="Have a question or ready to start a project? Email us at hello@siteshark.com or call (555) 123-4567."
      imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-cyber-network-visualization-design_1048-17445.jpg"
      inputPlaceholder="Enter your email address"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="SiteShark"
      columns={[
        {
          title: "Company",          items: [
            { label: "About Us", href: "#about" },
            { label: "Careers", href: "#" },
          ],
        },
        {
          title: "Resources",          items: [
            { label: "Design Blog", href: "#" },
            { label: "Case Studies", href: "#" },
          ],
        },
        {
          title: "Legal",          items: [
            { label: "Privacy", href: "#" },
            { label: "Terms", href: "#" },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
