"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { Award, CheckCircle, Droplet, FileText, Grid, Heart, MessageCircle, ShieldCheck, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="noise"
        cardStyle="gradient-radial"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "About Us",
          id: "/about",
        },
        {
          name: "Services",
          id: "/services",
        },
        {
          name: "Gallery",
          id: "/gallery",
        },
        {
          name: "Reviews",
          id: "/reviews",
        },
        {
          name: "FAQ",
          id: "/faq",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      brandName="TILES CONNECT"
      button={{
        text: "Get Free Estimate",
        href: "/contact",
      }}
    />
  </div>

  <div id="services-list" data-section="services-list">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "srv1",
          name: "Bathroom Renovations",
          imageSrc: "http://img.b2bpic.net/free-photo/tidy-bathroom-with-shiny-tiles_1203-1501.jpg",
          imageAlt: "Complete bathroom transformation",
        },
        {
          id: "srv2",
          name: "Shower Tile Installation",
          imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-bathroom_1232-3402.jpg",
          imageAlt: "Custom shower build for durability and luxury",
        },
        {
          id: "srv3",
          name: "Kitchen Backsplashes",
          imageSrc: "http://img.b2bpic.net/free-photo/blue-kitchen-fronts-marble-backsplash-wall-black-premium-faucet_169016-69143.jpg",
          imageAlt: "Modern kitchen backsplash designs",
        },
        {
          id: "srv4",
          name: "Floor Tile Installation",
          imageSrc: "http://img.b2bpic.net/free-photo/gray-brick-wall-background_1372-466.jpg",
          imageAlt: "Porcelain, ceramic, and marble floor tiling",
        },
        {
          id: "srv5",
          name: "Porcelain Slab Installation",
          imageSrc: "http://img.b2bpic.net/free-photo/elegant-white-patterned-wall-mockup-with-marble-floor_53876-106167.jpg",
          imageAlt: "Luxury large-format porcelain slab installation",
        },
        {
          id: "srv6",
          name: "Entryways & Feature Walls",
          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-art-deco-premium-pattern_23-2149150545.jpg",
          imageAlt: "Stunning tiled entryways and feature walls",
        },
        {
          id: "srv7",
          name: "Herringbone & Custom Patterns",
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-gray-grunge-cement-wall-texture_24972-731.jpg",
          imageAlt: "Intricate herringbone and custom tile layouts",
        },
      ]}
      title="Luxury Tile Installation Services"
      description="From complete bathroom renovations to custom backsplashes, our services enhance the beauty and value of your home."
    />
  </div>

  <div id="services-credibility" data-section="services-credibility">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Licensed & Professional",
          description: "Fully licensed and insured experts providing peace of mind.",
          bentoComponent: "reveal-icon",
          icon: ShieldCheck,
          imageSrc: "http://img.b2bpic.net/free-photo/small-bathroom-with-modern-style-ai-generated_23-2150694814.jpg",
          imageAlt: "Small bathroom with modern style ai generated",
        },
        {
          title: "Detailed Written Quotes",
          description: "Transparent pricing with no hidden fees, detailed upfront.",
          bentoComponent: "reveal-icon",
          icon: FileText,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-wood-stone-white-bathroom_105762-2136.jpg?_wi=4",
          imageAlt: "Small bathroom with modern style ai generated",
        },
        {
          title: "Clean & Respectful Worksites",
          description: "We maintain tidy and organized work environments.",
          bentoComponent: "reveal-icon",
          icon: CheckCircle,
          imageSrc: "http://img.b2bpic.net/free-photo/blue-fronts-gas-cooktop-marble-backsplash_169016-69140.jpg?_wi=4",
          imageAlt: "Small bathroom with modern style ai generated",
        },
        {
          title: "Premium Materials & Installation Methods",
          description: "Only the best for durability and a flawless finish.",
          bentoComponent: "reveal-icon",
          icon: Sparkles,
          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-woman_23-2151020317.jpg?_wi=4",
          imageAlt: "Small bathroom with modern style ai generated",
        },
        {
          title: "Exceptional Communication",
          description: "Stay informed with clear, consistent updates throughout your project.",
          bentoComponent: "reveal-icon",
          icon: MessageCircle,
          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-file-posing-office_23-2147668798.jpg?_wi=3",
          imageAlt: "Small bathroom with modern style ai generated",
        },
        {
          title: "Precision Tile Layouts",
          description: "Meticulous planning for perfectly aligned tiles every time.",
          bentoComponent: "reveal-icon",
          icon: Grid,
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-white-cabbage-center-green-hot-peppers_114579-82724.jpg?_wi=3",
          imageAlt: "Small bathroom with modern style ai generated",
        },
        {
          title: "Waterproofing & Shower Systems",
          description: "Built to industry standards for long-lasting protection.",
          bentoComponent: "reveal-icon",
          icon: Droplet,
          imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetics-bag-still-life_23-2151141481.jpg?_wi=3",
          imageAlt: "Small bathroom with modern style ai generated",
        },
        {
          title: "20-Year Warranty Available On Select Projects",
          description: "Confidence in our work, backed by an extended warranty.",
          bentoComponent: "reveal-icon",
          icon: Award,
          imageSrc: "http://img.b2bpic.net/free-photo/elegant-bathtub-with-bath-elements_23-2148147505.jpg?_wi=3",
          imageAlt: "Small bathroom with modern style ai generated",
        },
        {
          title: "Hundreds Of Happy Homeowners",
          description: "A testament to our quality and customer satisfaction.",
          bentoComponent: "reveal-icon",
          icon: Heart,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-color-palette-used-by-interior-designer_23-2150334536.jpg?_wi=3",
          imageAlt: "Small bathroom with modern style ai generated",
        },
      ]}
      title="Our Commitment to Quality"
      description="Experience the Tiles Connect difference with our unwavering dedication to your satisfaction and project excellence."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/stacked-bundle-amaranth-leaves-marble-surface_114579-54865.jpg?_wi=3"
      imageAlt="Luxury tile pattern background"
      logoText="TILES CONNECT"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "Home",
              href: "/",
            },
            {
              label: "About Us",
              href: "/about",
            },
            {
              label: "Services",
              href: "/services",
            },
            {
              label: "Gallery",
              href: "/gallery",
            },
          ],
        },
        {
          title: "Resources",
          items: [
            {
              label: "Reviews",
              href: "/reviews",
            },
            {
              label: "FAQ",
              href: "/faq",
            },
            {
              label: "Contact",
              href: "/contact",
            },
          ],
        },
        {
          title: "Service Areas",
          items: [
            {
              label: "Mississauga",
              href: "#",
            },
            {
              label: "Oakville",
              href: "#",
            },
            {
              label: "Brampton",
              href: "#",
            },
            {
              label: "Toronto",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Tiles Connect. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
