"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumSizeLargeTitles"
        background="aurora"
        cardStyle="layered-gradient"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Menu",
          id: "#menu",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="CyberBites"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated",
      }}
      title="The Future of Fast Food, Served Faster."
      description="Experience culinary innovation through our AI-driven kitchen. Precision, quality, and lightning speed in every bite."
      buttons={[
        {
          text: "Explore Menu",
          href: "#menu",
        },
      ]}
      carouselItems={[
        {
          id: "1",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vzbv4i",
          imageAlt: "Gourmet Burger Tech",
        },
        {
          id: "2",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0xfrvj",
          imageAlt: "Futuristic Fries",
        },
        {
          id: "3",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fmd7wg",
          imageAlt: "Digital Beverage",
        },
        {
          id: "4",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mmvw5k",
          imageAlt: "Levitating Pizza",
        },
        {
          id: "5",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yzxzpg",
          imageAlt: "Innovation Bowls",
        },
        {
          id: "6",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xtd3yu",
          imageAlt: "Tech Dessert",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Precision Culinary Engineering"
      description={[
        "We reimagined the fast food experience from the ground up using advanced cooking automation and fresh-sourced ingredients.",
        "Our tech-forward kitchens ensure optimal quality and consistency every single time you order.",
        "Welcome to the next generation of dining, where quality meets incredible efficiency.",
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Precision Heating",
          description: "Automated thermal control for perfect textures.",
          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1pn4t3",
          },
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ae0kyy",
          },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vzbv4i",
          imageAlt: "futuristic burger neon",
        },
        {
          title: "Smart Ordering",
          description: "Seamless integration via our app for instant pickup.",
          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4qj3ut",
          },
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7mkrju",
          },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0xfrvj",
          imageAlt: "futuristic burger neon",
        },
        {
          title: "Fresh Sourced",
          description: "Local, high-quality ingredients processed by AI.",
          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hv4l90",
          },
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lpmy8c",
          },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fmd7wg",
          imageAlt: "futuristic burger neon",
        },
      ]}
      showStepNumbers={true}
      title="Smart Dining Innovation"
      description="Advanced systems built for maximum quality."
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Cyber Burger",
          price: "$12.99",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=26fp4d",
        },
        {
          id: "p2",
          name: "Circuit Chicken",
          price: "$10.49",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qdixu5",
        },
        {
          id: "p3",
          name: "Neon Tacos",
          price: "$8.99",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=spo328",
        },
        {
          id: "p4",
          name: "Zen Protein Bowl",
          price: "$14.99",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=akr3b3",
        },
        {
          id: "p5",
          name: "Data Fries",
          price: "$5.99",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=st1wp6",
        },
        {
          id: "p6",
          name: "Pixel Shake",
          price: "$6.49",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0am2ud",
        },
      ]}
      title="Our Signature Menu"
      description="Experience flavors engineered for ultimate satisfaction."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "2.5 min",
          title: "Avg Order Time",
          items: [
            "Real-time processing",
            "Automated kitchens",
          ],
        },
        {
          id: "m2",
          value: "99.8%",
          title: "Accuracy Rate",
          items: [
            "AI verification",
            "Precision assembly",
          ],
        },
        {
          id: "m3",
          value: "100%",
          title: "Freshness Rate",
          items: [
            "Local sourcing",
            "Just-in-time prep",
          ],
        },
      ]}
      title="Engineered Efficiency"
      description="Our operational speed outperforms standard standards."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      textboxLayout="default"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Alex R.",
          role: "Tech Lead",
          company: "DevGroup",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8z0727",
        },
        {
          id: "2",
          name: "Sarah L.",
          role: "Designer",
          company: "CreativeCo",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h6dn9t",
        },
        {
          id: "3",
          name: "Marcus B.",
          role: "Developer",
          company: "BuildLab",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7m1lgn",
        },
        {
          id: "4",
          name: "Emily D.",
          role: "Innovator",
          company: "FutureAI",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zrfanw",
        },
        {
          id: "5",
          name: "Kevin T.",
          role: "Engineer",
          company: "SystemsInc",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a1neqx",
        },
      ]}
      title="Future Fans"
      description="Don't just take our word for it."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Join the Movement"
      description="Partner with us or get updates on new tech locations."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
        },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sw3mkn"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Brand",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Menu",
          items: [
            {
              label: "Burgers",
              href: "#menu",
            },
            {
              label: "Beverages",
              href: "#menu",
            },
          ],
        },
      ]}
      logoText="CyberBites"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
