'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export function TypographyDemo() {
  return (
    <div className="space-y-6">
      {/* Заголовки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Заголовки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <div>
              <h1 className="text-4xl font-bold text-white mb-2">Заголовок H1</h1>
              <p className="text-xs text-white/60 font-mono">text-4xl font-bold</p>
            </div>

            <div>
              <h2 className="text-3xl font-bold text-white mb-2">Заголовок H2</h2>
              <p className="text-xs text-white/60 font-mono">text-3xl font-bold</p>
            </div>

            <div>
              <h3 className="text-2xl font-semibold text-white mb-2">Заголовок H3</h3>
              <p className="text-xs text-white/60 font-mono">text-2xl font-semibold</p>
            </div>

            <div>
              <h4 className="text-xl font-semibold text-white mb-2">Заголовок H4</h4>
              <p className="text-xs text-white/60 font-mono">text-xl font-semibold</p>
            </div>

            <div>
              <h5 className="text-lg font-medium text-white mb-2">Заголовок H5</h5>
              <p className="text-xs text-white/60 font-mono">text-lg font-medium</p>
            </div>

            <div>
              <h6 className="text-base font-medium text-white mb-2">Заголовок H6</h6>
              <p className="text-xs text-white/60 font-mono">text-base font-medium</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Градиентные заголовки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Градиентные заголовки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h1 className="text-4xl font-bold text-gradient-bright mb-2">Яркий градиентный заголовок</h1>
            <p className="text-xs text-white/60 font-mono">text-gradient-bright</p>
          </div>

          <div>
            <h2 className="text-3xl font-bold text-gradient mb-2">Обычный градиентный заголовок</h2>
            <p className="text-xs text-white/60 font-mono">text-gradient</p>
          </div>

          <div>
            <h3 className="text-2xl font-semibold glow-text mb-2">Заголовок с свечением</h3>
            <p className="text-xs text-white/60 font-mono">glow-text</p>
          </div>
        </CardContent>
      </Card>

      {/* Основной текст */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Основной текст</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <p className="text-white text-base mb-2">
              Обычный текст. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
              ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
            </p>
            <p className="text-xs text-white/60 font-mono">text-white text-base</p>
          </div>

          <div>
            <p className="text-white/90 text-base mb-2">
              Текст с прозрачностью 90%. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua.
            </p>
            <p className="text-xs text-white/60 font-mono">text-white/90</p>
          </div>

          <div>
            <p className="text-white/70 text-base mb-2">
              Текст с прозрачностью 70%. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua.
            </p>
            <p className="text-xs text-white/60 font-mono">text-white/70</p>
          </div>

          <div>
            <p className="text-white/60 text-base mb-2">
              Вторичный текст с прозрачностью 60%. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p className="text-xs text-white/60 font-mono">text-white/60</p>
          </div>
        </CardContent>
      </Card>

      {/* Размеры текста */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Размеры текста</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <p className="text-xs text-white mb-1">Очень мелкий текст</p>
            <p className="text-xs text-white/60 font-mono">text-xs</p>
          </div>

          <div>
            <p className="text-sm text-white mb-1">Мелкий текст</p>
            <p className="text-xs text-white/60 font-mono">text-sm</p>
          </div>

          <div>
            <p className="text-base text-white mb-1">Базовый текст</p>
            <p className="text-xs text-white/60 font-mono">text-base</p>
          </div>

          <div>
            <p className="text-lg text-white mb-1">Большой текст</p>
            <p className="text-xs text-white/60 font-mono">text-lg</p>
          </div>

          <div>
            <p className="text-xl text-white mb-1">Очень большой текст</p>
            <p className="text-xs text-white/60 font-mono">text-xl</p>
          </div>

          <div>
            <p className="text-2xl text-white mb-1">Огромный текст</p>
            <p className="text-xs text-white/60 font-mono">text-2xl</p>
          </div>
        </CardContent>
      </Card>

      {/* Насыщенность шрифта */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Насыщенность шрифта</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <p className="text-white font-light text-lg mb-1">Легкий шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-light</p>
          </div>

          <div>
            <p className="text-white font-normal text-lg mb-1">Обычный шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-normal</p>
          </div>

          <div>
            <p className="text-white font-medium text-lg mb-1">Средний шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-medium</p>
          </div>

          <div>
            <p className="text-white font-semibold text-lg mb-1">Полужирный шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-semibold</p>
          </div>

          <div>
            <p className="text-white font-bold text-lg mb-1">Жирный шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-bold</p>
          </div>
        </CardContent>
      </Card>

      {/* Специальные стили */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Специальные стили текста</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <p className="text-white font-mono text-sm mb-1">Моноширинный шрифт для кода</p>
            <p className="text-xs text-white/60 font-mono">font-mono</p>
          </div>

          <div>
            <p className="text-white italic text-base mb-1">Курсивный текст</p>
            <p className="text-xs text-white/60 font-mono">italic</p>
          </div>

          <div>
            <p className="text-white underline text-base mb-1">Подчеркнутый текст</p>
            <p className="text-xs text-white/60 font-mono">underline</p>
          </div>

          <div>
            <p className="text-white line-through text-base mb-1">Зачеркнутый текст</p>
            <p className="text-xs text-white/60 font-mono">line-through</p>
          </div>

          <div>
            <p className="text-white uppercase text-base mb-1">Заглавные буквы</p>
            <p className="text-xs text-white/60 font-mono">uppercase</p>
          </div>

          <div>
            <p className="text-white lowercase text-base mb-1">СТРОЧНЫЕ БУКВЫ</p>
            <p className="text-xs text-white/60 font-mono">lowercase</p>
          </div>

          <div>
            <p className="text-white capitalize text-base mb-1">первая буква заглавная</p>
            <p className="text-xs text-white/60 font-mono">capitalize</p>
          </div>
        </CardContent>
      </Card>

      {/* Выравнивание текста */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Выравнивание текста</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <p className="text-white text-left text-base mb-1">
              Выравнивание по левому краю. Lorem ipsum dolor sit amet consectetur.
            </p>
            <p className="text-xs text-white/60 font-mono">text-left</p>
          </div>

          <div>
            <p className="text-white text-center text-base mb-1">
              Выравнивание по центру. Lorem ipsum dolor sit amet consectetur.
            </p>
            <p className="text-xs text-white/60 font-mono">text-center</p>
          </div>

          <div>
            <p className="text-white text-right text-base mb-1">
              Выравнивание по правому краю. Lorem ipsum dolor sit amet consectetur.
            </p>
            <p className="text-xs text-white/60 font-mono">text-right</p>
          </div>

          <div>
            <p className="text-white text-justify text-base mb-1">
              Выравнивание по ширине. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation.
            </p>
            <p className="text-xs text-white/60 font-mono">text-justify</p>
          </div>
        </CardContent>
      </Card>

      {/* Списки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Списки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Маркированный список</h4>
            <ul className="text-white space-y-1 list-disc list-inside">
              <li>Первый пункт списка</li>
              <li>Второй пункт списка</li>
              <li>Третий пункт списка с длинным текстом, который может переноситься на несколько строк</li>
              <li>Четвертый пункт</li>
            </ul>
          </div>

          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Нумерованный список</h4>
            <ol className="text-white space-y-1 list-decimal list-inside">
              <li>Первый шаг процесса</li>
              <li>Второй шаг процесса</li>
              <li>Третий шаг с подробным описанием того, что нужно сделать</li>
              <li>Завершающий шаг</li>
            </ol>
          </div>
        </CardContent>
      </Card>

      {/* Цитаты и код */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Цитаты и код</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Цитата</h4>
            <blockquote className="text-white/80 text-lg italic border-l-4 border-primary pl-4 py-2">
              &quot;Дизайн - это не то, как вещь выглядит. Дизайн - это то, как вещь работает.&quot;
              <footer className="text-white/60 text-sm mt-2 not-italic">— Стив Джобс</footer>
            </blockquote>
          </div>

          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Инлайн код</h4>
            <p className="text-white text-base">
              Используйте класс{' '}
              <code className="bg-white/10 text-white px-1.5 py-0.5 rounded text-sm font-mono">glass-card</code> для
              создания карточек с эффектом стекла.
            </p>
          </div>

          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Блок кода</h4>
            <pre className="bg-white/5 text-white p-4 rounded-lg text-sm font-mono overflow-x-auto">
              {`<Card className="glass-card border-white/10">
  <CardHeader>
    <CardTitle className="text-white">
      Заголовок карточки
    </CardTitle>
  </CardHeader>
  <CardContent>
    Содержимое карточки
  </CardContent>
</Card>`}
            </pre>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
