<template>
    <main class="flex-1 flex flex-col justify-center px-6 py-24">
        <div class="max-w-4xl mx-auto w-full">
            <!-- Hero -->
            <div class="mb-20 opacity-0 animate-fade-in">
                <h1
                    class="font-mono font-bold text-4xl sm:text-5xl lg:text-6xl tracking-tight leading-[1.1]"
                >
                    Bennet Gallein IT Solutions<span
                        class="animate-blink text-white/60"
                        >_</span
                    >
                </h1>
                <p class="mt-6 text-white/50 text-lg max-w-xl leading-relaxed">
                    Software, Infrastructure &amp; APIs.
                </p>
            </div>

            <!-- Projects -->
            <section>
                <h2
                    class="font-mono text-xs text-white/30 uppercase tracking-widest mb-6 opacity-0 animate-fade-in delay-200"
                >
                    Projects
                </h2>
                <div class="grid gap-4">
                    <div class="opacity-0 animate-fade-in-up delay-300">
                        <ProjectCard
                            title="Software Shop"
                            domain="bennetgallein.de"
                            url="https://bennetgallein.de"
                            description="Custom software solutions and digital products."
                        />
                    </div>
                    <div class="opacity-0 animate-fade-in-up delay-400">
                        <ProjectCard
                            title="Remote Backups"
                            domain="remote-backups.com"
                            url="https://remote-backups.com"
                            description="Infrastructure as a Service – secure, managed backup solutions."
                        />
                    </div>
                    <div class="opacity-0 animate-fade-in-up delay-500">
                        <ProjectCard
                            title="VAT API"
                            domain="vat-api.eu"
                            url="https://vat-api.eu"
                            description="EU VAT validation and calculation as an API."
                        />
                    </div>
                </div>
            </section>
        </div>
    </main>
</template>

<script setup lang="ts">
useHead({
    title: "Bennet Gallein IT Solutions",
});
</script>
