import { useTranslation } from "react-i18next";

export function About() {
  const { t } = useTranslation();

  return (
    // Убрали max-w-[320px]. Добавили w-full, max-w-4xl (чтобы текст не расползался на всю ширину монитора) и выравнивание.
    <div className="w-full max-w-4xl mx-auto flex flex-col px-6 py-12 md:py-20 min-h-[80vh]">
      {/* Заголовок и описание */}
      <div className="text-center mb-12 md:mb-16">
        <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight mb-6 text-foreground">
          {t("about_title")}
        </h2>
        <p className="text-base md:text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto">
          {t("about_desc")}
        </p>
      </div>

      {/* Карточки. На телефонах 1 колонка, на экранах от md и шире — 2 колонки */}
      <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 flex-1">
        <div className="p-6 md:p-8 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors">
          <h4 className="text-sm md:text-base font-bold uppercase tracking-widest text-primary mb-3">
            {t("proto_title")}
          </h4>
          <p className="text-sm text-muted-foreground leading-relaxed">
            {t("proto_desc")}
          </p>
        </div>

        <div className="p-6 md:p-8 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors">
          <h4 className="text-sm md:text-base font-bold uppercase tracking-widest text-primary mb-3">
            {t("zk_title")}
          </h4>
          <p className="text-sm text-muted-foreground leading-relaxed">
            {t("zk_desc")}
          </p>
        </div>
      </div>

      {/* Футер страницы */}
      <div className="text-xs md:text-sm text-muted-foreground/60 mt-auto text-center font-mono">
        {t("version_info")}
        <br />
        <span className="mt-1 inline-block">{t("footer_text")}</span>
      </div>
    </div>
  );
}
