/* OpenHero source by Cristian Olivera Chávez.
MIT License

Copyright (c) 2026 Cristian Olivera Chávez

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/
"use client"

import { useEffect, useRef, useState } from "react"
import { Icon } from "@iconify/react"

export default function Page() {
  const [activeSection, setActiveSection] = useState("home")
  const [isMobileOpen, setIsMobileOpen] = useState(false)

  const desktopMaskRef = useRef<HTMLDivElement>(null)
  const mobileMaskRef = useRef<HTMLDivElement>(null)
  const desktopNavRef = useRef<HTMLDivElement>(null)
  const mobileNavRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const updateHoles = () => {
      const desktopEl = document.querySelector(
        `.nav-link[data-id="${activeSection}"]`
      ) as HTMLElement | null

      if (desktopNavRef.current && desktopEl && desktopMaskRef.current) {
        const cRect = desktopNavRef.current.getBoundingClientRect()
        const eRect = desktopEl.getBoundingClientRect()

        desktopMaskRef.current.style.setProperty(
          "-webkit-mask-size",
          `100% 100%, ${eRect.width}px ${eRect.height}px`
        )

        desktopMaskRef.current.style.setProperty(
          "-webkit-mask-position",
          `0 0, ${eRect.left - cRect.left}px ${eRect.top - cRect.top}px`
        )

        desktopMaskRef.current.style.setProperty(
          "mask-size",
          `100% 100%, ${eRect.width}px ${eRect.height}px`
        )

        desktopMaskRef.current.style.setProperty(
          "mask-position",
          `0 0, ${eRect.left - cRect.left}px ${eRect.top - cRect.top}px`
        )
      }

      const mobileEl = document.querySelector(
        `.mobile-link[data-id="${activeSection}"]`
      ) as HTMLElement | null

      if (
        mobileNavRef.current &&
        mobileEl &&
        mobileMaskRef.current &&
        isMobileOpen
      ) {
        const cRect = mobileNavRef.current.getBoundingClientRect()
        const eRect = mobileEl.getBoundingClientRect()

        mobileMaskRef.current.style.setProperty(
          "-webkit-mask-size",
          `100% 100%, ${eRect.width}px ${eRect.height}px`
        )

        mobileMaskRef.current.style.setProperty(
          "-webkit-mask-position",
          `0 0, ${eRect.left - cRect.left}px ${eRect.top - cRect.top}px`
        )

        mobileMaskRef.current.style.setProperty(
          "mask-size",
          `100% 100%, ${eRect.width}px ${eRect.height}px`
        )

        mobileMaskRef.current.style.setProperty(
          "mask-position",
          `0 0, ${eRect.left - cRect.left}px ${eRect.top - cRect.top}px`
        )
      }
    }

    const sections = document.querySelectorAll(".section-block")

    const sectionObserver = new IntersectionObserver(
      (entries) => {
        const visibleSection = entries.find((entry) => entry.isIntersecting)

        if (visibleSection) {
          setActiveSection(visibleSection.target.id)
        }
      },
      {
        rootMargin: "-40% 0px -40% 0px",
      }
    )

    sections.forEach((el) => sectionObserver.observe(el))

    const revealObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("active")
          }
        })
      },
      {
        threshold: 0.14,
        rootMargin: "0px 0px -8% 0px",
      }
    )

    document
      .querySelectorAll(".reveal-on-scroll")
      .forEach((el) => revealObserver.observe(el))

    const handleResize = () => updateHoles()

    const handleScroll = () => {
      document.body.style.setProperty(
        "--scroll",
        window.scrollY.toString()
      )
    }

    window.addEventListener("resize", handleResize)
    window.addEventListener("scroll", handleScroll)

    setTimeout(updateHoles, 100)

    return () => {
      sectionObserver.disconnect()
      revealObserver.disconnect()
      window.removeEventListener("resize", handleResize)
      window.removeEventListener("scroll", handleScroll)
    }
  }, [activeSection, isMobileOpen])

  const navLinks = [
    { id: "home", label: "Home" },
    { id: "participation", label: "Participation" },
    { id: "rules", label: "Rules" },
    { id: "projects", label: "Projects" },
  ]

  return (
    <>
      <style jsx global>{`
        html {
          scroll-behavior: smooth;
        }

        body {
          background: black;
          overflow-x: hidden;
          color: white;
        }

        @keyframes slideDownFade {
          from {
            opacity: 0;
            transform: translateY(-20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes slideUpFade {
          from {
            opacity: 0;
            transform: translateY(40px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes drawPath {
          from {
            stroke-dashoffset: 200;
            opacity: 0;
          }

          to {
            stroke-dashoffset: 0;
            opacity: 1;
          }
        }

        @keyframes shine {
          from {
            transform: translateX(-120%);
          }

          to {
            transform: translateX(120%);
          }
        }

        .nav-anim {
          animation: slideDownFade 0.8s cubic-bezier(0.16, 1, 0.3, 1)
            forwards;
        }

        .hero-text-1 {
          opacity: 0;
          animation: slideUpFade 0.8s ease forwards 0.2s;
        }

        .hero-text-2 {
          opacity: 0;
          animation: slideUpFade 0.8s ease forwards 0.4s;
        }

        .svg-underline path {
          stroke-dasharray: 200;
          stroke-dashoffset: 200;
          animation: drawPath 1.5s cubic-bezier(0.33, 1, 0.68, 1)
            forwards 0.5s;
        }

        .desktop-mask {
          transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          -webkit-mask-image: linear-gradient(white, white),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='18' fill='white'/%3E%3C/svg%3E");
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-composite: destination-out;
          mask-composite: exclude;
        }

        .mobile-mask {
          transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          -webkit-mask-image: linear-gradient(white, white),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='12' fill='white'/%3E%3C/svg%3E");
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-composite: destination-out;
          mask-composite: exclude;
        }

        .glass-card {
          background: linear-gradient(
            180deg,
            rgba(24, 24, 27, 0.65) 0%,
            rgba(24, 24, 27, 0.2) 100%
          );
          backdrop-filter: blur(14px);
          border: 1px solid rgba(255, 255, 255, 0.08);
          position: relative;
          overflow: hidden;
          transition:
            transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glass-card::before {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            120deg,
            transparent 20%,
            rgba(255, 255, 255, 0.08),
            transparent 80%
          );
          transform: translateX(-120%);
          pointer-events: none;
        }

        .glass-card:hover::before {
          animation: shine 1.4s ease;
        }

        .hover-glow:hover {
          border-color: rgba(250, 204, 21, 0.45);
          transform: translateY(-10px);
          box-shadow: 0 20px 60px rgba(250, 204, 21, 0.08);
        }

        .gradient-text {
          background: linear-gradient(to right, #fff, #71717a);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .reveal-on-scroll {
          opacity: 0;
          transform: translateY(56px) scale(0.98);
          filter: blur(10px);
          transition:
            opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-on-scroll.active {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }

        .noise::before {
          content: "";
          position: absolute;
          inset: 0;
          background-image: radial-gradient(
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
          );
          background-size: 18px 18px;
          opacity: 0.2;
          pointer-events: none;
        }
      `}</style>

      <div className="bg-black text-white antialiased selection:bg-yellow-400/30 selection:text-yellow-400">
        <nav className="nav-anim fixed top-8 inset-x-0 z-50 flex flex-col px-4 md:px-8 w-full max-w-[1440px] mx-auto">
          <div className="flex items-center justify-between relative">
            <a href="/" className="flex items-center gap-2 shrink-0 z-20">
              <Icon
                icon="solar:code-square-bold-duotone"
                className="text-yellow-400 text-3xl"
              />
              <span className="font-bold text-lg tracking-tight">
                UNAMBA{" "}
                <span className="text-yellow-400 font-medium">
                  Hackathon
                </span>
              </span>
            </a>

            <div className="hidden md:flex absolute left-1/2 -translate-x-1/2 z-10">
              <div
                ref={desktopNavRef}
                className="relative flex p-1.5 items-center justify-center space-x-1 text-sm rounded-full border border-white/10 bg-black/50 backdrop-blur-md"
              >
                <div
                  ref={desktopMaskRef}
                  className="desktop-mask absolute inset-0 bg-white/10 rounded-full -z-10"
                />

                {navLinks.map((link) => (
                  <a
                    key={link.id}
                    href={`#${link.id}`}
                    data-id={link.id}
                    className={`nav-link px-4 py-2 rounded-full transition-all duration-300 relative z-10 border ${
                      activeSection === link.id
                        ? "text-white font-medium border-white/20"
                        : "text-white/60 hover:text-white hover:bg-white/5 border-transparent"
                    }`}
                  >
                    {link.label}
                  </a>
                ))}
              </div>
            </div>

            <div className="hidden md:flex items-center justify-end w-[180px] shrink-0 z-20">
              <a
                href="https://github.com/CristianOlivera1/openhero"
                target="_blank"
                className="flex items-center justify-center px-4 py-2 bg-white text-black rounded-full font-medium hover:bg-white/90 transition-all duration-300 text-sm gap-2 hover:scale-105"
              >
                <span>Join Now</span>
                <Icon icon="line-md:github-loop" className="text-lg" />
              </a>
            </div>

            <button
              onClick={() => setIsMobileOpen(!isMobileOpen)}
              className="md:hidden flex items-center justify-center p-2 text-white/80 hover:text-white bg-black/40 backdrop-blur-md border border-white/10 rounded-xl z-20"
            >
              <Icon
                icon={isMobileOpen ? "line-md:close" : "line-md:menu"}
                className="text-2xl"
              />
            </button>
          </div>

          <div
            className={`md:hidden mt-4 w-full relative rounded-2xl border border-white/10 shadow-2xl overflow-hidden absolute top-full left-0 transition-all duration-300 ${
              isMobileOpen
                ? "opacity-100 translate-y-0 scale-100 pointer-events-auto"
                : "opacity-0 -translate-y-3 scale-95 pointer-events-none"
            }`}
          >
            <div
              ref={mobileNavRef}
              className="relative bg-black/90 backdrop-blur-2xl rounded-2xl"
            >
              <div
                ref={mobileMaskRef}
                className="mobile-mask absolute inset-0 bg-black/90 rounded-2xl -z-10"
              />

              <div className="p-5 flex flex-col space-y-2 relative z-10">
                <div className="px-4 py-2 mb-2 flex items-center gap-2">
                  <Icon
                    icon="solar:code-square-bold-duotone"
                    className="text-yellow-400 text-3xl"
                  />

                  <h2 className="text-xl font-bold tracking-tight">
                    UNAMBA{" "}
                    <span className="text-yellow-400">Hackathon</span>
                  </h2>
                </div>

                {navLinks.map((link) => (
                  <a
                    key={link.id}
                    href={`#${link.id}`}
                    data-id={link.id}
                    onClick={() => setIsMobileOpen(false)}
                    className={`mobile-link px-4 py-3 rounded-xl text-sm transition-all duration-300 border ${
                      activeSection === link.id
                        ? "bg-white/10 text-white font-semibold border-white/10"
                        : "text-zinc-400 hover:text-white hover:bg-white/5 border-transparent"
                    }`}
                  >
                    {link.label}
                  </a>
                ))}

                <div className="pt-6 mt-4 border-t border-white/10">
                  <a
                    href="https://github.com"
                    className="flex items-center justify-center w-full px-4 py-3 bg-white text-black rounded-xl font-medium hover:bg-white/90 transition-colors text-sm gap-2"
                  >
                    <span>Register with GitHub</span>

                    <Icon
                      icon="line-md:github-loop"
                      className="text-lg"
                    />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </nav>

        <main>
          <section
            id="home"
            className="section-block p-2 md:p-4 h-[95vh] md:h-screen flex items-center justify-center relative"
          >
            <div className="relative w-full h-full rounded-[2rem] overflow-hidden bg-[#0A0A0A] border border-white/5 noise">
              <video
                autoPlay
                loop
                muted
                playsInline
                className="absolute inset-0 w-full h-full object-cover object-center pointer-events-none opacity-80"
                style={{
                  WebkitMaskImage:
                    "linear-gradient(to bottom, black 10%, transparent 100%)",
                  maskImage:
                    "linear-gradient(to bottom, black 40%, transparent 100%)",
                }}
              >
                <source src="/resources/openhero/videos/nature/dark-forest-misty-morning.mp4" type="video/mp4" />
              </video>

              <div
                className="absolute inset-0 pointer-events-none mix-blend-screen opacity-30"
                style={{
                  background:
                    "linear-gradient(130deg, transparent 40%, transparent 60%, #00aa17b6 100%)",
                }}
              />

              <div className="absolute bottom-0 inset-x-0 p-6 md:p-16 z-20 flex flex-col lg:flex-row justify-between lg:items-end gap-10">
                <div className="hero-text-1 max-w-4xl">
                  <h1 className="text-5xl md:text-7xl lg:text-[5.5rem] font-bold leading-[1.05] mb-6 tracking-tight">
                    Empowering the talent
                    <br />
                    <span className="text-white/60">
                      of our region.
                    </span>
                  </h1>
                </div>

                <div className="hero-text-2 flex flex-col sm:flex-row items-start sm:items-center gap-6 border-t lg:border-t-0 lg:border-l border-white/10 pt-6 lg:pt-0 lg:pl-12 w-full lg:w-auto">
                  <div className="text-lg text-zinc-400 max-w-sm leading-relaxed">
                    Develop your project and showcase your skills to
                    the world in
                    <span className="relative inline-block whitespace-nowrap text-white font-medium ml-1">
                      just 3 weeks.
                      <svg
                        viewBox="0 0 187 10"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        className="svg-underline absolute -bottom-1 left-0 w-full pointer-events-none"
                        preserveAspectRatio="none"
                      >
                        <path
                          d="M2 7.85498C2 7.85498 63 2.81649 112 1.97674C161 1.137 185.5 4.91586 185.5 4.91586"
                          stroke="#FACC15"
                          strokeWidth="4"
                          strokeLinecap="round"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section
            id="participation"
            className="section-block min-h-screen flex flex-col items-center justify-center py-32 px-6 relative"
          >
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-yellow-400/5 blur-[120px] rounded-full" />

            <div className="max-w-6xl w-full relative z-10">
              <div className="text-center mb-20 reveal-on-scroll">
                <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-4 gradient-text">
                  Who can participate?
                </h2>

                <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
                  Join a community of builders, designers, and
                  innovators.
                </p>
              </div>

              <div className="grid md:grid-cols-3 gap-6">
                {[
                  {
                    icon: "solar:users-group-rounded-bold-duotone",
                    title: "Teams of 2 to 4",
                    text: "Gather your friends or find teammates in our community platform.",
                  },
                  {
                    icon: "solar:diploma-bold-duotone",
                    title: "All Skill Levels",
                    text: "Whether you're a freshman or a senior architecting systems.",
                  },
                  {
                    icon: "solar:rocket-bold-duotone",
                    title: "Expert Mentorship",
                    text: "Industry professionals will guide you throughout the event.",
                  },
                ].map((card) => (
                  <div
                    key={card.title}
                    className="glass-card hover-glow rounded-3xl p-8 reveal-on-scroll"
                  >
                    <div className="h-12 w-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center mb-6 text-yellow-400">
                      <Icon icon={card.icon} className="text-2xl" />
                    </div>

                    <h3 className="text-xl font-semibold mb-3">
                      {card.title}
                    </h3>

                    <p className="text-zinc-400 leading-relaxed text-sm">
                      {card.text}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </section>

          <section
            id="rules"
            className="section-block min-h-screen flex flex-col items-center justify-center py-32 px-6 relative border-t border-white/5 bg-[#050505]"
          >
            <div className="max-w-4xl w-full relative z-10">
              <div className="text-center mb-20 reveal-on-scroll">
                <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-4 gradient-text">
                  Event Timeline
                </h2>

                <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
                  Three weeks of intense building, learning, and
                  shipping.
                </p>
              </div>

              <div className="relative border-l border-white/10 ml-4 md:ml-0 space-y-12 pb-12">
                {[
                  {
                    week: "Week 1",
                    title: "Ideation & Team Formation",
                    text: "Meet your peers, form a team, and brainstorm ideas.",
                  },
                  {
                    week: "Week 2",
                    title: "Development Phase",
                    text: "Turn caffeine into code and build your application.",
                  },
                  {
                    week: "Week 3",
                    title: "Refinement & Pitch",
                    text: "Polish your UI and prepare your pitch deck.",
                  },
                ].map((item) => (
                  <div
                    key={item.week}
                    className="relative pl-8 reveal-on-scroll"
                  >
                    <div className="absolute w-4 h-4 rounded-full bg-black border-2 border-yellow-400 left-[-8px] top-1 shadow-[0_0_10px_rgba(250,204,21,0.5)]" />

                    <span className="text-yellow-400 font-mono text-sm tracking-widest uppercase mb-2 block">
                      {item.week}
                    </span>

                    <h3 className="text-2xl font-bold mb-2">
                      {item.title}
                    </h3>

                    <p className="text-zinc-400 text-sm leading-relaxed">
                      {item.text}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </section>

          <section
            id="projects"
            className="section-block min-h-screen flex flex-col items-center justify-center py-32 px-6 relative border-t border-white/5"
          >
            <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-yellow-400/5 blur-[150px] rounded-full" />

            <div className="max-w-6xl w-full relative z-10">
              <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6 reveal-on-scroll">
                <div>
                  <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-4 gradient-text">
                    Previous Projects
                  </h2>

                  <p className="text-zinc-400 text-lg max-w-xl">
                    Incredible ideas brought to life in record time.
                  </p>
                </div>

                <a
                  href="#"
                  className="text-yellow-400 hover:text-white transition-colors flex items-center gap-1 text-sm font-medium"
                >
                  View All Projects
                  <Icon
                    icon="solar:arrow-right-linear"
                    className="text-lg"
                  />
                </a>
              </div>

              <div className="grid md:grid-cols-2 gap-6">
                {[
                  {
                    title: "MedAssist AI",
                    image:
                      "/resources/openhero/supporting-media/294301ae1881ca058078.jpg",
                    tags: ["AI", "Healthcare"],
                  },
                  {
                    title: "AgriPay Network",
                    image:
                      "/resources/openhero/supporting-media/094147ad46fdd0f27141.jpg",
                    tags: ["Fintech", "Web3"],
                  },
                ].map((project) => (
                  <div
                    key={project.title}
                    className="group relative rounded-3xl overflow-hidden bg-[#0A0A0A] border border-white/10 hover:border-white/30 transition-all duration-500"
                  >
                    <div className="aspect-video relative overflow-hidden">
                      <img
                        src={project.image}
                        alt={project.title}
                        className="w-full h-full object-cover opacity-60 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700"
                      />

                      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent" />
                    </div>

                    <div className="absolute bottom-0 inset-x-0 p-8">
                      <div className="flex gap-2 mb-4">
                        {project.tags.map((tag) => (
                          <span
                            key={tag}
                            className="px-2.5 py-1 rounded-md bg-white/10 backdrop-blur-md border border-white/10 text-xs font-medium"
                          >
                            {tag}
                          </span>
                        ))}
                      </div>

                      <h3 className="text-2xl font-bold mb-2">
                        {project.title}
                      </h3>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </main>

        <footer className="border-t border-white/10 bg-black pt-16 pb-8 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="flex flex-col md:flex-row justify-between items-start gap-12 mb-16">
              <div className="max-w-xs">
                <a href="/" className="flex items-center gap-2 mb-4">
                  <Icon
                    icon="solar:code-square-bold-duotone"
                    className="text-yellow-400 text-3xl"
                  />

                  <span className="font-bold text-xl tracking-tight">
                    UNAMBA{" "}
                    <span className="text-yellow-400">Hack</span>
                  </span>
                </a>

                <p className="text-zinc-500 text-sm leading-relaxed mb-6">
                  Empowering the next generation of builders in the
                  Apurímac region.
                </p>

                <div className="flex items-center gap-4 text-zinc-400">
                  <a href="#" className="hover:text-white">
                    <Icon icon="mdi:twitter" className="text-xl" />
                  </a>

                  <a href="#" className="hover:text-white">
                    <Icon icon="mdi:github" className="text-xl" />
                  </a>

                  <a href="#" className="hover:text-white">
                    <Icon icon="mdi:discord" className="text-xl" />
                  </a>
                </div>
              </div>

              <div className="flex gap-16">
                <div>
                  <h4 className="text-white font-semibold mb-4 text-sm">
                    Resources
                  </h4>

                  <ul className="space-y-3 text-sm text-zinc-500">
                    <li>
                      <a href="#" className="hover:text-yellow-400">
                        Documentation
                      </a>
                    </li>

                    <li>
                      <a href="#" className="hover:text-yellow-400">
                        Starter Kits
                      </a>
                    </li>

                    <li>
                      <a href="#" className="hover:text-yellow-400">
                        Mentorship Program
                      </a>
                    </li>

                    <li>
                      <a href="#" className="hover:text-yellow-400">
                        FAQ
                      </a>
                    </li>
                  </ul>
                </div>

                <div>
                  <h4 className="text-white font-semibold mb-4 text-sm">
                    Legal
                  </h4>

                  <ul className="space-y-3 text-sm text-zinc-500">
                    <li>
                      <a href="#" className="hover:text-white">
                        Privacy Policy
                      </a>
                    </li>

                    <li>
                      <a href="#" className="hover:text-white">
                        Terms of Service
                      </a>
                    </li>

                    <li>
                      <a href="#" className="hover:text-white">
                        Code of Conduct
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-zinc-600">
              <p>© 2026 UNAMBA Hackathon. All rights reserved.</p>

              <p className="flex items-center gap-1">
                Designed with
                <Icon
                  icon="solar:heart-bold"
                  className="text-zinc-400 text-base"
                />
                for the community.
              </p>
            </div>
          </div>
        </footer>
      </div>
    </>
  )
}