"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import TextAbout from "@/components/sections/about/TextAbout";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Award, BarChart3, CheckCircle, Clock, Cloud, Code, Cpu, Database, Eye, GitBranch, Github, Linkedin, Mail, Monitor, Package, Server, Settings, Shield, Smartphone, Sparkles, TrendingUp, Twitter, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="HOF Coral"
          navItems={[
            { name: "Home", id: "home" },
            { name: "About", id: "about" },
            { name: "Work", id: "features" },
            { name: "Skills", id: "metrics" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Developer & Creator"
          bottomRightText="hello@hofcoral.dev"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="The Best Developer in the World"
          description="Crafting exceptional digital experiences with cutting-edge technology and creative innovation. HOF Coral transforms ideas into powerful, scalable solutions that drive real business value."
          background={{ variant: "sparkles-gradient" }}
          kpis={[
            { value: "50+", label: "Projects Delivered" },
            { value: "100%", label: "Client Satisfaction" },
            { value: "10yrs", label: "Industry Experience" }
          ]}
          enableKpiAnimation={true}
          tag="Welcome to Excellence"
          tagIcon={Sparkles}
          buttons={[
            { text: "View My Work", href: "#features" },
            { text: "Get in Touch", href: "#contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/data-scientist-doing-software-quality-assurance-reading-source-code_482257-116879.jpg"
          imageAlt="HOF Coral - Developer and Creator"
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Me"
          tagIcon={CheckCircle}
          title="Passionate about building beautiful, functional solutions that solve real problems. With a decade of experience across web and mobile platforms, I combine technical expertise with creative design thinking to deliver transformative digital experiences."
          useInvertedBackground={false}
          buttons={[
            { text: "Download Resume", href: "#" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Professional Achievements"
          description="Proven track record of excellence and innovation in software development"
          tag="Impact & Results"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              value: "50",              title: "Projects",              description: "Successfully delivered across web, mobile, and enterprise",              icon: Zap
            },
            {
              id: "2",              value: "40",              title: "Clients",              description: "From startups to Fortune 500 companies worldwide",              icon: Users
            },
            {
              id: "3",              value: "15",              title: "Languages",              description: "Expert proficiency in multiple programming languages",              icon: Code
            },
            {
              id: "4",              value: "99%",              title: "Uptime",              description: "Production systems maintained with reliability and excellence",              icon: Shield
            }
          ]}
          gridVariant="bento-grid"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="Featured Work"
          description="A selection of projects showcasing expertise in design, development, and problem-solving"
          tag="Portfolio"
          tagIcon={Award}
          features={[
            {
              id: 1,
              title: "Enterprise SaaS Platform",              description: "Built a scalable multi-tenant SaaS platform serving 10,000+ users. Implemented advanced analytics, real-time collaboration features, and comprehensive API architecture. Resulted in 300% revenue growth for the client.",              imageSrc: "https://img.b2bpic.net/free-vector/business-landing-page-template_52683-28746.jpg",              imageAlt: "Enterprise SaaS Platform Interface"
            },
            {
              id: 2,
              title: "Mobile-First E-Commerce",              description: "Developed a progressive web app with offline capabilities and seamless checkout experience. Optimized performance metrics resulting in 45% faster load times and increased conversion rates by 60%.",              imageSrc: "https://img.b2bpic.net/free-vector/business-workshop-social-media-pack-landing-page_23-2149381280.jpg",              imageAlt: "Mobile E-Commerce Application"
            },
            {
              id: 3,
              title: "Real-Time Data Visualization",              description: "Created an interactive dashboard for real-time financial data visualization using advanced charting libraries. Engineered optimized data pipelines processing millions of data points per second.",              imageSrc: "https://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg",              imageAlt: "Data Visualization Dashboard"
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="bento-features" data-section="bento-features">
        <FeatureBento
          title="Core Competencies"
          description="Expertise spanning full-stack development, cloud architecture, and modern development practices"
          tag="Technical Skills"
          features={[
            {
              title: "Frontend Excellence",              description: "React, Vue, Next.js - Building performant, accessible user interfaces",              bentoComponent: "icon-info-cards",              items: [
                { icon: Zap, label: "Performance", value: "Core Web Vitals" },
                { icon: Eye, label: "Design", value: "UX/UI Focused" },
                { icon: Smartphone, label: "Responsive", value: "Mobile First" }
              ]
            },
            {
              title: "Backend Development",              description: "Node.js, Python, AWS - Scalable server architectures and DevOps",              bentoComponent: "3d-task-list",              items: [
                { icon: Server, label: "API Design", time: "RESTful & GraphQL" },
                { icon: Database, label: "Databases", time: "SQL & NoSQL" },
                { icon: Cloud, label: "Cloud Deployment", time: "AWS, GCP, Azure" }
              ]
            },
            {
              title: "Integration & Automation",              description: "CI/CD pipelines, testing frameworks, and deployment automation",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: GitBranch, ring: 1 },
                { icon: BarChart3, ring: 1 },
                { icon: Package, ring: 2 },
                { icon: Shield, ring: 2 },
                { icon: Clock, ring: 3 }
              ]
            },
            {
              title: "Tools & Platforms",              description: "Industry-standard tools and cutting-edge technologies",              bentoComponent: "marquee",              centerIcon: Cpu,
              variant: "icon",              icons: [Code, GitBranch, Package, Settings, Monitor, Database]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          carouselMode="buttons"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="HOF Coral is exceptional. They transformed our entire platform architecture and delivered results that exceeded every expectation. Their technical expertise combined with genuine partnership approach makes them invaluable."
          rating={5}
          author="Sarah Mitchell, CTO at TechVenture"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", alt: "Sarah Mitchell" },
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "James Chen" },
            { src: "https://img.b2bpic.net/free-vector/people-designs-collection_1212-288.jpg", alt: "Emma Rodriguez" },
            { src: "https://img.b2bpic.net/free-vector/business-avatars-collection_23-2147533877.jpg", alt: "David Park" },
            { src: "https://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg", alt: "Lisa Thompson" },
            { src: "https://img.b2bpic.net/free-vector/business-team-avatar-collection-flat-design_23-2147555118.jpg", alt: "Michael Brown" }
          ]}
          ratingAnimation="opacity"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Let's Connect"
          tagIcon={Mail}
          title="Ready to Build Something Amazing?"
          description="Whether you have a complex technical challenge, need architectural guidance, or want to discuss your next big project, I'm here to help. Let's create exceptional digital solutions together."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-vector/computer-with-social-profile-social-community_24877-53905.jpg"
          imageAlt="Connect and collaborate"
          mediaAnimation="blur-reveal"
          mediaPosition="right"
          inputPlaceholder="your.email@example.com"
          buttonText="Get in Touch"
          termsText="I'll respond within 24 hours. Your information is secure and won't be shared."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="HOF CORAL"
          copyrightText="© 2025 HOF Coral. Building exceptional digital experiences."
          socialLinks={[
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub Profile" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn Profile" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter Profile" },
            { icon: Mail, href: "mailto:hello@hofcoral.dev", ariaLabel: "Email Contact" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}