"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Award, MessageSquare, Sparkles, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Obsidian"
          navItems={[
            { name: "Work", id: "portfolio" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Get Started", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          tag="Premium Creative Experience"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Immersive Digital Experiences"
          description="Welcome to Obsidian Studio, where interactive 3D design meets premium creative vision. We craft technically impressive digital experiences that transcend templates and captivate audiences."
          background={{ variant: "glowing-orb" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/an-abstract-luminous-geometric-orb-with--1772495352286-22b37c24.png"
          imageAlt="Interactive 3D geometric orb"
          mediaAnimation="blur-reveal"
          imagePosition="right"
          testimonials={[
            {
              name: "Alex Rivera",              handle: "Creative Director, PixelForge",              testimonial: "Obsidian delivered an experience that completely elevated our brand presence. The 3D integration was seamless and performance-optimized.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-creative-dire-1772495352464-e084c39d.png"},
            {
              name: "Jordan Chen",              handle: "CMO, TechVision Inc",              testimonial: "The micro-interactions and scroll animations brought our website to life. Every detail was meticulously crafted for maximum impact.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-marketing-exe-1772495352155-033030be.png"},
            {
              name: "Morgan Hayes",              handle: "Founder, CreativeHub",              testimonial: "Working with Obsidian was transformative. They understood our vision and executed with precision. A truly premium experience.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-startup-found-1772495352807-f6560290.png"},
          ]}
          testimonialRotationInterval={5000}
          buttons={[
            { text: "Explore Our Work", href: "#portfolio" },
            { text: "Start a Project", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "We transform creative visions into" },
            { type: "text", content: "interactive digital experiences" },
          ]}
          buttons={[
            { text: "Our Process", href: "#services" },
            { text: "Let's Talk", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <FeatureCardTwentyFour
          title="Our Expertise"
          description="We specialize in creating high-end digital experiences with cutting-edge technology and premium design."
          tag="Featured Work"
          tagIcon={Award}
          tagAnimation="slide-up"
          features={[
            {
              id: "1",              title: "3D Interactive Design",              author: "Studio Obsidian",              description: "Custom WebGL and Three.js implementations that create immersive, performance-optimized 3D environments. Every interaction is meticulously crafted for smooth, lag-free experiences across all devices.",              tags: ["WebGL", "Three.js", "Performance"],              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/abstract-visualization-of-a-creative-des-1772495352445-6999a06f.png",              imageAlt: "3D design visualization"},
            {
              id: "2",              title: "Scroll-Based Animations",              author: "Studio Obsidian",              description: "Sophisticated parallax effects and scroll-triggered animations powered by GSAP. Text reveals, element scaling, and depth-based motion create a cinematic user journey.",              tags: ["GSAP", "Animation", "UX"],              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/a-premium-creative-studio-workspace-with-1772495352640-46495283.png",              imageAlt: "Workspace with animation setup"},
            {
              id: "3",              title: "Micro-Interactions & Polish",              author: "Studio Obsidian",              description: "Animated cursors, button transitions, image hover distortions, and subtle page transitions. Every detail contributes to a premium, non-template feel that delights users.",              tags: ["Micro-interactions", "UX/UI", "Polish"],              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/premium-brand-identity-portfolio-piece-f-1772495354987-fc99c7e2.png",              imageAlt: "Brand identity showcase"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="services" data-section="services">
        <MetricCardEleven
          title="Proven Excellence"
          description="Our track record speaks for itself. We deliver premium digital experiences that exceed expectations."
          tag="Results-Driven"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "150+",              title: "Projects Completed",              description: "Premium digital experiences delivered",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/data-visualization-dashboard-showing-aud-1772495355420-f67c278a.png",              imageAlt: "Project portfolio metrics"},
            {
              id: "2",              value: "98%",              title: "Client Satisfaction",              description: "Consistently exceeding expectations",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/visual-representation-of-client-satisfac-1772495353256-a17cab89.png",              imageAlt: "Client satisfaction metrics"},
            {
              id: "3",              value: "12+",              title: "Industry Awards",              description: "Recognition for creative excellence",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/a-premium-creative-studio-workspace-with-1772495352640-46495283.png",              imageAlt: "Award showcase"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Trusted by Industry Leaders"
          description="See what our clients have to say about their experience working with Obsidian Studio."
          tag="Client Testimonials"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Creative Director",              company: "PixelForge Studios",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-creative-dire-1772495352464-e084c39d.png",              imageAlt: "Sarah Mitchell"},
            {
              id: "2",              name: "David Chen",              role: "Product Manager",              company: "TechVision Inc",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-marketing-exe-1772495352155-033030be.png",              imageAlt: "David Chen"},
            {
              id: "3",              name: "Emma Rodriguez",              role: "Marketing Lead",              company: "CreativeHub",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-startup-found-1772495352807-f6560290.png",              imageAlt: "Emma Rodriguez"},
            {
              id: "4",              name: "James Liu",              role: "Brand Strategist",              company: "Innovate Design Co",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-brand-strateg-1772495352030-be697b0c.png",              imageAlt: "James Liu"},
            {
              id: "5",              name: "Sophia Williams",              role: "CEO",              company: "Digital Ventures",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-creative-entr-1772495353177-43f6de63.png",              imageAlt: "Sophia Williams"},
            {
              id: "6",              name: "Marcus Thompson",              role: "Design Director",              company: "Creative Collective",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/professional-portrait-of-a-design-direct-1772495354063-9bbc156c.png",              imageAlt: "Marcus Thompson"},
          ]}
          kpiItems={[
            { value: "180+", label: "Happy Clients" },
            { value: "98%", label: "Retention Rate" },
            { value: "12+", label: "Industry Awards" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Create Together"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Ready to Build Something Extraordinary?"
          description="Contact Obsidian Studio today to discuss your next premium digital project. Let's create an experience that captivates and converts."
          buttons={[
            { text: "Schedule a Consultation", href: "mailto:hello@obsidianstudio.com" },
            { text: "View Our Portfolio", href: "#portfolio" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APXBeQHik9KziWem0RqE2cA8J8/atmospheric-shot-of-a-premium-creative-s-1772495352858-7afe1419.png"
          imageAlt="Obsidian Studio Premium Workspace"
          logoText="Obsidian Studio"
          copyrightText="© 2025 Obsidian Studio. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Services", href: "#services" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Pricing", href: "#contact" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Team", href: "#team" },
                { label: "Careers", href: "#careers" },
              ],
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
