"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Award, Github, Linkedin, Mail, Sparkles, Twitter, Zap, TrendingUp } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BelTeez Studio"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Work", id: "projects" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Start a Project", href: "#contact" }}
          animateOnLoad={true}
          className="bg-background/80 backdrop-blur-md border border-accent/10"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="BelTeez Studio"
          description="We Build Digital Experiences & Intelligent Agents. Premium websites and AI automation for businesses that want to scale."
          buttons={[
            { text: "Start a Project", href: "#contact" },
            { text: "View Our Work", href: "#projects" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/abstract-3d-geometric-floating-shape-cub-1772481624263-3c23f911.png"
          imageAlt="3D geometric shape with red glow"
          mediaAnimation="opacity"
          frameStyle="card"
          className="min-h-screen flex items-center justify-center"
          logoContainerClassName="mb-12"
          descriptionClassName="text-lg md:text-3xl text-foreground/90 mb-12 max-w-2xl"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSixteen
          title="Our Services"
          description="We combine cutting-edge web development with intelligent automation to deliver solutions that scale."
          tag="Premium Solutions"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          negativeCard={{
            items: [
              "Limited scalability",              "Manual processes",              "Inconsistent user experiences",              "Missed opportunities"
            ]
          }}
          positiveCard={{
            items: [
              "Custom websites that convert",              "24/7 AI-powered automation",              "Full-stack digital solutions",              "Future-ready architecture"
            ]
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Explore Services", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="process" data-section="process">
        <ProductCardTwo
          title="Our Process"
          description="From discovery to deployment, we follow a strategic methodology that ensures your project succeeds."
          tag="Strategic Approach"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          products={[
            {
              id: "1",              brand: "Step 1",              name: "Discovery",              price: "Research & Strategy",              rating: 5,
              reviewCount: "Essential",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/discovery-phase-visualization-showing-re-1772481624306-7b668b8a.png",              imageAlt: "Discovery phase visualization"
            },
            {
              id: "2",              brand: "Step 2",              name: "Design",              price: "Wireframes & Visuals",              rating: 5,
              reviewCount: "Precision",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/design-phase-visualization-with-wirefram-1772481622419-4788caf9.png",              imageAlt: "Design phase visualization"
            },
            {
              id: "3",              brand: "Step 3",              name: "Development",              price: "Code & Build",              rating: 5,
              reviewCount: "Excellence",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/development-phase-showing-code-compilati-1772481623231-99d22b30.png",              imageAlt: "Development phase visualization"
            },
            {
              id: "4",              brand: "Step 4",              name: "Deployment",              price: "Launch & Monitor",              rating: 5,
              reviewCount: "Support",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/deployment-phase-visualization-showing-s-1772481622843-47d14f2e.png",              imageAlt: "Deployment phase visualization"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          buttons={[{ text: "Learn More", href: "#" }]}
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardTwo
          title="Recent Work"
          description="Projects that showcase our expertise in web development and AI integration."
          tag="Case Studies"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          products={[
            {
              id: "1",              brand: "Tech Startup",              name: "Analytics Dashboard Platform",              price: "Web Development",              rating: 5,
              reviewCount: "12.5k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/sleek-web-interface-for-a-tech-startup-s-1772481623569-ba130e3e.png",              imageAlt: "Analytics dashboard project"
            },
            {
              id: "2",              brand: "E-Commerce Brand",              name: "Conversion-Optimized Store",              price: "Full-Stack Solution",              rating: 5,
              reviewCount: "8.3k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/e-commerce-platform-interface-with-produ-1772481624022-62fdf0b9.png",              imageAlt: "E-commerce platform project"
            },
            {
              id: "3",              brand: "SaaS Company",              name: "Workflow Automation Suite",              price: "AI + Development",              rating: 5,
              reviewCount: "15.7k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/saas-application-interface-showing-workf-1772481623418-acc67de1.png",              imageAlt: "SaaS automation project"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          buttons={[{ text: "View All Projects", href: "#" }]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Meet BelTeez AI"
          description={[
            "Your 24/7 Digital Assistant. We don't just build websites—we create intelligent systems that work for you around the clock.",            "BelTeez AI is our proprietary automation platform that handles repetitive tasks, engages customers, and scales your business without manual intervention. Powered by cutting-edge AI and built on robust architecture, it's the future of digital business."
          ]}
          useInvertedBackground={false}
          buttons={[
            { text: "Discover BelTeez AI", href: "#" },
            { text: "Start Free Trial", href: "#" }
          ]}
          showBorder={true}
          titleClassName="text-5xl md:text-7xl font-medium tracking-tight"
          descriptionClassName="text-lg text-foreground/80 leading-relaxed"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Impact"
          description="Delivering measurable results for clients across industries."
          tag="Growth Metrics"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            { id: "1", value: "200+", description: "Websites Built" },
            { id: "2", value: "95%", description: "Client Retention Rate" },
            { id: "3", value: "50M+", description: "User Interactions Automated" },
            { id: "4", value: "4.9★", description: "Average Client Rating" }
          ]}
          gridVariant="uniform-all-items-equal"
          buttons={[{ text: "See Case Studies", href: "#" }]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="BelTeez Studio transformed our digital presence. Their combination of strategic thinking and technical excellence delivered results we didn't expect. Working with their team felt like having an extension of our own staff."
          rating={5}
          author="Sarah Mitchell, CEO TechFlow Innovations"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/professional-headshot-of-a-business-exec-1772481621832-2f0ab395.png", alt: "Sarah Mitchell" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/professional-headshot-of-a-creative-dire-1772481622443-699d0634.png", alt: "James Rodriguez" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/professional-headshot-of-a-marketing-or--1772481621659-79aa3dd4.png", alt: "Emily Chen" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/professional-headshot-of-a-tech-entrepre-1772481622358-9f0de26f.png", alt: "David Park" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/professional-headshot-of-a-business-owne-1772481622098-c5bf890f.png", alt: "Lisa Johnson" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5N1oSaratG9pZnfEkR4yYiu4/professional-headshot-of-a-tech-director-1772481622135-73db3b3a.png", alt: "Michael Torres" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
          className="py-20"
          testimonialClassName="text-2xl md:text-4xl font-medium leading-relaxed mb-8"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to Build Something Extraordinary? Let's create digital experiences and intelligent agents that work for your business."
          animationType="entrance-slide"
          buttons={[
            { text: "Start Your Project", href: "#" },
            { text: "Schedule a Call", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          className="py-32"
          textClassName="text-3xl md:text-5xl font-medium leading-tight"
          contentClassName="w-full md:w-3/4 mx-auto"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="BelTeez Studio"
          copyrightText="© 2025 BelTeez Studio | Websites & AI Agents That Work For You"
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/beltezstudio", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/beltezstudio", ariaLabel: "LinkedIn" },
            { icon: Github, href: "https://github.com/beltezstudio", ariaLabel: "GitHub" },
            { icon: Mail, href: "mailto:hello@beltezstudio.com", ariaLabel: "Email" }
          ]}
          className="bg-background"
          containerClassName="py-12"
          cardClassName="bg-card/40 backdrop-blur-sm border border-accent/20"
        />
      </div>
    </ThemeProvider>
  );
}
