"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import BlogCardSeven from '@/components/sections/blog/BlogCardSeven';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Linkedin, Mail, Twitter } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="noiseGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="minimal"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="StepStyle"
          navItems={[
            { name: "Shop", id: "shop" },
            { name: "Collections", id: "collections" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Browse Shoes",
            href: "shop"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitLarge
          title="Step Into Style"
          description="Discover our premium collection of shoes for every occasion. From casual comfort to bold statement pieces, find your perfect fit with exclusive designs and trending styles."
          tag="Shoe Store"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045280682-cq1jxn74.jpg"
          imageAlt="Premium shoe collection showcase"
          buttons={[
            { text: "Shop Now", href: "shop" },
            { text: "View Collections", href: "collections" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Comfort meets " },
            { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766139083006-v50xgv4n.jpg", alt: "Fashion footwear" },
            { type: "text", content: " timeless style" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Explore Our Story", href: "#" }
          ]}
        />
      </div>

      <div id="shop" data-section="shop">
        <ProductCardSix
          title="Featured Shoes"
          description="Hand-picked styles from our latest collections. Featuring premium sneakers, elegant dress shoes, comfortable everyday wear, and exclusive limited editions."
          tag="New Arrivals"
          products={[
            {
              id: "1",
              name: "Urban Velocity Sneakers",
              price: "$129.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045810718-px7f0did.jpg",
              imageAlt: "Urban Velocity Sneakers"
            },
            {
              id: "2",
              name: "Classic Leather Oxford",
              price: "$189.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045810718-px7f0did.jpg",
              imageAlt: "Classic Leather Oxford"
            },
            {
              id: "3",
              name: "Comfort Cloud Slip-Ons",
              price: "$99.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045810718-px7f0did.jpg",
              imageAlt: "Comfort Cloud Slip-Ons"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEight
          title="Trusted by thousands of shoe lovers worldwide"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045843364-dsl3ehhb.jpg"
          imageAlt="Customer satisfaction metrics"
          metrics={[
            { id: "1", value: "50K+", title: "Happy Customers" },
            { id: "2", value: "1000+", title: "Shoe Styles" },
            { id: "3", value: "4.9/5", title: "Average Rating" },
            { id: "4", value: "24/7", title: "Customer Support" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet the passionate team behind StepStyle"
          tag="Our Team"
          members={[
            {
              id: "1",
              name: "Emma Richardson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045843822-th04bajv.jpg",
              imageAlt: "Emma Richardson"
            },
            {
              id: "2",
              name: "Marcus Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140102492-vbld5jll.jpg",
              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",
              name: "Sofia Martinez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045843571-6vu2tgtk.jpg",
              imageAlt: "Sofia Martinez"
            }
          ]}
          memberVariant="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardFive
          title="What Our Customers Love"
          description="Read reviews from customers who found their perfect shoes with us"
          tag="Customer Reviews"
          testimonials={[
            {
              id: "1",
              name: "Jessica Chen, Product Designer",
              date: "Date: 15 November 2024",
              title: "Best comfort and style combo",
              quote: "I've tried many shoe brands, but StepStyle's collection stands out. The quality is exceptional and the designs are truly unique. I get compliments every time I wear them!",
              tag: "Verified Buyer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735982136-fwsz9f0i.jpg",
              avatarAlt: "Jessica Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
              imageAlt: "Customer review image"
            },
            {
              id: "2",
              name: "Michael Torres, Architect",
              date: "Date: 20 October 2024",
              title: "Premium quality at fair prices",
              quote: "Finally found a shoe store that delivers both style and substance. The craftsmanship is evident in every pair. Shipping was fast and customer service was incredibly helpful.",
              tag: "Verified Buyer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006149588-l9dz2o1t.jpg",
              avatarAlt: "Michael Torres",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
              imageAlt: "Customer review image"
            },
            {
              id: "3",
              name: "Sarah Williams, Fashion Blogger",
              date: "Date: 08 September 2024",
              title: "My go-to shoe destination",
              quote: "StepStyle has become my favorite place to shop for shoes. The variety is impressive, and everything I've purchased fits perfectly. Their return process is hassle-free!",
              tag: "Verified Buyer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg",
              avatarAlt: "Sarah Williams",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
              imageAlt: "Customer review image"
            },
            {
              id: "4",
              name: "David Kim, Fitness Trainer",
              date: "Date: 25 July 2024",
              title: "Comfortable for all-day wear",
              quote: "As someone who's on their feet all day, comfort is everything. StepStyle's athletic and everyday shoes are game-changers. My feet thank me every single day!",
              tag: "Verified Buyer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184703623-6mn9btum.jpg",
              avatarAlt: "David Kim",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
              imageAlt: "Customer review image"
            },
            {
              id: "5",
              name: "Lisa Anderson, Marketing Executive",
              date: "Date: 12 June 2024",
              title: "Exceeded my expectations",
              quote: "I was skeptical about buying shoes online, but StepStyle made it easy. Their sizing guide is accurate, and the quality is better than what I expected. Definitely coming back!",
              tag: "Verified Buyer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735982136-fwsz9f0i.jpg",
              avatarAlt: "Lisa Anderson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
              imageAlt: "Customer review image"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="collections" data-section="collections">
        <BlogCardSeven
          title="Shoe Collections"
          description="Explore our curated collections featuring the latest trends, timeless classics, and exclusive designer collaborations"
          tag="Collections"
          blogs={[
            {
              id: "1",
              title: "Summer Sneaker Collection 2025",
              date: "18 January 2025",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767043239120-nvo76k90.jpg",
              imageAlt: "Summer sneaker styles"
            },
            {
              id: "2",
              title: "Luxury Dress Shoes for Every Occasion",
              date: "05 January 2025",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767043239120-nvo76k90.jpg",
              imageAlt: "Luxury dress shoe collection"
            },
            {
              id: "3",
              title: "Comfort Tech: Innovation Meets Style",
              date: "15 December 2024",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767043239120-nvo76k90.jpg",
              imageAlt: "Comfort technology shoes"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get In Touch"
          description="Have questions about our shoes or need sizing help? We'd love to hear from you. Fill out the form and our team will respond within 24 hours."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "subject", type: "text", placeholder: "Subject", required: true },
            { name: "shoe_interest", type: "text", placeholder: "What shoe are you interested in?", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us how we can help...",
            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005005544-ohrshy5z.jpg"
          imageAlt="Customer support"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="StepStyle"
          columns={[
            {
              title: "Shop",
              items: [
                { label: "New Arrivals", href: "shop" },
                { label: "Collections", href: "collections" },
                { label: "Best Sellers", href: "shop" },
                { label: "Sale", href: "shop" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "Size Guide", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "Track Order", href: "#" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "about" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Mail, href: "mailto:hello@stepstyle.com", ariaLabel: "Email" }
          ]}
          copyrightText="© StepStyle, Inc. 2025. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}