import { useNavigate } from "react-router-dom";

import { telHref, useHelp } from "../components/HelpSheet";
import { Icon, LogoMark } from "../components/Icon";
import { ru } from "../content/ru";

// A1 · Вход: без сайдбара, одна карточка по центру. ЕМИАС — основной путь, анонимный — по желанию
export function Welcome() {
  const navigate = useNavigate();
  const { resources, open } = useHelp();
  const t = ru.welcome;
  const emergency = resources[0];

  return (
    <div className="signin-page">
      <main className="signin" id="main">
        <div className="signin__brand">
          <LogoMark size={44} />
          <span>
            <span className="signin__name">{ru.product.name}</span>
            <span className="signin__tag">{ru.product.tagline}</span>
          </span>
        </div>

        <section className="signin__card">
          <h1 className="h1">{t.title}</h1>

          <button type="button" className="entry entry--emias" onClick={() => navigate("/emias")}>
            <span className="entry__top">
              <span className="tile-icon tile-icon--teal">
                <Icon name="docPlus" size={26} />
              </span>
              <span className="entry__title">
                {t.emias.title}
                <Icon name="chevronRight" />
              </span>
            </span>
            <ul className="signin__perks">
              {t.emias.perks.map((p) => (
                <li key={p}>
                  <Icon name="check" size={18} />
                  {p}
                </li>
              ))}
            </ul>
          </button>

          <div className="divider" role="separator">
            <span>{t.or}</span>
          </div>

          <div className="stack stack--sm">
            <button type="button" className="btn btn--ghost" onClick={() => navigate("/anonymous")}>
              <Icon name="lock" size={20} />
              {t.anonymous.title}
            </button>
            <p className="muted small center">{t.anonymous.text}</p>
          </div>
        </section>

        <div className="signin__foot">
          <button type="button" className="signin__sos" onClick={open}>
            <Icon name="phone" size={18} />
            {ru.help.block}
          </button>
          {emergency && (
            <a className="signin__tel" href={telHref(emergency.phone)}>
              {emergency.phone}
            </a>
          )}
        </div>
        <p className="muted small center">{t.disclaimer}</p>
      </main>
    </div>
  );
}