/* ui_kits/watchover-app/ChildHome.jsx
   Child mode — the resting state of the family phone.
   Coral header with the Watchover lockup, channel avatar strip,
   2-col video feed. No infinite scroll, no autoplay: the feed
   simply ends with a calm line.
   Composes: wo-header--child · wo-iconbtn--on-color · wo-section ·
   wo-avatar · wo-video--grid · wo-nav--child                      */

(function () {
  function ChildHome({ kid, channels, videos, onWatch, onOpenPin }) {
    const Ico = window.WoIcons;
    const channelById = (id) => channels.find((c) => c.id === id);

    return (
      <div className="app-shell">
        <header className="wo-header wo-header--child">
          <div className="app-lockup">
            <span className="app-lockup__badge">
              <Ico.play size={16} />
            </span>
            <span className="app-lockup__word">Watchover</span>
          </div>
          <div className="wo-header__actions">
            <button
              className="wo-iconbtn wo-iconbtn--on-color"
              aria-label="Search your videos"
            >
              <Ico.search size={20} />
            </button>
            <button
              className="wo-iconbtn wo-iconbtn--on-color"
              aria-label="Parents only — unlock with PIN"
              title="Parents only"
              onClick={onOpenPin}
            >
              <Ico.lock size={20} />
            </button>
          </div>
        </header>

        <main className="app-content">
          <h2 className="app-greeting">Hi {kid.name}! 👋</h2>

          <div className="wo-section">
            <span className="wo-section__title">Your channels</span>
          </div>
          <div className="app-chstrip">
            {channels.map((c) => (
              <button key={c.id} className="app-chstrip__item" aria-label={c.name}>
                <span
                  className="wo-avatar wo-avatar--56"
                  style={{ background: c.color, color: 'var(--text-on-brand)' }}
                >
                  {c.letter}
                </span>
                <span className="app-chstrip__name">{c.name}</span>
              </button>
            ))}
          </div>

          <div className="wo-section">
            <span className="wo-section__title">From your channels</span>
          </div>
          <div className="app-videogrid">
            {videos.map((v) => {
              const c = channelById(v.channelId);
              return (
                <button
                  key={v.id}
                  className="app-tap wo-video wo-video--grid"
                  onClick={() => onWatch(v.id)}
                >
                  <div className="wo-video__thumb">
                    <div
                      className="app-thumb"
                      style={{
                        background: `linear-gradient(135deg, ${v.grad[0]}, ${v.grad[1]})`,
                      }}
                    >
                      <Ico.video size={28} />
                    </div>
                    <span className="wo-video__duration wo-num">{v.duration}</span>
                  </div>
                  <div className="wo-video__title">{v.title}</div>
                  <div className="wo-video__meta">{c ? c.name : ''}</div>
                </button>
              );
            })}
          </div>

          <p className="app-feedend">That's everything for now.</p>
        </main>

        <nav className="wo-nav wo-nav--child">
          <button className="wo-nav__item wo-nav__item--active">
            <span className="wo-nav__icon">
              <Ico.home size={24} />
            </span>
            <span className="wo-nav__label">Feed</span>
          </button>
          <button className="wo-nav__item">
            <span className="wo-nav__icon">
              <Ico.video size={24} />
            </span>
            <span className="wo-nav__label">Channels</span>
          </button>
        </nav>
      </div>
    );
  }

  window.WoScreens = Object.assign(window.WoScreens || {}, { ChildHome });
})();