import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Dot, MoveUpRight, Sparkles } from "lucide-react";

import { formatDate, getHomeInsights } from "@/lib/site-data";

function Metric({ value, label }: { value: string; label: string }) {
  return (
    <div className="rounded-[1.75rem] border border-[var(--border)] bg-[var(--background-soft)] p-5">
      <p className="text-3xl font-semibold text-[var(--foreground)]">{value}</p>
      <p className="mt-1 text-sm text-[var(--muted)]">{label}</p>
    </div>
  );
}

export default function HomePage() {
  const { hero, stats, skills, featuredProjects, latestPosts } = getHomeInsights();

  return (
    <div className="page-enter space-y-8 pb-10">
      <section className="surface relative overflow-hidden rounded-[2.5rem] px-6 py-8 sm:px-8 lg:px-12 lg:py-12">
        <div className="absolute right-[-4rem] top-[-4rem] h-44 w-44 rounded-full bg-[var(--accent-soft)] blur-3xl" />
        <div className="absolute left-[-3rem] bottom-[-5rem] h-56 w-56 rounded-full bg-[var(--secondary-soft)] blur-3xl" />

        <div className="relative grid gap-8 lg:grid-cols-[1.25fr_0.75fr] lg:items-stretch">
          <div className="space-y-7">
            <div className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.28em] text-[var(--muted)]">
              <Sparkles className="h-3.5 w-3.5" />
              {hero.eyebrow}
            </div>

            <div className="space-y-4">
              <p className="text-sm font-medium uppercase tracking-[0.34em] text-[var(--muted)]">{hero.role}</p>
              <h1 className="max-w-4xl text-5xl font-semibold tracking-tight text-[var(--foreground)] sm:text-6xl lg:text-7xl">
                A sharper stage for <span className="font-[var(--font-serif)] italic text-[var(--accent)]">current work</span> and ambitious ideas.
              </h1>
              <p className="max-w-2xl text-lg leading-8 text-[var(--muted)]">{hero.intro}</p>
            </div>

            <div className="flex flex-col gap-3 sm:flex-row">
              <Link href="/works" className="inline-flex items-center justify-center gap-2 rounded-full bg-[linear-gradient(135deg,var(--accent),var(--secondary))] px-6 py-3 text-sm font-medium text-white transition hover:-translate-y-0.5 hover:brightness-105">
                Explore projects
                <ArrowRight className="h-4 w-4" />
              </Link>
              <Link href="/blog" className="inline-flex items-center justify-center gap-2 rounded-full border border-[var(--border)] bg-[var(--background-soft)] px-6 py-3 text-sm font-medium text-[var(--foreground)] transition hover:-translate-y-0.5">
                Open journal
                <MoveUpRight className="h-4 w-4" />
              </Link>
            </div>

            <div className="flex flex-wrap items-center gap-3 text-sm text-[var(--muted)]">
              {hero.socials.map((item) => (
                <a key={item.href} href={item.href} className="rounded-full border border-[var(--border)] px-4 py-2 transition hover:bg-[var(--background-soft)] hover:text-[var(--foreground)]">
                  {item.label}
                </a>
              ))}
            </div>
          </div>

          <div className="grid gap-4">
            <div className="surface rounded-[2rem] p-5">
              <p className="text-sm font-medium uppercase tracking-[0.24em] text-[var(--muted)]">Signal</p>
              <div className="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
                {stats.map((item) => (
                  <Metric key={`${item.value}-${item.label}`} value={item.value} label={item.label} />
                ))}
              </div>
            </div>
            {hero.image ? (
              <div className="surface relative overflow-hidden rounded-[2rem] p-5">
                <div className="absolute inset-0 bg-[linear-gradient(145deg,var(--accent-soft),transparent_55%,var(--secondary-soft))]" />
                <div className="relative flex min-h-[18rem] items-center justify-center rounded-[1.6rem] bg-[var(--background-soft)] p-8">
                  <Image src={hero.image} alt={hero.title} width={380} height={380} className="h-auto w-full max-w-[16rem] object-contain" priority />
                </div>
              </div>
            ) : null}
          </div>
        </div>
      </section>

      <section className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
        <div className="surface rounded-[2.25rem] p-6 sm:p-8">
          <div className="flex items-end justify-between gap-6">
            <div>
              <p className="text-sm font-medium uppercase tracking-[0.26em] text-[var(--muted)]">Current highlights</p>
              <h2 className="mt-3 text-3xl font-semibold tracking-tight text-[var(--foreground)]">The releases shaping the site right now.</h2>
            </div>
            <Link href="/works" className="hidden text-sm font-medium text-[var(--muted)] hover:text-[var(--foreground)] sm:inline-flex">See all</Link>
          </div>

          <div className="mt-8 grid gap-4 md:grid-cols-2">
            {featuredProjects.map((project) => (
              <Link key={project.id} href={`/portfolio/item/${project.slug}`} className="group rounded-[1.8rem] border border-[var(--border)] bg-[var(--background-soft)] p-4 transition hover:-translate-y-1">
                <div className="overflow-hidden rounded-[1.35rem] bg-[color:var(--background-elevated)]">
                  {project.featuredImage ? (
                    <Image src={project.featuredImage.url} alt={project.featuredImage.alt || project.title} width={720} height={460} className="aspect-[4/3] w-full object-cover transition duration-500 group-hover:scale-[1.03]" />
                  ) : (
                    <div className="flex aspect-[4/3] items-center justify-center text-sm text-[var(--muted)]">Preview unavailable</div>
                  )}
                </div>
                <div className="mt-4">
                  <div className="flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-[var(--muted)]">
                    <Dot className="h-4 w-4" />
                    Featured project
                  </div>
                  <h3 className="mt-2 text-xl font-semibold text-[var(--foreground)]">{project.title}</h3>
                  <p className="mt-2 text-sm leading-7 text-[var(--muted)]">{project.excerpt}</p>
                </div>
              </Link>
            ))}
          </div>
        </div>

        <div className="surface rounded-[2.25rem] p-6 sm:p-8">
          <p className="text-sm font-medium uppercase tracking-[0.26em] text-[var(--muted)]">Craft stack</p>
          <div className="mt-6 space-y-4">
            {skills.map((skill) => (
              <div key={skill.name} className="rounded-[1.6rem] border border-[var(--border)] bg-[var(--background-soft)] p-4">
                <div className="flex items-end justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-semibold text-[var(--foreground)]">{skill.name}</h3>
                    <p className="text-sm leading-6 text-[var(--muted)]">{skill.description}</p>
                  </div>
                  <span className="text-sm font-semibold text-[var(--accent)]">{skill.level}%</span>
                </div>
                <div className="mt-4 h-2 overflow-hidden rounded-full bg-black/8 dark:bg-white/8">
                  <div className="h-full rounded-full bg-[linear-gradient(90deg,var(--accent),var(--secondary))]" style={{ width: `${skill.level}%` }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="surface rounded-[2.25rem] p-6 sm:p-8">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="text-sm font-medium uppercase tracking-[0.26em] text-[var(--muted)]">Current writing</p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-[var(--foreground)]">Stories, positioning notes, and release context from the work itself.</h2>
          </div>
          <Link href="/blog" className="text-sm font-medium text-[var(--muted)] hover:text-[var(--foreground)]">Open journal</Link>
        </div>

        <div className="mt-8 grid gap-4 lg:grid-cols-3">
          {latestPosts.map((post) => (
            <Link key={post.id} href={`/blog/${post.slug}`} className="group rounded-[1.8rem] border border-[var(--border)] bg-[var(--background-soft)] p-5 transition hover:-translate-y-1">
              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--muted)]">{formatDate(post.date)}</p>
              <h3 className="mt-4 text-xl font-semibold tracking-tight text-[var(--foreground)] transition group-hover:opacity-80">{post.title}</h3>
              <p className="mt-3 text-sm leading-7 text-[var(--muted)]">{post.excerpt}</p>
              <span className="mt-6 inline-flex items-center gap-2 text-sm font-medium text-[var(--foreground)]">Read article <ArrowRight className="h-4 w-4" /></span>
            </Link>
          ))}
        </div>
      </section>
    </div>
  );
}
