"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLargeSizeMediumTitles"
        background="none"
        cardStyle="gradient-bordered"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "about" },
        { name: "Portfolio", id: "portfolio" },
        { name: "Pricing", id: "pricing" },
      ]}
      brandName="SmallBiz Sites"
      button={{ text: "Get Started", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      title="Simple Websites for Small Businesses"
      description="We build clean, simple websites that help small businesses get more customers."
      testimonials={[
        { name: "John Doe", handle: "Barber Shop", testimonial: "Amazing work, my bookings increased immediately!", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kdd0n8&_wi=1", imageAlt: "laptop website mockup" },
        { name: "Jane Smith", handle: "Cafe", testimonial: "Simple, clean, and delivered fast.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hlw776&_wi=1", imageAlt: "laptop website mockup" },
        { name: "Mike Ross", handle: "Cleaning Co", testimonial: "Great investment for our business growth.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8tqmhb&_wi=1", imageAlt: "laptop website mockup" },
        { name: "Sarah Lee", handle: "Bakery", testimonial: "Easy to use and perfectly on brand.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mveseo&_wi=1", imageAlt: "laptop website mockup" },
        { name: "Tom Cook", handle: "FixIt", testimonial: "Highly recommended for local businesses.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=axx006&_wi=1", imageAlt: "laptop website mockup" },
      ]}
      buttons={[{ text: "View Our Work", href: "#portfolio" }]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kdd0n8&_wi=2"
      imageAlt="laptop website mockup"
      avatars={[
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hlw776", alt: "Client 1" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zgxjq7", alt: "Client 2" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmlis0", alt: "Client 3" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n7inle", alt: "Client 4" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kdd0n8", alt: "Client 5" },
      ]}
      avatarText="Trusted by 50+ local businesses"
      marqueeItems={[
        { type: "text", text: "Professional" },
        { type: "text", text: "Fast" },
        { type: "text", text: "Responsive" },
        { type: "text", text: "SEO Friendly" },
        { type: "text", text: "High Conversion" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={true}
      title="About Our Team"
      description={[
        "Hi, we create simple and professional websites for small businesses in the USA.",        "Our goal is to help local businesses get more clients with a clean online presence."]}
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Barbershop Website", price: "Modern design for a local barbershop", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hlw776&_wi=2" },
        { id: "p2", name: "Restaurant Website", price: "Clean layout with menu and photos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8tqmhb&_wi=2" },
        { id: "p3", name: "Cleaning Service Website", price: "Professional design focused on leads", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mveseo&_wi=2" },
        { id: "p4", name: "Bakery Portal", price: "Online order menu and contact", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zgxjq7" },
        { id: "p5", name: "Local Consultant", price: "Personal brand website", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=axx006&_wi=2" },
        { id: "p6", name: "Pet Groomer", price: "Booking and service info", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8kjel3" },
      ]}
      title="Our Work"
      description="A selection of our latest projects for local businesses."
    />
  </div>

  <div id="benefits" data-section="benefits">
      <FeatureCardNine
      animationType="opacity"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        { title: "Simple Design", description: "Professional and clean layouts.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmlis0" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fm2gnp" } },
        { title: "Fast Delivery", description: "Get your site running in days.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wj7mw3" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jbp04v" } },
        { title: "One-time Payment", description: "No hidden subscription fees.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vqpnxf" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n7inle" } },
      ]}
      showStepNumbers={true}
      title="Why Choose Us?"
      description="Professional web solutions designed to scale your business."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",          title: "Web Starter",          price: "$300",          period: "once",          features: ["Responsive Design", "Basic SEO", "Contact Form", "Mobile Friendly"],
          button: { text: "Choose Plan", href: "#contact" },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hlw776&_wi=3",          imageAlt: "barbershop interior modern"
        },
        {
          id: "standard",          title: "Business Pro",          price: "$500",          period: "once",          features: ["Everything in Starter", "Premium Hosting", "Fast Loading", "Analytics Setup"],
          button: { text: "Choose Plan", href: "#contact" },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kdd0n8&_wi=3",          imageAlt: "barbershop interior modern"
        },
        {
          id: "custom",          title: "Custom Solution",          price: "Custom",          period: "quote",          features: ["Full E-commerce", "Booking System", "Advanced SEO", "Ongoing Support"],
          button: { text: "Request Quote", href: "#contact" },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8tqmhb&_wi=3",          imageAlt: "barbershop interior modern"
        },
      ]}
      title="Simple Pricing"
      description="Transparent investment for your business."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "How long does it take?", content: "Most websites are delivered within 5-7 business days." },
        { id: "f2", title: "Do I have to pay monthly?", content: "No, we offer a one-time payment model for web design." },
        { id: "f3", title: "Can I edit the site myself?", content: "Yes, we provide easy instructions for basic updates." },
      ]}
      title="Common Questions"
      description="Everything you need to know about our process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      tag="Let's Talk"
      title="Get Your Website Today"
      description="Ready to boost your clients? Contact us today via WhatsApp or email."
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0agefi"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        { title: "Services", items: [{ label: "Web Design", href: "#" }, { label: "SEO", href: "#" }] },
        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#portfolio" }] },
        { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "WhatsApp 1", href: "https://wa.me/9999490647" }, { label: "WhatsApp 2", href: "https://wa.me/9997664077" }] },
      ]}
      bottomLeftText="© 2024 SmallBiz Sites. All rights reserved."
      bottomRightText="WhatsApp: 9999490647"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}