"use client";

import { About as AboutSection } from "../../sections/About";
import { Goals } from "../../sections/Goals";
import { Navbar } from "../../components/Navbar";
import { Footer } from "../../sections/Footer";

export default function AboutPage() {
  return (
    <>
      <Navbar />
      <div className="space-y-24 py-24 max-w-4xl mx-auto px-4">
        <div className="text-center space-y-4">
          <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
            About Me
          </h1>
          <p className="text-gray-400 max-w-2xl mx-auto">
            A little bit about me...
          </p>
        </div>

        <AboutSection />

        <Goals />

        <section className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-sm">
          <h3 className="text-2xl font-bold mb-4">Interests Outside of Coding</h3>
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
            <li className="flex items-center gap-2">
              <span className="text-purple-400">✦</span> 3D Printing & Design
            </li>
            <li className="flex items-center gap-2">
              <span className="text-purple-400">✦</span> Graphical Design
            </li>
            <li className="flex items-center gap-2">
              <span className="text-purple-400">✦</span> Gaming & Hardware
            </li>
            <li className="flex items-center gap-2">
              <span className="text-purple-400">✦</span> Open Source Contribution
            </li>
          </ul>
        </section>
      </div>
      <Footer />
    </>
  );
}
