"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 FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
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="CTO & Technical Leader at Webild"
          description="Driving innovation in web technologies and digital transformation. With 15+ years of experience building scalable architectures and leading high-performing engineering teams."
          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="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Common questions about my experience, approach, and availability"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is your approach to technical leadership?",              content: "I believe in leading by example, fostering psychological safety, and empowering engineers to make decisions. My approach combines strategic vision with hands-on technical involvement, ensuring alignment between business goals and engineering excellence."
            },
            {
              id: "2",              title: "How do you scale engineering teams?",              content: "Scaling requires clear communication, strong processes, and investing in culture. I focus on hiring top talent, establishing clear ownership domains, implementing robust code review practices, and maintaining engineering velocity as teams grow."
            },
            {
              id: "3",              title: "What technologies are you most experienced with?",              content: "I have deep expertise in cloud platforms (AWS, GCP), containerization (Docker, Kubernetes), programming languages (Python, Go, Node.js, Java), and various databases. However, I prioritize choosing the right tool for the problem over technology preferences."
            },
            {
              id: "4",              title: "Are you available for consulting or advisory roles?",              content: "Yes, I'm open to select consulting engagements and advisory board positions with companies aligned with my interests in technology, innovation, and ethical engineering practices. Please reach out to discuss opportunities."
            },
            {
              id: "5",              title: "Do you speak at conferences or write about technology?",              content: "I actively participate in the tech community through conference speaking, technical writing, and mentoring. I enjoy sharing insights on architecture, leadership, and engineering culture. Let's connect if you're interested in collaboration."
            },
            {
              id: "6",              title: "What are your thoughts on AI and machine learning?",              content: "AI is transformative but requires thoughtful implementation. I'm focused on practical applications that solve real problems, understanding ethical implications, and ensuring responsible AI practices within organizations."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Let's Collaborate"
          ctaDescription="Whether you're interested in technical consulting, speaking opportunities, or connecting about innovation, I'd love to hear from you."
          ctaIcon={Mail}
          ctaButton={{
            text: "Send Me an Email",            href: "mailto:hello@webild.io"
          }}
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          faqs={[
            {
              id: "1",              title: "What's the best way to reach you?",              content: "Email is the best way to reach me for most inquiries. For urgent matters, you can also connect with me on LinkedIn. I try to respond to all messages within 2 business days."
            },
            {
              id: "2",              title: "Do you take on freelance projects?",              content: "I primarily focus on my role at Webild, but I may consider select high-impact freelance projects that align with my expertise and interests. Feel free to reach out with details."
            },
            {
              id: "3",              title: "Are you open to new opportunities?",              content: "I'm currently focused on my role as CTO at Webild, but I'm always interested in hearing about compelling opportunities that involve technical leadership or strategic impact."
            }
          ]}
        />
      </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>
  );
}