"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Mail, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="large"
      background="aurora"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Webild"
          navItems={[
            { name: "About", id: "about" },
            { name: "Expertise", id: "expertise" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Let's Talk",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="webild CTO"
          description="blablabla"
          tag="Technical Leadership"
          tagIcon={Zap}
          background={{
            variant: "sparkles-gradient"
          }}
          imageSrc="https://img.b2bpic.net/free-photo/smiling-handsome-manager-sitting-table-looking-camera_74855-4068.jpg"
          imageAlt="CTO Portrait"
          buttons={[
            {
              text: "View My Work",              href: "#expertise"
            },
            {
              text: "Get In Touch",              href: "#contact"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Me"
          description={[
            "As Chief Technology Officer of Webild, I lead the technological vision and strategy for our cutting-edge digital platform. My passion lies in architecting robust, scalable solutions that drive business growth and create exceptional user experiences.",            "With deep expertise in cloud infrastructure, microservices, and full-stack development, I've successfully guided multiple organizations through digital transformation journeys. I'm committed to building strong engineering cultures that attract top talent and foster innovation.",            "Beyond technology, I'm an advocate for open-source contributions, mentoring emerging tech leaders, and sharing knowledge through speaking engagements at industry conferences."
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            {
              text: "Download Resume",              href: "#"
            }
          ]}
          showBorder={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Impact & Achievements"
          description="Measurable results from technical leadership and strategic initiatives"
          metrics={[
            {
              id: "1",              value: "15+",              description: "Years of Technical Leadership"
            },
            {
              id: "2",              value: "200M+",              description: "Users Impacted by Systems Built"
            },
            {
              id: "3",              value: "50+",              description: "Engineers Mentored & Developed"
            },
            {
              id: "4",              value: "98%",              description: "System Uptime Average"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="expertise" data-section="expertise">
        <FeatureCardTwentyThree
          title="Core Expertise"
          description="Technical disciplines and specializations that define my leadership approach"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "1",              title: "Cloud Architecture & DevOps",              tags: ["AWS", "Kubernetes", "Infrastructure"],
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-typing-wireless-keyboard_53876-101867.jpg"
            },
            {
              id: "2",              title: "Microservices & API Design",              tags: ["REST", "GraphQL", "gRPC"],
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-typing-wireless-keyboard_53876-101867.jpg"
            },
            {
              id: "3",              title: "Team Leadership & Culture",              tags: ["Engineering Management", "Mentoring", "Agile"],
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-typing-wireless-keyboard_53876-101867.jpg"
            },
            {
              id: "4",              title: "Product Strategy & Vision",              tags: ["Roadmapping", "Innovation", "Growth"],
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-typing-wireless-keyboard_53876-101867.jpg"
            },
            {
              id: "5",              title: "Security & Compliance",              tags: ["GDPR", "Zero-Trust", "Encryption"],
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-typing-wireless-keyboard_53876-101867.jpg"
            },
            {
              id: "6",              title: "Performance Optimization",              tags: ["Scaling", "Monitoring", "Cost Optimization"],
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-typing-wireless-keyboard_53876-101867.jpg"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Others Say"
          description="Testimonials from colleagues, founders, and team members I've worked with"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "CEO",              company: "TechVentures Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg"
            },
            {
              id: "2",              name: "James Chen",              role: "Founder",              company: "InnovateLab",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/content-indian-ceo-standing-smiling-portrait-successful-pensive-bearded-businessman-glasses-posing-office-room-business-expression-management-concept_74855-11642.jpg"
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "VP Product",              company: "Digital Solutions Corp",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg"
            },
            {
              id: "4",              name: "Michael Park",              role: "Investor",              company: "Growth Capital Partners",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Navigation",              items: [
                { label: "About", href: "about" },
                { label: "Expertise", href: "expertise" },
                { label: "Testimonials", href: "testimonials" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Speaking", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Webild. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}