import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { Separator } from '@/components/ui/separator';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent } from '@/components/ui/card';

const SKILLS = [
  { name: 'React / Next.js', level: 95 },
  { name: 'TypeScript', level: 92 },
  { name: 'Tailwind / shadcn', level: 90 },
  { name: 'Rspack / Vite', level: 84 },
  { name: 'Node / APIs', level: 78 },
];

const STACK = [
  'React', 'TypeScript', 'Next.js', 'Rspack', 'Tailwind v4',
  'shadcn/ui', 'TanStack Query', 'Zustand', 'Zod', 'Vitest',
];

const TIMELINE = [
  { year: '2024', text: 'Building design-system-grade UIs & dev tooling.' },
  { year: '2022', text: 'Shipped large-scale Next.js platforms, i18n + SSR.' },
  { year: '2020', text: 'Went full frontend — React, state, performance.' },
  { year: '2018', text: 'First lines of code entered the Matrix.' },
];

export default function About() {
  return (
    <section className="space-y-10">
      <div className="rise flex items-center gap-5">
        <Avatar className="size-20 box-glow border border-primary/40">
          <AvatarFallback className="bg-secondary font-display text-2xl text-primary">
            JS
          </AvatarFallback>
        </Avatar>
        <div>
          <h1 className="font-display text-3xl font-bold text-primary text-glow sm:text-4xl">
            ./about
          </h1>
          <p className="font-mono text-sm text-muted-foreground">
            operator profile — clearance: green
          </p>
        </div>
      </div>

      <Tabs defaultValue="bio" className="rise" style={{ animationDelay: '120ms' }}>
        <TabsList className="font-mono">
          <TabsTrigger value="bio">bio</TabsTrigger>
          <TabsTrigger value="skills">skills</TabsTrigger>
          <TabsTrigger value="log">log</TabsTrigger>
        </TabsList>

        <TabsContent value="bio" className="pt-4">
          <Card className="box-glow border-primary/20 bg-card/60 backdrop-blur-sm">
            <CardContent className="space-y-4 pt-6 text-sm leading-relaxed text-muted-foreground sm:text-base">
              <p>
                <span className="text-primary">&gt;</span> I'm{' '}
                <span className="text-primary text-glow">Javid Salimov</span>, a
                frontend engineer who treats the browser like a programmable
                reality. I care about typed contracts, fast bundles and
                interfaces that feel inevitable.
              </p>
              <p>
                <span className="text-primary">&gt;</span> Daily I architect
                component systems, squeeze build pipelines, and turn fuzzy
                product ideas into crisp, accessible UI.
              </p>
              <Separator className="bg-primary/15" />
              <div className="flex flex-wrap gap-2">
                {STACK.map((t) => (
                  <Badge
                    key={t}
                    variant="secondary"
                    className="font-mono text-xs text-primary/90"
                  >
                    {t}
                  </Badge>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="skills" className="space-y-5 pt-6">
          {SKILLS.map((s) => (
            <div key={s.name} className="space-y-2">
              <div className="flex justify-between font-mono text-xs sm:text-sm">
                <span className="text-foreground">{s.name}</span>
                <span className="text-primary text-glow">{s.level}%</span>
              </div>
              <Progress value={s.level} className="h-2 bg-secondary" />
            </div>
          ))}
        </TabsContent>

        <TabsContent value="log" className="pt-6">
          <ol className="relative space-y-6 border-l border-primary/25 pl-6">
            {TIMELINE.map((t) => (
              <li key={t.year} className="relative">
                <span className="absolute -left-[31px] top-1 size-3 rounded-full bg-primary box-glow" />
                <div className="font-display text-lg text-primary text-glow">
                  {t.year}
                </div>
                <p className="font-mono text-sm text-muted-foreground">{t.text}</p>
              </li>
            ))}
          </ol>
        </TabsContent>
      </Tabs>
    </section>
  );
}