/* ---- Profile-select splash ("Who's coding today?") ---- */
function Splash({ profiles, onPick }) {
  const [leaving, setLeaving] = React.useState(false);
  const choose = (p) => {
    setLeaving(true);
    setTimeout(() => onPick(p), 620);
  };
  return (
    <div className={"ix-splash" + (leaving ? " leaving" : "")}>
      <div className="ix-splash-bar">
        <span className="ix-wordmark">{window.IFECHILL.identity.wordmark}</span>
      </div>
      <div className="ix-splash-center">
        <h1 className="ix-splash-title">Who's coding today?</h1>
        <div className="ix-splash-grid">
          {profiles.map((p) => (
            <button key={p.id} className="ix-avatar" onClick={() => choose(p)}>
              <span className="ix-avatar-face" style={{ "--pf": p.color }}>
                <span className="ix-avatar-inner">{p.label[0]}</span>
              </span>
              <span className="ix-avatar-label">{p.label}</span>
            </button>
          ))}
          <button className="ix-avatar ix-avatar-add" onClick={() => choose(profiles[2])}>
            <span className="ix-avatar-face ix-avatar-ghost">
              <span className="ix-avatar-plus">+</span>
            </span>
            <span className="ix-avatar-label">Just Browsing</span>
          </button>
        </div>
        <p className="ix-splash-foot">Manage Profiles</p>
      </div>
    </div>
  );
}

/* ---- Top navigation ---- */
function Nav({ scrolled, profile, onLogo }) {
  const id = window.IFECHILL.identity;
  return (
    <header className={"ix-nav" + (scrolled ? " solid" : "")}>
      <div className="ix-nav-left">
        <button className="ix-wordmark ix-nav-logo" onClick={onLogo}>{id.wordmark}</button>
        <nav className="ix-nav-links">
          <a href="#row-projects">Projects</a>
          <a href="#row-continue">In Progress</a>
          <a href="#row-education">Education</a>
          <a href="#row-work">Experience</a>
          <a href="#row-skills">Skills</a>
        </nav>
      </div>
      <div className="ix-nav-right">
        <a className="ix-nav-ico" href={id.github} target="_blank" rel="noopener" title="GitHub">GitHub</a>
        <a className="ix-nav-ico" href={id.linkedin} target="_blank" rel="noopener" title="LinkedIn">LinkedIn</a>
        {profile && (
          <span className="ix-nav-avatar" style={{ "--pf": profile.color }} title={profile.label}>
            {profile.label[0]}
          </span>
        )}
      </div>
    </header>
  );
}

/* ---- Billboard hero ---- */
function Billboard({ data, playful, profile, onMoreInfo, onScrollWork }) {
  const id = window.IFECHILL.identity;
  return (
    <section className="ix-billboard">
      <div className="ix-billboard-art">
        <Shot
          label="hero portrait · ifeoluwa.jpg"
          hint="drop a photo here"
          src={data.image}
          video={data.video}
          bgVideo={true}
          aspect="auto" big={true} rounded={false}
        />
      </div>
      <div className="ix-billboard-scrim" />
      <div className="ix-billboard-bottom-scrim" />
      <div className="ix-billboard-content">
        <div className="ix-billboard-kicker">
          <span className="ix-ix-tag">{id.wordmark[0]}</span>
          <span>{data.series}</span>
        </div>
        <div className="ix-billboard-logo">
          {data.logoLines.map((l) => <span key={l}>{l}</span>)}
        </div>
        {playful && (
          <div className="ix-billboard-tags">
            <MatchPct value={data.match} />
            <span className="ix-billboard-year">{data.meta[0]}</span>
            {data.badges.map((b) => <span key={b} className="ix-badge-inline">{b}</span>)}
            <span className="ix-billboard-hd">HD</span>
          </div>
        )}
        <p className="ix-billboard-tagline">{data.tagline}</p>
        <div className="ix-billboard-meta">
          {data.meta.slice(1).map((m, i) => (
            <React.Fragment key={m}>
              {i > 0 && <span className="ix-dotsep">•</span>}
              <span>{m}</span>
            </React.Fragment>
          ))}
        </div>
        <div className="ix-billboard-actions">
          <button className="ix-btn ix-btn-play" onClick={onScrollWork}>
            <span className="ix-btn-ico">▶</span> View Work
          </button>
          <button className="ix-btn ix-btn-info" onClick={onMoreInfo}>
            <span className="ix-btn-ico">ⓘ</span> More Info
          </button>
        </div>
        {playful && <div className="ix-billboard-rating">{data.rating}</div>}
        {profile && <div className="ix-billboard-greet">{profile.greet}</div>}
      </div>
    </section>
  );
}

/* ---- Detail modal ---- */
function Modal({ item, playful, onClose }) {
  React.useEffect(() => {
    if (!item) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [item]);

  if (!item) return null;
  const id = window.IFECHILL.identity;
  const isAbout = item.__about;

  return (
    <div className="ix-modal-backdrop" onClick={onClose}>
      <div className="ix-modal" onClick={(e) => e.stopPropagation()}>
        <button className="ix-modal-close" onClick={onClose} aria-label="Close">✕</button>
        <div className="ix-modal-hero">
          {item.video ? (
            <Shot
              video={item.video}
              src={(item.images && item.images[0]) || item.image}
              label={item.shot}
              aspect="auto" big={true} rounded={false}
            />
          ) : (
            <Gallery
              key={item.id}
              images={item.images ?? (item.image ? [item.image] : [])}
              label={item.shot || "hero portrait · ifeoluwa.jpg"}
              hint={isAbout ? "drop a photo here" : item.runtime}
            />
          )}
          <div className="ix-modal-hero-scrim" />
          <div className="ix-modal-hero-content">
            <h2 className="ix-modal-title">{item.title}</h2>
            <div className="ix-modal-cta">
              {item.restricted ? (
                <span className="ix-btn ix-btn-locked" aria-disabled="true">
                  <span className="ix-btn-ico">🔒</span> Code Unavailable
                </span>
              ) : item.links && item.links.length > 0 ? (
                <a className="ix-btn ix-btn-play" href={item.links[0].url} target="_blank" rel="noopener">
                  <span className="ix-btn-ico">▶</span> {item.links[0].label}
                </a>
              ) : item.noLinks ? null : (
                <a className="ix-btn ix-btn-play" href={id.github} target="_blank" rel="noopener">
                  <span className="ix-btn-ico">▶</span> View on GitHub
                </a>
              )}
              <a href={id.github} title="GitHub" aria-label="GitHub">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2.17c-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.3-1.7-1.3-1.7-1.06-.72.08-.7.08-.7 1.18.08 1.8 1.2 1.8 1.2 1.04 1.78 2.74 1.27 3.4.97.1-.76.4-1.27.73-1.56-2.56-.3-5.25-1.28-5.25-5.7 0-1.26.45-2.3 1.2-3.1-.12-.3-.52-1.5.1-3.13 0 0 .98-.31 3.2 1.18a11.1 11.1 0 0 1 5.82 0c2.22-1.5 3.2-1.18 3.2-1.18.62 1.63.22 2.83.1 3.13.75.8 1.2 1.84 1.2 3.1 0 4.43-2.7 5.4-5.27 5.69.42.36.78 1.08.78 2.18v3.23c0 .31.2.67.8.56A11.5 11.5 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z"/>
                </svg>
              </a>
              <a href={id.linkedin} title="LinkedIn" aria-label="LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.95v5.66H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.38 4.27 5.48v6.26zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.21 0 22.23 0z"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div className="ix-modal-body">
          <div className="ix-modal-main">
            <div className="ix-modal-line">
              {playful && <MatchPct value={item.match} />}
              <span className="ix-modal-year">{item.year}</span>
              {item.runtime && <span className="ix-modal-runtime">{item.runtime}</span>}
              {playful && item.rating && <span className="ix-rating">{item.rating}</span>}
              {playful && item.badges && item.badges.map((b) => (
                <span key={b} className="ix-badge-inline sm">{b}</span>
              ))}
            </div>
            <p className="ix-modal-desc">{item.description}</p>
            {item.restrictedNote && (
              <div className="ix-modal-note">
                <span className="ix-modal-note-ico">🔒</span>
                <span>{item.restrictedNote}</span>
              </div>
            )}
            {item.highlights && (
              <ul className="ix-modal-highlights">
                {item.highlights.map((h, i) => <li key={i}>{h}</li>)}
              </ul>
            )}
          </div>
          <div className="ix-modal-side">
            <div className="ix-modal-side-block">
              <span className="ix-modal-side-label">Type: </span>
              <span className="ix-modal-side-val">{item.type}</span>
            </div>
            {item.genre && (
              <div className="ix-modal-side-block">
                <span className="ix-modal-side-label">Genres: </span>
                <span className="ix-modal-side-val">{item.genre}</span>
              </div>
            )}
            {item.grade && (
              <div className="ix-modal-side-block">
                <span className="ix-modal-side-label">Result: </span>
                <span className="ix-modal-side-val">{item.grade}</span>
              </div>
            )}
            {item.tech && (
              <div className="ix-modal-side-block">
                <span className="ix-modal-side-label">Tech Stack: </span>
                <span className="ix-modal-side-val">{item.tech.join(", ")}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Splash, Nav, Billboard, Modal });