// ============================================================================
// components.jsx — shared chrome: Nav, Footer, Carousel, banners, headings
// ============================================================================

// --- Coming soon gate -------------------------------------------------------
function ComingSoonPage() {
  return (
    <main className="splash" role="status" aria-live="polite">
      <div className="splash__inner">
        <img className="splash__logo" src={ASSETS.logoMuafakat} alt="Muafakat Games" />
        <h1 className="splash__title">Coming Soon!</h1>
        <div className="splash__bar" aria-hidden="true"><span /></div>
      </div>
    </main>
  );
}

// --- Top navigation ---------------------------------------------------------
function Nav({ page, go, accent }) {
  const [open, setOpen] = React.useState(false);
  const social = [
    { k: 'mail', href: SOCIAL_LINKS.emailHref, label: 'Email' },
    ...SOCIAL_ORDER.map((k) => ({ k, href: SOCIAL_LINKS[k], label: k })),
  ];
  return (
    <header className="nav">
      <div className="nav__inner">
        <button className="nav__burger" onClick={() => setOpen((o) => !o)} aria-label="Menu">
          {open ? <Icon.close width="26" height="26" /> : <Icon.menu width="26" height="26" />}
        </button>

        <a className="nav__brand" onClick={() => go('home')}>MUAFAKAT</a>

        <nav className={`nav__links ${open ? 'is-open' : ''}`}>
          {NAV.map((n) => (
            <a
              key={n.id}
              className={`nav__link ${page === n.id ? 'is-active' : ''}`}
              onClick={() => { go(n.id); setOpen(false); }}
            >
              {n.label}
            </a>
          ))}
        </nav>

        <div className="nav__social">
          {social.map((s) => {
            const I = Icon[s.k];
            return (
              <a
                key={s.k}
                href={s.href}
                className="nav__soc"
                aria-label={s.label}
                target={s.k === 'mail' ? undefined : '_blank'}
                rel={s.k === 'mail' ? undefined : 'noopener noreferrer'}>
                <I width="18" height="18" />
              </a>
            );
          })}
        </div>
      </div>
    </header>
  );
}

// --- Footer -----------------------------------------------------------------
function Footer({ go }) {
  return (
    <footer className="foot">
      <img className="foot__mascot foot__mascot--l" src={ASSETS.footerRimau} alt="" />
      <img className="foot__mascot foot__mascot--r" src={ASSETS.footerKoko} alt="" />
      <div className="foot__center">
        <img className="foot__logo" src={ASSETS.logoMuafakat} alt="Muafakat Games" />
        <h2 className="foot__title">CONTACT US</h2>
        <a className="foot__mail" href={SOCIAL_LINKS.emailHref}>{SOCIAL_LINKS.email}</a>
        <div className="foot__social">
          {SOCIAL_ORDER.map((k) => {
            const I = Icon[k];
            return (
              <a key={k} href={SOCIAL_LINKS[k]} className="foot__soc" aria-label={k} target="_blank" rel="noopener noreferrer">
                <I width="20" height="20" />
              </a>
            );
          })}
        </div>
      </div>
      <div className="foot__credit">
        <span>Website powered by</span>
        <a href="https://cendawantech.com" target="_blank" rel="noopener noreferrer" className="foot__credit-link" aria-label="CendawanTech">
          <img src={ASSETS.cendawantech} alt="CendawanTech" />
        </a>
      </div>
    </footer>
  );
}

// --- Page banner (mascots + big title over the rainbow track) ---------------
function Banner({ title }) {
  return (
    <div className="banner">
      <img className="banner__art" src={ASSETS.header} alt="" />
      <div className="banner__scrim" aria-hidden="true" />
      <h1 className="banner__title">{title}</h1>
    </div>
  );
}

// --- Generic image carousel (dots + arrow) ----------------------------------
function Carousel({ slides = 5, label = 'event photo', src = null, sources = null, aspect = '21 / 9' }) {
  const baseSources = sources || Array.from({ length: slides }, () => src);
  const slideSources = baseSources.filter(Boolean).slice(0, 15);
  const slideCount = slideSources.length;
  const [i, setI] = React.useState(0);
  const prev = () => setI((v) => (v - 1 + slideCount) % slideCount);
  const next = () => setI((v) => (v + 1) % slideCount);
  React.useEffect(() => {
    if (slideCount <= 1) return undefined;
    const timer = setInterval(next, 3500);
    return () => clearInterval(timer);
  }, [slideCount]);
  return (
    <div className="carousel">
      <div className="carousel__frame" style={{ aspectRatio: aspect }}>
        {slideSources.map((source, s) => (
          <Ph
            key={s}
            src={source}
            label={`${label} ${s + 1}`}
            className="carousel__slide"
            style={{ opacity: s === i ? 1 : 0, zIndex: s === i ? 2 : 1 }}
          />
        ))}
      </div>
      <div className="carousel__ctrl">
        <button className="carousel__nav carousel__prev" onClick={prev} aria-label="Previous">
          <Icon.arrow width="22" height="22" />
        </button>
        <div className="carousel__dots">
          {slideSources.map((_, s) => (
            <button
              key={s}
              className={`carousel__dot ${s === i ? 'is-active' : ''}`}
              onClick={() => setI(s)}
              aria-label={`Slide ${s + 1}`}
            />
          ))}
        </div>
        <button className="carousel__nav carousel__next" onClick={next} aria-label="Next">
          <Icon.arrow width="22" height="22" />
        </button>
      </div>
    </div>
  );
}

// --- Photo gallery grid (3 x rows) ------------------------------------------
function Gallery({ rows = 2, cols = 3, label = 'event photo', src = null, sources = null }) {
  const count = Math.max(rows * cols, 14);
  const sourceList = sources && sources.length ? sources : (src ? [src] : []);
  const [indexes, setIndexes] = React.useState(() => Array.from({ length: count }, (_, n) => n % Math.max(sourceList.length, 1)));

  React.useEffect(() => {
    if (sourceList.length <= 1) return undefined;
    setIndexes(Array.from({ length: count }, (_, n) => n % sourceList.length));
    const timer = setInterval(() => {
      setIndexes((current) => current.map((value) => {
        if (Math.random() > 0.38) return value;
        let next = Math.floor(Math.random() * sourceList.length);
        if (next === value) next = (next + 1) % sourceList.length;
        return next;
      }));
    }, 2800);
    return () => clearInterval(timer);
  }, [count, sourceList.length]);

  const cells = indexes.map((index) => sourceList[index % Math.max(sourceList.length, 1)]);
  const loopCells = [...cells, ...cells];
  return (
    <div className="gallery gallery--rail">
      <div className="gallery__track">
        {loopCells.map((source, n) => {
          const shape = n % 7 === 0 ? 'gallery__cell--tall'
            : n % 7 === 1 || n % 7 === 5 ? 'gallery__cell--wide'
            : '';
          return <Ph key={n} src={source} label={`${label} ${n + 1}`} className={`gallery__cell ${shape}`} />;
        })}
      </div>
    </div>
  );
}

Object.assign(window, { ComingSoonPage, Nav, Footer, Banner, Carousel, Gallery });