import { Link } from 'react-router-dom';
import { ArrowRight, Terminal } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

const STATS = [
  { label: 'YEARS_ONLINE', value: '6+' },
  { label: 'REPOS_DECRYPTED', value: '120+' },
  { label: 'STACK', value: 'FRONTEND' },
];

export default function Home() {
  return (
    <section className="space-y-12">
      <div className="space-y-6">
        <div className="rise" style={{ animationDelay: '40ms' }}>
          <Badge variant="outline" className="border-primary/40 font-mono tracking-widest">
            <span className="mr-1 inline-block size-1.5 animate-pulse rounded-full bg-primary" />
            WAKE UP, NEO...
          </Badge>
        </div>

        <h1
          className="rise font-display text-5xl font-black leading-[0.95] tracking-tight text-primary text-glow sm:text-7xl"
          style={{ animationDelay: '120ms' }}
        >
          JAVID
          <br />
          SALIMOV
        </h1>

        <p
          className="rise max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg"
          style={{ animationDelay: '200ms' }}
        >
          <span className="text-primary">$</span> Frontend engineer operating
          inside the construct. I bend React, TypeScript and pixels until the
          interface obeys. There is no spoon — only well-typed components.
        </p>

        <div className="rise flex flex-wrap gap-3" style={{ animationDelay: '280ms' }}>
          <Button asChild className="box-glow font-mono">
            <Link to="/about">
              Enter the construct <ArrowRight className="size-4" />
            </Link>
          </Button>
          <Button asChild variant="outline" className="font-mono border-primary/40">
            <Link to="/contact">
              <Terminal className="size-4" /> Open channel
            </Link>
          </Button>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-3">
        {STATS.map((s, i) => (
          <Card
            key={s.label}
            className="rise box-glow border-primary/20 bg-card/60 backdrop-blur-sm"
            style={{ animationDelay: `${360 + i * 90}ms` }}
          >
            <CardHeader className="pb-2">
              <CardTitle className="font-display text-4xl text-primary text-glow">
                {s.value}
              </CardTitle>
            </CardHeader>
            <CardContent className="font-mono text-xs tracking-widest text-muted-foreground">
              {s.label}
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}