import type { Metadata } from "next";
import {
  IconBrandLinkedinFilled,
  IconMailFilled,
  IconPhoneFilled,
} from "@tabler/icons-react";
import Hero from "@/components/content/Hero";
import SectionLabel from "@/components/layout/SectionLabel";
import AccentLink from "@/components/navigation/AccentLink";
import GiteaIcon from "@/components/icons/GiteaIcon";
import Tooltip from "@/components/ui/Tooltip";
import CopyButton from "@/components/ui/CopyButton";
import {
  about,
  colors,
  education,
  email,
  gitea,
  linkedIn,
  phone,
  timeline,
} from "@/constants";

export const metadata: Metadata = {
  title: "About — Angel Mankel",
};

export default function AboutPage() {
  return (
    <div className="flex flex-col gap-12">
      
			{/* Hero Section */}
			<Hero label="About">
        <div className="space-y-5 text-[19px] leading-[1.65]">
          {about.map((paragraph) => (
            <p key={paragraph}>{paragraph}</p>
          ))}
        </div>
      </Hero>

			{/* Education */}
      <section className="space-y-4">
        <SectionLabel label="Education" />
        <ul className="space-y-2">
          {education.map((row) => (
            <li key={row.span} className="flex gap-2 text-sm">
              <span className="w-36 shrink-0 text-neutral-500">
                {row.span}
              </span>
              <span className="text-neutral-200">{row.degree} · {row.location}</span>
            </li>
          ))}
        </ul>
      </section>

			{/* Timeline */}
      <section className="space-y-4">
        <SectionLabel label="Timeline" />
        <ul className="space-y-2">
          {timeline.map((row) => (
            <li key={row.span} className="flex gap-2 text-sm">
              <span className="w-36 shrink-0 text-neutral-500">
                {row.span}
              </span>
              <span className="text-neutral-200">{row.role}</span>
            </li>
          ))}
        </ul>
      </section>

      <div className="flex flex-col gap-6">
        <AccentLink link="/Angel_Mankel_Resume_2026.pdf" label="Download Resume (PDF)" download />
        
        <div className="flex flex-col gap-2 text-neutral-300">
          <p>
            <span className="font-bold">Email:</span> {email}
          </p>
          <p>
            <span className="font-bold">Phone:</span> {phone}
          </p>
        </div>

        {/* Social Links */}
        <nav aria-label="Contact" className="flex gap-5 text-neutral-300">
          <CopyButton
            value={email}
            label="Copy email"
            className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200 cursor-pointer`}
          >
            <IconMailFilled size={32} />
          </CopyButton>
          <CopyButton
            value={phone}
            label="Copy phone"
            className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200 cursor-pointer`}
          >
            <IconPhoneFilled size={32} />
          </CopyButton>
          <Tooltip text="LinkedIn">
            <a
              href={linkedIn}
              target="_blank"
              rel="noreferrer"
              aria-label="LinkedIn"
              className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
            >
              <IconBrandLinkedinFilled size={32} />
            </a>
          </Tooltip>
          <Tooltip text="Gitea">
            <a
              href={gitea}
              target="_blank"
              rel="noreferrer"
              aria-label="Gitea"
              className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
            >
              <GiteaIcon size={32} />
            </a>
          </Tooltip>
        </nav>
      </div>
    </div>
  );
}