import { Navigation } from "@/components/navigation";
import { Github, Linkedin, Mail, Code } from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "About",
  description: "Learn more about me and my work",
};

export default function AboutPage() {
  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="container mx-auto px-6 py-16 max-w-4xl">
        <h1 className="text-4xl font-bold text-foreground mb-12">About Me</h1>

        <div className="grid md:grid-cols-[1fr_auto] gap-12 mb-12">
          <div className="space-y-6">
            <p className="text-lg text-muted-foreground leading-relaxed">
              I'm Alex, a full-stack engineer at Whisker with 4 years of
              experience building scalable cloud applications and IoT solutions.
              My journey in software development has been driven by curiosity
              and a passion for solving complex problems with efficient
              solutions. I specialize in creating performant applications using
              the latest technologies, with a particular interest in performance
              at scale and building developer-friendly tools.
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed">
              Learning and sharing new tech is something I'm genuinely
              passionate about. When I'm not coding, you'll find me contributing
              to open-source projects, writing blog posts, or giving technical
              talks. Off-duty, I'm usually reading, exploring the outdoors with
              my dogs, or rolling dice as a D&amp;D sorcerer. This site is where
              I share book thoughts, code experiments, and random shower
              thoughts. Thanks for stopping by!
            </p>
          </div>

          <div className="flex md:flex-col gap-6 items-center md:items-start">
            <div className="relative w-80 h-80 rounded-lg overflow-hidden bg-muted">
              <img
                src="/self.webp"
                alt="Alex"
                className="w-full h-full object-cover"
              />
            </div>
            <div className="relative w-80 h-80 rounded-lg overflow-hidden bg-muted">
              <img
                src="/homies.jpg"
                alt="Err"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>

        <div className="border-t border-border/40 pt-12">
          <h2 className="text-2xl font-bold text-foreground mb-8">
            Connect With Me
          </h2>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <a
              href="https://github.com/amuszyn"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-4 p-6 rounded-lg border border-border/40 bg-card hover:border-border hover:shadow-lg transition-all group"
            >
              <Github
                size={28}
                className="text-muted-foreground group-hover:text-foreground transition-colors"
              />
              <div>
                <div className="font-semibold text-foreground">GitHub</div>
                <div className="text-sm text-muted-foreground">@amuszyn</div>
              </div>
            </a>

            <a
              href="https://linkedin.com/in/almuszynski"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-4 p-6 rounded-lg border border-border/40 bg-card hover:border-border hover:shadow-lg transition-all group"
            >
              <Linkedin
                size={28}
                className="text-muted-foreground group-hover:text-foreground transition-colors"
              />
              <div>
                <div className="font-semibold text-foreground">LinkedIn</div>
                <div className="text-sm text-muted-foreground">
                  Alex Muszynski
                </div>
              </div>
            </a>

            <a
              href="mailto:alexander.muszynski@gmail.com"
              className="flex items-center gap-4 p-6 rounded-lg border border-border/40 bg-card hover:border-border hover:shadow-lg transition-all group"
            >
              <Mail
                size={28}
                className="text-muted-foreground group-hover:text-foreground transition-colors"
              />
              <div>
                <div className="font-semibold text-foreground">Email</div>
                <div className="text-sm text-muted-foreground">
                  alexander.muszynski@gmail.com
                </div>
              </div>
            </a>

            <a
              href="https://gitea.muszyn.dev/muszyn"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-4 p-6 rounded-lg border border-border/40 bg-card hover:border-border hover:shadow-lg transition-all group"
            >
              <Code
                size={28}
                className="text-muted-foreground group-hover:text-foreground transition-colors"
              />
              <div>
                <div className="font-semibold text-foreground">Gitea</div>
                <div className="text-sm text-muted-foreground">@muszyn</div>
              </div>
            </a>
          </div>
        </div>
      </main>
    </div>
  );
}