"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumLarge"
        background="fluid"
        cardStyle="inset"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Products",
          id: "products",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Oakland Nails & Beauty"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{
        variant: "gradient-bars",
      }}
      logoText="Oakland Nails & Beauty Supply"
      description="Providing high-quality beauty supplies to professionals and enthusiasts in Oakland. Explore our curated selection of nail care, tools, and salon essentials."
      buttons={[
        {
          text: "Shop Products",
          href: "#products",
        },
        {
          text: "Visit Us",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150217972.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "Our Mission for Quality",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/abstract-blur-bokeh-defocused-shopping-mall-interior-department-store_1203-9463.jpg",
          alt: "Beauty Supply About",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          label: "Quality",
          title: "Premium Products",
          items: [
            "Certified nail polishes",
            "Durable tools",
            "Safe chemicals",
          ],
        },
        {
          id: "f2",
          label: "Support",
          title: "Expert Advice",
          items: [
            "Technical consultations",
            "Product tutorials",
            "After-sales support",
          ],
        },
        {
          id: "f3",
          label: "Range",
          title: "Complete Inventory",
          items: [
            "Nail supplies",
            "Skincare essentials",
            "Salon equipment",
          ],
        },
      ]}
      title="Why Choose Us"
      description="We are committed to providing only the best tools and supplies to our professional community."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Gel Polish Set",
          price: "$15.00",
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-beauty-products-spreading-out_23-2151345072.jpg",
        },
        {
          id: "p2",
          name: "Skincare Serum",
          price: "$28.00",
          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-tube-product-with-gift-box-balloons-black-background_187299-46830.jpg",
        },
        {
          id: "p3",
          name: "Nail Art Decals",
          price: "$5.00",
          imageSrc: "http://img.b2bpic.net/free-photo/nail-art-with-tools-concept_23-2150455787.jpg",
        },
        {
          id: "p4",
          name: "Professional UV Lamp",
          price: "$89.00",
          imageSrc: "http://img.b2bpic.net/free-photo/nail-art-professional-working-client-nails_23-2149265966.jpg",
        },
        {
          id: "p5",
          name: "Eyelash Extensions",
          price: "$22.00",
          imageSrc: "http://img.b2bpic.net/free-photo/makeup-brushes-near-carnations-bag_23-2147742646.jpg",
        },
        {
          id: "p6",
          name: "Professional Brush Set",
          price: "$45.00",
          imageSrc: "http://img.b2bpic.net/free-photo/makeup-brushes-kit-bag_23-2147742644.jpg",
        },
      ]}
      title="Top Selling Products"
      description="Browse our hand-picked selection of beauty supply essentials."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          badge: "Entry",
          price: "$10/mo",
          subtitle: "For personal use",
          buttons: [
            {
              text: "Select",
              href: "#",
            },
          ],
          features: [
            "10% off storewide",
            "Monthly newsletter",
          ],
        },
        {
          id: "pro",
          badge: "Pro",
          price: "$49/mo",
          subtitle: "For professionals",
          buttons: [
            {
              text: "Select",
              href: "#",
            },
          ],
          features: [
            "25% off storewide",
            "Priority restocking",
            "Technical support",
          ],
        },
      ]}
      title="Membership Tiers"
      description="Unlock exclusive savings and benefits for salon owners."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Sarah J.",
          imageSrc: "http://img.b2bpic.net/free-photo/positive-satisfied-customer-making-ok-gesture_74855-3646.jpg",
        },
        {
          id: "t2",
          name: "Michael K.",
          imageSrc: "http://img.b2bpic.net/free-photo/gardening-tools_23-2148013407.jpg",
        },
        {
          id: "t3",
          name: "Emily D.",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-with-brushes_23-2147611454.jpg",
        },
        {
          id: "t4",
          name: "David L.",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-holding-smartphone_23-2149721979.jpg",
        },
        {
          id: "t5",
          name: "Jane M.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg",
        },
      ]}
      cardTitle="Client Stories"
      cardAnimation="slide-up"
      cardTag="Testimonials"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Get In Touch"
      description="Have questions about our products or membership plans? We're here to help."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Email",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Message",
      }}
      imageSrc="http://img.b2bpic.net/free-photo/square-front-modern-office-buildings_1359-867.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Products",
          items: [
            {
              label: "Nail Supplies",
              href: "#products",
            },
            {
              label: "Salon Equipment",
              href: "#products",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 Oakland Nails & Beauty Supply."
      bottomRightText="All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
