---
import Icon from '@/components/ui/primitives/Icon/Icon.astro';
import { Image } from 'astro:assets';
import headerImg from '@/assets/header_img.jpg';
import contentImg from '@/assets/content_image.jpg';
import armariumImg from '@/assets/armarium_image.jpg';
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 allPosts = await getCollection('blog', ({ data }) => !data.draft && data.locale === locale);
const posts = allPosts.sort((a, b) => b.data.publishedAt.getTime() - a.data.publishedAt.getTime()).slice(0, 7);
const [featured, ...restPosts] = posts;

type BlogEntry = { href: string; title: string; description: string };

function toEntry(p: (typeof restPosts)[number]): BlogEntry {
  return { href: `/blog/${p.id}`, title: p.data.title, description: p.data.description };
}

const dummies: BlogEntry[] = [
  { href: '#', title: 'So behältst du den Überblick über deine Finanzen', description: 'Mit einfachen Tricks und der richtigen App kannst du dein Budget im Griff behalten — ohne Stress.' },
  { href: '#', title: '5 Spartipps für den Alltag', description: 'Kleine Änderungen im Alltag können langfristig einen grossen Unterschied machen.' },
  { href: '#', title: 'Warum ein Haushaltsbuch sinnvoll ist', description: 'Wer seine Ausgaben kennt, kann gezielt sparen und Sparziele schneller erreichen.' },
];

function fillTo3(items: (typeof restPosts), offset = 0): BlogEntry[] {
  const real = items.map(toEntry);
  return [...real, ...dummies].slice(offset, offset + 3);
}

const colA = fillTo3(restPosts.slice(0, 3));
const colB = fillTo3(restPosts.slice(3, 6), restPosts.slice(3, 6).length === 0 ? 0 : 0);

---

<!-- Hero -->
<section class="bg-white dark:bg-gray-900">
  <div class="grid max-w-screen-xl px-4 py-16 mx-auto lg:gap-8 xl:gap-0 lg:py-28 lg:grid-cols-12">
    <div class="mr-auto place-self-center lg:col-span-7">
      <h1 class="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">
        Armarium Suite<br />
        <span class="text-brand-500">Budget</span> &amp; More
      </h1>
      <p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
        {t('hero.description')}
      </p>
      <a href="https://app.armarium.ch/register" class="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-brand-500 hover:bg-brand-600 focus:ring-4 focus:ring-brand-300 dark:focus:ring-brand-900">
        {t('hero.register')}
        <Icon name="arrow-right" size="sm" class="ml-2 -mr-1" />
      </a>
    </div>
    <div class="hidden lg:mt-0 lg:col-span-5 lg:flex items-center">
      <div class="w-full overflow-hidden rounded-2xl shadow-md">
        <Image src={headerImg} alt="Armarium Suite" class="w-full h-full object-contain" widths={[480, 720]} sizes="(max-width: 1024px) 0px, 40vw" />
      </div>
    </div>
  </div>
</section>



<!-- Device tabs section -->
<section class="bg-white dark:bg-gray-900 antialiased border-t border-border">
  <div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
    <div class="grid grid-cols-1 gap-8 lg:gap-16 lg:grid-cols-2">
      <div>
        <div class="space-y-4 sm:space-y-6 lg:space-y-8">
          <div>
            <h2 class="text-3xl font-extrabold leading-tight text-gray-900 sm:text-4xl dark:text-white">
              {t('f1.title' as any)} — {t('f2.title' as any)}
            </h2>
            <p class="mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl">
              {t('hero.description')}
            </p>
          </div>
          <div class="pt-4 border-t border-gray-200 sm:pt-6 lg:pt-8 dark:border-gray-800">
            <ul class="space-y-4">
              {(['f1','f2','f3'] as const).map((key) => (
                <li class="flex items-center gap-2.5">
                  <div class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-brand-500/10 text-brand-500 shrink-0">
                    <svg aria-hidden="true" class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                    </svg>
                  </div>
                  <span class="text-base font-medium text-gray-900 dark:text-white">{t(`${key}.title` as any)}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <a href={t('nav.features.href')} class="inline-flex items-center text-base font-medium text-brand-500 hover:underline">
              {t('nav.features')}
              <svg aria-hidden="true" class="w-5 h-5 ml-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
              </svg>
            </a>
          </div>
        </div>

      </div>

      <!-- App image -->
      <div class="hidden lg:flex items-center">
        <Image src={armariumImg} alt="Armarium Suite" class="w-3/4 mx-auto rounded-2xl shadow-md object-contain" widths={[480, 720]} sizes="30vw" />
      </div>
    </div>

    <!-- Bottom split: image + feature list -->
    <div class="grid grid-cols-1 gap-8 mt-8 lg:mt-20 lg:gap-16 lg:grid-cols-2">
      <div class="hidden lg:block">
        <Image src={contentImg} alt="Armarium Suite Features" class="w-3/4 mx-auto rounded-2xl shadow-md object-cover" widths={[640, 960]} sizes="40vw" />
      </div>

      <div class="space-y-4 sm:space-y-6 lg:space-y-8">
        <div>
          <h2 class="text-3xl font-extrabold leading-tight text-gray-900 sm:text-4xl dark:text-white">
            {t('features.title')}
          </h2>
          <p class="mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl">
            {t('features.description')}
          </p>
        </div>
        <div class="pt-4 border-t border-gray-200 sm:pt-6 lg:pt-8 dark:border-gray-800">
          <ul class="space-y-4">
            {(['f1','f2','f3','f4','f5','f6'] as const).map((key) => (
              <li class="flex items-center gap-2.5">
                <div class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-brand-500/10 text-brand-500 shrink-0">
                  <svg aria-hidden="true" class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                  </svg>
                </div>
                <span class="text-base font-medium text-gray-900 dark:text-white">{t(`${key}.title` as any)}</span>
              </li>
            ))}
          </ul>
        </div>
        <div class="flex items-center gap-4">
          <a href="https://app.armarium.ch/register"
            class="text-white bg-brand-500 justify-center hover:bg-brand-600 inline-flex items-center focus:ring-4 focus:outline-none focus:ring-brand-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-brand-600 dark:hover:bg-brand-700 dark:focus:ring-brand-800">
            {t('hero.register')}
            <svg aria-hidden="true" class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
          </a>
          <a href={t('nav.features.href')}
            class="px-5 py-2.5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-brand-600 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
            {t('nav.features')}
          </a>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- Blog section -->
<section class="bg-white dark:bg-gray-900 border-t border-border">
  <div class="py-8 px-6 mx-auto max-w-screen-xl sm:py-16 lg:px-12">
    <div class="mx-auto max-w-screen-sm text-center">
      <h2 class="mb-4 text-3xl lg:text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
        {t('nav.blog')}
      </h2>
      <p class="mb-8 lg:mb-16 font-light text-gray-500 dark:text-gray-400 sm:text-xl">
        {t('features.description')}
      </p>
    </div>
    <div class="grid gap-8 mb-16 lg:grid-cols-3 [&>*]:min-w-0">
      <!-- Featured post with image -->
      {featured && (
        <article class="min-w-0">
          <a href={`/blog/${featured.id}`} class="block mb-5">
            <Image src={headerImg} alt={featured.data.title} class="rounded-lg w-full h-48 object-cover" />
          </a>
          <h2 class="my-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            <a href={`/blog/${featured.id}`}>{featured.data.title}</a>
          </h2>
          <p class="mb-4 font-light text-gray-500 dark:text-gray-400">{featured.data.description}</p>
          <a href={`/blog/${featured.id}`} class="inline-flex items-center font-medium text-brand-500 hover:underline">
            {t('blog.readmore' as any) || 'Weiterlesen'}
            <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
          </a>
        </article>
      )}
      <!-- Column A -->
      <div class="space-y-8 lg:pl-10 lg:border-l lg:border-gray-200 dark:lg:border-gray-700">
        {colA.map((post) => (
          <article>
            <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
              <a href={post.href}>{post.title}</a>
            </h2>
            <p class="mb-4 font-light text-gray-500 dark:text-gray-400">{post.description}</p>
            <a href={post.href} class="inline-flex items-center font-medium text-brand-500 hover:underline">
              Weiterlesen
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
            </a>
          </article>
        ))}
      </div>
      <!-- Column B -->
      <div class="space-y-8 lg:pl-10 lg:border-l lg:border-gray-200 dark:lg:border-gray-700">
        {colB.map((post) => (
          <article>
            <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
              <a href={post.href}>{post.title}</a>
            </h2>
            <p class="mb-4 font-light text-gray-500 dark:text-gray-400">{post.description}</p>
            <a href={post.href} class="inline-flex items-center font-medium text-brand-500 hover:underline">
              Weiterlesen
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
            </a>
          </article>
        ))}
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="relative z-10 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('cta.title')}
    </h2>
    <p class="text-lg text-foreground-muted mb-8 text-balance">
      Kostenlos mitmachen und sofort loslegen.
    </p>
    <div class="flex justify-center">
      <a href="https://app.armarium.ch/register" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-brand-500 hover:bg-brand-600 focus:ring-4 focus:ring-brand-300 dark:focus:ring-brand-900">
        {t('cta.register')}
        <Icon name="arrow-right" size="sm" class="ml-2 -mr-1" />
      </a>
    </div>
  </div>
</section>
