"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import { Activity, Award, Bell, Briefcase, CalendarPlus, Clock, Cog, Crown, FileText, Gift, Globe, Grid, Key, Lightbulb, Network, Play, ShieldCheck, Sparkles, Star, Upload, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSizeMediumTitles"
        background="grid"
        cardStyle="glass-depth"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "About",          id: "#about"},
        {
          name: "Domains",          id: "#domains"},
        {
          name: "Timeline",          id: "#timeline"},
        {
          name: "Team",          id: "#team"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="FUSION TECHATHON 4.0"
      button={{
        text: "Register Now",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="FUSION TECHATHON 4.0"
      description="24-Hour National Hackathon | Build. Innovate. Win. | Prize Pool ₹60,000+ | Countdown to Oct 26, 2024"
      buttons={[
        {
          text: "Register Now",          href: "#contact"},
        {
          text: "Learn More",          href: "#about"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/3d-render-modern-with-flowing-abstract-particle-design_1048-13801.jpg"
      imageAlt="Abstract tech background with glowing particles and circuit lines"
      showDimOverlay={false}
    />
  </div>

  <div id="about" data-section="about">
      <MetricCardOne
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "hours",          value: "24",          title: "Hours",          description: "Intense coding and innovation",          icon: Clock,
        },
        {
          id: "prizes",          value: "₹60K+",          title: "Prizes",          description: "Exciting prize pool & goodies",          icon: Award,
        },
        {
          id: "level",          value: "National",          title: "Level",          description: "Compete with top talents nationwide",          icon: Globe,
        },
      ]}
      title="What is Fusion Techathon?"
      description="Fusion Techathon 4.0 is a premier 24-hour national-level hackathon, meticulously organized by the Department of AI & ML at Alva's Institute of Engineering and Technology, Moodbidri. It's a platform designed to ignite innovation, foster collaboration, and challenge bright minds to develop groundbreaking solutions in the fields of Artificial Intelligence and Machine Learning."
      animationType="depth-3d"
    />
  </div>

  <div id="domains" data-section="domains">
      <FeatureBorderGlow
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Lightbulb,
          title: "Artificial Intelligence & Machine Learning",          description: "Innovate with AI models, deep learning, and data science solutions."},
        {
          icon: Grid,
          title: "Web3 & Blockchain",          description: "Build decentralized applications, smart contracts, and secure protocols."},
        {
          icon: ShieldCheck,
          title: "Cybersecurity",          description: "Develop robust security solutions to protect digital assets and privacy."},
        {
          icon: Cog,
          title: "IoT & Embedded Systems",          description: "Create smart devices, automation, and interconnected hardware solutions."},
        {
          icon: Activity,
          title: "Healthcare Tech",          description: "Revolutionize health with AI diagnostics, telemedicine, and wearable tech."},
        {
          icon: Lightbulb,
          title: "Open Innovation",          description: "Tackle unsolved problems with creative and unconventional approaches."},
      ]}
      title="Explore Domains"
      description="Dive into diverse problem statements and unleash your creativity across various cutting-edge technology domains. Choose your challenge!"
      animationType="blur-reveal"
    />
  </div>

  <div id="benefits" data-section="benefits">
      <FeatureBorderGlow
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Users,
          title: "Expert Mentorship",          description: "Receive guidance from industry experts and academic professionals."},
        {
          icon: Network,
          title: "Networking Opportunities",          description: "Connect with fellow hackers, mentors, and potential employers."},
        {
          icon: Gift,
          title: "Attractive Prizes",          description: "Compete for a significant prize pool and exciting goodies."},
        {
          icon: FileText,
          title: "Participation Certificates",          description: "All participants receive certificates to boost their resumes."},
        {
          icon: Briefcase,
          title: "Industry Exposure",          description: "Get recognized by leading companies and startups."},
        {
          icon: Key,
          title: "Fun & Challenging Experience",          description: "Test your limits and enjoy a thrilling 24-hour coding marathon."},
      ]}
      title="Why Participate?"
      description="Gain invaluable experience, expand your network, and showcase your skills on a national stage."
      animationType="blur-reveal"
    />
  </div>

  <div id="timeline" data-section="timeline">
      <FeatureBorderGlow
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: CalendarPlus,
          title: "Registration Opens",          description: "Date: September 15, 2024 - Begin your journey!"},
        {
          icon: Users,
          title: "Team Formation Deadline",          description: "Date: October 10, 2024 - Form your winning squad."},
        {
          icon: FileText,
          title: "Problem Statement Release",          description: "Date: October 20, 2024 - The challenges are unveiled."},
        {
          icon: Play,
          title: "Hackathon Begins (24 hrs)",          description: "Date: October 26, 2024 - Let the coding begin!"},
        {
          icon: Upload,
          title: "Project Submission",          description: "Date: October 27, 2024 - Deadline for your innovative solutions."},
        {
          icon: Bell,
          title: "Results Announcement",          description: "Date: November 5, 2024 - Find out who the champions are!"},
      ]}
      title="Event Timeline"
      description="Stay on track with all the important dates and deadlines for Fusion Techathon 4.0."
      animationType="blur-reveal"
    />
  </div>

  <div id="prizes" data-section="prizes">
      <PricingCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "first-place",          badge: "1st Place",          badgeIcon: Crown,
          price: "₹25,000",          subtitle: "The ultimate champions",          buttons: [
            {
              text: "Win Big!"},
          ],
          features: [
            "Cash Prize",            "Certificate of Excellence",            "Exclusive Swag Bag",            "Mentorship Opportunity"],
        },
        {
          id: "second-place",          badge: "2nd Place",          badgeIcon: Star,
          price: "₹15,000",          subtitle: "Outstanding innovators",          buttons: [
            {
              text: "Aim High!"},
          ],
          features: [
            "Cash Prize",            "Certificate of Achievement",            "Premium Swag Bag",            "Networking Access"],
        },
        {
          id: "third-place",          badge: "3rd Place",          badgeIcon: Sparkles,
          price: "₹10,000",          subtitle: "Promising talents",          buttons: [
            {
              text: "Showcase Skill!"},
          ],
          features: [
            "Cash Prize",            "Certificate of Merit",            "Goodie Bag",            "Community Recognition"],
        },
      ]}
      title="Prize Pool ₹60,000+"
      description="Compete for glory and attractive cash prizes, along with special category awards and exclusive goodies for all participants."
      animationType="scale-rotate"
    />
  </div>

  <div id="sponsors" data-section="sponsors">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Platinum Sponsor",        "Gold Sponsor",        "Silver Sponsor",        "Bronze Sponsor",        "Community Partner 1",        "Community Partner 2",        "Community Partner 3"]}
      title="Our Sponsors"
      description="We extend our heartfelt gratitude to our esteemed sponsors who make Fusion Techathon 4.0 possible. Their support is invaluable."
      buttons={[
        {
          text: "Become a Sponsor",          href: "#contact"},
      ]}
      speed={30}
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardOne
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      members={[
        {
          id: "member-1",          name: "Prof. Anya Sharma",          role: "Head Organizer",          imageSrc: "http://img.b2bpic.net/free-photo/senior-woman-reading-book-study-room-public-library_482257-122542.jpg",          imageAlt: "Prof. Anya Sharma, Head Organizer"},
        {
          id: "member-2",          name: "Dr. Rohan Patel",          role: "Technical Lead",          imageSrc: "http://img.b2bpic.net/free-photo/neon-light-reflected-girl-s-glasses_181624-37796.jpg",          imageAlt: "Dr. Rohan Patel, Technical Lead"},
        {
          id: "member-3",          name: "Ms. Lena Kumar",          role: "Logistics Coordinator",          imageSrc: "http://img.b2bpic.net/free-photo/3d-data-communications-background-with-glowing-particles_1048-18182.jpg",          imageAlt: "Ms. Lena Kumar, Logistics Coordinator"},
        {
          id: "member-4",          name: "Mr. Arjun Reddy",          role: "Marketing & Outreach",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-worker-standing-beside-heavy-machinery-warehouse-facility-wearing-safety-glasses_482257-135639.jpg",          imageAlt: "Mr. Arjun Reddy, Marketing & Outreach"},
        {
          id: "member-5",          name: "Ms. Priya Singh",          role: "Volunteer Head",          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-taking-notes-office_23-2149749875.jpg",          imageAlt: "Ms. Priya Singh, Volunteer Head"},
        {
          id: "member-6",          name: "Dr. Vivek Rao",          role: "Faculty Advisor",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-evening-makeup-glamour-nightclub-makeup_549566-196.jpg",          imageAlt: "Dr. Vivek Rao, Faculty Advisor"},
      ]}
      title="Meet the Organizers"
      description="The dedicated team from the Department of AI & ML, Alva's Institute of Engineering and Technology, bringing Fusion Techathon 4.0 to life."
      animationType="depth-3d"
    />
  </div>

  <div id="contact" data-section="contact">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",          title: "Who can participate in Fusion Techathon 4.0?",          content: "Students from all engineering colleges across India are welcome to participate. Participants must form teams of 2-4 members."},
        {
          id: "faq-2",          title: "What are the registration fees?",          content: "Please refer to the registration portal for detailed information on fees and payment methods. Early bird discounts might be available!"},
        {
          id: "faq-3",          title: "Will accommodation be provided?",          content: "Accommodation details for outstation participants will be communicated soon. Please keep an eye on our official announcements."},
        {
          id: "faq-4",          title: "What kind of projects can we build?",          content: "Projects should align with the specified domains (AI/ML, Web3, Cybersecurity, IoT, Healthcare Tech, Open Innovation) and aim to solve real-world problems."},
      ]}
      sideTitle="Get In Touch"
      sideDescription="For any inquiries regarding Fusion Techathon 4.0, feel free to reach out to us:\n\nEmail: fusiontechathon@aiet.in\nInstagram: @fusiontechathon\n\nAlva's Institute of Engineering and Technology\nMoodbidri, Karnataka, India"
      faqsAnimation="blur-reveal"
      textPosition="left"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="FUSION TECHATHON 4.0"
      columns={[
        {
          title: "Quick Links",          items: [
            {
              label: "About",              href: "#about"},
            {
              label: "Domains",              href: "#domains"},
            {
              label: "Timeline",              href: "#timeline"},
            {
              label: "Team",              href: "#team"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Instagram",              href: "https://instagram.com/fusiontechathon"},
            {
              label: "LinkedIn",              href: "#"},
            {
              label: "WhatsApp",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2025 Fusion Techathon 4.0 | Dept. of AI & ML, Alva's Institute of Engineering and Technology"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
