import {
  Mail,
  Phone,
  MapPin,
  Github,
  Linkedin,
  ExternalLink,
  Calendar,
  GraduationCap,
  Briefcase,
  Globe,
} from "lucide-react"

export default function Index() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
      <section id="about" className="py-20 px-4">
        <div className="container mx-auto max-w-4xl text-center">
          <h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-6xl text-slate-900 dark:text-slate-100">
            Bagas Aulia Rezki
          </h1>
          <p className="mb-6 text-xl text-slate-600 dark:text-slate-400">
            Fullstack Developer & Information Systems Student at University of Indonesia
          </p>
          <p className="mb-8 text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
            I am an enthusiastic Fullstack Developer, currently a student of Information Systems at the University of Indonesia. With internship experience as a Back-end Developer Intern, I have a strong interest in leading enterprise technologies and am always eager to learn new things. I am committed to developing efficient, secure, and innovative technological solutions.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <a
              href="#contact"
              className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90 h-10 px-4 py-2"
            >
              <Mail className="mr-2 h-4 w-4" />
              Get in Touch
            </a>
            <a
              href="#projects"
              className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-10 px-4 py-2"
            >
              View Projects
            </a>
          </div>
        </div>
      </section>

      <section id="skills" className="py-16 px-4 bg-white/50 dark:bg-slate-800/50">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="mb-8 text-3xl font-bold text-slate-900 dark:text-slate-100">Technical Skills</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="p-4 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
              <h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Backend</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">Go, Java, Python, PHP</p>
            </div>
            <div className="p-4 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
              <h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Frontend</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">JavaScript, NextJS, Tailwind, HTMX</p>
            </div>
            <div className="p-4 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
              <h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Database</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">PostgreSQL, MySQL</p>
            </div>
            <div className="p-4 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
              <h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Tools</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">Docker, Git, Selenium, Scrapy</p>
            </div>
          </div>
        </div>
      </section>

      <section id="education" className="py-16 px-4">
        <div className="container mx-auto max-w-4xl">
          <h2 className="mb-12 text-3xl font-bold text-center text-slate-900 dark:text-slate-100">Education</h2>

          <div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 mb-6">
            <div className="flex flex-col space-y-1.5 p-6">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
                    <GraduationCap className="h-6 w-6 text-slate-900 dark:text-slate-50" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-semibold leading-none tracking-tight">
                      Bachelor of Information Systems
                    </h3>
                    <p className="text-sm text-slate-600 dark:text-slate-400 text-base">University of Indonesia</p>
                  </div>
                </div>
                <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
                  In Progress
                </span>
              </div>
            </div>
            <div className="p-6 pt-0">
              <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 mb-4">
                <Calendar className="h-4 w-4" />
                <span>2025 - Present</span>
              </div>
              <p className="text-slate-600 dark:text-slate-400 mb-4">
                Currently studying core concepts in information systems, database management, software engineering, and
                business process analysis. Developing skills in system design, data analysis, and technology
                implementation.
              </p>
            </div>
          </div>

          <div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50">
            <div className="flex flex-col space-y-1.5 p-6">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
                    <GraduationCap className="h-6 w-6 text-slate-900 dark:text-slate-50" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-semibold leading-none tracking-tight">
                      Pengembangan Perangkat Lunak dan Gim (PPLG)
                    </h3>
                    <p className="text-sm text-slate-600 dark:text-slate-400 text-base">SMKN 2 GUGUAK</p>
                  </div>
                </div>
                <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                  Completed
                </span>
              </div>
            </div>
            <div className="p-6 pt-0">
              <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 mb-4">
                <Calendar className="h-4 w-4" />
                <span>2021 - 2024</span>
              </div>
              <p className="text-slate-600 dark:text-slate-400">
                Graduated from vocational high school specializing in Software and Game Development. Gained foundational
                knowledge in programming, software development lifecycle, and game development principles.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section id="experience" className="py-16 px-4 bg-white/50 dark:bg-slate-800/50">
        <div className="container mx-auto max-w-4xl">
          <h2 className="mb-12 text-3xl font-bold text-center text-slate-900 dark:text-slate-100">Experience</h2>

          <div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 mb-6">
            <div className="flex flex-col space-y-1.5 p-6">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
                    <Briefcase className="h-6 w-6 text-slate-900 dark:text-slate-50" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-semibold leading-none tracking-tight">Back-end Developer Intern</h3>
                    <p className="text-sm text-slate-600 dark:text-slate-400 text-base">PT eBdesk Teknologi</p>
                  </div>
                </div>
                <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                  6 Months
                </span>
              </div>
            </div>
            <div className="p-6 pt-0">
              <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 mb-4">
                <Calendar className="h-4 w-4" />
                <span>October 2024 - April 2025</span>
              </div>
              <p className="text-slate-600 dark:text-slate-400 mb-4">
                Developed a crawling system capable of extracting data from various websites without needing to create a
                new crawler for each website, allowing for dynamic and more efficient data retrieval.
              </p>

              <div className="mb-4">
                <h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Responsibilities:</h3>
                <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
                  <li>
                    Designed a flexible crawling system to adapt to various website structures without needing a new
                    engine each time
                  </li>
                  <li>Developed the backend with Go to ensure efficient and scalable data processing and management</li>
                  <li>
                    Built a dashboard interface using Tailwind, Templ, and HTMX for easy configuration and monitoring
                  </li>
                  <li>
                    Researched efficient crawling techniques and implemented best methods to improve data extraction
                    accuracy
                  </li>
                </ul>
              </div>

              <div>
                <h3 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Technologies Used:</h3>
                <div className="flex flex-wrap gap-2">
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                    Go
                  </span>
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                    Tailwind CSS
                  </span>
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                    Templ
                  </span>
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                    HTMX
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="projects" className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <h2 className="mb-12 text-3xl font-bold text-center text-slate-900 dark:text-slate-100">Projects</h2>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-2 mb-12">
            <div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 group hover:shadow-lg transition-shadow">
              <div className="flex flex-col space-y-1.5 p-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-2xl font-semibold leading-none tracking-tight text-xl">Tunnl Please</h3>
                </div>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  Built and developed tunnl.live, an SSH tunneling platform designed to help developers expose their
                  local services to the internet securely, without the hassle of external IPs. This project focuses on
                  ease of use, offering simple setup, strong encryption, and fast performance.
                </p>
              </div>
              <div className="p-6 pt-0">
                <div className="mb-4">
                  <h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Features:</h4>
                  <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1 text-sm">
                    <li>Implemented SSH standards perfectly to create secure and reliable tunnels</li>
                    <li>
                      Optimized connection handling using Go Concurrency for efficient and reliable handling of
                      thousands of connections
                    </li>
                    <li>
                      Integrated features like end-to-end encryption, low-latency global network, and easy sharing
                      capabilities
                    </li>
                  </ul>
                </div>
                <div className="flex flex-wrap gap-2 mb-4">
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
                    Go
                  </span>
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
                    SSH Protocol
                  </span>
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
                    Networking
                  </span>
                </div>
                <div className="flex gap-2">
                  <a
                    href="https://git.fossy.my.id/bagas/tunnl_please"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
                  >
                    <Github className="mr-2 h-4 w-4" />
                    Code
                  </a>
                  <a
                    href="https://tunnl.live"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
                  >
                    <ExternalLink className="mr-2 h-4 w-4" />
                    Live Demo
                  </a>
                </div>
              </div>
            </div>

          <div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 group hover:shadow-lg transition-shadow">
              <div className="flex flex-col space-y-1.5 p-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-2xl font-semibold leading-none tracking-tight text-xl">Filekeeper</h3>
                </div>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  This application allows users to store and share files online with an intuitive interface and strong
                  security features. It includes a two-factor authentication system and cloud storage integration.
                </p>
              </div>
              <div className="p-6 pt-0">
                <div className="mb-4">
                  <h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Features:</h4>
                  <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1 text-sm">
                    <li>Implemented partial file upload to enhance data transfer efficiency and reliability</li>
                    <li>
                      Implemented an internal caching system using hashmap to reduce database load and response latency
                    </li>
                    <li>Integrated Amazon S3 into the project for secure user file storage</li>
                    <li>Implemented Time-based One-Time Password (TOTP) to enhance 2FA security</li>
                  </ul>
                </div>
                <div className="flex flex-wrap gap-2 mb-4">
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
                    Go
                  </span>
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
                    Amazon S3
                  </span>
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
                    TOTP
                  </span>
                </div>
                <div className="flex gap-2">
                  <a
                    href="https://git.fossy.my.id/bagas/filekeeper"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
                  >
                    <Github className="mr-2 h-4 w-4" />
                    Code
                  </a>
                  <a
                    href="https://filekeeper.my.id"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
                  >
                    <ExternalLink className="mr-2 h-4 w-4" />
                    Live Demo
                  </a>
                </div>
              </div>
            </div>

            <div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 group hover:shadow-lg transition-shadow">
              <div className="flex flex-col space-y-1.5 p-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-2xl font-semibold leading-none tracking-tight text-xl">Cutit</h3>
                </div>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  This application simplifies the process of shortening long URLs, enabling easy management and sharing of URLs. Additionally, it offers click tracking features that can be utilized for advertising
                </p>
              </div>
              <div className="p-6 pt-0">
                <div className="mb-4">
                  <h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Features:</h4>
                  <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1 text-sm">
                    <li>Built a secure system by implementing authentication, authorization, session management, and OAuth without third-party modules.</li>
                    <li>
                      Utilized Docker for system containerization, ensuring compatibility across various operating systems and avoiding reliance on hosting providers.
                    </li>
                    <li>Designed an intuitive and responsive user interface (UI/UX) to guarantee ease of use and an optimal user experience within the application.</li>
                  </ul>
                </div>
                <div className="flex flex-wrap gap-2 mb-4">
                  <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800">
                    Go
                  </span>
                </div>
                <div className="flex gap-2">
                  <a
                    href="https://github.com/fossyy/cutit"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
                  >
                    <Github className="mr-2 h-4 w-4" />
                    Code
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h3 className="mb-8 text-2xl font-bold text-center text-slate-900 dark:text-slate-100">
              Work Accomplishments
            </h3>
            <div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 max-w-4xl mx-auto">
              <div className="flex flex-col space-y-1.5 p-6">
                <h3 className="text-2xl font-semibold leading-none tracking-tight text-2xl">
                  Dynamic Web Crawling System
                </h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 text-lg">
                  Developed during my internship at PT Indonesia Indicator, this revolutionary crawling system is
                  capable of extracting data from various websites without needing to create a new crawler for each
                  website. This system allows for dynamic and more efficient data retrieval.
                </p>
              </div>
              <div className="p-6 pt-0">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Key Features:</h4>
                    <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1 mb-4">
                      <li>Dynamic configuration for different website structures</li>
                      <li>Scalable backend architecture using Go</li>
                      <li>Real-time monitoring dashboard</li>
                      <li>Efficient data processing and management</li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-2 text-slate-900 dark:text-slate-100">Technologies:</h4>
                    <div className="flex flex-wrap gap-2 mb-4">
                      <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                        Go
                      </span>
                      <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                        Tailwind CSS
                      </span>
                      <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                        HTMX
                      </span>
                      <span className="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300 text-slate-950 dark:text-slate-50">
                        Templ
                      </span>
                    </div>
                  </div>
                </div>
                <div className="flex gap-4">
                  <span className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90 h-10 px-4 py-2 opacity-50 cursor-not-allowed">
                    <Briefcase className="mr-2 h-4 w-4" />
                    Work Accomplishment
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="contact" className="py-16 px-4 bg-white/50 dark:bg-slate-800/50">
        <div className="container mx-auto max-w-4xl">
          <h2 className="mb-12 text-3xl font-bold text-center text-slate-900 dark:text-slate-100">Get in Touch</h2>

          <div className="max-w-2xl mx-auto">
            <div className="rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50">
              <div className="flex flex-col space-y-1.5 p-6">
                <h3 className="text-2xl font-semibold leading-none tracking-tight">Contact Information</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  I'm always interested in new opportunities and collaborations. Feel free to reach out!
                </p>
              </div>
              <div className="p-6 pt-0 space-y-6">
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
                    <Mail className="h-5 w-5 text-slate-900 dark:text-slate-50" />
                  </div>
                  <div>
                    <p className="font-medium text-slate-900 dark:text-slate-100">Email</p>
                    <a
                      href="mailto:bagas@fossy.my.id"
                      className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100"
                    >
                      bagas@fossy.my.id
                    </a>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
                    <Phone className="h-5 w-5 text-slate-900 dark:text-slate-50" />
                  </div>
                  <div>
                    <p className="font-medium text-slate-900 dark:text-slate-100">Phone</p>
                    <a
                      href="tel:+6285355003282"
                      className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100"
                    >
                      (62) 853-5500-3282
                    </a>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
                    <Globe className="h-5 w-5 text-slate-900 dark:text-slate-50" />
                  </div>
                  <div>
                    <p className="font-medium text-slate-900 dark:text-slate-100">Website</p>
                    <a
                      href="https://fossy.my.id"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100"
                    >
                      fossy.my.id
                    </a>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-slate-900/10 dark:bg-slate-50/10 rounded-lg">
                    <MapPin className="h-5 w-5 text-slate-900 dark:text-slate-50" />
                  </div>
                  <div>
                    <p className="font-medium text-slate-900 dark:text-slate-100">Location</p>
                    <p className="text-slate-600 dark:text-slate-400">Depok, Indonesia</p>
                  </div>
                </div>
                <div className="flex gap-4 pt-6">
                  <a
                    href="https://github.com/fossyy"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
                  >
                    <Github className="mr-2 h-4 w-4" />
                    GitHub
                  </a>
                  <a
                    href="https://www.linkedin.com/in/bagas-aulia-rezki/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 h-8 px-3 text-xs"
                  >
                    <Linkedin className="mr-2 h-4 w-4" />
                    LinkedIn
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}