---
import PageLayout from '@/layouts/PageLayout.astro';
import Icon from '@/components/ui/primitives/Icon/Icon.astro';
import Badge from '@/components/ui/data-display/Badge/Badge.astro';
import Card from '@/components/ui/data-display/Card/Card.astro';
import Button from '@/components/ui/form/Button/Button.astro';
import { Hero } from '@/components/hero';
import { getCollection } from 'astro:content';
import { useTranslations } from '@/i18n/utils';
import type { Locale } from '@/i18n/ui';

interface Props {
  locale: Locale;
}

const { locale } = Astro.props;
const t = useTranslations(locale);

const items = await getCollection('projects', ({ data }) => !data.draft);
const features = items.sort((a, b) => a.data.order - b.data.order);

const iconMap: Record<string, string> = {
  'budget-uebersicht':      'layout-dashboard',
  'transaktionen':          'list',
  'kategorien-berichte':    'pie-chart',
  'mehrere-konten':         'wallet',
  'sparziele':              'target',
  'datenschutz-sicherheit': 'shield-check',
};

const featuresHref = t('nav.features.href');
---

<PageLayout
  title={`${t('nav.features')} — Armarium`}
  description={t('features.description')}
  locale={locale}
>
  <Hero layout="centered" size="sm">
    <Badge slot="badge" variant="brand" pill>
      <Icon name="zap" size="sm" />
      {t('features.badge')}
    </Badge>
    <h1 slot="title">
      {t('features.title').split(' ').slice(0, -1).join(' ')} <span class="text-brand-500 [-webkit-text-fill-color:var(--color-brand-500)]">{t('features.title').split(' ').slice(-1)[0]}</span>
    </h1>
    <p slot="description">{t('features.description')}</p>
  </Hero>

  <!-- Feature cards -->
  <section class="py-[var(--space-section-md)] bg-background-secondary border-t border-border">
    <div class="mx-auto max-w-6xl px-6">
      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3" data-reveal>
        {features.map((feature) => {
          const slug = feature.id.replace(/\.mdx?$/, '');
          const icon = iconMap[slug] ?? 'check-circle';
          return (
            <Card variant="elevated" hover padding="lg" href={`/projects/${slug}`} class="group flex flex-col">
              <div class="flex flex-1 flex-col">
                <div class="mb-4 flex items-start justify-between gap-4">
                  <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center text-brand-500 shrink-0">
                    <Icon name={icon} size="md" />
                  </div>
                  <Icon name="arrow-up-right" size="sm" class="text-foreground-muted group-hover:text-brand-500 transition-colors shrink-0" />
                </div>
                <h3 class="font-display text-lg font-bold text-foreground mb-2">{feature.data.title}</h3>
                <p class="text-sm text-foreground-muted leading-relaxed flex-1">{feature.data.description}</p>
                <div class="flex flex-wrap gap-1.5 mt-4">
                  {feature.data.tags.map((tag) => (
                    <Badge variant="brand">{tag}</Badge>
                  ))}
                </div>
              </div>
            </Card>
          );
        })}
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-[var(--space-section-md)] bg-background border-t border-border">
    <div class="mx-auto max-w-2xl px-6 text-center" data-reveal>
      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">{t('features.cta.title')}</h2>
      <p class="text-lg text-foreground-muted mb-8 text-balance">{t('features.cta.desc')}</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <Button size="lg" href="/register">
          {t('cta.register')}
          <Icon name="arrow-right" size="sm" />
        </Button>
        <Button size="lg" variant="outline" href="/login">
          {t('features.cta.login')}
        </Button>
      </div>
    </div>
  </section>
</PageLayout>