"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="large"
        background="noiseDiagonalGradient"
        cardStyle="gradient-mesh"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Comparison", id: "#comparison" },
              { name: "Performance", id: "#metrics" },
              { name: "Testimonials", id: "#testimonials" },
            ]}
            brandName="Nexus"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardScroll
            background={{ variant: "sparkles-gradient" }}
            title="Nexus: The Future of Rapid Development"
            description="Stop struggling with restrictive, slow platforms. Nexus offers 10x the performance, unlimited customization, and a developer-first experience that leaves Lovable behind."
            buttons={[
              { text: "Start Free Trial", href: "#" },
              { text: "Compare Now", href: "#comparison" },
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-55085.jpg"
          />
        </div>

        <div id="comparison" data-section="comparison">
          <FeatureCardTwentyThree
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={true}
            features={[
              { id: "1", title: "Zero Latency Build Times", tags: ["Performance"], imageSrc: "http://img.b2bpic.net/free-photo/neon-lights-from-wonder-wheel-light-bulb_23-2148328102.jpg"},
              { id: "2", title: "Full Codebase Ownership", tags: ["Control"], imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-preparing-visual-preview-clients-pc-close-up_482257-118882.jpg"},
              { id: "3", title: "Infinite API Flexibility", tags: ["Flexibility"], imageSrc: "http://img.b2bpic.net/free-photo/digital-banking-transparent-screen_53876-105382.jpg"},
            ]}
            title="Why Nexus Outperforms"
            description="Lovable provides a great starting point, but Nexus is built for scale, performance, and complete ownership."
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardFourteen
            title="The Results Don't Lie"
            tag="Proven Performance"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "400%", description: "Faster build speed" },
              { id: "m2", value: "99.99%", description: "Platform Uptime" },
              { id: "m3", value: "15ms", description: "Avg API latency" },
            ]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardTwelve
            cardTitle="Loved by Developers"
            cardTag="Testimonials"
            cardAnimation="slide-up"
            useInvertedBackground={true}
            testimonials={[
              { id: "1", name: "Sarah Jenkins", imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businessman-posing-looking-camera_1163-4800.jpg" },
              { id: "2", name: "David Chen", imageSrc: "http://img.b2bpic.net/free-photo/top-view-computer-wooden-table-night-work-desk_169016-50755.jpg" },
              { id: "3", name: "Maria Garcia", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-sketch-near-keyboard_23-2147823718.jpg" },
            ]}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqDouble
            title="Common Questions"
            description="Still have questions about how Nexus beats the competition?"
            textboxLayout="split"
            useInvertedBackground={false}
            faqsAnimation="slide-up"
            faqs={[
              { id: "q1", title: "How is Nexus different from Lovable?", content: "Nexus is built with a developer-first philosophy, offering deep backend hooks and granular control."},
              { id: "q2", title: "Is it hard to migrate?", content: "Our migration tools are designed to import your existing logic in minutes."},
              { id: "q3", title: "Can I export my code?", content: "Absolutely. You own 100% of the code generated on our platform."},
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            tag="Join Nexus"
            title="Ready to build the future?"
            description="Subscribe to our newsletter and get exclusive early access to new performance-boosting features."
            background={{ variant: "sparkles-gradient" }}
            buttonText="Get Early Access"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            logoText="Nexus"
            imageSrc="http://img.b2bpic.net/free-photo/abstract-dark-background-with-lines_23-2148810058.jpg"
            columns={[
              { title: "Product", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] },
              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}