/* ═══════════════════════════════════════════════════════════════════
   PROJECT WELCOME CARD
   Portfolio presentation shown on first load
   — Layout: header (logo + tag) / body (disclaimer + links + CTAs)
═══════════════════════════════════════════════════════════════════ */

function ProjectWelcome({ onClose }) {
  /* Fechar com Escape + focar o primeiro botão ao montar */
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);

    /* Foca o botão "Explorar o Site" assim que o card aparecer */
    const tid = setTimeout(() => {
      document.getElementById("pw-explore-btn")?.focus();
    }, 80);

    return () => {
      document.removeEventListener("keydown", onKey);
      clearTimeout(tid);
    };
  }, [onClose]);

  return (
    <div
      className="modal-overlay open"
      role="dialog"
      aria-modal="true"
      aria-labelledby="pw-title"
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="pw-card">

        {/* ── Header: logo + badge de portfólio ── */}
        <div className="pw-header">
          <img
            src="assets/aurum-header-footer.png"
            alt="Aurum Growth Partners"
            className="pw-logo"
          />
          <p className="pw-tag" id="pw-title">
            Projeto de Portfólio&nbsp;·&nbsp;ALB Seven
          </p>
        </div>

        {/* ── Corpo: aviso + links + botões ── */}
        <div className="pw-body">
          <p className="pw-text">
            Site fictício criado pela{" "}
            <strong>ALB Seven</strong>{" "}
            para fins demonstrativos. Todos os dados são{" "}
            <strong>fictícios</strong>.
          </p>

          <div className="pw-rule" role="separator" aria-hidden="true"></div>

          {/* Links do portfólio */}
          <div className="pw-links">
            <a
              href="https://albseven.com"
              target="_blank"
              rel="noopener noreferrer"
              className="pw-link"
              aria-label="Visitar albseven.com (abre em nova aba)"
            >
              albseven.com
            </a>
            <span className="pw-dot" aria-hidden="true">·</span>
            <a
              href="https://albseven.com"
              target="_blank"
              rel="noopener noreferrer"
              className="pw-link pw-link--cta"
              aria-label="Quero um site assim — falar com ALB Seven (abre em nova aba)"
            >
              Quero um site assim
            </a>
          </div>

          {/* CTAs */}
          <div className="pw-actions">
            <button
              id="pw-explore-btn"
              className="btn pw-btn"
              onClick={onClose}
            >
              Explorar o Site
            </button>
            <a
              href="https://albseven.com"
              target="_blank"
              rel="noopener noreferrer"
              className="btn ghost pw-btn"
            >
              Ver Portfólio ALB Seven
            </a>
          </div>
        </div>

      </div>
    </div>
  );
}