"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Sparkles, Users, Award, Globe, Lightbulb } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="RossX"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Work", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Let's Talk", href: "contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="RossX"
          description="Finding your brand's soul through minimal, elegant design"
          buttons={[
            { text: "Start Your Journey", href: "about" },
            { text: "View Our Work", href: "testimonials" }
          ]}
          videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQT4L5fT0AdTQ4ad3H7pGkZ1qt/uploaded-1772524871406-zgmme225.jpg?_wi=1"
          videoAriaLabel="Logo transformation animation from bland to beautiful design"
          showDimOverlay={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="We transform ordinary brands into extraordinary visual identities that resonate with your audience"
          useInvertedBackground={false}
          metricsAnimation="blur-reveal"
          metrics={[
            { icon: Sparkles, label: "Projects Transformed", value: "150+" },
            { icon: Users, label: "Happy Clients", value: "120+" },
            { icon: Award, label: "Years Expertise", value: "8" },
            { icon: Globe, label: "Global Reach", value: "40+" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSeven
          title="Our Services"
          description="Comprehensive branding solutions designed to elevate your vision"
          tag="What We Do"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="blur-reveal"
          features={[
            {
              id: 1,
              title: "Brand Strategy",              description: "Deep-dive discovery into your brand DNA, market positioning, and unique value proposition",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQT4L5fT0AdTQ4ad3H7pGkZ1qt/uploaded-1772524871406-hlr9rgao.jpg?_wi=1"
            },
            {
              id: 2,
              title: "Visual Identity",              description: "Custom logo design, color systems, and typography that perfectly encapsulate your essence",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQT4L5fT0AdTQ4ad3H7pGkZ1qt/uploaded-1772524871406-aztor00j.jpg?_wi=1"
            },
            {
              id: 3,
              title: "Design Systems",              description: "Scalable, cohesive design frameworks that ensure consistency across all touchpoints",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQT4L5fT0AdTQ4ad3H7pGkZ1qt/uploaded-1772524871406-zgmme225.jpg?_wi=2"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Clients Say"
          description="Hear from brands who found their soul through our design"
          tag="Testimonials"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "CEO",              company: "TechVenture Studios",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "Creative Director",              company: "Digital Forge",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2"
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "Founder",              company: "Luxury & Co",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3"
            },
            {
              id: "4",              name: "James Mitchell",              role: "Brand Manager",              company: "Global Ventures",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4"
            },
            {
              id: "5",              name: "Aria Patel",              role: "COO",              company: "Innovation Labs",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=5"
            },
            {
              id: "6",              name: "David König",              role: "Business Owner",              company: "Premium Goods",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=6"
            }
          ]}
          kpiItems={[
            { value: "98%", label: "Client Satisfaction Rate" },
            { value: "150+", label: "Brands Elevated" },
            { value: "Award-Winning", label: "Design Excellence" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardSeven
          title="Our Process"
          description="A refined methodology to uncover and crystallize your brand's true essence"
          tag="Methodology"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              id: 1,
              title: "Discovery & Research",              description: "We immerse ourselves in your world, understanding your vision, market, and competitive landscape",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQT4L5fT0AdTQ4ad3H7pGkZ1qt/uploaded-1772524871406-hlr9rgao.jpg?_wi=2"
            },
            {
              id: 2,
              title: "Concept & Strategy",              description: "Strategic exploration of creative directions aligned with your brand positioning",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQT4L5fT0AdTQ4ad3H7pGkZ1qt/uploaded-1772524871406-aztor00j.jpg?_wi=2"
            },
            {
              id: 3,
              title: "Refinement & Delivery",              description: "Iterative refinement, precision execution, and comprehensive brand guidelines delivery",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQT4L5fT0AdTQ4ad3H7pGkZ1qt/uploaded-1772524871406-zgmme225.jpg?_wi=3"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Find Your Brand's Soul?"
          ctaDescription="Let's collaborate to create something extraordinary"
          ctaButton={{ text: "Start a Conversation", href: "mailto:hello@rossx.studio" }}
          ctaIcon={Lightbulb}
          useInvertedBackground={true}
          animationType="blur-reveal"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "How long does a branding project typically take?",              content: "Our projects typically range from 6-12 weeks depending on scope and complexity. We maintain consistent communication throughout to ensure alignment with your vision."
            },
            {
              id: "2",              title: "What's included in your branding package?",              content: "Complete brand strategy, logo design, color system, typography selection, brand guidelines, and all deliverables in digital and print-ready formats."
            },
            {
              id: "3",              title: "Do you work with startups or established brands?",              content: "We work with both emerging startups defining their identity and established brands ready for evolution. Every project brings unique perspectives we're excited to explore."
            },
            {
              id: "4",              title: "What's your design philosophy?",              content: "We believe in minimalism with intention. Every element serves a purpose. We create designs that are clean, timeless, and deeply meaningful to your brand's core."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Services",              items: [
                { label: "Brand Strategy", href: "#services" },
                { label: "Visual Identity", href: "#services" },
                { label: "Design Systems", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Work", href: "#testimonials" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com/rossx.studio" },
                { label: "LinkedIn", href: "https://linkedin.com/company/rossx-studio" },
                { label: "Email", href: "mailto:hello@rossx.studio" }
              ]
            }
          ]}
          copyrightText="© 2025 RossX. Finding brands their soul."
        />
      </div>
    </ThemeProvider>
  );
}