"use client";

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, BarChart3, Cloud, Code, Cpu, Lock, MessageSquare, Sparkles, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="CTO"
          navItems={[
            { name: "About", id: "about" },
            { name: "Expertise", id: "expertise" },
            { name: "Achievements", id: "achievements" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="Chief Technology Officer"
          description="Strategic technology leader with 15+ years driving digital transformation, building world-class engineering teams, and architecting scalable solutions for Fortune 500 companies. Passionate about innovation, mentorship, and creating technology cultures that deliver exceptional results."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "View Portfolio", href: "#expertise" },
            { text: "Let's Connect", href: "#contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg"
          imageAlt="Professional CTO portrait"
          frameStyle="browser"
          logoLineHeight={1.2}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Driving Technology Excellence and Organizational Growth Through Visionary Leadership"
          metrics={[
            { icon: Users, label: "Teams Built & Mentored", value: "500+" },
            { icon: Zap, label: "Infrastructure Scaling", value: "100x" },
            { icon: TrendingUp, label: "Cost Optimization", value: "$50M+" },
            { icon: Award, label: "Industry Recognition", value: "10+" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="expertise" data-section="expertise">
        <FeatureBorderGlow
          title="Core Technical Expertise"
          description="Comprehensive competencies across full technology stack, cloud platforms, and organizational leadership"
          tag="Specializations"
          tagIcon={Sparkles}
          features={[
            {
              icon: Cloud,
              title: "Cloud Architecture",              description: "Multi-cloud strategy, AWS, Azure, GCP infrastructure design, and cost optimization for enterprise scale"
            },
            {
              icon: Code,
              title: "Engineering Leadership",              description: "Building high-performance teams, establishing development practices, code quality standards, and engineering culture"
            },
            {
              icon: BarChart3,
              title: "Digital Transformation",              description: "Legacy modernization, microservices architecture, API-first design, and organizational technology alignment"
            },
            {
              icon: Lock,
              title: "Security & Compliance",              description: "Zero-trust architecture, data protection, regulatory compliance (HIPAA, SOC2, GDPR), and incident response"
            },
            {
              icon: Cpu,
              title: "System Design",              description: "Scalable systems architecture, performance optimization, database design, and distributed computing"
            },
            {
              icon: Users,
              title: "Team Building",              description: "Recruiting, retention, mentorship programs, and creating inclusive engineering organizations"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="achievements" data-section="achievements">
        <MetricCardSeven
          title="Career Milestones & Impact"
          description="Key achievements demonstrating technical excellence and business impact"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "15+",              title: "Years Technical Leadership",              items: [
                "Director-level positions at market leaders",                "Led transformation of 3 major enterprises",                "Mentored 50+ engineering leaders"
              ]
            },
            {
              id: "2",              value: "$2B+",              title: "Technology Platform Value Created",              items: [
                "Built services serving millions of users",                "Infrastructure handling 10M+ requests/sec",                "Generated significant revenue impact"
              ]
            },
            {
              id: "3",              value: "5",              title: "Industry Awards & Recognition",              items: [
                "40 Under 40 Technology Leaders",                "Best CTO Annual Award (2023)",                "Thought leadership publications"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Outstanding technical vision combined with genuine care for team development. Transformed our engineering organization from fragmented silos into a cohesive, high-performing unit. Results speak volumes—we went from 6-month release cycles to continuous deployment in 18 months."
          rating={5}
          author="Sarah Chen, CEO - FinTech Innovations"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg", alt: "CEO testimonial" },
            { src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", alt: "Executive testimonial" },
            { src: "https://img.b2bpic.net/free-photo/closeup-happy-senior-businessman-with-flipchart_1262-1744.jpg", alt: "Founder testimonial" },
            { src: "https://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg", alt: "Manager testimonial" },
            { src: "https://img.b2bpic.net/free-photo/successful-expert_1098-14503.jpg", alt: "VP testimonial" },
            { src: "https://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg", alt: "CTO testimonial" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Common questions about working together and my approach to technology leadership"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What industries have you worked in?",              content: "I've led technology initiatives across diverse sectors including fintech, healthcare, e-commerce, SaaS, and enterprise software. This cross-industry experience brings fresh perspectives to complex technical challenges and best practices from multiple domains."
            },
            {
              id: "2",              title: "What's your approach to team building?",              content: "I believe in hiring for potential and culture fit, then investing heavily in mentorship and professional growth. My philosophy emphasizes psychological safety, continuous learning, diverse perspectives, and clear career progression paths that develop future leaders."
            },
            {
              id: "3",              title: "How do you balance innovation with stability?",              content: "Through strategic technology planning that establishes clear investment portfolios: maintain core systems with high stability, modernize strategically to reduce technical debt, and innovate in new domains. Regular technology reviews ensure alignment with business objectives."
            },
            {
              id: "4",              title: "What's your experience with cloud migration?",              content: "I've successfully led multiple large-scale cloud migrations ranging from monolithic systems to complex distributed architectures. Key expertise includes phased migration strategies, cost optimization, architecture redesign, and risk mitigation during transitions."
            },
            {
              id: "5",              title: "How do you approach technical debt?",              content: "Technical debt is managed through proactive architecture reviews, automated testing, refactoring initiatives, and establishing policies. I allocate 20-30% of engineering capacity to debt reduction, ensuring long-term velocity and system health while maintaining delivery cadence."
            },
            {
              id: "6",              title: "What engagement models are available?",              content: "I offer advisory roles, interim CTO positions, board/executive coaching, strategic consulting, and architecture reviews. Each engagement is customized to organizational needs, typically ranging from 3-24 months depending on objectives and scope."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Let's Discuss Your Technology Challenges"
          ctaDescription="Whether you need strategic consulting, interim leadership, or architectural guidance, I'm here to help drive technology excellence."
          ctaButton={{ text: "Schedule a Conversation", href: "mailto:hello@yourname.com" }}
          ctaIcon={MessageSquare}
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          faqs={[
            {
              id: "1",              title: "What should I expect in an initial consultation?",              content: "Our first conversation focuses on understanding your technology challenges, organizational context, and objectives. I typically ask about current infrastructure, team composition, business goals, and specific pain points. This helps determine if and how I can best assist."
            },
            {
              id: "2",              title: "How long do typical engagements last?",              content: "Engagements vary: strategic advisory (3-6 months), interim CTO (6-12 months), architectural consulting (ongoing). Duration depends on scope and complexity. We establish clear milestones and outcomes upfront."
            },
            {
              id: "3",              title: "Do you work with startups and enterprises?",              content: "Yes. I work across company stages from Series A startups to Fortune 500 enterprises. Each brings unique challenges—startups need lean architecture and rapid scaling, while enterprises require change management and legacy modernization expertise."
            },
            {
              id: "4",              title: "What's your approach to knowledge transfer?",              content: "Knowledge transfer is embedded in all engagements. I prioritize documenting decisions, mentoring internal teams, and building organizational capabilities. The goal is sustainable impact that continues after engagement ends."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="CTO"
          logoLineHeight={1.1}
        />
      </div>
    </ThemeProvider>
  );
}