"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TagAbout from '@/components/sections/about/TagAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Dribbble, Instagram, Linkedin, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="gradient-subtle"
      primaryButtonStyle="outline"
      secondaryButtonStyle="outline"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Studio"
          navItems={[
            { name: "Work", id: "work" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Contact", id: "contact" },
            { name: "Studio", id: "home" }
          ]}
          bottomLeftText="Creative Studio"
          bottomRightText="hello@studio.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Creative Work That Moves"
          description="We craft digital experiences that resonate. Design, strategy, and innovation in every project."
          tag="Creative Studio"
          imagePosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308569893-by35j6nh.jpg"
          imageAlt="Creative portfolio showcase"
          buttons={[
            { text: "Explore Our Work", href: "work" },
            { text: "Get Started", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TagAbout
          tag="Who We Are"
          description="We are a creative collective driven by precision, innovation, and a relentless commitment to excellence. Every project is an opportunity to push boundaries and create work that matters."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardThree
          title="Our Services"
          description="Comprehensive creative solutions tailored to your vision"
          tag="Services"
          features={[
            {
              id: "01",
              title: "Brand Strategy",
              description: "Develop authentic brand identity and positioning that resonates with your audience.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg",
              imageAlt: "Brand strategy"
            },
            {
              id: "02",
              title: "Design & UX",
              description: "Create beautiful, intuitive interfaces that users love to interact with.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766139083006-v50xgv4n.jpg",
              imageAlt: "Design and UX"
            },
            {
              id: "03",
              title: "Web Development",
              description: "Build fast, responsive websites that convert and perform flawlessly.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320179601-o8gildtx.jpg",
              imageAlt: "Web development"
            },
            {
              id: "04",
              title: "Visual Identity",
              description: "Craft distinctive visual systems that elevate your brand presence.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg",
              imageAlt: "Visual identity"
            }
          ]}
          textboxLayout="default"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardSeven
          title="Featured Work"
          description="A selection of projects we are proud to have created"
          tag="Portfolio"
          products={[
            {
              id: "1",
              name: "Minimal Tech Platform",
              price: "2024",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308573711-rb6r30ka.jpg",
              imageAlt: "Minimal tech platform"
            },
            {
              id: "2",
              name: "Brand Identity System",
              price: "2024",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787040886-0ogjgmx4.jpg",
              imageAlt: "Brand identity system"
            },
            {
              id: "3",
              name: "Digital Experience",
              price: "2024",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308574636-rqpllbah.jpg",
              imageAlt: "Digital experience"
            },
            {
              id: "4",
              name: "Premium Packaging",
              price: "2023",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308575550-iwuw49pq.jpg",
              imageAlt: "Premium packaging"
            },
            {
              id: "5",
              name: "Marketing Campaign",
              price: "2023",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308576373-qyx0mjff.jpg",
              imageAlt: "Marketing campaign"
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to bring your vision to life? Let's create something extraordinary together."
          animationType="entrance-slide"
          buttons={[
            { text: "Start a Project", href: "contact" },
            { text: "Schedule a Call", href: "contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Studio"
          columns={[
            {
              title: "Company",
              items: [
                { label: "About", href: "about" },
                { label: "Services", href: "services" },
                { label: "Work", href: "work" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy", href: "privacy" },
                { label: "Terms", href: "terms" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Dribbble, href: "https://dribbble.com", ariaLabel: "Dribbble" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
          copyrightText="© Studio, Inc. 2025"
        />
      </div>
    </ThemeProvider>
  );
}