placebo.mk/frontend/src/components/routes/AboutComponent.tsx

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { AlertTriangle, Laugh, Coffee } from 'lucide-react';

export function AboutComponent() {
  return (
    <div className="py-8 max-w-4xl mx-auto">
      <div className="mb-12 text-center">
        <h1 className="text-4xl md:text-6xl font-display mb-4">
          Упатство за употреба
        </h1>
        <p className="text-xl text-muted-foreground font-body">
          Сè што треба да знаете за Placebo.mk
        </p>
      </div>

      <div className="space-y-6">
        <Card className="border-brutal-sm">
          <CardHeader>
            <div className="flex items-center gap-3">
              <AlertTriangle className="w-8 h-8 text-accent" />
              <CardTitle className="text-2xl font-display">Предупредување</CardTitle>
            </div>
          </CardHeader>
          <CardContent className="space-y-6 font-body p-3">
            {/* <p className="text-lg"> */}
            {/*   <strong>Placebo.mk</strong> е сатиричен портал за вести. Сè што читате овде е измислено, преувеличено или целосно извадено од контекст. */}
            {/* </p> */}
            <p>
              Ако веќе се налутивте, не се грижете - тоа ни беше целта. Ако сте се насмеале, уште подобро!
            </p>
          </CardContent>
        </Card>

        <Card className="border-brutal-sm">
          <CardHeader>
            <div className="flex items-center gap-3">
              <Laugh className="w-8 h-8 text-accent" />
              <CardTitle className="text-2xl font-display">Што е Placebo.mk?</CardTitle>
            </div>
          </CardHeader>
          <CardContent className="space-y-6 font-body p-3">
            <p>
              Placebo.mk е портал кој ja преработува реалноста и ја претвора во апсурд. Македонските  а богами и глобалните политика, култура и спорт се сервираат со добра доза сарказам и црен хумор.
            </p>
            {/* <p> */}
            {/*   Нашата мисија е едноставна: да ве насмееме, да ве натераме да размислите и да ве потсетиме дека понекогаш вистината е толку apsурдна што единствено може да се коментира со хумор. */}
            {/* </p> */}
          </CardContent>
        </Card>

        <Card className="border-brutal-sm">
          <CardHeader>
            <CardTitle className="text-2xl font-display">Правила за читање</CardTitle>
          </CardHeader>
          <CardContent className="font-body">
            <ol className="list-decimal list-inside space-y-3 p-3">
              <li>Не земајте ништо [од ова] во животот премногу сериозно (освен кафето што ќе ни го купите).</li>
              <li>Ако не ви е смешно тогаш е трагично. Ако не ви се допаѓаме. Најдете друга страна.</li>
              <li>Смеата е најдобар лек. Користете ја дневно.</li>
              <li>Ако ви се допаѓа, споделете. Ако не ви се допаѓа, сепак споделете. Гледаме статистики.</li>
            </ol>
          </CardContent>
        </Card>

        <Card className="border-brutal-sm">
          <CardHeader>
            <CardTitle className="text-2xl font-display">Категории</CardTitle>
          </CardHeader>
          <CardContent className="font-body">
            <ul className="space-y-3 p-3">
              <li>
                <strong>Општо:</strong> Општи вести и теми кои не паѓаат во другите категории
              </li>
              <li>
                <strong>Спорт:</strong> Спортски новости, победи, порази и сè помеѓу (најчесто порази)
              </li>
              <li>
                <strong>Уметност:</strong> Култура, музика, филм и претставување дека разбираме од уметност
              </li>
              <li>
                <strong>Наука:</strong> Научни откритија објаснети на начин што ќе разбере и вашата баба
              </li>
              <li>
                <strong>LIVE Блогови:</strong> Покривање во реално време на настани што го заслужуваат нашето внимание
              </li>
            </ul>
          </CardContent>
        </Card>

        <Card className="border-brutal-sm bg-accent/5">
          <CardHeader>
            <div className="flex items-center gap-3">
              <Coffee className="w-8 h-8 text-accent" />
              <CardTitle className="text-2xl font-display">Поддржете не</CardTitle>
            </div>
          </CardHeader>
          <CardContent className="space-y-4 font-body">
            <p>
              Сатирата не се пишува сама (иако понекогаш реалноста е поапсурдна од фикцијата).
              Ако ви се допаѓа она што го правиме, размислете да ни купите кафе. Или две. Или три.
            </p>
            <p className="text-sm text-muted-foreground">
              * Сите донации одат за кафе, инспирација и плаќање на серверите. Не нудиме фискални сметки.
            </p>
          </CardContent>
        </Card>

        <div className="mt-12 p-8 border-4 border-foreground bg-foreground text-background text-center">
          <p className="text-2xl font-display mb-4">
            Запомнете:
          </p>
          <p className="text-lg font-body">
            Ако не можете да разликувате сатира од вистина,<br />
            проблемот не е во нас. Проблемот е во реалноста.
          </p>
        </div>
      </div>
    </div>
  );
}