---
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';
import { pathFor } from '@i18n/slugMap';
import type { ProfileVM } from '@lib/content';
import Chip from '@components/ui/Chip.astro';
import Button from '@components/ui/Button.astro';
import TraceMotif from '@components/ui/TraceMotif.astro';
import Portrait from '@components/ui/Portrait.astro';

interface Props {
  locale: Locale;
  profile: ProfileVM;
}
const { locale, profile } = Astro.props;
const d = useDict(locale);
---

<section class="relative overflow-hidden">
  <div
    class="dot-grid hero-halo pointer-events-none absolute inset-0 -z-10"
    style="mask-image: linear-gradient(to bottom, black, transparent 70%); -webkit-mask-image: linear-gradient(to bottom, black, transparent 70%);"
  >
  </div>

  <div class="mx-auto grid max-w-[--content-max] gap-10 px-6 pb-14 pt-16 lg:grid-cols-12 lg:pt-24">
    <div class="lg:col-span-7">
      <p class="font-mono text-mono-label font-medium uppercase tracking-[0.08em] text-accent">
        {profile.eyebrow}
      </p>
      <h1 class="mt-4 text-display tracking-[-0.01em]">{profile.name}</h1>
      <p class="mt-4 font-display text-h3 font-medium text-ink">{profile.heroTagline}</p>
      <p class="mt-4 max-w-[52ch] text-body-lg text-ink-muted">{profile.heroSummary}</p>

      <TraceMotif statusLine={profile.statusLine} class="mt-8" />

      <ul class="mt-7 flex flex-wrap gap-2">
        {profile.chips.map((chip) => <li><Chip kind="fact" label={chip.label} /></li>)}
      </ul>

      <div class="mt-8 flex flex-wrap gap-3">
        <Button variant="primary" href={pathFor('projects', locale)}>{d.hero.viewProjects}</Button>
        <Button variant="secondary" href={pathFor('cv', locale)}>
          {d.cv.download} <span class="font-mono text-mono-label opacity-70">· pdf</span>
        </Button>
      </div>
    </div>

    <div class="lg:col-span-5">
      <Portrait
        src={profile.photo.src}
        alt={profile.photo.alt}
        caption={profile.photo.caption}
      />
    </div>
  </div>
</section>
