"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Code, Rocket, Users, TrendingUp, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="grid"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Noah Whiteson"
          navItems={[
            { name: "About", id: "about" },
            { name: "Work", id: "work" },
            { name: "Experience", id: "experience" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get in Touch",            href: "#contact"
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Noah Whiteson"
          description="Fullstack engineer based in Toronto. I build scalable applications with modern technologies, from elegant frontends to robust backends. Let's create something exceptional."
          buttons={[
            { text: "View My Work", href: "#work" },
            { text: "Connect", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "grid" }}
          mediaAnimation="none"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Building Digital Solutions"
          description="With 5+ years of experience in fullstack development, I specialize in crafting high-performance applications using React, Node.js, TypeScript, and cloud technologies. I'm passionate about clean code, user experience, and solving complex technical challenges."
          tag="About Me"
          useInvertedBackground={false}
        />
      </div>

      <div id="work" data-section="work">
        <FeatureCardOne
          title="Featured Projects"
          description="Showcase of recent work spanning full-stack applications, real-time systems, and performance-optimized solutions."
          tag="Portfolio"
          features={[
            {
              title: "E-Commerce Platform",              description: "Built a complete e-commerce solution with Next.js, Stripe integration, and real-time inventory management. Achieved 99.5% uptime and sub-200ms load times.",              button: { text: "View Details", href: "#" },
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "E-Commerce Platform"
            },
            {
              title: "Real-Time Collaboration Tool",              description: "Developed a WebSocket-based collaboration platform using React, Node.js, and MongoDB. Supports 100+ concurrent users with instant synchronization.",              button: { text: "View Details", href: "#" },
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Real-Time Collaboration Tool"
            },
            {
              title: "Data Analytics Dashboard",              description: "Created a comprehensive analytics dashboard with D3.js visualizations, processing 1M+ data points daily. Full-stack built with PostgreSQL and Express.",              button: { text: "View Details", href: "#" },
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Data Analytics Dashboard"
            },
            {
              title: "Mobile App Backend",              description: "Engineered scalable REST and GraphQL APIs serving a React Native mobile app with 50K+ active users. Implemented advanced caching and CDN optimization.",              button: { text: "View Details", href: "#" },
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Mobile App Backend"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="skills" data-section="skills">
        <MetricCardOne
          title="Core Competencies"
          description="Technical expertise across the full development stack"
          tag="Skills"
          metrics={[
            {
              id: "1",              value: "8+",              title: "Years",              description: "Professional development experience",              icon: Code
            },
            {
              id: "2",              value: "50+",              title: "Projects",              description: "Successfully delivered applications",              icon: Rocket
            },
            {
              id: "3",              value: "20+",              title: "Clients",              description: "Satisfied startups and enterprises",              icon: Users
            },
            {
              id: "4",              value: "99.5%",              title: "Uptime",              description: "Average production reliability",              icon: TrendingUp
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="experience" data-section="experience">
        <PricingCardFive
          title="Professional Experience"
          description="Track record of technical leadership and impactful contributions"
          tag="Career"
          plans={[
            {
              id: "senior",              tag: "Senior Fullstack Engineer",              tagIcon: Star,
              price: "2022",              period: "– Present",              description: "Leading architecture decisions and mentoring junior developers at TechCorp",              button: { text: "Learn More", href: "#" },
              featuresTitle: "Responsibilities:",              features: [
                "Design and implement scalable microservices architecture",                "Lead technical interviews and code reviews",                "Mentor team of 5+ developers",                "Improve app performance by 60%",                "Manage AWS infrastructure and DevOps"
              ]
            },
            {
              id: "mid",              tag: "Fullstack Engineer",              tagIcon: Code,
              price: "2020",              period: "– 2022",              description: "Developed full-stack features for B2B SaaS platform at InnovateLabs",              button: { text: "Learn More", href: "#" },
              featuresTitle: "Key Achievements:",              features: [
                "Built React components and REST APIs",                "Implemented real-time features using WebSockets",                "Reduced database queries by 45%",                "Established coding standards and best practices",                "Collaborated across 8-person engineering team"
              ]
            },
            {
              id: "junior",              tag: "Junior Developer",              tagIcon: Zap,
              price: "2018",              period: "– 2020",              description: "Started career building web applications at StartupXYZ in Toronto",              button: { text: "Learn More", href: "#" },
              featuresTitle: "Growth Areas:",              features: [
                "Learned modern JavaScript frameworks and best practices",                "Contributed to 10+ production applications",                "Improved debugging and problem-solving skills",                "Worked in agile/scrum environment",                "Built strong foundation in full-stack development"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Client Testimonials"
          description="What clients and collaborators say about working together"
          tag="Reviews"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "CEO",              company: "TechCorp",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "CTO",              company: "InnovateLabs",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Product Manager",              company: "StartupXYZ",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              role: "Founder",              company: "GrowthCo",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Lee",              role: "VP Engineering",              company: "CloudSync",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Jessica Lee"
            },
            {
              id: "6",              name: "Alex Thompson",              role: "Director",              company: "Digital Innovations",              rating: 5,
              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Alex Thompson"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Let's build something incredible together. Whether you have a project in mind or just want to chat about technology, I'd love to hear from you."
          animationType="entrance-slide"
          buttons={[
            { text: "Email Me", href: "mailto:noah@example.com" },
            { text: "LinkedIn", href: "https://linkedin.com/in/noahwhiteson" }
          ]}
          background={{ variant: "grid" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Navigation",              items: [
                { label: "About", href: "#about" },
                { label: "Work", href: "#work" },
                { label: "Experience", href: "#experience" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "GitHub", href: "https://github.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Email", href: "mailto:noah@example.com" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Resume", href: "#" },
                { label: "Case Studies", href: "#" },
                { label: "Privacy", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Noah Whiteson. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
