import { ArrowRight, CheckCircle2, FileText, ShieldCheck } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";

const etapas = [
  "Cadastro seguro",
  "Briefing guiado",
  "Ajuda por pergunta",
  "Envio para análise"
];

export default function Home() {
  return (
    <main className="min-h-screen">
      <section className="container grid min-h-screen gap-10 py-8 lg:grid-cols-[1fr_420px] lg:items-center lg:py-14">
        <div className="max-w-3xl">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border bg-card px-3 py-1 text-sm text-muted-foreground">
            <ShieldCheck className="h-4 w-4 text-primary" />
            Dados organizados, rascunho salvo e sem envio de senhas.
          </div>
          <h1 className="text-4xl font-semibold tracking-normal text-foreground sm:text-5xl lg:text-6xl">
            Briefing de Site SeConectai
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-8 text-muted-foreground">
            Um formulário guiado para reunir as informações do projeto com clareza,
            contexto e segurança antes do desenvolvimento do site.
          </p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Button size="lg" className="gap-2" asChild>
              <Link href="/login">
                Entrar no sistema
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <Link href="/cadastro">Criar cadastro</Link>
            </Button>
          </div>
        </div>

        <Card className="border bg-card shadow-sm">
          <CardHeader>
            <div className="mb-3 flex h-11 w-11 items-center justify-center rounded-md bg-accent text-primary">
              <FileText className="h-6 w-6" />
            </div>
            <CardTitle className="text-2xl">Como o briefing avança</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <Progress value={25} aria-label="Progresso demonstrativo do briefing" />
            <div className="space-y-4">
              {etapas.map((etapa) => (
                <div key={etapa} className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 flex-none text-primary" />
                  <span className="text-sm font-medium">{etapa}</span>
                </div>
              ))}
            </div>
            <p className="rounded-md bg-muted p-4 text-sm leading-6 text-muted-foreground">
              A estrutura inicial está pronta para evoluir em etapas: banco,
              autenticação, formulário dirigido por dados, anexos e painel admin.
            </p>
          </CardContent>
        </Card>
      </section>
    </main>
  );
}