"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="grid"
        cardStyle="gradient-radial"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Products",          id: "catalog"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="OrderPro"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "plain"}}
      title="Seamless Ordering, Instant Results."
      description="Experience a faster way to order your favorite products with our streamlined system. Simply browse, add, and complete your order via WhatsApp in seconds."
      buttons={[
        {
          text: "Browse Catalog",          href: "#catalog"},
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/e-banking-payment-financial-connection-laptop_53876-26292.jpg",          imageAlt: "Dashboard View"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-happy-woman-using-digital-tablet-while-making-bruschetta-kitchen_637285-5850.jpg",          imageAlt: "Tablet Ordering"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-digital-with-modern-flowing-particles_1048-13765.jpg",          imageAlt: "Digital Flow"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/e-commerce-shop-online-homepage-sale-concept_53876-120965.jpg",          imageAlt: "E-commerce Shop Online Homepage Sale Concept"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/food-order-pizza-online-internet-concept_53876-124428.jpg",          imageAlt: "Food Order Pizza Online Internet Concept"},
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="catalog" data-section="catalog">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="split-actions"
      buttons={[{ text: "Select Options" }]}
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "1",          brand: "TechPro",          name: "Premium Gadget",          price: "$129",          rating: 5,
          reviewCount: "120",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-boards-mdf-material_23-2149418580.jpg"},
        {
          id: "2",          brand: "DesignCo",          name: "Creative Suite",          price: "$89",          rating: 4,
          reviewCount: "85",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-stylish-white-suit-sits-white-cube-gallery_8353-10744.jpg"},
        {
          id: "3",          brand: "SmartWear",          name: "Fitness Tracker",          price: "$199",          rating: 5,
          reviewCount: "210",          imageSrc: "http://img.b2bpic.net/free-photo/blue-model-career-kit-arrangement_23-2150084004.jpg"},
        {
          id: "4",          brand: "HomeGear",          name: "Coffee Maker",          price: "$150",          rating: 4,
          reviewCount: "56",          imageSrc: "http://img.b2bpic.net/free-photo/geometric-paper-shapes-coral-background_23-2149588158.jpg"},
        {
          id: "5",          brand: "AudioTech",          name: "Wireless Buds",          price: "$99",          rating: 5,
          reviewCount: "150",          imageSrc: "http://img.b2bpic.net/free-photo/view-matchsticks-with-geometric-shapes_23-2149600203.jpg"},
        {
          id: "6",          brand: "VisionPlus",          name: "Smart Glasses",          price: "$299",          rating: 4,
          reviewCount: "45",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722711.jpg"},
      ]}
      title="Explore Our Catalog"
      description="Browse our curated selection of high-quality products and services."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          title: "Add to Cart",          author: "Workflow",          description: "Seamless product management.",          tags: [
            "UX"],
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722708.jpg"},
        {
          id: "f2",          title: "Instant Calc",          author: "System",          description: "Real-time totals calculation.",          tags: [
            "Tech"],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-holding-paper_23-2148889787.jpg"},
        {
          id: "f3",          title: "WhatsApp Order",          author: "Connect",          description: "Send directly to owner.",          tags: [
            "API"],
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-talking-phone_23-2149361903.jpg"},
      ]}
      title="Key Ordering Features"
      description="Our platform is built for speed, security, and simplicity, ensuring your ordering process is efficient."
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Designed for Efficiency"
      description="We help businesses digitize their sales process with custom ordering solutions that focus on conversion."
      metrics={[
        {
          value: "100%",          title: "Efficiency Rate"},
        {
          value: "5k+",          title: "Orders Processed"},
        {
          value: "24/7",          title: "System Support"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-smiley-people-work_23-2149097921.jpg?_wi=1"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "2.5s",          description: "Order Time"},
        {
          id: "m2",          value: "99.9%",          description: "Uptime"},
        {
          id: "m3",          value: "120+",          description: "Clients Served"},
      ]}
      title="System Performance"
      description="Tracking high-impact metrics to ensure your shop stays competitive."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "How do I order?",          content: "Browse and add items to cart."},
        {
          id: "q2",          title: "WhatsApp enabled?",          content: "Yes, orders go straight to WhatsApp."},
        {
          id: "q3",          title: "Is it mobile-friendly?",          content: "Completely responsive and mobile optimized."},
      ]}
      title="Ordering Queries"
      description="Have questions about our ordering system?"
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/close-up-smiley-people-work_23-2149097921.jpg?_wi=2"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "John Doe",          imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blonde-woman-wearing-white-shirt-standing-co-working-space-leaning-desk_74855-15151.jpg"},
        {
          id: "2",          name: "Jane Smith",          imageSrc: "http://img.b2bpic.net/free-photo/happy-coworkers-holding-tablets-showing-thumbs-up-stairs_1262-20218.jpg"},
        {
          id: "3",          name: "Michael Lee",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg"},
        {
          id: "4",          name: "Sarah Connor",          imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg"},
        {
          id: "5",          name: "David Brown",          imageSrc: "http://img.b2bpic.net/free-photo/men-giving-high-five_23-2147710856.jpg"},
      ]}
      cardTitle="Client Feedback"
      cardTag="Testimonials"
      cardAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Finalize"
      title="Complete Your Order"
      description="Enter your details to finalize your request and we will send it to WhatsApp."
      imageSrc="http://img.b2bpic.net/free-photo/african-american-distribution-warehouse-worker-arm-scanning-box-code_482257-77690.jpg"
      mediaPosition="right"
      inputPlaceholder="Enter your WhatsApp number"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Links",          items: [
            {
              label: "Browse",              href: "#catalog"},
            {
              label: "About",              href: "#about"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
      ]}
      logoText="OrderPro"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}