import { useNavigate } from 'react-router';
import { useState } from 'react';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { Icon } from '@iconify/react';

export default function HomePage() {
  const navigate = useNavigate();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [openFaq, setOpenFaq] = useState<number | null>(0);

  const faqs = [
    {
      question: 'Siapa yang bisa mengikuti hackathon ini?',
      answer:
        'Hackathon ini terbuka untuk mahasiswa, fresh graduate, dan profesional muda yang memiliki passion di bidang teknologi. Peserta dapat mendaftar secara tim.',
    },
    {
      question: 'Apakah ada biaya pendaftaran?',
      answer:
        'Tidak, hackathon ini GRATIS dan terbuka untuk semua peserta yang memenuhi kriteria.',
    },
    {
      question: 'Apa tema hackathon kali ini?',
      answer:
        'Tema hackathon kali ini adalah "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif".',
    },
    {
      question: 'Bagaimana format pelaksanaannya?',
      answer:
        'Hackathon dilaksanakan secara online dengan berbagai tahap mulai dari pendaftaran, technical meeting, tahap penyisihan, hingga final.',
    },
    {
      question: 'Apa hadiah lombanya?',
      answer:
        'Total hadiah senilai Rp14.500.000 dengan juara 1 mendapat Rp6.000.000, juara 2 Rp4.000.000, juara 3 Rp2.500.000, dan juara kategori lainnya Rp2.000.000.',
    },
    {
      question: 'Apakah harus membentuk tim? Boleh solo?',
      answer:
        'Tidak boleh solo. Peserta harus membentuk tim yang terdiri dari 2 - 5 orang per tim. Peserta bisa mencari anggota melalui website ini atau WA Group Hackathon.',
    },
    {
      question: 'Apakah boleh menggunakan AI (vibe coding)?',
      answer:
        'Ya, peserta diperbolehkan menggunakan AI tools untuk membantu development. Kami merekomendasikan menggunakan Kolosal.ai selama proses development (Free Credit)',
    },
    {
      question: 'Apa project wajib di-deploy?',
      answer:
        'Diusahakan project agar di-deploy dan dapat diakses secara online untuk meningkatkan penilaian.',
    },
    {
      question: 'Apakah peserta mendapatkan sertifikat?',
      answer:
        'Kami akan memberikan sertifikat kepada tim yang submit project dan menyelesaikan rangkaian hackathon.',
    },
    {
      question: 'Website error dan terjadi masalah?',
      answer:
        'Jika menemukan masalah teknis, silakan hubungi kami melalui grup WA Hackathon.',
    },
  ];

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="flex items-center justify-between px-4 md:px-8 py-4 border-b border-gray-200 bg-white sticky top-0 z-50 max-w-7xl mx-auto">
        <div className="flex items-center gap-2">
          <span className="text-lg md:text-xl font-bold">IMPHNEN</span>
          <span className="text-lg md:text-xl font-bold text-primary-500">
            Hackathon
          </span>
        </div>

        {/* Desktop Menu */}
        <div className="hidden md:flex text-label1 items-center gap-4 lg:gap-8">
          <a
            href="#timeline"
            className="text-gray-600 hover:text-gray-900 transition-colors"
          >
            Timeline
          </a>
          <a
            href="#hadiah"
            className="text-gray-600 hover:text-gray-900 transition-colors"
          >
            Hadiah
          </a>
          <a
            href="#faq"
            className="text-gray-600 hover:text-gray-900 transition-colors"
          >
            FAQ
          </a>

          <Button
            onClick={() => navigate('/auth/login')}
            size="sm"
            variant="bordered"
            className="rounded-lg text-base"
          >
            Masuk
          </Button>
          <Button
            onClick={() => navigate('/auth/signup')}
            size="sm"
            className="rounded-lg text-base"
          >
            Daftar Sekarang
          </Button>
        </div>

        {/* Mobile Menu Button */}
        <button
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          className="md:hidden p-2 cursor-pointer"
        >
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
        </button>
      </nav>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="md:hidden border-b border-gray-200 bg-white">
          <div className="flex flex-col items-start gap-4 px-4 py-4">
            <a
              href="#timeline"
              className="ms-3 text-gray-600 hover:text-gray-900"
            >
              Timeline
            </a>
            <a
              href="#hadiah"
              className="ms-3 text-gray-600 hover:text-gray-900"
            >
              Hadiah
            </a>
            <a href="#faq" className="ms-3 text-gray-600 hover:text-gray-900">
              FAQ
            </a>
            <a href="#masuk" className="ms-3 text-gray-600 hover:text-gray-900">
              Masuk
            </a>
            <button
              onClick={() => navigate('/auth/login')}
              className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
            >
              Daftar Sekarang
            </button>
          </div>
        </div>
      )}

      {/* Hero Section */}
      <section className="flex flex-col items-center justify-center px-4 md:px-8 py-20 md:py-20 bg-linear-to-b from-white to-gray-50">
        {/* Logos */}
        <div className="flex items-center gap-4 md:gap-8 lg:gap-12 mb-8 md:mb-12 lg:mb-16 flex-wrap justify-center">
          <div className="flex items-center">
            <img
              src="images/imphnen-logo.svg"
              alt="IMPHNEN"
              className="h-12 md:h-16"
            />
          </div>
          <span className="text-3xl md:text-5xl lg:text-6xl font-bold text-gray-400">
            ×
          </span>
          <div className="flex items-center">
            <img
              src="images/sponsors/kolosal-logo_rlxbck.svg"
              alt="Kolosal.ai"
              className="h-8 md:h-12"
            />
          </div>
        </div>

        {/* Title */}
        <h1 className="text-h1 font-bold text-gray-900 mb-4 text-center">
          Hackathon
        </h1>

        {/* Subtitle */}
        <p className="text-p1 text-primary-500 font-semibold mb-6 md:mb-8 text-center px-4">
          "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
        </p>

        {/* Description */}
        <p className="text-p3 text-gray-600 max-w-lg text-center mb-8 md:mb-12 px-4">
          Kompetisi pengembangan teknologi untuk menciptakan
          <br className="hidden md:block" /> solusi inovatif yang menghadirkan
          dampak nyata
        </p>

        {/* Status */}
        <div className="flex items-center gap-4 md:gap-8 mb-10 md:mb-16 text-base text-gray-600">
          <div className="flex items-center gap-2 md:gap-3">
            <Icon icon="streamline-plump:web" width="16" height="16" />
            <span>Online</span>
          </div>
          <div className="flex items-center gap-2 md:gap-3 text-center">
            <Icon icon="heroicons:clock" width="16" height="16" />
            <span>Pendaftaran hingga 30 November 2025</span>
          </div>
        </div>

        {/* CTA Buttons */}
        <div className="flex items-center gap-4 px-4">
          <Button
            onClick={() => navigate('/auth/signup')}
            className="rounded-lg text-base max-h-auto"
          >
            Daftar Sekarang
          </Button>
          <a
            href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center px-4 py-2.5 border-2 border-gray-300 hover:border-gray-400 transition-colors text-center bg-transparent hover:text-gray-900 hover:bg-gray-50 text-base text-gray-600 rounded-lg font-bai-jamjuree font-semibold"
          >
            Gabung Grup WA Hackathon
          </a>
        </div>

        {/* Scroll indicator */}
        <div className="mt-12 md:mt-20">
          <svg
            className="w-6 h-6 text-gray-400 animate-bounce"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 14l-7 7m0 0l-7-7m7 7V3"
            />
          </svg>
        </div>
      </section>

      {/* About Section */}
      <section className="py-16 md:py-24 px-4 md:px-8 bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-5xl font-bold mb-10">
            Tentang <span className="text-primary-500">Hackathon</span>
          </h2>
          <p className="text-lg md:text-xl text-left md:text-center text-gray-600 mb-6">
            <span className="font-semibold text-gray-900">Hackathon</span>{' '}
            adalah kompetisi pengembangan teknologi yang mengajak talenta muda
            untuk berkolaborasi dalam menciptakan solusi inovatif.
          </p>
          <p className="text-lg md:text-xl text-left md:text-center text-gray-600">
            IMPHNEN bersama Kolosal.ai mengadakan Hackathon dengan tema lomba{' '}
            <span className="font-semibold text-primary-500">
              "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
            </span>
            .
          </p>
        </div>
      </section>

      {/* Prizes Section */}
      <section id="hadiah" className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
        <div className="max-w-lg md:max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              Hadiah <span className="text-primary-500">Menarik</span>
            </h2>
            <p className="text-xl md:text-2xl text-primary-500 font-semibold">
              Total Prize Pool Rp14.500.000
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {/* Prize 1 */}
            <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-primary-500 transition-colors">
              <div className="flex justify-center mb-4">
                <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
                  <Icon
                    icon="ic:round-star"
                    className="h-8 w-8 text-primary-500"
                  />
                </div>
              </div>
              <h3 className="text-2xl font-bold text-center mb-2">Juara 1</h3>
              <p className="text-3xl font-bold text-primary-500 text-center">
                Rp6.000.000
              </p>
            </div>

            {/* Prize 2 */}
            <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-gray-500 transition-colors">
              <div className="flex justify-center mb-4">
                <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
                  <Icon
                    icon="ic:round-star"
                    className="h-8 w-8 text-gray-600"
                  />
                </div>
              </div>
              <h3 className="text-2xl font-bold text-center mb-2">Juara 2</h3>
              <p className="text-3xl font-bold text-primary-500 text-center">
                Rp4.000.000
              </p>
            </div>

            {/* Prize 3 */}
            <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-orange-300 transition-colors">
              <div className="flex justify-center mb-4">
                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center">
                  <Icon
                    icon="ic:round-star"
                    className="h-8 w-8 text-orange-600"
                  />
                </div>
              </div>
              <h3 className="text-2xl font-bold text-center mb-2">Juara 3</h3>
              <p className="text-3xl font-bold text-orange-600 text-center">
                Rp2.500.000
              </p>
            </div>

            {/* Special Prize */}
            <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-purple-300 transition-colors">
              <div className="flex justify-center mb-4">
                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center">
                  <Icon
                    icon="ic:round-star"
                    className="h-8 w-8 text-purple-600"
                  />
                </div>
              </div>
              <h3 className="text-2xl font-bold text-center mb-2">
                Juara Kategori Lainnya
              </h3>
              <p className="text-3xl font-bold text-purple-600 text-center">
                Rp2.000.000
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline Section */}
      <section id="timeline" className="py-16 md:py-24 px-4 md:px-8 bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              Timeline <span className="text-primary-500">Acara</span>
            </h2>
            <p className="text-lg text-gray-600">
              Jadwal lengkap pelaksanaan hackathon
            </p>
          </div>

          <div>
            {/* Timeline Item 1 */}
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
                <div className="w-0.5 h-full bg-gray-300"></div>
              </div>
              <div className="flex-1 pb-8">
                <p className="text-primary-500 font-semibold mb-2">
                  30 November 2025
                </p>
                <h3 className="text-xl font-bold mb-2">Penutupan Registrasi</h3>
                <p className="text-gray-600">
                  Batas akhir pendaftaran peserta hackathon.
                </p>
              </div>
            </div>

            {/* Timeline Item 2 */}
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
                <div className="w-0.5 h-full bg-gray-300"></div>
              </div>
              <div className="flex-1 pb-8">
                <p className="text-primary-500 font-semibold mb-2">
                  30 November 2025
                </p>
                <h3 className="text-xl font-bold mb-2">Technical Meeting</h3>
                <p className="text-gray-600">
                  Akan diadakan technical meeting terkait lomba melalui Google
                  Meet. Stay tune di grup WA Hackathon.
                </p>
              </div>
            </div>

            {/* Timeline Item 3 */}
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
                <div className="w-0.5 h-full bg-gray-300"></div>
              </div>
              <div className="flex-1 pb-8">
                <p className="text-primary-500 font-semibold mb-2">
                  1 - 7 Desember 2025
                </p>
                <h3 className="text-xl font-bold mb-2">Tahap Penyisihan</h3>
                <p className="text-gray-600">
                  Peserta mengerjakan tantangan yang diberikan.
                </p>
              </div>
            </div>

            {/* Timeline Item 4 */}
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
                <div className="w-0.5 h-full bg-gray-300"></div>
              </div>
              <div className="flex-1 pb-8">
                <p className="text-primary-500 font-semibold mb-2">
                  8 - 14 Desember 2025
                </p>
                <h3 className="text-xl font-bold mb-2">Penilaian & Webinar</h3>
                <p className="text-gray-600">
                  Proses penilaian oleh juri dan sesi webinar.
                </p>
              </div>
            </div>

            {/* Timeline Item 5 */}
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
              </div>
              <div className="flex-1">
                <p className="text-primary-500 font-semibold mb-2">
                  15 Desember 2025
                </p>
                <h3 className="text-xl font-bold mb-2">Pengumuman & Final</h3>
                <p className="text-gray-600">
                  Presentasi final dan pengumuman pemenang.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Judges Section */}
      <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
        <div className="md:max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              Dewan <span className="text-primary-500">Juri</span>
            </h2>
            <p className="text-lg text-gray-600">
              Perwakilan dari IMPHNEN dan Kolosal.ai yang akan menilai karya
            </p>
          </div>

          <div className="w-full max-w-md md:max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Judge 1 */}
            <div className="flex flex-col justify-between bg-white rounded-xl p-8 shadow-lg text-center">
              {/* <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div> */}
              <h3 className="text-p3 font-bold mb-1">
                Alifais Farrel Ramdhani
              </h3>
              <div>
                <p className="text-primary-500 font-semibold mb-1">CTO</p>
                <p className="text-gray-600">Kolosal.ai</p>
              </div>
            </div>

            {/* Judge 2 */}
            <div className="flex flex-col justify-between bg-white rounded-xl p-8 shadow-lg text-center">
              {/* <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div> */}
              <h3 className="text-p3 font-bold mb-1">Anka Tama</h3>
              <div>
                <p className="text-primary-500 font-semibold mb-1">Admin</p>
                <p className="text-gray-600">IMPHNEN</p>
              </div>
            </div>

            {/* Judge 3 */}
            <div className="flex flex-col justify-between bg-white rounded-xl p-8 shadow-lg text-center">
              {/* <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div> */}
              <h3 className="text-p3 font-bold mb-1">Hafid Nur</h3>
              <div>
                <p className="text-primary-500 font-semibold mb-1">Moderator</p>
                <p className="text-gray-600">IMPHNEN</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section id="faq" className="py-16 md:py-24 px-4 md:px-8 bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold mb-4 text-primary-500">
              FAQ
            </h2>
            <p className="text-lg text-gray-600">
              Pertanyaan yang Sering Diajukan
            </p>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <div key={index} className="border border-gray-200 rounded-lg">
                <button
                  onClick={() => setOpenFaq(openFaq === index ? null : index)}
                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors cursor-pointer"
                >
                  <span className="font-semibold text-gray-900">
                    {faq.question}
                  </span>
                  <svg
                    className={`w-5 h-5 text-primary-500 transform transition-transform ${
                      openFaq === index ? 'rotate-180' : ''
                    }`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </button>
                {openFaq === index && (
                  <div className="px-6 pb-4 text-gray-600">{faq.answer}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Sponsors Section */}
      <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-3xl md:text-5xl font-bold mb-4">
            Sponsor & <span className="text-primary-500">Partner</span>
          </h2>
          <p className="text-lg text-gray-600 mb-8">
            Acara ini sepenuhnya disponsori oleh
          </p>

          <div className="flex justify-center">
            <a
              href="https://kolosal.ai"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-white rounded-xl p-8 shadow-lg inline-block border-2 border-transparent hover:border-gray-500 transition-colors"
            >
              <img
                src="images/sponsors/kolosal-logo_rlxbck.svg"
                alt="Kolosal.ai"
                className="h-12 md:h-16"
              />
            </a>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section
        id="masuk"
        className="py-16 md:py-24 px-4 md:px-8 bg-linear-to-b from-white to-blue-50"
      >
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-5xl font-bold mb-6">
            Segera Daftarkan <span className="text-primary-500">Timmu!</span>
          </h2>
          <p className="text-lg md:text-xl text-left md:text-center text-gray-600 mb-8">
            Jangan lewatkan kesempatan emas untuk bersaing dengan developer
            terbaik,
            <br className="hidden md:block" /> belajar dari para ahli, dan
            memenangkan hadiah jutaan rupiah!
          </p>

          <div className="flex flex-col md:flex-row gap-4 justify-center">
            <button
              onClick={() => navigate('/auth/signup')}
              className="px-8 py-3 bg-primary-500 text-white text-lg rounded-lg hover:bg-primary-700 transition-colors font-semibold cursor-pointer"
            >
              Daftar Sekarang
            </button>
            <a
              href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
              target="_blank"
              rel="noopener noreferrer"
              className="px-8 py-3 bg-white text-gray-900 text-lg rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-colors font-semibold"
            >
              Gabung Grup WA Hackathon
            </a>
          </div>

          <p className="text-sm text-gray-500 mt-6">
            Pendaftaran ditutup pada{' '}
            <span className="text-primary-500 font-semibold">
              30 November 2025
            </span>
          </p>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 md:px-8">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
            {/* Brand */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <span className="text-2xl font-bold">IMPHNEN</span>
                <span className="text-2xl font-bold text-blue-500">
                  Hackathon
                </span>
              </div>
              <p className="text-gray-400 text-sm">
                Wujudkan ide brilian mu menjadi solusi nyata. Bergabunglah dalam
                IMPHNEN Hackathon dan jadilah bagian dari perubahan teknologi
                masa depan.
              </p>
              <div className="flex gap-4 mt-4">
                <div className="flex gap-4">
                  <a
                    href="https://fb.com/groups/programmerhandal"
                    className="text-gray-400 hover:text-accent transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Facebook"
                  >
                    <Icon icon="ic:baseline-facebook" className="w-6 h-6" />
                  </a>
                  <a
                    href="https://www.instagram.com/imphnen.dev"
                    className="text-gray-400 hover:text-accent transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Instagram"
                  >
                    <Icon icon="mdi:instagram" className="w-6 h-6" />
                  </a>
                  <a
                    href="https://www.linkedin.com/company/imphnen"
                    className="text-gray-400 hover:text-accent transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="LinkedIn"
                  >
                    <Icon icon="mdi:linkedin" className="w-6 h-6" />
                  </a>
                  <a
                    href="https://www.tiktok.com/@imphnen"
                    className="text-gray-400 hover:text-accent transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="TikTok"
                  >
                    <Icon icon="ic:baseline-tiktok" className="w-6 h-6" />
                  </a>
                  <a
                    href="https://github.com/IMPHNEN"
                    className="text-gray-400 hover:text-accent transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="GitHub"
                  >
                    <Icon icon="mdi:github" className="w-6 h-6" />
                  </a>
                </div>
              </div>
            </div>

            {/* Quick Links */}
            <div>
              <h3 className="font-bold text-lg mb-4">Quick Links</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <a
                    href="#timeline"
                    className="hover:text-white transition-colors"
                  >
                    Timeline
                  </a>
                </li>
                <li>
                  <a
                    href="#hadiah"
                    className="hover:text-white transition-colors"
                  >
                    Hadiah
                  </a>
                </li>
                <li>
                  <a href="#faq" className="hover:text-white transition-colors">
                    FAQ
                  </a>
                </li>
                <li>
                  <a
                    href="/auth/signup"
                    className="hover:text-white transition-colors"
                  >
                    Daftar
                  </a>
                </li>
              </ul>
            </div>

            {/* Contact */}
            <div>
              <h3 className="font-bold text-lg mb-4">Contact</h3>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li className="flex items-start gap-2">
                  <Icon
                    icon="material-symbols:mail-outline-rounded"
                    className="min-w-5 min-h-5 mt-0.5"
                  />
                  <a
                    href="mailto:imphnen@gmail.com"
                    className="hover:text-white transition-colors"
                  >
                    imphnen@gmail.com
                  </a>
                </li>
                <li className="flex items-start gap-2">
                  <Icon
                    icon="solar:phone-linear"
                    className="min-w-5 min-h-5 mt-0.5"
                  />
                  <a
                    href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
                    className="hover:text-white transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    WA Group Hackathon
                  </a>
                </li>
                <li className="flex items-start gap-2">
                  <Icon
                    icon="streamline-plump:web"
                    className="min-w-5 min-h-5 mt-0.5"
                  />
                  <a
                    href="https://imphnen.dev"
                    className="hover:text-white transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    IMPHNEN.dev
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
            <p>
              © 2025 IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan
              Ngoding. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}
