import type { Metadata } from "next";
import Link from "next/link";
import { Badge, Card, Container, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { MarketingLayout } from "@/layouts/MarketingLayout";
import { seoBlogPosts } from "@/data/seo/blog-posts";
import { APP_NAME } from "@/utils/constants";

export const metadata: Metadata = {
  title: "Blog — Apps, Delivery e Tecnologia",
  description: `Artigos sobre criação de apps, delivery, automação comercial e SaaS. Blog ${APP_NAME}.`,
};

const CATEGORIES = [
  "marketing",
  "delivery",
  "aplicativos",
  "tecnologia",
  "automação",
  "restaurantes",
  "vendas",
] as const;

export default function BlogIndexPage() {
  const sorted = [...seoBlogPosts].sort(
    (a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime(),
  );

  return (
    <MarketingLayout>
      <Container size="lg" py={100}>
        <Stack gap="xl">
          <Stack gap="md" maw={720}>
            <Text size="xs" fw={700} tt="uppercase" c="blue">
              Blog
            </Text>
            <Title order={1} fw={800}>
              Insights sobre apps, delivery e crescimento digital
            </Title>
            <Text size="lg" c="dimmed">
              Conteúdo para empresários e gestores que querem dominar canais digitais.
            </Text>
            <Group gap="xs">
              {CATEGORIES.map((cat) => (
                <Badge key={cat} variant="outline" size="sm">
                  {cat}
                </Badge>
              ))}
            </Group>
          </Stack>

          <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
            {sorted.map((post) => (
              <Card
                key={post.slug}
                component={Link}
                href={`/blog/${post.slug}`}
                padding="xl"
                radius="md"
                withBorder
                style={{ textDecoration: "none" }}
              >
                <Stack gap="sm">
                  <Group gap="xs">
                    <Badge size="sm">{post.category}</Badge>
                    <Text size="xs" c="dimmed">
                      {post.readMinutes} min · {post.publishedAt}
                    </Text>
                  </Group>
                  <Title order={3} size="h4" fw={700}>
                    {post.title}
                  </Title>
                  <Text size="sm" c="dimmed" lineClamp={3}>
                    {post.excerpt}
                  </Text>
                </Stack>
              </Card>
            ))}
          </SimpleGrid>
        </Stack>
      </Container>
    </MarketingLayout>
  );
}