import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Home",
  description: "Home — Portfolio",
  openGraph: {
    title: "Home",
    description: "Home — Portfolio",
  },
}

export default function Page() {
  return (
  <div className="min-w-0 min-h-screen bg-gray-950 text-white">
    <section className="w-full py-28 px-6 text-center">
      <img src="https://www.inbuild.io/images/avatar.svg" alt="Profile photo" className="max-w-full h-auto rounded-md object-cover w-24 h-24 rounded-full mx-auto mb-6 object-cover bg-gray-800" />
      <h1 className="text-4xl font-bold text-5xl font-bold mb-3">Alex Morgan</h1>
      <p className="text-base text-xl text-gray-400 mb-6">Product Designer & Frontend Developer</p>
      <p className="text-base text-gray-400 max-w-lg mx-auto mb-8">I craft thoughtful digital experiences that live at the intersection of design and engineering. Currently building tools for creative teams.</p>
      <div className="flex flex-row flex-wrap items-start flex gap-4 justify-center">
        <a href="https://github.com" className="text-gray-400 hover:text-white transition">GitHub</a>
        <a href="https://twitter.com" className="text-gray-400 hover:text-white transition">Twitter</a>
        <a href="https://linkedin.com" className="text-gray-400 hover:text-white transition">LinkedIn</a>
      </div>
    </section>
    <hr className="border-gray-800 mx-6" />
    <section className="w-full py-20 px-6 max-w-6xl mx-auto">
      <h2 className="text-3xl font-bold text-3xl font-bold text-center mb-12">Selected Work</h2>
      <div className="grid min-w-0 grid grid-cols-2 gap-6">
        <div className="rounded-xl overflow-hidden border border-gray-800 hover:border-gray-600 transition">
          <img src="https://www.inbuild.io/images/project-1.svg" alt="Flowstate app screenshot" className="max-w-full h-auto rounded-md object-cover w-full h-56 object-cover bg-gray-800" />
          <div className="min-w-0 p-5">
            <h3 className="text-2xl font-semibold text-lg font-semibold mb-1">Flowstate</h3>
            <p className="text-base text-gray-400 text-sm">A productivity app designed to help creative professionals manage deep work sessions.</p>
          </div>
        </div>
        <div className="rounded-xl overflow-hidden border border-gray-800 hover:border-gray-600 transition">
          <img src="https://www.inbuild.io/images/project-2.svg" alt="Palette design system screenshot" className="max-w-full h-auto rounded-md object-cover w-full h-56 object-cover bg-gray-800" />
          <div className="min-w-0 p-5">
            <h3 className="text-2xl font-semibold text-lg font-semibold mb-1">Palette</h3>
            <p className="text-base text-gray-400 text-sm">An open-source design system and component library built for React and Tailwind CSS.</p>
          </div>
        </div>
        <div className="rounded-xl overflow-hidden border border-gray-800 hover:border-gray-600 transition">
          <img src="https://www.inbuild.io/images/project-3.svg" alt="Relay messaging app screenshot" className="max-w-full h-auto rounded-md object-cover w-full h-56 object-cover bg-gray-800" />
          <div className="min-w-0 p-5">
            <h3 className="text-2xl font-semibold text-lg font-semibold mb-1">Relay</h3>
            <p className="text-base text-gray-400 text-sm">End-to-end encrypted team messaging with built-in project management and file sharing.</p>
          </div>
        </div>
        <div className="rounded-xl overflow-hidden border border-gray-800 hover:border-gray-600 transition">
          <img src="https://www.inbuild.io/images/project-4.svg" alt="Canopy analytics dashboard screenshot" className="max-w-full h-auto rounded-md object-cover w-full h-56 object-cover bg-gray-800" />
          <div className="min-w-0 p-5">
            <h3 className="text-2xl font-semibold text-lg font-semibold mb-1">Canopy</h3>
            <p className="text-base text-gray-400 text-sm">A real-time analytics dashboard for monitoring application performance and user behavior.</p>
          </div>
        </div>
      </div>
    </section>
  </div>