import { getDb } from "@/lib/db";
import { seedIfEmpty } from "@/lib/seed";
import { getProfile, listFeaturedProjects, listProjects } from "@/lib/models";
import { BioSection } from "@/components/bio-section";
import { LinksSection } from "@/components/links-section";
import { ProjectFilter } from "@/components/project-filter";
import { JsonLd } from "@/components/json-ld";
import { getDict } from "@/i18n/dictionaries";
import Link from "next/link";
import { publicPath } from "@/i18n/routes";
import { HeroBanner } from "@/components/hero-banner";

export const dynamic = "force-dynamic";

export default async function RootIndex() {
  const db = getDb();
  seedIfEmpty(db);
  const profile = getProfile(db, "de");
  const featured = listFeaturedProjects(db, "de");
  const all = listProjects(db, "de");
  const dict = getDict("de");

  return (
    <>
      <JsonLd profile={profile} featured={featured} />
      <HeroBanner dict={dict.home} heroImage="/img/hero/hero-bg.jpg" />

      <div className="mx-auto max-w-[var(--max-w)] px-4 md:px-6">
        {/* FEATURED */}
        <section id="featured" className="py-16">
          <div className="section-heading">
            <span className="section-heading__label">~/featured</span>
            <h2 className="section-heading__title">{dict.home.featuredLabel}</h2>
            <Link href={publicPath("de", "projects")} className="ml-auto font-mono text-xs uppercase text-accent hover:underline" data-cursor="hover">
              {dict.actions.viewProjects} →
            </Link>
          </div>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {featured.map((p) => (
              <FeaturedTile key={p.slug} project={p} />
            ))}
          </div>
        </section>

        {/* ALL PROJECTS mit Filter */}
        <section className="py-12">
          <div className="section-heading">
            <span className="section-heading__label">~/projects</span>
            <h2 className="section-heading__title">{dict.home.allProjectsLabel}</h2>
          </div>
          <ProjectFilter projects={all} locale="de" emptyLabel={dict.projects.emptyState} />
        </section>

        {/* BIO + LINKS */}
        <section className="grid gap-6 py-12 lg:grid-cols-3">
          <div className="lg:col-span-2">
            <BioSection profile={profile} locale="de" />
          </div>
          <aside>
            <LinksSection profile={profile} locale="de" />
          </aside>
        </section>

        {/* CTA */}
        <section className="ascii-box my-12">
          <p className="font-mono text-xs uppercase tracking-wider text-accent">{dict.home.cta.title}</p>
          <p className="mt-2 text-[var(--fg)]">{dict.home.cta.body}</p>
        </section>
      </div>
    </>
  );
}

import { TiltCard } from "@/components/tilt-card";
import { StackIcon } from "@/components/stack-icon";
import type { Project } from "@/lib/models";

function FeaturedTile({ project }: { project: Project }) {
  const hasThumb = ["hermes", "casino-bot", "polymarket-trader"].includes(project.slug);
  return (
    <TiltCard href={`/projekte/${project.slug}`} className="ascii-box !p-0">
      {hasThumb ? (
        <div className="relative aspect-[16/9] overflow-hidden">
          <img
            src={`/img/projects/${project.slug}.jpg`}
            alt=""
            loading="lazy"
            className="h-full w-full object-cover opacity-70 transition-opacity duration-300 group-hover:opacity-100"
            style={{ filter: "saturate(0.85) contrast(1.05)" }}
          />
          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[var(--panel)] via-transparent to-transparent" />
          <span className="absolute right-2 top-2 font-mono text-[10px] uppercase tracking-wider text-accent mix-blend-screen">
            {project.number}
          </span>
        </div>
      ) : (
        <div className="flex aspect-[16/9] items-center justify-center bg-[var(--bg-glow)]">
          <span className="font-mono text-6xl text-muted opacity-40">{project.number}</span>
        </div>
      )}
      <div className="p-5">
        <div className="mb-2 flex items-center justify-between gap-2">
          <span className="font-mono text-[10px] uppercase tracking-wider text-muted">{project.category}</span>
          <span className={`badge ${project.featured ? "badge--live" : "badge--muted"}`}>{project.status}</span>
        </div>
        <h3 className="mb-2 text-lg font-semibold">
          <span className="hover:text-accent">{project.slug}</span>
        </h3>
        <p className="text-sm text-[var(--fg-dim)]">{project.summary}</p>
        <div className="mt-4 flex flex-wrap gap-1.5">
          {project.stack.split("·").slice(0, 4).map((s, i) => (
            <span key={i} className="stack-pill">
              <StackIcon name={s} />
              {s.trim()}
            </span>
          ))}
        </div>
      </div>
    </TiltCard>
  );
}
