"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Star, Zap, Sparkles, Award, BrainCircuit, GalleryHorizontal, MessageSquare } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Padmesh M"
          navItems={[
            { name: "Home", id: "#hero" },
            { name: "About", id: "#about" },
            { name: "Skills", id: "#skills" },
            { name: "Projects", id: "#projects" },
            { name: "Certifications", id: "#certifications" },
            { name: "Experience", id: "#experience" },
            { name: "Hackathons", id: "#hackathons" },
            { name: "Gallery", id: "#gallery" },
            { name: "Contact", id: "#contact" }
          ]}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroCentered
          title="Hi, I'm Padmesh M"
          description="Frontend Developer. UI/UX Designer. Vibe Coder. Cloud Enthusiast."
          background={{"variant":"animated-grid"}}
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-copy-space_23-2148422246.jpg", alt: "Padmesh M Profile Photo" },
            { src: "http://img.b2bpic.net/free-vector/qr-code-scan-steps-smartphone_23-2148615179.jpg", alt: "Padmesh M QR Code" }
          ]}
          avatarText="15+ Certs. 10+ Projects. 5+ Hackathons. 2+ Internships. 8.08 CGPA."
          buttons={[
            { text: "Explore My Work", href: "#projects" },
            { text: "Download Resume", href: "#" }
          ]}
          buttonAnimation="slide-up"
          marqueeItems={[
            { type: "text", text: "Frontend Developer" },
            { type: "text", text: "UI/UX Designer" },
            { type: "text", text: "Vibe Coder" },
            { type: "text", text: "Cloud Enthusiast" },
            { type: "text", text: "Hackathon Participant" }
          ]}
          marqueeSpeed={20}
          showMarqueeCard={true}
        />
      </div>
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Crafting Immersive Digital Experiences"
          description="As a Frontend Developer and UI/UX Designer, I merge aesthetics with functionality to build captivating web interfaces. My journey through full-stack learning, cloud technologies, and hackathons fuels my passion for innovative problem-solving and creating impactful digital solutions."
          metrics={[
            { value: "React", title: "Frontend" },
            { value: "Figma", title: "Design" },
            { value: "AWS", title: "Cloud" },
            { value: "Node.js", title: "Backend" }
          ]}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-dark-blue-marble-top-lit-surface-with-dark-background_181624-17479.jpg"
          imageAlt="Animated floating tech sphere with development and design icons"
          mediaAnimation="slide-up"
          metricsAnimation="blur-reveal"
          tag="About Me"
          tagIcon={Star}
        />
      </div>
      <div id="skills" data-section="skills">
        <FeatureCardTwelve
          title="My Interactive Skillset"
          description="I bring a versatile range of skills to every project, from pixel-perfect UI/UX design to robust backend development and cloud integration. My expertise spans across modern frameworks and innovative tools."
          features={[
            { id: "frontend", label: "Frontend Development", title: "React, JavaScript, HTML, CSS, Tailwind", items: ["Building responsive, dynamic UIs with React.", "Expertise in modern JavaScript and TypeScript.", "Styling with Tailwind CSS for rapid development."] },
            { id: "backend", label: "Backend & Database", title: "Node.js, Express, API Fundamentals, SQL, DBMS", items: ["Developing scalable APIs with Node.js and Express.", "Designing and managing relational databases with SQL.", "Understanding of database management systems."] },
            { id: "cloud", label: "Cloud & DevOps", title: "AWS, Docker, GitHub Actions", items: ["Deploying and managing applications on AWS.", "Containerizing applications with Docker for portability.", "Automating workflows with GitHub Actions."] },
            { id: "design", label: "UI/UX & Graphics", title: "Figma, Canva, Photoshop", items: ["Crafting intuitive user experiences and interfaces.", "Prototyping and wireframing with Figma.", "Graphic design for impactful visual communication."] },
            { id: "ai", label: "Artificial Intelligence", title: "Gemini, Microsoft AI, Prompt Engineering", items: ["Leveraging AI tools for enhanced development workflows.", "Applying prompt engineering for effective AI interaction.", "Exploring new AI capabilities for creative solutions."] }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="My Capabilities"
          tagIcon={Zap}
        />
      </div>
      <div id="projects" data-section="projects">
        <ProductCardFour
          title="Innovative Projects & Solutions"
          description="A curated collection of my most impactful projects, showcasing my expertise in frontend development, UI/UX design, and full-stack integration. Each project features dynamic visuals and interactive elements."
          products={[
            { id: "slotup", name: "SlotUp Platform", price: "Full-Stack", variant: "Next.js, Tailwind, Firebase", imageSrc: "http://img.b2bpic.net/free-photo/smart-car-navigator-interface-windshield-hologram_53876-103040.jpg", imageAlt: "Screenshot of SlotUp Platform UI" },
            { id: "ai-verification", name: "AI Verification System", price: "AI/ML", variant: "Python, Flask, React", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concept_23-2152004114.jpg", imageAlt: "Screenshot of AI Verification System UI" },
            { id: "analytics-dashboard", name: "Analytics Dashboard", price: "Frontend", variant: "React, D3.js, Styled-Components", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-futuristic-screen_23-2149126945.jpg", imageAlt: "Screenshot of Analytics Dashboard" },
            { id: "forest-simulation", name: "Forest Network Simulation", price: "Algorithm", variant: "Python, NetworkX", imageSrc: "http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg", imageAlt: "Visualization of Forest Network Simulation" },
            { id: "traffic-simulation", name: "Traffic Simulation", price: "Simulation", variant: "Java, Swing", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-cityscape-with-glowing-lines_23-2151966693.jpg", imageAlt: "Screenshot of Traffic Simulation UI" },
            { id: "qr-generator", name: "QR Generator", price: "Utility", variant: "React, Express, QR-Code API", imageSrc: "http://img.b2bpic.net/free-photo/bar-code-data-identification-encryption-concept_53876-167092.jpg", imageAlt: "Screenshot of QR Generator UI" },
            { id: "ecommerce-platform", name: "E-Commerce Platform", price: "Full-Stack", variant: "MERN Stack, Stripe", imageSrc: "http://img.b2bpic.net/free-photo/shopping-cart-black-background-with-copy-space_23-2148317906.jpg", imageAlt: "Screenshot of E-Commerce Platform" },
            { id: "airbnb-clone", name: "Airbnb Clone", price: "Full-Stack", variant: "Next.js, Prisma, MongoDB", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-tablet-hotel-room_23-2148095198.jpg", imageAlt: "Screenshot of Airbnb Clone UI" },
            { id: "admin-dashboard", name: "Admin Dashboard", price: "Frontend", variant: "React, Material-UI", imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg", imageAlt: "Screenshot of Admin Dashboard UI" }
          ]}
          carouselMode="buttons"
          gridVariant="two-columns-alternating-heights"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={true}
          tag="My Creations"
          tagIcon={Sparkles}
        />
      </div>
      <div id="certifications" data-section="certifications">
        <ProductCardFour
          title="My Achievements & Certifications"
          description="Proof of my dedication to continuous learning and skill development across various domains, including AI, Cloud, and Full-Stack Development. Each certificate represents a milestone in my professional journey."
          products={[
            { id: "cert-1", name: "Gemini Certified Student", price: "Google AI", variant: "AI/ML", imageSrc: "http://img.b2bpic.net/free-vector/gradient-colorful-music-festival-labels_23-2149126074.jpg", imageAlt: "Gemini Certified Student certificate" },
            { id: "cert-2", name: "Microsoft & Coursera Full-Stack Development", price: "Web Dev", variant: "Full-Stack", imageSrc: "http://img.b2bpic.net/free-photo/focus-lines-code-laptop-screen-used-by-data-center-engineers_482257-117920.jpg", imageAlt: "Microsoft & Coursera Full-Stack Development certificate" },
            { id: "cert-3", name: "Oracle Cloud Infrastructure Associate", price: "Cloud", variant: "OCI", imageSrc: "http://img.b2bpic.net/free-photo/saas-concept-collage_23-2149399285.jpg", imageAlt: "Oracle Cloud Infrastructure Associate certificate" },
            { id: "cert-4", name: "AI Skills for Students", price: "AI/ML", variant: "Fundamentals", imageSrc: "http://img.b2bpic.net/free-photo/microprocessor-with-brain_1134-207.jpg", imageAlt: "AI Skills for Students certificate" },
            { id: "cert-5", name: "Unlocking AI for Everyone", price: "AI Literacy", variant: "Introduction", imageSrc: "http://img.b2bpic.net/free-photo/inclusion-word-written-chalk-drawn-sun_23-2148699730.jpg", imageAlt: "Unlocking AI for Everyone certificate" },
            { id: "cert-6", name: "Practical GitHub Actions", price: "DevOps", variant: "CI/CD", imageSrc: "http://img.b2bpic.net/free-photo/business-colleagues-working-late-night_74855-2606.jpg", imageAlt: "Practical GitHub Actions certificate" },
            { id: "cert-7", name: "Learning Docker", price: "DevOps", variant: "Containerization", imageSrc: "http://img.b2bpic.net/free-photo/weather-effects-collage-concept_23-2150062191.jpg", imageAlt: "Learning Docker certificate" },
            { id: "cert-8", name: "Data Mining", price: "Data Science", variant: "Analytics", imageSrc: "http://img.b2bpic.net/free-vector/big-data-visualization-futuristic-infographic-information-aesthetic-design-visual-data-complexity-complex-data-threads-graphic-visualization-abstract-data-graph_1217-4677.jpg", imageAlt: "Data Mining certificate" },
            { id: "cert-9", name: "AI Tools Workshop", price: "AI/ML", variant: "Hands-on", imageSrc: "http://img.b2bpic.net/free-photo/artificial-intelligence-future-technology_23-2151977500.jpg", imageAlt: "AI Tools Workshop certificate" },
            { id: "cert-10", name: "Ignite Bootcamp", price: "Development", variant: "Intensive", imageSrc: "http://img.b2bpic.net/free-photo/young-people-red-looking-busy-while-working-with-donations-distributing_259150-57436.jpg", imageAlt: "Ignite Bootcamp certificate" }
          ]}
          carouselMode="buttons"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="My Qualifications"
          tagIcon={Award}
        />
      </div>
      <div id="experience" data-section="experience">
        <TeamCardTen
          title="Professional Journey & Milestones"
          tag="My Experience"
          members={[
            { id: "exp-1", name: "SkillFied Mentor", imageSrc: "http://img.b2bpic.net/free-photo/education-knowledge-wisdom-school-academic-concept_53876-21394.jpg", imageAlt: "SkillFied Mentor illustration" },
            { id: "exp-2", name: "Frontend Developer Intern @ Aethonix Solutions", imageSrc: "http://img.b2bpic.net/free-vector/initial-monogram-letter-x-aircraft-wings-logo-icon-modern-heraldic-wings-logo-linear-flying-airlines-logotype-wings-logo-concept_645578-1050.jpg", imageAlt: "Aethonix Solutions Intern illustration" },
            { id: "exp-3", name: "Software Team Lead & Designer @ DOSWIN Computers", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139166.jpg", imageAlt: "DOSWIN Computers Team Lead illustration" },
            { id: "exp-4", name: "Hardware Support Intern", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105514.jpg", imageAlt: "Hardware Support Intern illustration" }
          ]}
          memberVariant="card"
          useInvertedBackground={true}
          tagAnimation="slide-up"
          membersAnimation="slide-up"
        />
      </div>
      <div id="hackathons" data-section="hackathons">
        <ProductCardFour
          title="Hackathons & Innovation"
          description="Showcasing my participation and achievements in various hackathons, startup competitions, and innovation challenges. These experiences reflect my passion for creative problem-solving and rapid prototyping."
          products={[
            { id: "act-1", name: "IDE Bootcamp", price: "Participation", variant: "Coding", imageSrc: "http://img.b2bpic.net/free-photo/creative-designers-working-project-together_58466-11707.jpg", imageAlt: "IDE Bootcamp illustration" },
            { id: "act-2", name: "Hackathons", price: "Awards & Certificates", variant: "Innovation", imageSrc: "http://img.b2bpic.net/free-photo/team-working-animation-project_23-2149269885.jpg", imageAlt: "Hackathon illustration" },
            { id: "act-3", name: "Startup Competitions", price: "Participation", variant: "Entrepreneurship", imageSrc: "http://img.b2bpic.net/free-photo/joyful-executive-manager-having-fun-break_482257-77659.jpg", imageAlt: "Startup Competition illustration" },
            { id: "act-4", name: "Innovation Challenges", price: "Recognition", variant: "Problem-Solving", imageSrc: "http://img.b2bpic.net/free-photo/young-man-woman-making-funny-faces-while-taking-selfies-party-with-neon-lights-smoke_482257-29540.jpg", imageAlt: "Innovation Challenge illustration" },
            { id: "act-5", name: "Design Competitions", price: "Awards", variant: "UI/UX", imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office_23-2149749873.jpg", imageAlt: "Design Competition illustration" },
            { id: "act-6", name: "Poster Design Events", price: "Participation", variant: "Graphics", imageSrc: "http://img.b2bpic.net/free-photo/startup-business-people-looking-strategy-board-information-thoughtful_53876-31546.jpg", imageAlt: "Poster Design Event illustration" },
            { id: "act-7", name: "Leadership Activities", price: "Certificates", variant: "Teamwork", imageSrc: "http://img.b2bpic.net/free-photo/pyramid-with-boss-top_23-2148636925.jpg", imageAlt: "Leadership Activities illustration" }
          ]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="My Engagements"
          tagIcon={BrainCircuit}
        />
      </div>
      <div id="gallery" data-section="gallery">
        <ProductCardFour
          title="Digital Gallery & Creations"
          description="A visual journey through my various projects, achievements, and creative endeavors. Explore my work from hackathons to design projects, showcasing the breadth of my capabilities."
          products={[
            { id: "gal-1", name: "Hackathon Moments", price: "Visuals", variant: "Events", imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code-green_146671-18931.jpg", imageAlt: "Hackathon Moments gallery image" },
            { id: "gal-2", name: "Project Showcases", price: "UI/UX", variant: "Development", imageSrc: "http://img.b2bpic.net/free-vector/web-development-concept-set_1284-6769.jpg", imageAlt: "Project Showcases gallery image" },
            { id: "gal-3", name: "Certification Wall", price: "Achievements", variant: "Skills", imageSrc: "http://img.b2bpic.net/free-photo/two-businesswomen-working-together_53876-26243.jpg", imageAlt: "Certification Wall gallery image" },
            { id: "gal-4", name: "Workshop Snapshots", price: "Learning", variant: "Education", imageSrc: "http://img.b2bpic.net/free-photo/young-asian-guy-trying-get-inside-retail-store-black-friday-before-opening-hours-crazy-shopper-fighting-arguing-with-security-guard-while-standing-shopping-mall-entrance_482257-64849.jpg", imageAlt: "Workshop Snapshots gallery image" },
            { id: "gal-5", name: "Event Participations", price: "Community", variant: "Networking", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-taking-selfies_23-2148395365.jpg", imageAlt: "Event Participations gallery image" },
            { id: "gal-6", name: "Internship Insights", price: "Experience", variant: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/business-teammates-working-late_23-2148991315.jpg", imageAlt: "Internship Insights gallery image" },
            { id: "gal-7", name: "Design Portfolio", price: "Graphics", variant: "Creativity", imageSrc: "http://img.b2bpic.net/free-photo/representation-collective-mind-process-concept-digital-art-style_23-2151657802.jpg", imageAlt: "Design Portfolio gallery image" },
            { id: "gal-8", name: "Logo Creations", price: "Branding", variant: "Identity", imageSrc: "http://img.b2bpic.net/free-vector/collection-flat-business-logo_23-2147557714.jpg", imageAlt: "Logo Creations gallery image" },
            { id: "gal-9", name: "Poster Designs", price: "Visuals", variant: "Marketing", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-art-exhibition-poster_23-2149478828.jpg", imageAlt: "Poster Designs gallery image" }
          ]}
          carouselMode="buttons"
          gridVariant="bento-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={true}
          tag="Visual Showcase"
          tagIcon={GalleryHorizontal}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get in Touch"
          title="Let's Build Something Amazing Together"
          description="Whether you have a project idea, a collaboration proposal, or just want to connect, I'm always eager to hear from you. Fill out the form below or reach out directly!"
          buttons={[
            { text: "Send a Message", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{"variant":"sparkles-gradient"}}
          useInvertedBackground={false}
          tagIcon={MessageSquare}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoText="Padmesh M"
          columns={[
            { title: "Connect", items: [{ label: "GitHub", href: "https://github.com/padmeshm" }, { label: "LinkedIn", href: "https://linkedin.com/in/padmeshm" }, { label: "Email", href: "mailto:padmeshm@example.com" }] },
            { title: "Resources", items: [{ label: "Resume", href: "#" }, { label: "Projects", href: "#projects" }, { label: "Skills", href: "#skills" }] },
            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
          ]}
          copyrightText="© 2024 Padmesh M. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
