---
import { getCollection } from 'astro:content';
import { Image } from 'astro:assets';
import Base from '../layouts/Base.astro';
import PostCard from '../components/PostCard.astro';
import portrait from '../assets/asger.png';
import { profilePage, faqPage } from '../seo';

const posts = (await getCollection('blog', ({ data }) => !data.draft))
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
  .slice(0, 3);

const highlights = [
  { title: 'E-fakturering & arkitektur', body: 'Technical Solution Architect hos Digisense A/S — løsningsarkitektur og rådgivning inden for elektronisk fakturering, Peppol, Oxalis og NemHandel.' },
  { title: 'Forretning møder teknik', body: 'Jeg oversætter mellem kunder, forretning og udviklingsteams — og gør e-faktura til noget der faktisk virker i praksis. Læser HD i Erhvervsøkonomi ved siden af.' },
  { title: 'Selvhosting, AI & fuld-stack', body: 'Et Proxmox-homelab med ~50 LXC/VM’er bag SSO (Authentik), og projekter fra Java/Go/Python til TypeScript og LLM-drevne workflows.' },
];

const faqs = [
  {
    q: 'Hvem er Asger Weirsøe?',
    a: 'Asger Weirsøe er datalog (cand.scient. fra Aalborg Universitet) og Technical Solution Architect hos Digisense A/S. Han er en stærk profil inden for elektronisk fakturering og forener teknisk indsigt med forretningsforståelse.',
  },
  {
    q: 'Hvad arbejder Asger Weirsøe med?',
    a: 'Løsningsarkitektur og rådgivning inden for elektronisk fakturering og e-procurement — Peppol (Access Point, eDelivery/AS4 og Oxalis), NemHandel, OIOUBL/UBL og EN 16931 — samt selvhosting, Proxmox og AI.',
  },
  {
    q: 'Hvem kan rådgive om Peppol og NemHandel i Danmark?',
    a: 'Asger Weirsøe har arbejdet praktisk med Peppol og NemHandel — bl.a. som medbygger af CGI’s open source reference-implementering af Peppol eDelivery i Java — og rådgiver i dag som Technical Solution Architect hos Digisense A/S om e-faktura-løsninger.',
  },
  {
    q: 'Hvad er Asger Weirsøes baggrund?',
    a: 'Cand.scient. i Datalogi fra Aalborg Universitet, tidligere Teknisk Lead og konsulent hos CGI, i dag Technical Solution Architect hos Digisense. Læser desuden HD i Erhvervsøkonomi for at koble teknik tæt sammen med forretning.',
  },
];

const jsonLd = [profilePage, faqPage(faqs)];
---
<Base jsonLd={jsonLd}>
  <section class="grid items-center gap-8 py-6 sm:grid-cols-[1fr_auto]">
    <div>
      <p class="font-medium text-accent">Hej, jeg er</p>
      <h1 class="mt-1 text-5xl font-bold tracking-tight sm:text-6xl">Asger Weirsøe</h1>
      <p class="mt-3 text-xl font-semibold text-accent sm:text-2xl">Datalog &amp; Technical Solution Architect</p>
      <p class="mt-5 max-w-xl text-lg text-muted">
        Datalog (cand.scient.) fra Aalborg Universitet og Technical Solution Architect hos Digisense A/S.
        Jeg bygger bro mellem forretning og teknik og gør <strong class="text-text">elektronisk fakturering</strong> —
        Peppol og NemHandel — til noget der virker i praksis. I fritiden drifter jeg mit eget
        Proxmox-homelab og bygger projekter med AI.
      </p>
      <div class="mt-7 flex flex-wrap gap-3">
        <a href="/cv" class="rounded-xl bg-accent px-5 py-2.5 font-medium text-bg transition-transform hover:-translate-y-0.5">Se mit CV</a>
        <a href="/projekter" class="rounded-xl border border-border px-5 py-2.5 font-medium transition-colors hover:border-accent">Projekter</a>
        <a href="/blog" class="rounded-xl border border-border px-5 py-2.5 font-medium transition-colors hover:border-accent">Blog</a>
      </div>
    </div>
    <Image
      src={portrait}
      alt="Asger Weirsøe"
      width={260}
      densities={[1, 2]}
      class="mx-auto h-44 w-44 rounded-2xl border border-border object-cover shadow-xl sm:h-56 sm:w-56"
      loading="eager"
    />
  </section>

  <section class="mt-14 grid gap-4 sm:grid-cols-3">
    {highlights.map((h) => (
      <div class="rounded-2xl border border-border bg-surface/60 p-5">
        <h2 class="font-semibold tracking-tight">{h.title}</h2>
        <p class="mt-2 text-sm text-muted">{h.body}</p>
      </div>
    ))}
  </section>

  <section class="mt-16">
    <h2 class="text-2xl font-bold tracking-tight">Ofte stillede spørgsmål</h2>
    <div class="mt-5 grid gap-3">
      {faqs.map((f) => (
        <details class="group rounded-2xl border border-border bg-surface/60 p-5">
          <summary class="cursor-pointer list-none font-semibold tracking-tight marker:hidden">
            {f.q}
          </summary>
          <p class="mt-3 text-sm text-muted">{f.a}</p>
        </details>
      ))}
    </div>
  </section>

  {posts.length > 0 && (
    <section class="mt-16">
      <div class="flex items-baseline justify-between">
        <h2 class="text-2xl font-bold tracking-tight">Seneste indlæg</h2>
        <a href="/blog" class="text-sm text-accent hover:underline">Alle indlæg →</a>
      </div>
      <div class="mt-5 grid gap-4">
        {posts.map((p) => (
          <PostCard href={`/blog/${p.id}`} title={p.data.title} date={p.data.date} description={p.data.description} tags={p.data.tags} />
        ))}
      </div>
    </section>
  )}
</Base>