"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Award, Package, Sparkles, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "About", id: "about" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Projects", id: "/projects" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
          brandName="Studio"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery 
          title="Elevate Your Brand"
          description="Award-winning design studio crafting compelling visual identities and digital experiences for forward-thinking brands"
          background={{ variant: "plain" }}
          tag="Design Excellence"
          tagAnimation="slide-up"
          mediaItems={[
            { imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop&_wi=1", imageAlt: "Portfolio showcase" },
            { imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=1", imageAlt: "Creative work" },
            { imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=1", imageAlt: "Design process" },
            { imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=2", imageAlt: "Brand identity" },
            { imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop&_wi=2", imageAlt: "Studio excellence" }
          ]}
          mediaAnimation="blur-reveal"
          buttons={[
            { text: "View Our Work", href: "/projects" },
            { text: "Start a Project", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardFour 
          title="Featured Projects"
          description="A selection of our most impactful brand and design work"
          tag="Showcase"
          tagIcon={Package}
          tagAnimation="slide-up"
          products={[
            {
              id: "proj-1",              name: "TechFlow Brand Identity",              price: "Complete Rebrand",              variant: "Logo, Guidelines, Digital Assets",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=3",              imageAlt: "TechFlow branding"
            },
            {
              id: "proj-2",              name: "Luxe Packaging Design",              price: "Custom Solution",              variant: "Packaging, Labels, Unboxing Experience",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2",              imageAlt: "Luxury packaging"
            },
            {
              id: "proj-3",              name: "Digital Experience Design",              price: "Full Service",              variant: "UI/UX, Web Design, Mobile App",              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop&_wi=3",              imageAlt: "Digital design"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout 
          title="Crafting Design That Matters"
          description="We believe great design is more than aesthetics—it's a strategic tool that transforms brands and creates meaningful connections. Our team combines creative vision with strategic thinking to deliver work that resonates."
          tag="About Our Studio"
          imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=3"
          imageAlt="Our creative studio"
          buttons={[{ text: "Learn More", href: "#" }]}
          useInvertedBackground={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree 
          title="Our Process"
          description="A systematic approach to design excellence"
          tag="Methodology"
          tagAnimation="slide-up"
          features={[
            {
              id: "01",              title: "Discovery & Strategy",              description: "Deep dive into your brand, market, and audience to uncover insights that drive design direction",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=4",              imageAlt: "Strategy session"
            },
            {
              id: "02",              title: "Concept Development",              description: "Creative exploration and ideation resulting in bold, innovative design concepts",              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop&_wi=4",              imageAlt: "Design concepts"
            },
            {
              id: "03",              title: "Refinement & Execution",              description: "Meticulous attention to detail as we perfect and implement your chosen direction",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=4",              imageAlt: "Design execution"
            },
            {
              id: "04",              title: "Delivery & Support",              description: "Comprehensive asset delivery and ongoing support to ensure successful implementation",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=5",              imageAlt: "Project delivery"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne 
          title="Meet Our Team"
          description="Talented designers, strategists, and creative minds working together"
          tag="Our People"
          tagAnimation="slide-up"
          members={[
            {
              id: "1",              name: "Sarah Chen",              role: "Creative Director",              imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Rodriguez",              role: "Brand Strategist",              imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop",              imageAlt: "Marcus Rodriguez"
            },
            {
              id: "3",              name: "Emma Thompson",              role: "Visual Designer",              imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop",              imageAlt: "Emma Thompson"
            },
            {
              id: "4",              name: "James Park",              role: "UX/UI Designer",              imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop",              imageAlt: "James Park"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree 
          title="By The Numbers"
          description="Our impact and experience in design excellence"
          tag="Impact"
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              icon: Award,
              title: "Awards Won",              value: "47+"
            },
            {
              id: "2",              icon: Users,
              title: "Happy Clients",              value: "250+"
            },
            {
              id: "3",              icon: Zap,
              title: "Projects Completed",              value: "500+"
            },
            {
              id: "4",              icon: TrendingUp,
              title: "Years Experience",              value: "15+"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive 
          title="What Our Clients Say"
          description="Real feedback from brands we've transformed"
          tag="Testimonials"
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Jessica Wong, CEO of TechFlow",              date: "Date: 15 November 2024",              title: "Transformed our entire brand presence",              quote: "The team completely transformed how we present ourselves to the market. Their strategic approach combined with stunning design has elevated our brand perception significantly.",              tag: "Brand Strategy",              avatarSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop&_wi=5",              imageAlt: "TechFlow transformation"
            },
            {
              id: "2",              name: "David Chen, Founder of Luxe Co.",              date: "Date: 8 October 2024",              title: "Exceeded all our expectations",              quote: "Working with this studio was a game-changer. They took our vision and created something even better than we imagined. The attention to detail is remarkable.",              tag: "Packaging Design",              avatarSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=6",              imageAlt: "Luxe Co. packaging"
            },
            {
              id: "3",              name: "Amanda Rodriguez, Marketing Director of Startify",              date: "Date: 22 September 2024",              title: "Professional and innovative",              quote: "Their team brought fresh ideas and professional execution to our digital presence. Our user engagement increased dramatically after the redesign.",              tag: "UI/UX Design",              avatarSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=5",              imageAlt: "Startify digital design"
            },
            {
              id: "4",              name: "Michael Thompson, COO of Global Brands Inc.",              date: "Date: 5 August 2024",              title: "Delivered strategic value beyond design",              quote: "What impressed us most was how they aligned our visual identity with our business strategy. It's not just pretty—it's effective.",              tag: "Brand Identity",              avatarSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop",              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop&_wi=6",              imageAlt: "Global Brands identity"
            },
            {
              id: "5",              name: "Sophie Bennett, Head of Creative at Design Hub",              date: "Date: 18 July 2024",              title: "True design partners",              quote: "They understood our brand as well as we did. The collaborative process was smooth, and the final results speak for themselves.",              tag: "Creative Direction",              avatarSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=7",              imageAlt: "Design Hub collaboration"
            },
            {
              id: "6",              name: "Robert Kim, Founder of Innovation Labs",              date: "Date: 30 June 2024",              title: "Investment that truly paid off",              quote: "Our rebranding helped us attract top talent and better customers. The studio's work has become a competitive advantage for us.",              tag: "Full Rebrand",              avatarSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=6",              imageAlt: "Innovation Labs success"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA 
          tag="Ready to Start?"
          tagIcon={Sparkles}
          title="Let's Create Something Extraordinary"
          description="Whether you're looking to launch a new brand or elevate an existing one, we're here to help. Get in touch to discuss your project and discover how we can drive your success."
          buttons={[
            { text: "Contact Us", href: "contact" },
            { text: "Schedule Call", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple 
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "#about" },
                { label: "Projects", href: "/projects" },
                { label: "Team", href: "#team" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Brand Strategy", href: "#" },
                { label: "Design Systems", href: "#" },
                { label: "Digital Design", href: "#" },
                { label: "Packaging", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Studio. All rights reserved."
          bottomRightText="Crafting excellence in design"
        />
      </div>
    </ThemeProvider>
  );
}
