"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Droplet, Globe, Leaf, Sparkles, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="subtle-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Home", id: "/" },
        { name: "Shop", id: "/shop" },
        { name: "Mission", id: "/mission" },
        { name: "Dashboard", id: "/dashboard" },
        { name: "Contact", id: "/contact" },
      ]}
      brandName="SMILETABS"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{ variant: "sparkles-gradient" }}
      title="Clean Teeth. Clean Planet."
      description="A small tab, a big change. Experience the future of sustainable oral care with our premium natural formula."
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/male-product-photographer-doing-his-job-studio_23-2148970193.jpg", alt: "User 1" },
        { src: "http://img.b2bpic.net/free-photo/front-view-woman-working-as-photographer_23-2150506130.jpg", alt: "User 2" },
        { src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-outdoors-with-smartphone_23-2148613049.jpg", alt: "User 3" },
        { src: "http://img.b2bpic.net/free-photo/medium-shot-woman-decorating-home_23-2150633323.jpg", alt: "User 4" },
        { src: "http://img.b2bpic.net/free-photo/natural-products-assortment-high-angle_23-2149413892.jpg", alt: "User 5" },
      ]}
      buttons={[
        { text: "Shop Now", href: "/shop" },
        { text: "Learn More", href: "/mission" },
      ]}
      buttonAnimation="slide-up"
      marqueeItems={[
        { type: "text-icon", text: "100% Plastic Free", icon: Leaf },
        { type: "text-icon", text: "Cruelty Free", icon: Zap },
        { type: "text-icon", text: "TSA Approved", icon: Globe },
        { type: "text-icon", text: "Natural Ingredients", icon: Droplet },
        { type: "text-icon", text: "Eco-Luxury Design", icon: Sparkles },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Why Choose SmileTabs?"
      description={[
        "Conventional toothpaste tubes contribute to millions of tons of plastic waste annually. We created a better path.",        "Our formula is 100% plastic-free, cruelty-free, and travel-ready."
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { title: "Plastic-Free", description: "No more tubes.", bentoComponent: "reveal-icon", icon: Leaf },
        { title: "Cruelty-Free", description: "Vegan friendly.", bentoComponent: "reveal-icon", icon: Zap },
        { title: "Travel Safe", description: "TSA approved.", bentoComponent: "reveal-icon", icon: Globe },
      ]}
      title="Nature-Inspired Innovation"
      description="Sustainable performance in every single tab."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        { id: "1", name: "Mint Signature", price: "Rs 4000", variant: "Tabs", imageSrc: "http://img.b2bpic.net/free-photo/eco-products-arrangement-high-angle_23-2149413874.jpg" },
        { id: "2", name: "Strawberry Sweet", price: "Rs 4500", variant: "Tabs", imageSrc: "http://img.b2bpic.net/free-photo/antique-silver-scissors-wrapped-present-with-leaves-tag-green-background_23-2147924471.jpg" },
        { id: "3", name: "Zesty Orange", price: "Rs 4500", variant: "Tabs", imageSrc: "http://img.b2bpic.net/free-photo/decorative-present-boxes-white-background_181624-23440.jpg" },
        { id: "4", name: "Crisp Apple", price: "Rs 4500", variant: "Tabs", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-eco-products-assortment_23-2149413884.jpg" },
        { id: "5", name: "Bamboo Brush", price: "Rs 500", variant: "Accessory", imageSrc: "http://img.b2bpic.net/free-photo/top-view-boards-mdf-material_23-2149418566.jpg" },
        { id: "6", name: "Travel Case", price: "Rs 800", variant: "Accessory", imageSrc: "http://img.b2bpic.net/free-photo/top-view-decoration-with-boxes-nuts_23-2148325650.jpg" },
      ]}
      title="Our Signature Collection"
      description="Premium toothpaste tabs for every lifestyle."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "The best switch I've made this year!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153828.jpg" },
        { id: "2", name: "Mark D.", handle: "@markd", testimonial: "Convenient, tasty, and eco-friendly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-holding-speech-bubble-presenting-against-white-background_23-2147890190.jpg" },
        { id: "3", name: "Ayesha K.", handle: "@ayeshak", testimonial: "My teeth feel cleaner than ever.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/horizontal-portrait-beautiful-positive-young-european-female-blue-shirt-dress-relaxing-home-looking-front-with-easy-carefree-smile_343059-3894.jpg" },
        { id: "4", name: "Liam T.", handle: "@liamt", testimonial: "Finally a plastic-free toothpaste that works.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-camera-red-background-high-quality-photo_114579-60919.jpg" },
        { id: "5", name: "Emma R.", handle: "@emmar", testimonial: "Amazing product, highly recommended.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-photographer-taking-pictures-with-compact-camera-grey-background_613910-9350.jpg" },
      ]}
      showRating={true}
      title="Loved by the Community"
      description="See why thousands have switched to a better dental routine."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoText="SMILETABS"
      columns={[
        { items: [{ label: "All Products", href: "/shop" }, { label: "New Arrivals", href: "/shop" }] },
        { items: [{ label: "Dashboard", href: "/dashboard" }, { label: "My Account", href: "/account" }] },
        { items: [{ label: "FAQ", href: "/faq" }, { label: "Contact", href: "/contact" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}