"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Activity, Box, Clock, Globe, Layers, Shield, ShieldCheck, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="small"
        sizing="mediumSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Products",
          id: "products",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "Docs",
          id: "docs",
        },
        {
          name: "Changelog",
          id: "changelog",
        },
      ]}
      brandName="Nebula"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Deploy AI models at the speed of thought"
      description="Nebula provides world-class inference infrastructure for developers. Sub-50ms latency for all major LLMs with zero configuration."
      testimonials={[
        {
          name: "Alex Rivet",
          handle: "@arivet",
          testimonial: "Nebula changed our inference game. Latency dropped by 80% immediately.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/workman-factory-writing-notes_1303-30620.jpg?_wi=1",
        },
        {
          name: "Jordan Smith",
          handle: "@jsmith",
          testimonial: "The easiest deployment we've ever done. Absolute perfection.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg?_wi=1",
        },
        {
          name: "Maria Garcia",
          handle: "@mgarcia",
          testimonial: "Sub-50ms is real. Our AI app feels instant for users.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-entrepreneur-standing-office-looking-camera_637285-2744.jpg",
        },
        {
          name: "Leo Kim",
          handle: "@leokim",
          testimonial: "The observability tools are best-in-class.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-working-it-security-data-monitoring-center_23-2151966688.jpg",
        },
        {
          name: "Sam Wong",
          handle: "@samwong",
          testimonial: "Incredible infrastructure, highly recommend Nebula.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-posing-with-helmet-medium-shot_23-2148920603.jpg",
        },
      ]}
      buttons={[
        {
          text: "Get Started",
          href: "#",
        },
        {
          text: "Watch Demo",
          href: "#",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/digital-dashboard_23-2151957114.jpg?_wi=1"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/digital-dashboard_23-2151957114.jpg",
          alt: "developer portrait",
        },
        {
          src: "http://img.b2bpic.net/free-photo/workman-factory-writing-notes_1303-30620.jpg",
          alt: "product manager headshot",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
          alt: "cto headshot",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-confident-entrepreneur-standing-office-looking-camera_637285-2744.jpg",
          alt: "data scientist",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-working-it-security-data-monitoring-center_23-2151966688.jpg",
          alt: "engineer portrait",
        },
      ]}
      avatarText="Trusted by 10,000+ developers"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="About Nebula"
      title="Built for scale, speed, and reliability"
      description="We believe inference should be as simple as an API call. Nebula handles the hardware, scaling, and routing automatically, so you can focus on building."
      subdescription="With 150+ edge regions, we bring the computation to your users."
      imageSrc="http://img.b2bpic.net/free-photo/dedicated-businessman-working-late-laptop-dark-office_169016-54965.jpg"
      icon={Zap}
    />
  </div>

  <div id="feature" data-section="feature">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Sub-50ms Latency",
          description: "Global edge optimization ensuring lowest possible round-trip time.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-flowing-lines-floating-particles-design_1048-13620.jpg",
          },
          items: [
            {
              text: "Industry-leading speeds",
              icon: Zap,
            },
            {
              text: "Real-time responses",
              icon: Clock,
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/digital-dashboard_23-2151957114.jpg?_wi=2",
          imageAlt: "futuristic ai dashboard",
        },
        {
          title: "Model Agnostic",
          description: "Seamlessly integrate with GPT-4, Llama, Claude, and more via one endpoint.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg",
          },
          items: [
            {
              text: "Standardized API",
              icon: Box,
            },
            {
              text: "Multiple model support",
              icon: Layers,
            },
          ],
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/workman-factory-writing-notes_1303-30620.jpg?_wi=2",
          imageAlt: "futuristic ai dashboard",
        },
        {
          title: "Auto-scaling Infrastructure",
          description: "Hands-off scaling based on demand, handling millions of requests per second.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169845.jpg",
          },
          items: [
            {
              text: "Instant scale",
              icon: TrendingUp,
            },
            {
              text: "Reliable uptime",
              icon: Shield,
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg?_wi=2",
          imageAlt: "futuristic ai dashboard",
        },
      ]}
      title="Everything you need to ship AI"
      description="Powerful tools designed to accelerate your AI product journey from prototype to enterprise."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: Clock,
          title: "Average Latency",
          value: "42ms",
        },
        {
          id: "m2",
          icon: ShieldCheck,
          title: "Uptime",
          value: "99.99%",
        },
        {
          id: "m3",
          icon: Activity,
          title: "Daily Calls",
          value: "2.3B",
        },
        {
          id: "m4",
          icon: Globe,
          title: "Regions",
          value: "150+",
        },
      ]}
      title="Performance at scale"
      description="Proven numbers that matter for your production workload."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Alex Rivet",
          role: "CEO @ TechCorp",
          testimonial: "Nebula changed our inference game.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg",
        },
        {
          id: "t2",
          name: "Jordan Smith",
          role: "CTO @ Labs",
          testimonial: "The easiest deployment we've ever done.",
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-business-people-taking-selfie_23-2148911793.jpg",
        },
        {
          id: "t3",
          name: "Maria Garcia",
          role: "PM @ Growth",
          testimonial: "Our AI app feels instant for users.",
          imageSrc: "http://img.b2bpic.net/free-photo/female-executive-manager-team_1262-1470.jpg",
        },
        {
          id: "t4",
          name: "Leo Kim",
          role: "Dev @ XYZ",
          testimonial: "The observability tools are elite.",
          imageSrc: "http://img.b2bpic.net/free-photo/man-working-computer-with-data-analysis-security-screen_23-2151967413.jpg",
        },
        {
          id: "t5",
          name: "Sam Wong",
          role: "Lead @ Alpha",
          testimonial: "Incredible infrastructure, highly recommend.",
          imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",
        },
      ]}
      title="Trusted by developers"
      description="What our users say about the Nebula experience."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "p1",
          badge: "Hobby",
          price: "$0",
          subtitle: "For prototyping",
          features: [
            "1k calls/mo",
            "Community support",
            "Standard model",
          ],
        },
        {
          id: "p2",
          badge: "Pro",
          price: "$29",
          subtitle: "For production",
          features: [
            "1M calls/mo",
            "Priority support",
            "Advanced models",
          ],
        },
        {
          id: "p3",
          badge: "Enterprise",
          price: "Custom",
          subtitle: "For high volume",
          features: [
            "Unlimited calls",
            "Dedicated engineer",
            "Custom SLAs",
          ],
        },
      ]}
      title="Transparent pricing"
      description="Scale your production without hidden surprises."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Is Nebula safe?",
          content: "Yes, we prioritize security and compliance above all else.",
        },
        {
          id: "f2",
          title: "Do you support GPT-4?",
          content: "Yes, we support all major LLMs including the latest GPT models.",
        },
        {
          id: "f3",
          title: "Can I cancel anytime?",
          content: "Absolutely, our billing is flexible and transparent.",
        },
        {
          id: "f4",
          title: "How fast is latency?",
          content: "Our average latency is well below 50ms globally.",
        },
        {
          id: "f5",
          title: "Is there a free trial?",
          content: "Yes, our Hobby tier is free to get started.",
        },
        {
          id: "f6",
          title: "Need help?",
          content: "Reach out via our discord or contact support.",
        },
        {
          id: "f7",
          title: "Where is data stored?",
          content: "We offer multi-region storage to ensure compliance.",
        },
      ]}
      title="Common questions"
      description="Everything you need to know about Nebula."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient",
      }}
      tag="Contact"
      title="Ready to build the future?"
      description="Join thousands of developers already building with Nebula."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Nebula"
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Features",
              href: "#",
            },
            {
              label: "Pricing",
              href: "#",
            },
          ],
        },
        {
          title: "Resources",
          items: [
            {
              label: "Docs",
              href: "#",
            },
            {
              label: "Blog",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "X (Twitter)",
              href: "#",
            },
            {
              label: "Discord",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
