// Hero, Nav, Featured, Portfolio, News, Studio, Jobs, Press, Footer sections
const { useState: useS, useEffect: useE, useRef: useR } = React;

// Resolve a game's banner: explicit banner field, else Steam's header.jpg
// derived from the store URL's appid, else empty (falls back to placeholder art).
function steamHeader(steamUrl) {
  const m = (steamUrl || "").match(/\/app\/(\d+)/);
  return m ? `https://cdn.akamai.steamstatic.com/steam/apps/${m[1]}/header.jpg` : "";
}
function gameBanner(g) { return (g && (g.banner || steamHeader(g.steamUrl))) || ""; }

function Nav({ lang, setLang, theme, setTheme, t }) {
  const links = [
    { id: "games", label: { ru: "ИГРЫ", en: "GAMES" } },
    { id: "news", label: { ru: "НОВОСТИ", en: "NEWS" } },
    { id: "studio", label: { ru: "СТУДИЯ", en: "STUDIO" } },
    { id: "careers", label: { ru: "КАРЬЕРА", en: "CAREERS" } },
    { id: "press", label: { ru: "ПРЕССА", en: "PRESS" } },
  ];
  return (
    <nav className="nav">
      <a href="#top" className="brand" aria-label="Exbyte Studios">
        <Logo size={42} full={true} />
      </a>
      <ul className="nav-links">
        {links.map(l => (
          <li key={l.id}><a href={`#${l.id}`}>{l.label[lang]}</a></li>
        ))}
      </ul>
      <div className="nav-controls">
        <button className="lang-toggle" onClick={() => setLang(lang === "ru" ? "en" : "ru")} aria-label="Switch language">
          <span className={lang === "ru" ? "on" : ""}>RU</span>
          <span className="sep">/</span>
          <span className={lang === "en" ? "on" : ""}>EN</span>
        </button>
        <button className="theme-toggle" onClick={(e) => setTheme(theme === "dark" ? "light" : "dark", e)} aria-label="Toggle theme">
          {theme === "dark" ? "◐" : "◑"}
        </button>
        <a href="#submit" className="cta-pub">{lang === "ru" ? "ИЗДАТЬ ИГРУ" : "PUBLISH WITH US"} <ArrowGlyph /></a>
      </div>
    </nav>
  );
}

function Hero({ lang, data }) {
  const lines = data.heroTagline[lang];
  return (
    <section className="hero" id="top">
      <div className="hero-grid" />
      <div className="hero-meta-tl">
        <div className="meta-row"><span className="meta-k">EST.</span><span className="meta-v">{data.studio.founded}</span></div>
        <div className="meta-row"><span className="meta-k">LOC.</span><span className="meta-v">{data.studio.location[lang]}</span></div>
        <div className="meta-row"><span className="meta-k">CREW</span><span className="meta-v">{data.studio.teamSize}</span></div>
      </div>
      <div className="hero-meta-tr">
        <div className="meta-row"><span className="meta-k">PLATFORM</span><span className="meta-v">STEAM / PC</span></div>
        <div className="meta-row"><span className="meta-k">SHIPPED</span><span className="meta-v">{data.studio.gamesShipped} / 7</span></div>
        <div className="meta-row"><span className="meta-k">PLAYERS</span><span className="meta-v">{data.studio.totalPlayers}</span></div>
      </div>
      <h1 className="hero-h1">
        {lines.map((line, i) => (
          <span className="hero-line" key={i}>
            <span className="hero-line-idx">0{i + 1}</span>
            <span className="hero-line-text">{line}</span>
          </span>
        ))}
      </h1>
      <p className="hero-sub">{data.heroSub[lang]}</p>
      <div className="hero-actions">
        <a href="#games" className="btn btn-primary">{lang === "ru" ? "ПОСМОТРЕТЬ ИГРЫ" : "VIEW THE GAMES"} <ArrowGlyph /></a>
        <a href="#news" className="btn btn-ghost">{lang === "ru" ? "ПОСЛЕДНИЕ НОВОСТИ" : "LATEST NEWS"}</a>
      </div>
      <div className="hero-scroll">
        <span>{lang === "ru" ? "ПРОКРУТИТЬ" : "SCROLL"}</span>
        <span className="hero-scroll-line" />
      </div>
    </section>
  );
}

// Media carousel — trailer (first) + screenshots, with placeholder fallback.
function GameMedia({ g, idx, setIdx, videoRef }) {
  const mediaRef = useR(null);
  const slides = [];
  if (g.trailerUrl) slides.push({ type: "video", src: g.trailerUrl });
  (g.screenshots || []).forEach((s) => slides.push({ type: "image", src: s }));
  useE(() => {
    if (window.ExbytePlayer && mediaRef.current) window.ExbytePlayer.enhanceAll(mediaRef.current);
  }, [g && g.id]);
  if (!slides.length) {
    return <Cover swatchA={g.swatchA} swatchB={g.swatchB} label="GAMEPLAY / PLACEHOLDER" code={g.short || "GAME"} ratio="16/10" accent={g.accent} image={gameBanner(g)} />;
  }
  const n = slides.length;
  const cur = ((idx % n) + n) % n;
  const go = (d) => setIdx((i) => ((((i + d) % n) + n) % n));
  return (
    <div className="game-media" ref={mediaRef} style={{ ["--accent"]: g.accent }}>
      <div className="gm-track" style={{ transform: `translateX(-${cur * 100}%)` }}>
        {slides.map((s, i) => (
          <div className="gm-slide" key={i}>
            {s.type === "video"
              ? <video ref={videoRef} src={s.src} controls playsInline preload="metadata" poster={g.screenshots && g.screenshots[0]} />
              : <img src={s.src} alt="" loading="lazy" />}
          </div>
        ))}
      </div>
      {n > 1 && (
        <>
          <button type="button" className="gm-arrow gm-prev" onClick={() => go(-1)} aria-label="Previous">‹</button>
          <button type="button" className="gm-arrow gm-next" onClick={() => go(1)} aria-label="Next">›</button>
          <div className="gm-dots">
            {slides.map((s, i) => (
              <button type="button" key={i} className={`gm-dot ${i === cur ? "on" : ""} ${s.type === "video" ? "is-video" : ""}`} onClick={() => setIdx(i)} aria-label={`Slide ${i + 1}`} />
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function FeaturedGame({ lang, g }) {
  const [slide, setSlide] = useS(0);
  const videoRef = useR(null);
  useE(() => { setSlide(0); }, [g && g.id]);
  const playTrailer = () => {
    setSlide(0);
    setTimeout(() => { if (videoRef.current) { try { videoRef.current.play(); } catch (e) {} } }, 60);
  };
  return (
    <section className="featured reveal" id="games">
      <SectionHeader
        idx="01"
        label={lang === "ru" ? "ФЛАГМАН" : "FLAGSHIP"}
        title={lang === "ru" ? "СЕЙЧАС НА ВЕРШИНЕ" : "AT THE TOP RIGHT NOW"}
      />
      <div className="featured-card" style={{ ["--accent"]: g.accent }}>
        <div className="featured-art">
          <GameMedia g={g} idx={slide} setIdx={setSlide} videoRef={videoRef} />
          <div className="featured-status">
            <span className="status-dot" />
            {g.status[lang]}
          </div>
        </div>
        <div className="featured-info">
          <div className="featured-tags">
            {g.genre.map(x => <Tag key={x} accent={g.accent}>{x}</Tag>)}
          </div>
          <h3 className="featured-title"><a className="game-title-link" href={`game.html?id=${g.id}`}>{g.title}</a></h3>
          <p className="featured-tagline" style={{ color: g.accent }}>{g.tagline[lang]}</p>
          <p className="featured-desc">{g.desc[lang]}</p>
          <div className="featured-metrics">
            <div className="metric">
              <span className="metric-val" style={{ color: g.accent }}>{g.metric.value}</span>
              <span className="metric-lab">{g.metric.label[lang]}</span>
            </div>
            <div className="metric">
              <span className="metric-val">{g.metric2.value}</span>
              <span className="metric-lab">{g.metric2.label[lang]}</span>
            </div>
            <div className="metric">
              <span className="metric-val">{g.metric3.value}</span>
              <span className="metric-lab">{g.metric3.label[lang]}</span>
            </div>
          </div>
          <div className="featured-actions">
            {g.steamUrl
              ? <a href={g.steamUrl} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ background: g.accent, color: "#0a0a0a", borderColor: g.accent }}>
                  {lang === "ru" ? "В STEAM" : "ON STEAM"} <ArrowGlyph />
                </a>
              : <span className="btn btn-primary btn-disabled" style={{ background: g.accent, color: "#0a0a0a", borderColor: g.accent }}>
                  {lang === "ru" ? "В STEAM" : "ON STEAM"} <ArrowGlyph />
                </span>}
            {g.trailerUrl &&
              <button type="button" className="btn btn-ghost" onClick={playTrailer}>{lang === "ru" ? "ТРЕЙЛЕР" : "WATCH TRAILER"} ▶</button>}
          </div>
        </div>
      </div>
    </section>
  );
}

function Portfolio({ lang, games }) {
  const [filter, setFilter] = useS("ALL");
  const allGenres = ["ALL", ...new Set(games.flatMap(g => g.genre))];
  const filtered = filter === "ALL" ? games : games.filter(g => g.genre.includes(filter));
  return (
    <section className="portfolio reveal" id="portfolio">
      <SectionHeader
        idx="02"
        label={lang === "ru" ? "КАТАЛОГ" : "CATALOG"}
        title={lang === "ru" ? "ОСТАЛЬНЫЕ КАЛИБРЫ" : "THE REST OF THE ARSENAL"}
        kicker={lang === "ru" ? "Четыре игры в работе или на полках Steam. Ни одной туториальной." : "Four games in development or live on Steam. Zero tutorials among them."}
      />
      <div className="filter-bar">
        <span className="filter-label">{lang === "ru" ? "ФИЛЬТР:" : "FILTER:"}</span>
        {allGenres.map(g => (
          <button key={g} className={`filter-chip ${filter === g ? "on" : ""}`} onClick={() => setFilter(g)}>
            {g}
          </button>
        ))}
      </div>
      <div className="port-grid stagger">
        {filtered.map((g, i) => (
          <article
            className="port-card port-card-clickable"
            key={g.id}
            style={{ ["--accent"]: g.accent, cursor: "pointer" }}
            onClick={() => { window.location.href = `game.html?id=${g.id}`; }}
            role="link"
            tabIndex={0}
            onKeyDown={(e) => { if (e.key === "Enter") window.location.href = `game.html?id=${g.id}`; }}
          >
            <div className="port-card-num">/{String(i + 2).padStart(2, "0")}</div>
            <Cover swatchA={g.swatchA} swatchB={g.swatchB} label={g.title} code={(g.code || String(g.id)).toUpperCase()} ratio="16/9" accent={g.accent} image={gameBanner(g)} />
            <div className="port-card-body">
              <div className="port-card-head">
                <span className="port-card-tag" style={{ color: g.accent }}>{g.tag[lang]}</span>
                <span className="port-card-year">{g.year}</span>
              </div>
              <h3 className="port-card-title">{g.title}</h3>
              <p className="port-card-desc">{g.desc[lang]}</p>
              <div className="port-card-meta">
                <span><b>{lang === "ru" ? "ИГРОКИ" : "PLAYERS"}</b> {g.players}</span>
                <span><b>{lang === "ru" ? "СТАТУС" : "STATUS"}</b> {g.status[lang]}</span>
                <span><b>{lang === "ru" ? "ОТЗЫВЫ" : "REVIEWS"}</b> {g.reviews}</span>
              </div>
              <a
                href={g.steamUrl || undefined}
                target={g.steamUrl ? "_blank" : undefined}
                rel="noopener noreferrer"
                className="port-card-link"
                style={{ color: g.accent, opacity: g.steamUrl ? 1 : 0.45, pointerEvents: g.steamUrl ? "auto" : "none" }}
                onClick={(e) => e.stopPropagation()}
              >
                {lang === "ru" ? "ОТКРЫТЬ В STEAM" : "VIEW ON STEAM"} <ArrowGlyph />
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function NewsFeed({ lang, news }) {
  const featured = news.find(n => n.featured);
  const rest = news.filter(n => !n.featured);
  return (
    <section className="news reveal" id="news">
      <SectionHeader
        idx="03"
        label={lang === "ru" ? "ЛЕНТА" : "FEED"}
        title={lang === "ru" ? "ЧТО У НАС ПРОИСХОДИТ" : "WHAT'S GOING ON"}
        kicker={lang === "ru" ? "Devlog'и, патч-ноуты, постмортемы и редкие пресс-релизы. Без маркетингового шума." : "Devlogs, patch notes, postmortems, and the occasional press release. No marketing noise."}
      />
      <div className="news-layout">
        {featured && (
          <article className="news-featured">
            <a className="news-cover news-link" href={`article.html?id=${featured.id}`}>
              <Cover swatchA={featured.cover.swatchA} swatchB={featured.cover.swatchB} code="FEAT" label="" ratio="16/10" />
            </a>
            <div className="news-feat-body">
              <div className="news-meta">
                <span className="news-tag news-tag-feat">{featured.tag[lang]}</span>
                <span className="news-date">{featured.date}</span>
              </div>
              <h3 className="news-feat-title">
                <a className="news-link" href={`article.html?id=${featured.id}`}>{featured.title[lang]}</a>
              </h3>
              <p className="news-feat-excerpt">{featured.excerpt[lang]}</p>
              <div className="news-foot">
                <span className="news-author">— {featured.author}</span>
                <span className="news-read">{featured.readTime}</span>
                <a href={`article.html?id=${featured.id}`} className="news-read-more">{lang === "ru" ? "ЧИТАТЬ" : "READ"} <ArrowGlyph /></a>
              </div>
            </div>
          </article>
        )}
        <div className="news-list stagger">
          {rest.map(n => (
            <article className="news-item" key={n.id}>
              <a className="news-thumb news-link" href={`article.html?id=${n.id}`}>
                <Cover swatchA={n.cover.swatchA} swatchB={n.cover.swatchB} code={String(n.id).toUpperCase()} ratio="1/1" />
              </a>
              <div className="news-item-body">
                <div className="news-meta">
                  <span className="news-tag">{n.tag[lang]}</span>
                  <span className="news-date">{n.date}</span>
                </div>
                <h4 className="news-item-title">
                  <a className="news-link" href={`article.html?id=${n.id}`}>{n.title[lang]}</a>
                </h4>
                <p className="news-item-excerpt">{n.excerpt[lang]}</p>
                <div className="news-foot">
                  <span className="news-author">— {n.author}</span>
                  <span className="news-read">{n.readTime}</span>
                  <a href={`article.html?id=${n.id}`} className="news-read-more">{lang === "ru" ? "ЧИТАТЬ" : "READ"} <ArrowGlyph /></a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
      <div className="news-more">
        <a href="#" className="btn btn-ghost">{lang === "ru" ? "ВСЯ ЛЕНТА" : "FULL ARCHIVE"} <ArrowGlyph /></a>
      </div>
    </section>
  );
}

function Studio({ lang, data }) {
  return (
    <section className="studio reveal" id="studio">
      <SectionHeader
        idx="04"
        label={lang === "ru" ? "О НАС" : "ABOUT"}
        title={lang === "ru" ? "27 ЧЕЛОВЕК. ТРИ ОФИСА. НОЛЬ КРАНЧА." : "27 HUMANS. THREE OFFICES. ZERO CRUNCH."}
      />
      <div className="studio-grid">
        <div className="studio-text">
          <p className="studio-lede">
            {lang === "ru"
              ? "Exbyte Studios основана в 2022 году группой инженеров и дизайнеров, которые хотели делать игры быстро, странно и с юмором."
              : "Exbyte Studios was founded in 2022 by a group of engineers and designers who wanted to ship games fast, weird, and with humor intact."}
          </p>
          <p>
            {lang === "ru"
              ? "Мы делаем co-op хорроры, скалолазание, выживание и tower-defense — потому что нам интересно работать с механикой, которую тяжело найти в крупном паблише. Параллельно мы издаём чужие игры по схеме 70/30 и помогаем с маркетингом, локализацией, QA и Steam-страницей."
              : "We make co-op horror, climbing, survival and tower-defense — because we like mechanics that are hard to find in big-publisher catalogs. Alongside this we publish other studios' games on a 70/30 split and cover marketing, localization, QA and Steam page work."}
          </p>
          <p>
            {lang === "ru"
              ? "У нас 4-дневная рабочая неделя, удалённая команда и правило: ни одна игра не выходит, пока её не проверили все 27 человек."
              : "We run a 4-day workweek, a fully remote team, and one rule: no game ships until all 27 of us have played it through."}
          </p>
        </div>
        <div className="team-grid stagger">
          {data.team.map((m) => (
            <div className="team-card" key={m.name}>
              <div className="team-avatar">
                <span className="team-init">{m.init}</span>
                <div className="team-avatar-noise" />
              </div>
              <div className="team-name">{m.name}</div>
              <div className="team-role">{m.role[lang]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Careers({ lang, jobs }) {
  const [open, setOpen] = uS(null);
  const toggle = (i) => setOpen((cur) => (cur === i ? null : i));
  return (
    <section className="careers reveal" id="careers">
      <SectionHeader
        idx="05"
        label={lang === "ru" ? "ВАКАНСИИ" : "JOBS"}
        title={lang === "ru" ? "МЫ ИЩЕМ ЛЮДЕЙ" : "WE'RE LOOKING FOR PEOPLE"}
        kicker={lang === "ru" ? "5 открытых ролей. Удалённо или офис. Без техсобеса в 4 этапа." : "5 open roles. Remote or office. No four-stage tech interview."}
      />
      <div className="jobs-list stagger">
        {jobs.map((j, i) => {
          const isOpen = open === i;
          const subj = encodeURIComponent(`Application — ${j.role.en} (${j.dept.en})`);
          const body = encodeURIComponent(
            (lang === "ru"
              ? `Здравствуйте,\n\nХочу подать заявку на роль ${j.role.ru}.\n\nМесто: ${j.location.ru}\nТип: ${j.type}\n\nПортфолио / резюме: \nКомментарий: \n\nСпасибо!`
              : `Hi,\n\nI'd like to apply for the ${j.role.en} role.\n\nLocation: ${j.location.en}\nType: ${j.type}\n\nPortfolio / CV: \nComment: \n\nThanks!`)
          );
          const mailto = `mailto:jobs@exbyte.studio?subject=${subj}&body=${body}`;
          return (
            <div className={`job-row-wrap ${isOpen ? "is-open" : ""}`} key={i}>
              <button
                type="button"
                className="job-row job-row-btn"
                aria-expanded={isOpen}
                onClick={() => toggle(i)}
              >
                <span className="job-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="job-role">{j.role[lang]}</span>
                <span className="job-dept">{j.dept[lang]}</span>
                <span className="job-loc">{j.location[lang]}</span>
                <span className="job-type">{j.type}</span>
                <span className="job-arrow job-toggle" aria-hidden="true">{isOpen ? "−" : "+"}</span>
              </button>
              <div className="job-panel" aria-hidden={!isOpen}>
                <div className="job-panel-inner">
                  <div className="job-panel-meta">
                    <span><b>{lang === "ru" ? "ЛОКАЦИЯ" : "LOCATION"}</b>{j.location[lang]}</span>
                    <span><b>{lang === "ru" ? "ТИП" : "TYPE"}</b>{j.type}</span>
                    <span><b>{lang === "ru" ? "ВИЛКА" : "SALARY"}</b>{j.salary}</span>
                  </div>
                  <p className="job-summary">{j.summary[lang]}</p>
                  <div className="job-cols">
                    <div className="job-col">
                      <h5>{lang === "ru" ? "ЧТО НАДО" : "REQUIREMENTS"}</h5>
                      <ul>
                        {j.requirements[lang].map((r, k) => <li key={k}>{r}</li>)}
                      </ul>
                    </div>
                    <div className="job-col">
                      <h5>{lang === "ru" ? "ЧТО ДАЁМ" : "WE OFFER"}</h5>
                      <ul>
                        {j.offer[lang].map((r, k) => <li key={k}>{r}</li>)}
                      </ul>
                    </div>
                  </div>
                  <div className="job-actions">
                    <a href={mailto} className="btn btn-primary">
                      {lang === "ru" ? "ОТКЛИКНУТЬСЯ ПО ПОЧТЕ" : "APPLY VIA EMAIL"} <ArrowGlyph />
                    </a>
                    <span className="job-mail-hint">jobs@exbyte.studio</span>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function Press({ lang, press }) {
  return (
    <section className="press reveal" id="press">
      <SectionHeader
        idx="06"
        label={lang === "ru" ? "ПРЕССА" : "PRESS"}
        title={lang === "ru" ? "ЧТО О НАС ПИШУТ" : "WHAT THEY'RE SAYING"}
      />
      <div className="press-grid stagger">
        {press.map((p, i) => (
          <blockquote className="press-quote" key={i}>
            <div className="press-mark">"</div>
            <p>{p.quote[lang]}</p>
            <footer className="press-outlet">— {p.outlet}</footer>
          </blockquote>
        ))}
      </div>
      <div className="press-kit">
        <div className="kit-info">
          <h3>{lang === "ru" ? "MEDIA KIT" : "MEDIA KIT"}</h3>
          <p>{lang === "ru" ? "Логотипы, скриншоты, трейлеры, биография студии. Всё в одном архиве." : "Logos, screenshots, trailers, studio bio. All in one archive."}</p>
        </div>
        <div className="kit-actions">
          <a href="#" className="btn btn-primary">{lang === "ru" ? "СКАЧАТЬ ПАК" : "DOWNLOAD KIT"} ↓</a>
          <a href="mailto:press@exbyte.studio" className="btn btn-ghost">press@exbyte.studio</a>
        </div>
      </div>
    </section>
  );
}

function Submit({ lang }) {
  return (
    <section className="submit reveal" id="submit">
      <div className="submit-card">
        <div className="submit-bg-grid" />
        <div className="submit-content">
          <span className="submit-kicker">{lang === "ru" ? "ИЗДАТЕЛЬСКАЯ ПРОГРАММА" : "PUBLISHING PROGRAM"}</span>
          <h2 className="submit-title">
            {lang === "ru" ? (
              <>У ВАС ЕСТЬ ИГРА?<br /><span className="hl">МЫ ВОЗЬМЁМ.</span></>
            ) : (
              <>GOT A GAME?<br /><span className="hl">WE'LL TAKE IT.</span></>
            )}
          </h2>
          <p className="submit-sub">
            {lang === "ru"
              ? "Маркетинг, локализация на 12 языков, QA, Steam-страница, community management — на нас. Вы делаете игру. 70/30 в вашу пользу."
              : "Marketing, localization in 12 languages, QA, Steam page, community management — on us. You make the game. 70/30 in your favor."}
          </p>
          <ul className="submit-list">
            <li><span className="check">✓</span>{lang === "ru" ? "Аванс до $80K на разработку" : "Advance up to $80K against development"}</li>
            <li><span className="check">✓</span>{lang === "ru" ? "Без претензий на IP" : "No IP claims"}</li>
            <li><span className="check">✓</span>{lang === "ru" ? "Ответ в течение 14 дней" : "Reply within 14 days"}</li>
          </ul>
          <a href="mailto:publish@exbyte.studio" className="btn btn-primary btn-lg">
            {lang === "ru" ? "ОТПРАВИТЬ ПИТЧ" : "SEND YOUR PITCH"} <ArrowGlyph />
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang, data }) {
  return (
    <footer className="footer">
      <div className="foot-top">
        <div className="foot-brand">
          <Logo size={64} full={true} />
          <div className="foot-brand-text">
            <div className="foot-brand-tag">{lang === "ru" ? "ИНДИ-СТУДИЯ + ПАБЛИШЕР · С 2022" : "INDIE STUDIO + PUBLISHER · SINCE 2022"}</div>
          </div>
        </div>
        <div className="foot-links">
          <div className="foot-col">
            <h5>{lang === "ru" ? "КОМПАНИЯ" : "COMPANY"}</h5>
            <a href="#studio">{lang === "ru" ? "О СТУДИИ" : "ABOUT"}</a>
            <a href="#careers">{lang === "ru" ? "КАРЬЕРА" : "CAREERS"}</a>
            <a href="#press">{lang === "ru" ? "ПРЕССА" : "PRESS"}</a>
          </div>
          <div className="foot-col">
            <h5>{lang === "ru" ? "ИГРЫ" : "GAMES"}</h5>
            <a href="#games">OCBT</a>
            <a href="#games">Don't Shout Together</a>
            <a href="#games">Last Frontier</a>
          </div>
          <div className="foot-col">
            <h5>{lang === "ru" ? "СВЯЗЬ" : "CONNECT"}</h5>
            <a href="#">DISCORD</a>
            <a href="#">STEAM</a>
            <a href="#">X / TWITTER</a>
            <a href="#">YOUTUBE</a>
          </div>
        </div>
      </div>
      <div className="foot-bot">
        <span>© 2022—2026 EXBYTE STUDIOS LTD.</span>
        <span>{data.studio.location[lang]}</span>
        <span>hello@exbyte.studio</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, FeaturedGame, Portfolio, NewsFeed, Studio, Careers, Press, Submit, Footer
});