---
import { Image } from "astro:assets";
import Button from "@/components/button.astro";
import Link from "@/components/link.astro";
import mariosant from "@/assets/mariosant.webp";
---

<header class="flex flex-col md:gap-12 gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl mx-auto w-full">
  <div class="flex items-center justify-between">
    <a href="/" aria-label="Home">
      <Image
        src={mariosant}
        alt="Marios Antonoudiou"
        width={64}
        height={64}
        class="w-16 h-16 rounded-full border border-gray-200 dark:border-gray-800 dark:bg-slate-300 block"
        loading="eager"
      />
    </a>
    <div class="flex gap-3 items-center justify-end">
      <Link
        href="/"
        variant="default"
        class="text-slate-600 dark:text-slate-400 font-semibold"
        activeClass="text-slate-800 dark:text-slate-200 underline"
        isActive={Astro.url.pathname === "/"}
      >
        Home
      </Link>
      <Link
        href="/articles"
        variant="default"
        class="text-slate-600 dark:text-slate-400 font-semibold"
        activeClass="text-slate-800 dark:text-slate-200 underline"
        isActive={Astro.url.pathname.startsWith("/articles")}
      >
        Articles
      </Link>
    </div>
  </div>
  <h1 class="md:text-xl text-lg font-semibold">
    <Link href="mailto:mariosant@sent.com" variant="primary">Marios Antonoudiou</Link>, AI product engineer.<br />
    Building AI-powered products that feel simple, useful, and ready for real users.
  </h1>
  <p class="text-slate-800 dark:text-slate-200">
    I design and ship <span class="font-semibold">AI-enabled product experiences</span> across
    frontend architecture, interaction design, and product workflows. My focus is turning complex
    systems, data, and model capabilities into software people can actually
    <span class="font-semibold">understand, trust, and use</span>.
  </p>
  <div class="flex gap-4 overflow-x-auto">
    <Button
      size="xl"
      variant="primary"
      icon="mynaui:calendar"
      href="https://cal.com/mariosant/30min"
      target="_blank"
      rel="noopener noreferrer"
    >
      Arrange a call
    </Button>
    <Button
      size="xl"
      variant="neutral"
      icon="mynaui:envelope"
      href="mailto:mariosant@sent.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      Send a message
    </Button>
  </div>
</header>