/* @file: idle-view.jsx — Exposes: window.__app.IdleView
 * Depends: window.__app.useHashRoute (from hooks/useHashRoute.js)
 *
 * Renders a single overlay element on the idle screen: the entry link
 * "how many have you seen?" positioned ~4vh below the static .title-wrap
 * (which lives in index.html and is NOT duplicated here). Click → routes
 * to #/question/1 via setHash. Polish (delayed reveal, kerning, etc.)
 * happens in T22; this is the skeleton.
 */
(() => {
  const STYLE_ID = "idle-view-styles";

  const CSS = `
    .entry-link {
      position: absolute;
      left: 0; right: 0;
      bottom: 13vh;
      display: flex;
      justify-content: center;
      pointer-events: none;
      user-select: none;
      animation: idle-entry-link-fade-in 600ms ease-out 220ms backwards;
    }
    .entry-link a {
      font-family: "Cormorant Garamond", "Georgia", serif;
      font-style: italic;
      font-weight: 400;
      font-size: 18px;
      letter-spacing: 0.04em;
      color: #7a7a7a;
      text-decoration: none;
      transition: color 220ms ease;
      pointer-events: auto;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .entry-link a:hover,
    .entry-link a:focus-visible {
      color: #2a2a2a;
      outline: none;
    }
    @keyframes idle-entry-link-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
  `;

  function ensureStyles() {
    if (document.getElementById(STYLE_ID)) return;
    const style = document.createElement("style");
    style.id = STYLE_ID;
    style.textContent = CSS;
    document.head.appendChild(style);
  }

  function IdleView() {
    const { setHash } = window.__app.useHashRoute();

    React.useEffect(() => {
      ensureStyles();
    }, []);

    React.useEffect(() => {
      const portrait = window.__portrait;
      if (!portrait) return;
      if (typeof portrait.setPhoto === 'function') portrait.setPhoto('face-hotel-pose');
      if (typeof portrait.setCycleInterval === 'function') portrait.setCycleInterval(3500);
      if (typeof portrait.setCycling === 'function') portrait.setCycling(true);
    }, []);

    const onClick = (e) => {
      e.preventDefault();
      setHash("/question/1");
    };

    return (
      <div className="entry-link">
        <a
          href="#/question/1"
          onClick={onClick}
          aria-label="Start trivia"
        >
          how many have you seen?
        </a>
      </div>
    );
  }

  window.__app = window.__app || {};
  window.__app.IdleView = IdleView;
})();