"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { CheckCircle, Facebook, Heart, Image, Instagram, Linkedin, Quote, Send, Sparkles, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="medium"
      background="fluid"
      cardStyle="solid"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Business Colors"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Work", id: "work" },
            { name: "Process", id: "process" },
            { name: "Reviews", id: "reviews" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{ text: "Get a Quote", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Your Brand, On Every Thread."
          description="Design, embroidery, heat printing, and custom apparel made simple—premium quality, fair pricing, and fast turnaround."
          tag="Premium Branding Solutions"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Get a Quote", href: "contact" },
            { text: "See Services", href: "services" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/details-blue-blouse-made-out-silk_23-2148237592.jpg",              imageAlt: "Close-up of professional embroidery stitching on custom apparel"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-52027.jpg",              imageAlt: "Vibrant heat-printed design on premium tee shirt"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/shirts-hanger-shop_1398-2436.jpg",              imageAlt: "Clean screen-printed graphic on bulk order of apparel"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-vector/love-post-stamp_1416-1154.jpg",              imageAlt: "Professional logo design and branding mockup"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/towels-shelf-home-goods-store_169016-50236.jpg",              imageAlt: "Branded towels and promotional merchandise items"
            }
          ]
          ariaLabel="Hero section showcasing Business Colors apparel and branding services"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Loved by local businesses, teams, and organizations"
          description="See what our customers have to say about quality, speed, and partnership."
          tag="Customer Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          names={[
            "Quality Designs",            "Fast Turnaround",            "Great Pricing",            "Customer-First Proofing",            "Always Punctual",            "Reliable Partner",            "Premium Results",            "Easy to Work With"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={50}
          showCard={true}
          ariaLabel="Social proof section displaying customer testimonial themes"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardMedia
          title="Everything you need to look like a brand"
          description="From logo design to finished uniforms—one team, one smooth process."
          tag="Service Offerings"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: "embroidery",              title: "Embroidery",              description: "Clean, durable, professional. Perfect for polos, hats, jackets, uniforms.",              tag: "Decoration Method",              imageSrc: "http://img.b2bpic.net/free-photo/female-business-owner-working_23-2148828308.jpg",              imageAlt: "Professional embroidery machine creating custom stitching designs"
            },
            {
              id: "heat-printing",              title: "Heat Printing",              description: "Bold graphics, names/numbers, quick turnaround. Great for teams and events.",              tag: "Fast Turnaround",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-screen-printing_1163-2777.jpg",              imageAlt: "Heat press machine applying vinyl transfer to apparel"
            },
            {
              id: "screen-printing",              title: "Screen Printing",              description: "Classic tees and bulk runs with crisp results.",              tag: "Bulk Orders",              imageSrc: "http://img.b2bpic.net/free-photo/person-holding-brown-wooden-board_250224-22.jpg",              imageAlt: "Screen printing equipment with precision alignment"
            },
            {
              id: "design-logos",              title: "Design + Logos",              description: "Professional design for apparel, marketing, and advertising materials.",              tag: "Custom Design",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-designing-websites_23-2149930944.jpg",              imageAlt: "Graphic designer creating custom brand logo and designs"
            },
            {
              id: "branded-items",              title: "Branded Items",              description: "Towels, gifts, promotional gear, and special requests—tell us what you're imagining.",              tag: "Special Projects",              imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack_23-2148837297.jpg",              imageAlt: "Collection of branded merchandise and custom promotional items"
            }
          ]}
          animationType="slide-up"
          buttons={[
            { text: "Get a Quote", href: "contact" }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Service offerings and decoration methods"
        />
      </div>

      <div id="why-us" data-section="why-us">
        <TestimonialAboutCard
          tag="Why Choose Us"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="The easiest way to get custom gear you're proud of"
          description="Fast, on purpose"
          subdescription="Tight deadlines? We problem-solve and communicate clearly so you're never guessing."
          icon={Zap}
          imageSrc="http://img.b2bpic.net/free-photo/young-man-black-shirt-with-cap-glasses-clenching-his-fists-looking-confident_176474-11298.jpg"
          imageAlt="Professional uniform set showing quality craftsmanship"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Why Business Colors is the best choice for custom apparel"
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardTwo
          title="Simple process. Premium results."
          description="Three straightforward steps from idea to delivery."
          tag="How It Works"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          metrics={[
            {
              id: "step-1",              value: "Step 1",              description: "Tell us what you need—Upload logo, quantities, deadlines, garment type"
            },
            {
              id: "step-2",              value: "Step 2",              description: "Proof & approve—Design, colors, placement confirmed before production"
            },
            {
              id: "step-3",              value: "Step 3",              description: "Production & delivery—On-time production with quality checks, ready for your team"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          buttons={[
            { text: "Start Your Quote", href: "contact" }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Three-step process from quote to delivery"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardOne
          title="Work that represents you well"
          description="Uniforms, polos, tees, hats, towels, and more."
          tag="Gallery"
          tagIcon={Image}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "polo",              name: "Embroidered Polos",              price: "Custom Pricing",              imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-direction-map_23-2147837112.jpg",              imageAlt: "Professional embroidered polo shirt with custom logo"
            },
            {
              id: "tees",              name: "Heat-Printed Tees",              price: "Custom Pricing",              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-worker-woman-wearing-staff-uniform-tshirt-isolated-yellow-background-doing-ok-gesture-shocked-with-surprised-face-eye-looking-through-fingers-unbelieving-expression_839833-5943.jpg",              imageAlt: "Vibrant heat-printed graphic tee shirt"
            },
            {
              id: "hats",              name: "Custom Hats",              price: "Custom Pricing",              imageSrc: "http://img.b2bpic.net/free-photo/teenage-boy-with-backpack-wearing-cap_273609-13086.jpg",              imageAlt: "Embroidered baseball cap with brand logo"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          buttons={[
            { text: "View More Gallery", href: "contact" }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Portfolio gallery of featured apparel and branding work"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTen
          title="Customers come back for a reason"
          description="Read what real clients say about our quality, speed, and partnership."
          tag="Testimonials"
          tagIcon={Quote}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          testimonials={[
            {
              id: "1",              title: "Best quality designs and service",              quote: "Best quality designs, art and logos. Wonderful customer service and punctuality. They exceeded our expectations on every level.",              name: "Sarah Mitchell",              role: "Business Owner",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              imageAlt: "Sarah Mitchell testimonial"
            },
            {
              id: "2",              title: "Delivered on a big ask",              quote: "We came with a big ask and she delivered—problem-solved with me to hit a short deadline. Made sure I was happy before proceeding.",              name: "Michael Chen",              role: "Event Coordinator",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "Michael Chen testimonial"
            }
          ]}
          buttons={[
            { text: "Ready to order?", href: "contact" }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Customer testimonials and reviews"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Quick answers"
          sideDescription="Everything you need to know about our process, products, and partnership."
          textPosition="left"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",              title: "Do you have minimum quantities?",              content: "Minimums depend on the product and method. Tell us what you need—we'll suggest the best option and work with your budget."
            },
            {
              id: "2",              title: "Can you help with design if I don't have a logo?",              content: "Absolutely. We can create or refine your logo and design for apparel and marketing use. Our design team will collaborate with you."
            },
            {
              id: "3",              title: "What's your turnaround time?",              content: "It varies by quantity and style, but we're known for fast, punctual delivery. Tell us your deadline and we'll confirm before we start."
            },
            {
              id: "4",              title: "What items can you customize?",              content: "Polos, tees, hats, hoodies, uniforms, jackets, towels, and more. If it can be branded, ask us—we probably do it."
            }
          ]}
          ariaLabel="Frequently asked questions about our services"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          tagIcon={Send}
          tagAnimation="slide-up"
          title="Let's make your next order the easiest one yet."
          description="Get premium custom apparel with a team that communicates, cares, and delivers. Tell us your vision and we'll handle the rest."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/e-mail-global-communications-connection-social-networking-concept_53876-134026.jpg"
          imageAlt="Get in touch with Business Colors for custom apparel quote"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Your email address"
          buttonText="Get a Quote"
          termsText="We'll follow up with a proof and pricing. Your design stays confidential and secure."
          ariaLabel="Contact form and newsletter signup"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Business Colors"
          copyrightText="© 2025 Business Colors LLC | Premium Custom Apparel & Branding"
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
          ]}
          ariaLabel="Site footer with branding and social links"
        />
      </div>
    </ThemeProvider>
  );
}