"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Sparkles, BookOpen, Palette, ImageIcon, TrendingUp, Heart, Mail, Users, Image, Eye, Globe } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="noise"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Collections", id: "collections" },
            { name: "About", id: "about" },
            { name: "Explore", id: "showcase" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Collage Library"
          bottomLeftText="Curating Digital Art"
          bottomRightText="hello@collagelibrary.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Discover Extraordinary Digital Collages"
          description="Explore curated collections of contemporary and experimental collage art from talented artists worldwide. Experience the intersection of tradition and innovation."
          tag="Welcome to Collage Library"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Browse Collections", href: "#collections" },
            { text: "Learn More", href: "#about" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/color-block-concept-collage_52683-107583.jpg?_wi=1"
          imageAlt="Modern digital collage artwork showcase"
          showBlur={true}
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Our Library"
          tagIcon={BookOpen}
          tagAnimation="opacity"
          title="A Dedicated Space for Artistic Expression"
          useInvertedBackground={false}
          buttons={[
            { text: "Explore Our Mission", href: "#collections" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="collections" data-section="collections">
        <FeatureCardNineteen
          title="Curated Collections"
          description="Browse our carefully selected collections spanning multiple artistic styles and mediums."
          tag="Featured Collections"
          tagIcon={Palette}
          tagAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              tag: "Vintage",              title: "Retro Aesthetic",              subtitle: "Classic & Nostalgic",              description: "Timeless collages celebrating retro design, vintage imagery, and nostalgic aesthetics that transport viewers through decades.",              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-beautiful-composition-flowers-leaves-white-background_181624-6656.jpg?_wi=1",              imageAlt: "Vintage collage art collection",              buttons: [{ text: "View Collection", href: "#" }]
            },
            {
              id: 2,
              tag: "Modern",              title: "Contemporary",              subtitle: "Minimalist & Bold",              description: "Contemporary collages featuring minimalist design, bold geometry, and cutting-edge artistic techniques.",              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-holiday-facebook-template_23-2150453123.jpg?_wi=1",              imageAlt: "Modern minimalist collage",              buttons: [{ text: "View Collection", href: "#" }]
            },
            {
              id: 3,
              tag: "Experimental",              title: "Avant-Garde",              subtitle: "Innovative & Bold",              description: "Experimental mixed-media pieces pushing boundaries and exploring new possibilities in digital collage art.",              imageSrc: "http://img.b2bpic.net/free-photo/black-color-mixing-with-blue_23-2147763466.jpg?_wi=1",              imageAlt: "Experimental mixed media artwork",              buttons: [{ text: "View Collection", href: "#" }]
            },
            {
              id: 4,
              tag: "Nature",              title: "Organic Forms",              subtitle: "Natural & Inspired",              description: "Nature-inspired compositions blending organic elements with artistic vision for serene and compelling visual narratives.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-floral-composition_23-2150968971.jpg?_wi=1",              imageAlt: "Nature-inspired collage design",              buttons: [{ text: "View Collection", href: "#" }]
            }
          ]}
          buttons={[
            { text: "Explore All Collections", href: "#" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="showcase" data-section="showcase">
        <ProductCardOne
          title="Featured Artworks"
          description="Explore the most captivating pieces from our current exhibitions and digital gallery."
          tag="Gallery Highlights"
          tagIcon={ImageIcon}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="bento-grid"
          animationType="scale-rotate"
          products={[
            {
              id: "1",              name: "Urban Dreams",              price: "Digital",              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-holiday-facebook-template_23-2150453123.jpg?_wi=2",              imageAlt: "Urban Dreams collage artwork"
            },
            {
              id: "2",              name: "Memory Lane",              price: "Digital",              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-beautiful-composition-flowers-leaves-white-background_181624-6656.jpg?_wi=2",              imageAlt: "Memory Lane vintage collage"
            },
            {
              id: "3",              name: "Nature Whispers",              price: "Digital",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-floral-composition_23-2150968971.jpg?_wi=2",              imageAlt: "Nature Whispers organic artwork"
            },
            {
              id: "4",              name: "Abstract Thoughts",              price: "Digital",              imageSrc: "http://img.b2bpic.net/free-photo/black-color-mixing-with-blue_23-2147763466.jpg?_wi=2",              imageAlt: "Abstract Thoughts experimental art"
            },
            {
              id: "5",              name: "Ethereal Visions",              price: "Digital",              imageSrc: "http://img.b2bpic.net/free-photo/color-block-concept-collage_52683-107583.jpg?_wi=2",              imageAlt: "Ethereal Visions digital artwork"
            },
            {
              id: "6",              name: "Digital Fusion",              price: "Digital",              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-holiday-facebook-template_23-2150453123.jpg?_wi=3",              imageAlt: "Digital Fusion contemporary collage"
            }
          ]}
          buttons={[
            { text: "View Full Gallery", href: "#" }
          ]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="By The Numbers"
          description="Our impact and reach in the global collage art community."
          tag="Our Impact"
          tagIcon={TrendingUp}
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="scale-rotate"
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Active Artists",              value: "2,500+"
            },
            {
              id: "2",              icon: Image,
              title: "Artworks",              value: "15,000+"
            },
            {
              id: "3",              icon: Eye,
              title: "Monthly Views",              value: "500K+"
            },
            {
              id: "4",              icon: Globe,
              title: "Countries",              value: "127"
            }
          ]}
          buttons={[
            { text: "Join Our Community", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by Creative Professionals"
          cardTag="Community Voices"
          cardTagIcon={Heart}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              imageSrc: "http://img.b2bpic.net/free-photo/male-model-with-curly-hair-having-his-arms-crossed_23-2148760695.jpg",              imageAlt: "Sarah Chen, Digital Artist"
            },
            {
              id: "2",              name: "Marcus Williams",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-business-woman-holding-glasses_23-2148317324.jpg",              imageAlt: "Marcus Williams, Gallery Curator"
            },
            {
              id: "3",              name: "Elena Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-solving-startup-problems-with-laptop-archived-documents-looking-annual-statistics-report-find-issue-young-analyst-reviewing-papers-executive-strategy-plan_482257-65811.jpg",              imageAlt: "Elena Rodriguez, Creative Director"
            },
            {
              id: "4",              name: "James Park",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-happy-painter-africana-american-woman-lying-canvas-looking-camera-with-brushes-hands_273443-50.jpg",              imageAlt: "James Park, Emerging Artist"
            },
            {
              id: "5",              name: "Lisa Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg",              imageAlt: "Lisa Thompson, Art Instructor"
            },
            {
              id: "6",              name: "David Okonkwo",              imageSrc: "http://img.b2bpic.net/free-photo/confident-handsome-middle-aged-entrepreneur_1262-4871.jpg",              imageAlt: "David Okonkwo, Cultural Director"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Find answers to common questions about our collage library and services."
          textPosition="left"
          useInvertedBackground={true}
          faqsAnimation="blur-reveal"
          faqs={[
            {
              id: "1",              title: "How do I browse the collage library?",              content: "Simply navigate to our Collections section using the main menu. You can filter by style, artist, date, and more. Each collection offers detailed views of individual artworks with artist information and descriptions."
            },
            {
              id: "2",              title: "Can I submit my own collage artwork?",              content: "Absolutely! We welcome submissions from artists worldwide. Contact our curation team through the form below with your portfolio. We review all submissions carefully and feature selected pieces in our library."
            },
            {
              id: "3",              title: "Is the artwork available for purchase or licensing?",              content: "Many pieces in our library are available for purchase or licensing. Check individual artwork pages for availability and pricing information. Contact the artist directly or use our secure purchasing platform."
            },
            {
              id: "4",              title: "How often is new content added?",              content: "We add new curated collections and featured artworks weekly. Subscribe to our newsletter to stay updated on the latest additions and special exhibitions happening in our digital gallery."
            },
            {
              id: "5",              title: "Do you offer workshops or tutorials?",              content: "Yes! We regularly host online workshops led by established collage artists. Check our Events section for upcoming classes and tutorials. Members get exclusive access to advanced sessions and archived content."
            }
          ]}
          buttons={[
            { text: "Get in Touch", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Join Our Creative Community"
          description="Subscribe to our newsletter for exclusive content, artist features, and early access to new collections."
          tagIcon={Mail}
          tagAnimation="blur-reveal"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={true}
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="By subscribing, you agree to receive curated art updates and community news from Collage Library."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Explore",              items: [
                { label: "Collections", href: "#collections" },
                { label: "Gallery", href: "#showcase" },
                { label: "Artists", href: "#" },
                { label: "Events", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Mission", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Guidelines", href: "#" },
                { label: "Submit Work", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Copyright", href: "#" },
                { label: "Contact Legal", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2024 Collage Library. All rights reserved."
          bottomRightText="Curating Digital Art Globally"
        />
      </div>
    </ThemeProvider>
  );
}
