"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, Briefcase, BookOpen, Mail, Sparkles, TrendingUp } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Conrad Wyrick"
          navItems={[
            { name: "About", id: "about" },
            { name: "Experience", id: "experience" },
            { name: "Research", id: "research" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Conrad Wyrick"
          description="Research Analyst @ S&P Global | Bridging Mechanical Engineering & Data Analytics | Accessibility Research Pioneer"
          tag="Engineer & Analyst"
          tagIcon={Sparkles}
          background={{ variant: "radial-gradient" }}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-engineer-solar-panels-plant-reading-documentation_482257-120499.jpg",              imageAlt: "Professional headshot of Conrad Wyrick"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/team-meeting-startups_23-2148898715.jpg",              imageAlt: "University of Florida campus"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/company-employees-discussing-market-data-charts-skilled-woman-leader-two-men-looking-diagrams-computer-screen-analyzing-profit-growth-business-growth-female-business-leaders-concept_74855-24379.jpg",              imageAlt: "Data analysis and market research workspace"
            }
          ]}
          buttons={[
            { text: "View Research", href: "#research" },
            { text: "Let's Connect", href: "#contact" }
          ]}
          mediaAnimation="slide-up"
          tagAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Engineering to Analytics"
          description="Mechanical Engineering graduate from the University of Florida with specialized certificates in Engineering Innovation and Leadership. Studied abroad in London focusing on engineering solutions for disability advocacy. Currently in S&P Global's 18-month rotational program, gaining expertise in market research, data analysis, and commodities/energy/sustainability insights."
          tag="About Me"
          tagIcon={Award}
          imageSrc="http://img.b2bpic.net/free-photo/team-meeting-startups_23-2148898715.jpg"
          imageAlt="University of Florida engineering campus"
          buttons={[
            { text: "Download Resume", href: "#" }
          ]}
          useInvertedBackground={true}
        />
      </div>

      <div id="experience" data-section="experience">
        <FeatureCardSeven
          title="Professional Experience"
          description="Leadership and analytical experience spanning across rotational programs, mentorship, and organizational management"
          tag="Career Highlights"
          tagIcon={Briefcase}
          features={[
            {
              id: 1,
              title: "Research Analyst — S&P Global",              description: "18-month rotational program focused on market research, data analysis, and commodities/energy/sustainability insights. Analyzing market trends and developing analytical frameworks for strategic decision-making.",              imageSrc: "http://img.b2bpic.net/free-photo/company-employees-discussing-market-data-charts-skilled-woman-leader-two-men-looking-diagrams-computer-screen-analyzing-profit-growth-business-growth-female-business-leaders-concept_74855-24379.jpg",              imageAlt: "S&P Global research and analytics workspace"
            },
            {
              id: 2,
              title: "STEM Mentorship Lead",              description: "Mentored 80+ students in science, technology, engineering, and mathematics, fostering interest in technical fields and providing guidance on career pathways and academic success.",              imageSrc: "http://img.b2bpic.net/free-photo/team-meeting-startups_23-2148898715.jpg",              imageAlt: "Mentoring and educational leadership"
            },
            {
              id: 3,
              title: "Organization Engagement Manager",              description: "Managed engagement and operations for a 120-member organization, coordinating events, communications, and strategic initiatives to drive member participation and organizational growth.",              imageSrc: "http://img.b2bpic.net/free-photo/company-employees-discussing-market-data-charts-skilled-woman-leader-two-men-looking-diagrams-computer-screen-analyzing-profit-growth-business-growth-female-business-leaders-concept_74855-24379.jpg",              imageAlt: "Team coordination and organizational leadership"
            },
            {
              id: 4,
              title: "Athletics Coach",              description: "Coached 30 athletes in competitive sports, developing training programs, providing technical feedback, and fostering a culture of excellence and teamwork.",              imageSrc: "http://img.b2bpic.net/free-photo/team-meeting-startups_23-2148898715.jpg",              imageAlt: "Sports coaching and athletic development"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
        />
      </div>

      <div id="research" data-section="research">
        <ProductCardTwo
          title="Research & Publications"
          description="Peer-reviewed research contributions advancing accessibility in broadcast media, particularly for blind and low-vision viewers"
          tag="Academic Work"
          tagIcon={BookOpen}
          products={[
            {
              id: "1",              brand: "UIST '23",              name: "Front Row: Automatically Generating Immersive Audio Representations of Tennis Broadcasts for Blind Viewers",              price: "ACM Publication",              rating: 5,
              reviewCount: "Peer-Reviewed",              imageSrc: "http://img.b2bpic.net/free-photo/people-watching-tennis-video-clip-digital-device_53876-14565.jpg",              imageAlt: "Front Row research paper on accessible tennis broadcasts"
            },
            {
              id: "2",              brand: "CHI EA '23",              name: "Towards Accessible Sports Broadcasts for Blind and Low-Vision Viewers",              price: "ACM Publication",              rating: 5,
              reviewCount: "Extended Abstract",              imageSrc: "http://img.b2bpic.net/free-photo/people-watching-tennis-video-clip-digital-device_53876-14565.jpg",              imageAlt: "CHI Extended Abstract on accessible sports broadcasts"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Impact & Achievements"
          description="Quantified contributions to education, research, and leadership"
          tag="Key Metrics"
          tagIcon={TrendingUp}
          metrics={[
            { id: "1", value: "80+", description: "STEM Students Mentored" },
            { id: "2", value: "120", description: "Organization Members Managed" },
            { id: "3", value: "30", description: "Athletes Coached" },
            { id: "4", value: "2", description: "Peer-Reviewed Publications" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Connect With Me"
          description="Interested in collaborating, discussing research opportunities, or learning more about my work? I'd love to hear from you."
          tagIcon={Mail}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
          inputPlaceholder="Your email address"
          buttonText="Get in Touch"
          termsText="I'll get back to you as soon as possible. We respect your privacy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Conrad Wyrick"
          columns={[
            {
              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Email", href: "mailto:conrad@example.com" }
              ]
            },
            {
              items: [
                { label: "GitHub", href: "https://github.com" },
                { label: "Research", href: "#research" }
              ]
            },
            {
              items: [
                { label: "Back to Top", href: "#" },
                { label: "About", href: "#about" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
