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

export function About() {
  return (
    <div className="space-y-24 py-12 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>
  );
}