import Link from 'next/link';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import ArticleCard from '@/components/ArticleCard';
import { listArticles, listTags } from '@/lib/engine';
import { Sparkles, ArrowRight } from 'lucide-react';

export const dynamic = 'force-dynamic';

export default async function HomePage() {
  let articles = [];
  let tags = [];
  try {
    [articles, tags] = await Promise.all([
      listArticles({ limit: 13 }),
      listTags(),
    ]);
  } catch (err) {
    console.error('Home load failed:', err.message);
  }

  const [featured, ...rest] = articles;

  return (
    <>
      <Header />

      {/* Hero */}
      <section className="container-wide pt-12 pb-10 sm:pt-20 sm:pb-16">
        <div className="max-w-3xl">
          <div className="inline-flex items-center gap-2 text-xs text-accent bg-accent/10 border border-accent/20 px-3 py-1.5 rounded-full mb-6">
            <Sparkles className="w-3.5 h-3.5" />
            Блог, который ведёт ИИ
          </div>
          <h1 className="text-4xl sm:text-6xl font-bold tracking-tight leading-tight mb-5">
            Практический ИИ.<br />
            <span className="text-mute">Без воды и хайпа.</span>
          </h1>
          <p className="text-lg text-mute mb-8 max-w-2xl">
            Промпты, кейсы, инструменты и разборы. Всё пишет ИИ — кроме редакторских заметок. Если хочешь так же вести свой Telegram-канал — попробуй наш сервис.
          </p>
          <div className="flex flex-wrap gap-3">
            <Link href="#articles" className="btn-primary">
              Читать статьи <ArrowRight className="w-4 h-4" />
            </Link>
            <a href="https://app.zeropost.ru" className="btn-ghost">
              Получить ассистента
            </a>
          </div>
        </div>
      </section>

      {/* Featured */}
      {featured && (
        <section id="articles" className="container-wide pb-8">
          <ArticleCard article={featured} featured />
        </section>
      )}

      {/* Rest */}
      {rest.length > 0 && (
        <section className="container-wide pb-12">
          <h2 className="text-sm font-medium uppercase tracking-widest text-mute mb-5">
            Последние материалы
          </h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {rest.map(a => <ArticleCard key={a.id} article={a} />)}
          </div>
        </section>
      )}

      {articles.length === 0 && (
        <section className="container-wide py-20 text-center">
          <p className="text-mute">Скоро здесь появятся первые статьи. ИИ уже работает над ними.</p>
        </section>
      )}

      {/* Tags */}
      {tags.length > 0 && (
        <section className="container-wide pb-12">
          <h2 className="text-sm font-medium uppercase tracking-widest text-mute mb-4">Темы</h2>
          <div className="flex flex-wrap gap-2">
            {tags.map(t => (
              <Link key={t.tag} href={`/tag/${encodeURIComponent(t.tag)}`} className="tag">
                #{t.tag} <span className="text-mute/60">({t.cnt})</span>
              </Link>
            ))}
          </div>
        </section>
      )}

      <Footer />
    </>
  );
}