"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Globe, HelpCircle, Leaf, Mail, Recycle, Shield, Sparkles, Star, TrendingUp, Users, Zap, Heart, Share2, Crown } from "lucide-react";
import { useState } from "react";

export default function LandingPage() {
  const [formData, setFormData] = useState<Record<string, string>>({});

  const handleContactSubmit = (data: Record<string, string>) => {
    setFormData(data);
    console.log("Form submitted:", data);
    // Handle form submission here
  };

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="APEX"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Shop", id: "products" },
            { name: "Community", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Shop Now",            href: "products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="APEX"
          description="Elevate your style. Authentic streetwear designed for those who lead, not follow. Premium quality meets urban edge."
          buttons={[
            { text: "Explore Collection", href: "products" },
            { text: "Learn Our Story", href: "about" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771003746831-w3xavybf.jpg"
          imageAlt="APEX Streetwear Hero Collection"
          frameStyle="card"
          mediaAnimation="blur-reveal"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "We craft more than" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/cheerful-team-workers-with-laptop_23-2147668840.jpg", alt: "APEX Brand" },
            { type: "text", content: "streetwear. We create movement." }
          ]}
          buttons={[
            { text: "Join the Movement", href: "contact" }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Latest Drops"
          description="Curated pieces from our most recent collections. Each item represents our commitment to quality, style, and authenticity."
          tag="New Arrivals"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",              name: "Oversized Hoodie",              price: "$89",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771003800041-rgfdis4z.jpg",              imageAlt: "Premium Oversized Hoodie"
            },
            {
              id: "2",              name: "Classic Sneakers",              price: "$150",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771003812684-hzfbyan7.jpg",              imageAlt: "Urban Classic Sneakers"
            },
            {
              id: "3",              name: "Tech Jacket",              price: "$199",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771003945685-hqp18lpz.jpg",              imageAlt: "Advanced Tech Jacket"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Why Choose APEX"
          description="Experience the difference that authentic craftsmanship and innovation bring to streetwear culture."
          tag="Our Promise"
          tagIcon={Shield}
          features={[
            {
              title: "Premium Materials",              description: "Sourced from the finest mills worldwide for uncompromising quality.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Zap, label: "Durability", value: "5+ Years" },
                { icon: Shield, label: "Quality", value: "Grade A" },
                { icon: Star, label: "Rating", value: "4.9/5" }
              ]
            },
            {
              title: "Global Community",              description: "Join thousands of style enthusiasts across the world.",              bentoComponent: "orbiting-icons",              centerIcon: Globe,
              items: [
                { icon: Users, ring: 1 },
                { icon: Heart, ring: 2 },
                { icon: Share2, ring: 3 }
              ]
            },
            {
              title: "Our Commitments",              description: "Every purchase supports eco-conscious production practices.",              bentoComponent: "3d-task-list",              items: [
                { icon: Leaf, label: "Eco Materials", time: "100%" },
                { icon: Recycle, label: "Recycling Program", time: "Active" },
                { icon: TrendingUp, label: "Carbon Neutral", time: "2025" }
              ]
            },
            {
              title: "Limited Editions",              description: "Exclusive drops that celebrate street culture and individual expression.",              bentoComponent: "marquee",              centerIcon: Crown,
              variant: "text",              texts: ["Rare Drops", "Exclusive Colabs", "Artist Series", "Vintage Vibes"]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="APEX completely changed how I express myself through fashion. The quality is unmatched and the community is genuinely inspiring. I'm not just buying clothes, I'm joining a movement."
          rating={5}
          author="Marcus Chen, Creative Director"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/young-pretty-man-white-t-shirt-isolated-white-hold-arms-crossed_231208-6031.jpg", alt: "Marcus Chen" },
            { src: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg", alt: "Sarah Johnson" },
            { src: "https://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed_176420-15583.jpg", alt: "James Williams" },
            { src: "https://img.b2bpic.net/free-photo/serious-young-man-standing-outdoors-with-his-arms-crossed_1262-19037.jpg", alt: "Emma Rodriguez" },
            { src: "https://img.b2bpic.net/free-photo/thinking-man-dark-suit-studio-shot_613910-10754.jpg", alt: "David Park" },
            { src: "https://img.b2bpic.net/free-photo/smiling-handsome-man-standing-with-crossed-arms-isolated-gray-background_231208-14065.jpg", alt: "Lisa Chen" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Questions? We've Got Answers"
          description="Everything you need to know about APEX, our products, and your experience with us."
          tag="Support"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "What's your return policy?",              content: "We offer a hassle-free 30-day return policy on all items. If it doesn't fit your vibe, no problem—full refund or exchange."
            },
            {
              id: "2",              title: "How long does shipping take?",              content: "Standard shipping arrives in 5-7 business days. Express shipping (2-3 days) is available for orders over $75."
            },
            {
              id: "3",              title: "Are your materials sustainable?",              content: "Yes. We use 100% organic cotton and recycled materials in our production. Every piece is made with planet-conscious practices."
            },
            {
              id: "4",              title: "Do you offer international shipping?",              content: "We ship to over 50 countries worldwide. International orders include tracking and may have additional customs considerations."
            },
            {
              id: "5",              title: "How can I track my order?",              content: "You'll receive a tracking number via email as soon as your order ships. Track it in real-time through our portal."
            },
            {
              id: "6",              title: "Can I customize my pieces?",              content: "Absolutely. Check out our Custom Studio for embroidery, patches, and printing options on selected items."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771003979232-dmgbi9vj.png"
          imageAlt="APEX Customer Support"
          mediaPosition="left"
          mediaAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get Early Access to New Drops"
          description="Subscribe to our newsletter and be the first to know about exclusive releases, limited editions, and special events."
          inputs={[
            { name: "email", type: "email", placeholder: "your@email.com", required: true },
            { name: "name", type: "text", placeholder: "Your name", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us what styles you're interested in...",            rows: 4,
            required: false
          }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771003746831-w3xavybf.jpg"
          imageAlt="APEX Newsletter"
          mediaPosition="right"
          mediaAnimation="blur-reveal"
          buttonText="Subscribe"
          onSubmit={handleContactSubmit}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="APEX"
          columns={[
            {
              title: "Shop",              items: [
                { label: "New Arrivals", href: "#products" },
                { label: "Collections", href: "#products" },
                { label: "Limited Editions", href: "#products" },
                { label: "Collaborations", href: "#products" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Our Story", href: "#about" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Ambassador Program", href: "#contact" },
                { label: "Events", href: "#contact" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Shipping Info", href: "#faq" },
                { label: "Returns", href: "#faq" },
                { label: "Contact Us", href: "#contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "TikTok", href: "https://tiktok.com" },
                { label: "Discord", href: "https://discord.com" }
              ]
            }
          ]}
          copyrightText="© 2025 APEX Streetwear. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}