"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 TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
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-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="RossX"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Start", href: "contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="RossX"
          description="Clean design. Strategic purpose. Timeless brands."
          buttons={[
            { text: "Explore", href: "about" },
            { text: "Our Work", href: "testimonials" }
          ]}
          showDimOverlay={false}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="We create minimal brand identities that resonate"
          useInvertedBackground={false}
          metricsAnimation="slide-up"
          metrics={[
            { icon: Sparkles, label: "Projects", value: "150+" },
            { icon: Users, label: "Clients", value: "120+" },
            { icon: Award, label: "Years", value: "8" },
            { icon: Globe, label: "Reach", value: "40+" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSeven
          title="What We Do"
          description="Strategic design solutions built on clarity and intention"
          tag="Services"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              id: 1,
              title: "Brand Strategy",              description: "Understanding your vision, market position, and unique value proposition",              imageSrc: "/placeholders/placeholder1.webp?_wi=1",              imageAlt: "Brand Strategy"
            },
            {
              id: 2,
              title: "Visual Identity",              description: "Custom logos, color systems, and typography that define your brand",              imageSrc: "/placeholders/placeholder1.webp?_wi=2",              imageAlt: "Visual Identity"
            },
            {
              id: 3,
              title: "Design Systems",              description: "Scalable frameworks ensuring consistency across all touchpoints",              imageSrc: "/placeholders/placeholder1.webp?_wi=3",              imageAlt: "Design Systems"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Client Stories"
          description="Trusted by brands who value clarity and craft"
          tag="Testimonials"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Founder",              company: "TechVenture",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp?_wi=4",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "Creative Lead",              company: "Digital Forge",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp?_wi=5",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "Brand Director",              company: "Luxury & Co",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp?_wi=6",              imageAlt: "Elena Rodriguez"
            },
            {
              id: "4",              name: "James Mitchell",              role: "CEO",              company: "Global Ventures",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp?_wi=7",              imageAlt: "James Mitchell"
            }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardSeven
          title="Our Approach"
          description="A refined process to uncover your brand's essence"
          tag="Process"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          features={[
            {
              id: 1,
              title: "Discovery",              description: "Deep understanding of your vision, market, and competitive landscape",              imageSrc: "/placeholders/placeholder1.webp?_wi=8",              imageAlt: "Discovery"
            },
            {
              id: 2,
              title: "Strategy",              description: "Strategic exploration of creative directions aligned with your positioning",              imageSrc: "/placeholders/placeholder1.webp?_wi=9",              imageAlt: "Strategy"
            },
            {
              id: 3,
              title: "Delivery",              description: "Refined execution and comprehensive brand guidelines",              imageSrc: "/placeholders/placeholder1.webp?_wi=10",              imageAlt: "Delivery"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Begin?"
          ctaDescription="Let's create something meaningful together"
          ctaButton={{ text: "Get Started", href: "mailto:hello@rossx.studio" }}
          ctaIcon={Lightbulb}
          useInvertedBackground={false}
          animationType="slide-up"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "What's your design process?",              content: "We start with discovery to understand your brand's core. Then we develop strategy, explore concepts, and deliver refined designs with complete brand guidelines."
            },
            {
              id: "2",              title: "How long does a project take?",              content: "Most projects range from 6-12 weeks depending on scope. We maintain consistent communication throughout to ensure alignment with your vision."
            },
            {
              id: "3",              title: "Do you work with startups?",              content: "Yes. We work with emerging startups defining their identity and established brands ready for evolution. Every project brings unique perspectives we embrace."
            },
            {
              id: "4",              title: "What's included?",              content: "Brand strategy, logo design, color systems, typography, brand guidelines, and all deliverables in digital and print-ready formats."
            }
          ]}
        />
      </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. Clean design. Strategic purpose."
        />
      </div>
    </ThemeProvider>
  );
}
