"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TextAbout from '@/components/sections/about/TextAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Clock, Heart, Users, DollarSign, Zap, Instagram, Phone, Mail } from "lucide-react";
import Link from "next/link";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/shop" },
            { name: "Sell With Us", id: "/sell-with-us" },
            { name: "Visit", id: "/visit" },
            { name: "FAQ", id: "/faq" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="La Loupe Vintage"
          bottomLeftText="San Diego, CA 92116"
          bottomRightText="619-578-2944"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Late 60s–90s Vintage. Buy. Sell. Trade."
          description="Curated, wearable vintage in San Diego—denim, tees, dresses, and the kind of pieces you'll actually live in. Swing by our shop on Adams Ave or browse our latest finds online."
          tag="Open Daily 12pm–7pm"
          tagIcon={Clock}
          background={{ variant: "glowing-orb" }}
          kpis={[
            { value: "60s–90s", label: "Eras Curated" },
            { value: "San Diego", label: "Local & Loved" },
            { value: "Buy • Sell • Trade", label: "Full Service" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-photo/image-dressing-room-with-male-clothes_74855-21545.jpg"
          imageAlt="La Loupe Vintage storefront with colorful vintage pieces"
          mediaAnimation="blur-reveal"
          buttons={[
            { text: "Shop Now", href: "/shop" },
            { text: "Sell With Us", href: "/sell-with-us" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Who We Are"
          tagIcon={Heart}
          title="We are so happy you want to sell with us. We are known for our curated collection of wearable casual vintage from the 1960s through the 1990s."
          useInvertedBackground={false}
          buttons={[
            { text: "Learn More About Selling", href: "/sell-with-us" },
            { text: "Visit Our Shop", href: "/visit" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="By The Numbers"
          description="Trusted by vintage lovers and sellers across San Diego"
          metrics={[
            {
              id: "1",              value: "500",              title: "Happy Sellers",              description: "Creators bringing their pieces to life",              icon: Users
            },
            {
              id: "2",              value: "30",              title: "Cash Payout",              description: "Fair value for your vintage finds",              icon: DollarSign
            },
            {
              id: "3",              value: "50",              title: "Trade Credit",              description: "Even better—put it towards new gems",              icon: Zap
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="How to Sell With Us"
          description="A simple, friendly process to get your vintage pieces into the hands of lovers who'll treasure them."
          tag="Three Easy Steps"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Book an Appointment",              description: "Schedule a time that works for you. We require appointments (one per week max). Most appointments are a week or more in advance. No same-day appointments.",              imageSrc: "https://img.b2bpic.net/free-vector/calendar-template-design_742173-22539.jpg?_wi=1"
            },
            {
              id: 2,
              title: "Bring Your Pieces",              description: "Up to 40 items per visit. Bring your best finds—denim, tees, dresses, jackets, anything wearable from the 60s–90s. We focus on pieces we know our customers love.",              imageSrc: "https://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48934.jpg?_wi=1"
            },
            {
              id: 3,
              title: "Get Paid or Trade",              description: "Receive 30% cash value or 50% trade credit toward items in our shop. Quick evaluation, fair pricing, and support for keeping vintage in circulation.",              imageSrc: "https://img.b2bpic.net/free-photo/overhead-shot-person-collecting-donations-church-black-white_181624-42670.jpg?_wi=1"
            }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <FeatureBento
          title="Shop Categories"
          description="Explore our curated collections organized by style and era."
          tag="Featured Categories"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          carouselMode="buttons"
          features={[
            {
              title: "Vintage Denim",              description: "Classic cuts and authentic washes from every decade",              bentoComponent: "globe"
            },
            {
              title: "Graphic Tees",              description: "Band tees, vintage prints, and retro vibes",              bentoComponent: "globe"
            },
            {
              title: "Dresses & Skirts",              description: "From mod 60s to 90s slip dresses",              bentoComponent: "globe"
            },
            {
              title: "Accessories",              description: "Bags, belts, scarves, and styling pieces",              bentoComponent: "globe"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="La Loupe Vintage is my favorite place to find one-of-a-kind pieces. The staff is so friendly and knowledgeable about each item. I've sold with them twice and felt totally valued. Highly recommend!"
          rating={5}
          author="Sarah, San Diego Vintage Lover"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/well-dressed-brunette-girl-with-stylish-makep-walking-around-town-outdoor-portrait-blissful-female-model-with-wavy-hairstyle_197531-11298.jpg", alt: "Customer Sarah" },
            { src: "https://img.b2bpic.net/free-photo/caucasian-woman-smiling-casual_53876-137684.jpg", alt: "Customer Emma" },
            { src: "https://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586551.jpg", alt: "Customer Maya" },
            { src: "https://img.b2bpic.net/free-photo/redhead-young-woman-with-hat-laughing-camera_23-2148183401.jpg", alt: "Customer Jordan" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="La Loupe Vintage"
          copyrightText="© 2025 La Loupe Vintage | Buy • Sell • Trade — Late 60s–90s Vintage"
          socialLinks={[
            { icon: Instagram, href: "https://www.instagram.com/laloupevintage/", ariaLabel: "Follow us on Instagram" },
            { icon: Phone, href: "tel:619-578-2944", ariaLabel: "Call us" },
            { icon: Mail, href: "mailto:info@laloupevintage.com", ariaLabel: "Email us" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}