lms-sb/src/components/welcome/welcome-page.tsx

// Public landing shown on "/" for unauthenticated visitors.
// DS-2 rework of the old platform's "second brain" infographic.
import Link from "next/link";
import {
  StickyNote,
  BookOpen,
  Lightbulb,
  Database,
  GraduationCap,
  Wrench,
  type LucideIcon,
} from "lucide-react";
import { SchemeConnectors } from "./scheme-connectors";

interface SchemeBlock {
  icon: LucideIcon;
  title: string;
  items: string[];
}

const BLOCKS_LEFT: SchemeBlock[] = [
  {
    icon: StickyNote,
    title: "Заметки",
    items: [
      "разбираемся, как создавать качественные заметки, а не просто писать всё подряд",
      "изучаем самые эффективные подходы в заметкоделии и заметковедении",
    ],
  },
  {
    icon: BookOpen,
    title: "Знания",
    items: [
      "превращаем сырые данные и разрозненную информацию в устойчивые знания, готовые к повторному применению",
    ],
  },
  {
    icon: Lightbulb,
    title: "Идеи",
    items: [
      "фиксируем, развиваем и воплощаем гениальные идеи в жизнь",
      "и не даём им сгинуть в процессе",
    ],
  },
];

const BLOCKS_RIGHT: SchemeBlock[] = [
  {
    icon: Database,
    title: "Базы знаний",
    items: [
      "создаём картотеку, строим структуру, наполняем её качественными заметками",
      "связываем отдельные элементы в единую сеть идей и размышлений",
    ],
  },
  {
    icon: GraduationCap,
    title: "Обучение",
    items: [
      "учимся правильно учиться, осваиваем эффективные стратегии",
      "выстраиваем свой индивидуальный трек развития",
    ],
  },
  {
    icon: Wrench,
    title: "Инструменты",
    items: [
      "разбираемся с особенностями инструментов и выбираем самые подходящие",
    ],
  },
];

const ROW_START = ["md:row-start-1", "md:row-start-2", "md:row-start-3"];

function SchemeCard({ block, side, row }: { block: SchemeBlock; side: "left" | "right"; row: number }) {
  const Icon = block.icon;
  const colClass = side === "left" ? "md:col-start-1" : "md:col-start-3";
  return (
    <div
      data-scheme-card={side}
      className={`card-aubade relative z-[1] p-5 ${colClass} ${ROW_START[row]}`}
    >
      <div className="flex items-center gap-3 mb-3">
        <span
          className="inline-flex items-center justify-center w-10 h-10 flex-shrink-0"
          style={{ backgroundColor: "var(--accent)", border: "2px solid var(--foreground)" }}
        >
          <Icon size={22} style={{ color: "var(--foreground)" }} />
        </span>
        <span className="font-bold uppercase" style={{ fontSize: "16px", letterSpacing: "0.08em" }}>
          {block.title}
        </span>
      </div>
      <ul className="space-y-2">
        {block.items.map((item) => (
          <li
            key={item}
            className="relative pl-4 leading-normal"
            style={{ fontSize: "14.5px" }}
          >
            <span className="absolute left-0" style={{ color: "var(--muted-foreground)" }}>
              •
            </span>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

export function WelcomePage() {
  return (
    <div className="min-h-screen flex flex-col">
      <header
        className="flex flex-wrap items-center justify-between gap-3 px-4 sm:px-8 py-3.5"
        style={{ borderBottom: "2px solid var(--border)" }}
      >
        <span className="font-bold text-lg whitespace-nowrap">Second Brain</span>
        <nav className="flex gap-3">
          <Link href="/login" className="btn-aubade text-sm whitespace-nowrap">
            Войти
          </Link>
          <Link href="/register" className="btn-aubade btn-aubade-accent text-sm whitespace-nowrap">
            Зарегистрироваться
          </Link>
        </nav>
      </header>

      <main className="flex-1 w-full max-w-[1240px] mx-auto px-4 sm:px-8 pt-10 md:pt-14 pb-16">
        <p
          className="text-center text-xs font-bold uppercase mb-3.5"
          style={{ color: "var(--muted-foreground)", letterSpacing: "0.18em" }}
        >
          Образовательная платформа Second Brain
        </p>
        <h1 className="text-center font-bold leading-tight text-[26px] md:text-[40px] mb-2.5">
          Создаём и развиваем
          <br />
          второй мозг
        </h1>
        <p
          className="text-center mb-8 md:mb-14"
          style={{ color: "var(--muted-foreground)", fontSize: "17px" }}
        >
          Заметки, знания и идеи — в одной системе, которая работает на вас
        </p>

        <div className="relative grid grid-cols-1 md:grid-cols-[1fr_320px_1fr] gap-y-5 md:gap-y-7 gap-x-11 items-center">
          <SchemeConnectors />
          <div className="md:col-start-2 md:row-start-1 md:row-span-3 flex flex-col items-center gap-4 mb-4 md:mb-0">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/logo.svg"
              alt="Second Brain"
              data-scheme-logo
              className="w-[150px] h-[150px] md:w-[280px] md:h-[280px]"
            />
            <span
              className="text-xs font-bold uppercase"
              style={{ color: "var(--muted-foreground)", letterSpacing: "0.18em" }}
            >
              Second Brain
            </span>
          </div>
          {BLOCKS_LEFT.map((block, i) => (
            <SchemeCard key={block.title} block={block} side="left" row={i} />
          ))}
          {BLOCKS_RIGHT.map((block, i) => (
            <SchemeCard key={block.title} block={block} side="right" row={i} />
          ))}
        </div>

        <div className="flex flex-col sm:flex-row justify-center gap-4 mt-10 md:mt-14">
          <Link href="/register" className="btn-aubade btn-aubade-accent px-6 py-2.5">
            Начать учиться →
          </Link>
          <Link href="/login" className="btn-aubade px-6 py-2.5">
            У меня уже есть доступ
          </Link>
        </div>
      </main>

      <footer
        className="flex flex-col sm:flex-row justify-between gap-1.5 px-4 sm:px-8 py-4 text-sm"
        style={{ borderTop: "2px solid var(--border)", color: "var(--muted-foreground)" }}
      >
        <span>ИП Second Brain Production</span>
        <a href="https://second-brain.ru" className="underline" style={{ color: "var(--muted-foreground)" }}>
          second-brain.ru — все курсы и материалы
        </a>
      </footer>
    </div>
  );
}