"use client"

import Header from "@/components/features/header/header"
import Footer from "@/components/features/footer/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Brain, BookOpen, Clock, Zap, Target, Lightbulb } from "lucide-react"
import { useTranslation } from "react-i18next"

export default function DesignSystemPage() {
  const { t } = useTranslation()

  return (
    <div>
      <Header />

      <div className="container py-12">
        <h1 className="text-4xl font-bold mb-8 font-heading">Design System</h1>

        <Tabs defaultValue="colors">
          <TabsList className="mb-8">
            <TabsTrigger value="colors">Colors</TabsTrigger>
            <TabsTrigger value="typography">Typography</TabsTrigger>
            <TabsTrigger value="buttons">Buttons</TabsTrigger>
            <TabsTrigger value="cards">Cards</TabsTrigger>
            <TabsTrigger value="forms">Forms</TabsTrigger>
            <TabsTrigger value="icons">Icons</TabsTrigger>
          </TabsList>

          <TabsContent value="colors" className="space-y-8">
            <h2 className="text-2xl font-bold font-heading">Colors</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="space-y-2">
                <div className="h-24 w-full bg-primary rounded-lg"></div>
                <p className="font-medium">Primary (Yellow)</p>
                <p className="text-sm text-gray-500">#FDEE21</p>
              </div>
              <div className="space-y-2">
                <div className="h-24 w-full bg-primary-light rounded-lg"></div>
                <p className="font-medium">Primary Light</p>
                <p className="text-sm text-gray-500">#FBF7B9</p>
              </div>
              <div className="space-y-2">
                <div className="h-24 w-full bg-primary-medium rounded-lg"></div>
                <p className="font-medium">Primary Medium</p>
                <p className="text-sm text-gray-500">#FFF67D</p>
              </div>
              <div className="space-y-2">
                <div className="h-24 w-full bg-secondary rounded-lg text-white flex items-center justify-center">
                  <span>Text</span>
                </div>
                <p className="font-medium">Secondary (Blue)</p>
                <p className="text-sm text-gray-500">#010080</p>
              </div>
              <div className="space-y-2">
                <div className="h-24 w-full bg-secondary-light rounded-lg"></div>
                <p className="font-medium">Secondary Light</p>
                <p className="text-sm text-gray-500">#ECF5FF</p>
              </div>
              <div className="space-y-2">
                <div className="h-24 w-full bg-secondary-dark rounded-lg text-white flex items-center justify-center">
                  <span>Text</span>
                </div>
                <p className="font-medium">Secondary Dark</p>
                <p className="text-sm text-gray-500">#050556</p>
              </div>
              <div className="space-y-2">
                <div className="h-24 w-full bg-primary-light rounded-lg flex items-center justify-center text-secondary">
                  <span>Icon Text</span>
                </div>
                <p className="font-medium">Icon Background</p>
                <p className="text-sm text-gray-500">#FBF7B9 with #010080 text</p>
              </div>
              <div className="space-y-2">
                <div className="h-24 w-full bg-gray-500 rounded-lg text-white flex items-center justify-center">
                  <span>Text</span>
                </div>
                <p className="font-medium">Body Text</p>
                <p className="text-sm text-gray-500">rgb(75, 85, 99)</p>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="typography" className="space-y-8">
            <h2 className="text-2xl font-bold font-heading">Typography</h2>
            <div className="space-y-6">
              <div>
                <h1 className="text-5xl font-bold font-heading" style={{ color: "#050556" }}>
                  Heading 1
                </h1>
                <p className="text-sm text-gray-500 mt-2">Exo 2, 48px, Bold, #050556</p>
              </div>
              <div>
                <h2 className="text-4xl font-bold font-heading" style={{ color: "#050556" }}>
                  Heading 2
                </h2>
                <p className="text-sm text-gray-500 mt-2">Exo 2, 36px, Bold, #050556</p>
              </div>
              <div>
                <h3 className="text-3xl font-bold font-heading" style={{ color: "#050556" }}>
                  Heading 3
                </h3>
                <p className="text-sm text-gray-500 mt-2">Exo 2, 30px, Bold, #050556</p>
              </div>
              <div>
                <h4 className="text-2xl font-bold font-heading">Heading 4</h4>
                <p className="text-sm text-gray-500 mt-2">Exo 2, 24px, Bold</p>
              </div>
              <div>
                <p className="text-lg text-gray-600">Body Text Large</p>
                <p className="text-sm text-gray-500 mt-2">Geist, 18px, Regular, rgb(75, 85, 99)</p>
              </div>
              <div>
                <p className="text-gray-600">Body Text Regular</p>
                <p className="text-sm text-gray-500 mt-2">Geist, 16px, Regular, rgb(75, 85, 99)</p>
              </div>
              <div>
                <p className="text-sm text-gray-600">Body Text Small</p>
                <p className="text-sm text-gray-500 mt-2">Geist, 14px, Regular, rgb(75, 85, 99)</p>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="buttons" className="space-y-8">
            <h2 className="text-2xl font-bold font-heading">Buttons</h2>
            <div className="flex flex-wrap gap-4">
              <Button className="btn-primary">Primary Button</Button>
              <Button variant="outline" className="btn-outline">
                Outline Button
              </Button>
              <Button variant="ghost">Ghost Button</Button>
              <Button variant="link">Link Button</Button>
              <Button disabled>Disabled Button</Button>
            </div>
          </TabsContent>

          <TabsContent value="cards" className="space-y-8">
            <h2 className="text-2xl font-bold font-heading">Cards</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card className="bg-secondary-light border-0">
                <CardHeader>
                  <CardTitle>Card Title</CardTitle>
                  <CardDescription>Card description goes here</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600">
                    This is the content of the card. It can contain any information you want to display.
                  </p>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">Action Button</Button>
                </CardFooter>
              </Card>

              <Card className="bg-secondary-light border-0">
                <CardHeader>
                  <CardTitle>Feature Card</CardTitle>
                  <CardDescription>With icon and features list</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center">
                    <Brain className="h-6 w-6 text-primary" />
                  </div>
                  <div className="space-y-2">
                    <div className="feature-item">
                      <span className="text-primary mr-2">•</span>
                      <span className="text-gray-600">Feature one description</span>
                    </div>
                    <div className="feature-item">
                      <span className="text-primary mr-2">•</span>
                      <span className="text-gray-600">Feature two description</span>
                    </div>
                    <div className="feature-item">
                      <span className="text-primary mr-2">•</span>
                      <span className="text-gray-600">Feature three description</span>
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">Learn More</Button>
                </CardFooter>
              </Card>

              <Card className="bg-secondary-light border-0">
                <CardHeader>
                  <CardTitle>Pricing Card</CardTitle>
                  <CardDescription>Subscription details</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="text-4xl font-bold">$99.99</div>
                  <p className="text-gray-500">One-time payment</p>
                  <div className="space-y-2">
                    <div className="feature-item">
                      <span className="text-primary mr-2">•</span>
                      <span className="text-gray-600">Feature one included</span>
                    </div>
                    <div className="feature-item">
                      <span className="text-primary mr-2">•</span>
                      <span className="text-gray-600">Feature two included</span>
                    </div>
                    <div className="feature-item">
                      <span className="text-primary mr-2">•</span>
                      <span className="text-gray-600">Feature three included</span>
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">Subscribe Now</Button>
                </CardFooter>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="forms" className="space-y-8">
            <h2 className="text-2xl font-bold font-heading">Forms</h2>
            <div className="max-w-md space-y-6">
              <div className="space-y-2">
                <Label htmlFor="name">Name</Label>
                <Input id="name" placeholder="Enter your name" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input id="email" type="email" placeholder="Enter your email" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="message">Message</Label>
                <textarea
                  id="message"
                  rows={4}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
                  placeholder="Enter your message"
                ></textarea>
              </div>
              <Button className="w-full">Submit</Button>
            </div>
          </TabsContent>

          <TabsContent value="icons" className="space-y-8">
            <h2 className="text-2xl font-bold font-heading">Icons</h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
              <div className="flex flex-col items-center justify-center p-4 bg-primary-light rounded-lg">
                <Brain className="h-8 w-8 text-secondary mb-2" />
                <span className="text-sm">Brain</span>
              </div>
              <div className="flex flex-col items-center justify-center p-4 bg-primary-light rounded-lg">
                <BookOpen className="h-8 w-8 text-secondary mb-2" />
                <span className="text-sm">BookOpen</span>
              </div>
              <div className="flex flex-col items-center justify-center p-4 bg-primary-light rounded-lg">
                <Clock className="h-8 w-8 text-secondary mb-2" />
                <span className="text-sm">Clock</span>
              </div>
              <div className="flex flex-col items-center justify-center p-4 bg-primary-light rounded-lg">
                <Zap className="h-8 w-8 text-secondary mb-2" />
                <span className="text-sm">Zap</span>
              </div>
              <div className="flex flex-col items-center justify-center p-4 bg-primary-light rounded-lg">
                <Target className="h-8 w-8 text-secondary mb-2" />
                <span className="text-sm">Target</span>
              </div>
              <div className="flex flex-col items-center justify-center p-4 bg-primary-light rounded-lg">
                <Lightbulb className="h-8 w-8 text-secondary mb-2" />
                <span className="text-sm">Lightbulb</span>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>

      <Footer />
    </div>
  )
}