"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactText from "@/components/sections/contact/ContactText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Heart, Leaf, Shield, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Coordinate"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Collections", id: "products" },
            { name: "About", id: "about" },
            { name: "Why Us", id: "features" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Coordinate"
          description="Premium family apparel designed for parents and kids who prioritize both style and quality. Matching collections that let you coordinate confidently."
          buttons={[
            { text: "Explore Collections", href: "products" },
            { text: "Learn Our Story", href: "about" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/mother-with-her-children-backyard_1303-22039.jpg?_wi=1"
          imageAlt="Family in coordinated apparel"
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Story"
          title="Redefining Family Fashion"
          description="We believe that quality family moments deserve equally quality apparel. Coordinate was founded on the principle that parents shouldn't have to choose between style and substance. Every piece is thoughtfully designed to help families express their individuality while staying perfectly matched."
          metrics={[
            { value: "5000+", title: "Happy Family Sets Sold" },
            { value: "100%", title: "Premium Quality Assured" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/mother-with-her-children-backyard_1303-22039.jpg?_wi=2"
          imageAlt="Family coordination showcase"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Featured Collections"
          description="Discover our latest coordinated sets perfect for family moments. Each collection is crafted with premium quality fabrics and thoughtful designs."
          tag="Shop Now"
          products={[
            {
              id: "1",              name: "Classic Navy Match Set",              price: "$129",              variant: "Navy  4 Sizes (XS-3XL)",              imageSrc: "http://img.b2bpic.net/free-photo/enjoying-outdoors-together_1328-3945.jpg",              imageAlt: "Classic navy matching set"
            },
            {
              id: "2",              name: "Comfort Stripe Duo",              price: "$145",              variant: "Blue Stripe  3 Options",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-two-little-boys-wearing-casual-looks-posing-park-holding-hands-pockets-handsome-brothers-walking-playing-together-concept-fashionable-stylish-kids-look-clothes_132075-12489.jpg",              imageAlt: "Comfort stripe parent-child set"
            },
            {
              id: "3",              name: "Premium Quality Basics",              price: "$139",              variant: "Charcoal  5 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/grimacing-kids-outdoor_1098-14639.jpg",              imageAlt: "Premium basic coordination set"
            },
            {
              id: "4",              name: "Casual Weekend Wear",              price: "$155",              variant: "Sage Green  Matching Pairs",              imageSrc: "http://img.b2bpic.net/free-photo/young-father-with-little-son-field_1303-24435.jpg",              imageAlt: "Casual weekend family collection"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Why Families Choose Coordinate"
          description="Quality craftsmanship meets coordinated style in every piece we create."
          tag="Premium Features"
          features={[
            {
              title: "Premium Fabrics",              description: "100% organic cotton and sustainable blends designed for comfort and durability.",              bentoComponent: "reveal-icon",              icon: Shield
            },
            {
              title: "Perfect Coordination",              description: "Expertly designed matching sets that work for parents and kids of all body types.",              bentoComponent: "reveal-icon",              icon: Heart
            },
            {
              title: "Size Inclusive",              description: "XS to 3XL for adults, newborn to teen sizes for kids. Everyone deserves to match.",              bentoComponent: "reveal-icon",              icon: Users
            },
            {
              title: "Sustainable Production",              description: "Ethically manufactured with minimal environmental impact and fair labor practices.",              bentoComponent: "reveal-icon",              icon: Leaf
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Loved by Families"
          description="Real stories from parents who've embraced coordinated family style."
          testimonials={[
            {
              id: "1",              title: "Finally, Matching Without Compromise",              quote: "We love wearing matching outfits as a family, and Coordinate finally makes it possible without sacrificing style or comfort. The quality is exceptional, and our kids actually want to wear these pieces.",              name: "Sarah Mitchell",              role: "Mother of Two",              imageSrc: "http://img.b2bpic.net/free-photo/parents-happy-see-their-son-family-looking-happy_259150-56951.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              title: "Perfect for Special Moments",              quote: "We purchased the premium set for our family photos and it was absolutely worth it. The colors are rich, the fit is perfect, and we got so many compliments. This is our go-to for any family occasion.",              name: "James Chen",              role: "Father of One",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-child-hugging-their-parents_1098-890.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              title: "Quality That Lasts Through Everything",              quote: "I was skeptical about matching apparel, but my husband and I now have multiple sets in different colors. The durability is incredible - they've been through countless washes and still look brand new.",              name: "Emma Rodriguez",              role: "Parent of Boys",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              title: "Size Options Finally Work for Us",              quote: "As parents, we've struggled finding matching family outfits that work for everyone. Coordinate's range finally lets us all coordinate together. Our youngest to our oldest son - everyone matches perfectly.",              name: "Michael Thompson",              role: "Father of Three",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Michael Thompson"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Built on Excellence and Trust"
          tag="Our Impact"
          metrics={[
            {
              id: "1",              value: "15K+",              description: "Families worldwide who trust Coordinate for their coordinated style moments."
            },
            {
              id: "2",              value: "98%",              description: "Customer satisfaction rate with repeat purchases and family referrals."
            }
          ]}
          useInvertedBackground={false}
          metricsAnimation="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about Coordinate apparel and our collections."
          tag="Help & Support"
          faqs={[
            {
              id: "1",              title: "How do sizing and coordination work?",              content: "Each coordinated set includes carefully selected sizes that work together. We provide a detailed sizing chart for each collection. Adult sizes range XS-3XL, and kids' sizes run from newborn through teen. Our fitting guides help ensure perfect coordination across all family members."
            },
            {
              id: "2",              title: "What makes your apparel premium quality?",              content: "We use 100% organic cotton and sustainable fabric blends, ethically sourced and manufactured. Every piece undergoes quality testing to ensure durability and comfort. Our fabrics are pre-shrunk and designed to maintain their appearance through countless washes."
            },
            {
              id: "3",              title: "Do you offer coordination for boys specifically?",              content: "Yes! We specialize in matching sets for parents and boys. Our collections are designed with boys' preferences in mind, featuring classic cuts and styles that appeal to both children and parents. We offer everything from casual everyday wear to premium collections for special occasions."
            },
            {
              id: "4",              title: "What is your return and exchange policy?",              content: "We offer a 60-day returns and exchanges policy on all items. If a set doesn't coordinate perfectly or doesn't meet your expectations, simply return it for a full refund or exchange. We also offer free returns on our first purchase to ensure complete satisfaction."
            },
            {
              id: "5",              title: "Are your products sustainable?",              content: "Absolutely. We're committed to sustainable practices including organic and recycled materials, ethical manufacturing partnerships, minimal packaging waste, and carbon-neutral shipping options. We continuously work to reduce our environmental impact while maintaining premium quality."
            },
            {
              id: "6",              title: "How do I care for my coordinated sets?",              content: "Our apparel is machine washable in cold water with similar colors. We recommend using gentle detergent and air drying to maintain shape and color vibrancy. Care instructions are included with each set. All our fabrics are pre-shrunk and designed for long-lasting wear."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to bring your family closer through coordinated style? Join thousands of families who've discovered the perfect balance of quality and fashion."
          animationType="entrance-slide"
          buttons={[
            { text: "Start Coordinating", href: "products" },
            { text: "Get in Touch", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/mother-with-her-children-backyard_1303-22039.jpg?_wi=3"
          imageAlt="Family in coordinated Coordinate apparel"
          logoText="Coordinate"
          copyrightText="© 2024 Coordinate | Premium Family Apparel"
          columns={[
            {
              title: "Shop",              items: [
                { label: "Collections", href: "#products" },
                { label: "New Arrivals", href: "#products" },
                { label: "Best Sellers", href: "#products" },
                { label: "Gift Sets", href: "#products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Story", href: "#about" },
                { label: "Sustainability", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Sizing Guide", href: "#" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
