"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            {name: "Gallery", id: "gallery"},
            {name: "About", id: "about"},
            {name: "Collections", id: "collections"},
            {name: "Contact", id: "contact"},
            {name: "FAQ", id: "faq"}
          ]}
          brandName="Logo Archive"
          bottomLeftText="Design & Curation"
          bottomRightText="hello@logoarchive.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo 
          logoText="Logo Collection"
          description="Explore our meticulously curated collection of premium logos showcasing design excellence and creative vision"
          buttons={[
            {text: "View Gallery", href: "gallery"},
            {text: "Explore More", href: "collections"}
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/abstract-business-card-template_23-2148556572.jpg"
          imageAlt="Hero background with modern logo design"
          showDimOverlay={true}
          logoLineHeight={1.1}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout 
          title="A celebration of design excellence and creative innovation. We curate the finest logos that define brands and inspire creativity across industries."
          useInvertedBackground="invertDefault"
          buttons={[
            {text: "Learn More", href: "about"}
          ]}
        />
      </div>

      <div id="featured-logos" data-section="featured-logos">
        <ProductCardTwo 
          products={[
            {
              id: "1",              brand: "Branding Studio",              name: "Minimalist Mark",              price: "Premium",              rating: 5,
              reviewCount: "48",              imageSrc: "https://img.b2bpic.net/free-vector/minimal-logo-element-collection-two-colors_23-2148379339.jpg",              imageAlt: "Minimalist geometric logo design"
            },
            {
              id: "2",              brand: "Design Agency",              name: "Geometric Identity",              price: "Premium",              rating: 5,
              reviewCount: "52",              imageSrc: "https://img.b2bpic.net/free-vector/minimal-logo-set_53876-94209.jpg",              imageAlt: "Geometric logo with modern aesthetics"
            },
            {
              id: "3",              brand: "Creative Bureau",              name: "Abstract Emblem",              price: "Premium",              rating: 5,
              reviewCount: "61",              imageSrc: "https://img.b2bpic.net/free-vector/collection-abstract-lineal-logo_23-2148457951.jpg",              imageAlt: "Creative abstract logo design"
            }
          ]}
          title="Featured Logos"
          description="Discover standout designs that showcase exceptional branding and creative excellence"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="collection-showcase" data-section="collection-showcase">
        <ProductCardTwo 
          products={[
            {
              id: "4",              brand: "Modern Studios",              name: "Contemporary Badge",              price: "Premium",              rating: 5,
              reviewCount: "44",              imageSrc: "https://img.b2bpic.net/free-vector/pastel-colors-minimal-logo-collection_23-2148388094.jpg",              imageAlt: "Contemporary logo design"
            },
            {
              id: "5",              brand: "Premium Design",              name: "Elegant Symbol",              price: "Premium",              rating: 5,
              reviewCount: "39",              imageSrc: "https://img.b2bpic.net/free-vector/minimal-logo-collection-two-colors_23-2148388582.jpg",              imageAlt: "Elegant logo symbol design"
            }
          ]}
          title="Complete Collection"
          description="Browse our extensive catalog of carefully selected logo designs from talented designers worldwide"
          tag="Collection"
          textboxLayout="default"
          gridVariant="two-columns-alternating-heights"
          animationType="scale-rotate"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo 
          metrics={[
            {id: "1", value: "500+", description: "Logos Collected"},
            {id: "2", value: "150+", description: "Design Studios"},
            {id: "3", value: "25K+", description: "Community Members"},
            {id: "4", value: "98%", description: "Design Excellence"}
          ]}
          title="By The Numbers"
          description="Our collection celebrates design excellence and creative achievement"
          gridVariant="four-items-2x2-equal-grid"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia 
          faqs={[
            {
              id: "1",              title: "What logos are included in the collection?",              content: "Our collection features premium logos from leading design studios and independent designers worldwide. Each logo is selected for its creative excellence, innovative approach, and strong brand identity representation."
            },
            {
              id: "2",              title: "How are logos selected for the collection?",              content: "Every logo undergoes a rigorous curation process by our design experts. We evaluate creativity, technical execution, originality, and impact to ensure only the finest examples are included."
            },
            {
              id: "3",              title: "Can I use these logos for my brand?",              content: "These logos are showcased for inspiration and study purposes. For commercial use, please contact the original designers directly. We provide attribution information for each design in our collection."
            },
            {
              id: "4",              title: "How often is the collection updated?",              content: "We continuously add new logos to our collection. New designs are featured monthly, and our community contributes suggestions for emerging talent and innovative branding work."
            },
            {
              id: "5",              title: "Is there a community or submission process?",              content: "Yes! Designers can submit their work through our community portal. Selected submissions may be featured in our collection, providing exposure and recognition within the design community."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/top-view-items-redecorating-house-with-copy-space_23-2148815770.jpg"
          imageAlt="FAQ section illustration"
          mediaPosition="left"
          title="Frequently Asked Questions"
          description="Everything you need to know about our logo collection and design community"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm 
          title="Get in Touch"
          description="Have questions about our collection or want to collaborate? We'd love to hear from you. Reach out to our team and let's discuss your design vision."
          inputs={[
            {name: "name", type: "text", placeholder: "Your Name", required: true},
            {name: "email", type: "email", placeholder: "Your Email", required: true}
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your project or inquiry...",            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164871.jpg"
          imageAlt="Contact section illustration"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia 
          imageSrc="https://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg"
          imageAlt="Footer background showcasing design excellence"
          logoText="Logo Archive"
          copyrightText="© 2025 Logo Archive. All rights reserved."
          columns={[
            {
              title: "Explore",              items: [
                {label: "Gallery", href: "gallery"},
                {label: "Collections", href: "collections"},
                {label: "Featured", href: "featured"}
              ]
            },
            {
              title: "Community",              items: [
                {label: "Submit Logo", href: "submit"},
                {label: "Designers", href: "designers"},
                {label: "Discussion", href: "discuss"}
              ]
            },
            {
              title: "Company",              items: [
                {label: "About", href: "about"},
                {label: "Contact", href: "contact"},
                {label: "Terms", href: "terms"}
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}