---
import { site, LITERALS, HEAD_FONTS } from "../data/site";
import { ui, LANGS, LANG_LABEL, LANG_PATH, type Lang } from "../i18n/ui";
import Creeper from "../components/Creeper.astro";
import PixelIcon from "../components/PixelIcon.astro";
import CopyChip from "../components/CopyChip.astro";
import ServerCard from "../components/ServerCard.astro";
import "../styles/main.css";

// One static page per locale: en at "/", es at "/es/", eu at "/eu/".
export function getStaticPaths() {
  return [
    { params: { lang: undefined }, props: { locale: "en" as Lang } },
    { params: { lang: "es" }, props: { locale: "es" as Lang } },
    { params: { lang: "eu" }, props: { locale: "eu" as Lang } },
  ];
}

const { locale } = Astro.props;
const t = ui[locale];
const { theme, launcher } = site;
const headFont = HEAD_FONTS[theme.headFont] ?? HEAD_FONTS.pixelify;
const launcherName = launcher.name;

// Build-time floating dust bits (index-derived, no runtime RNG).
const dustBits = Array.from({ length: 16 }, (_, i) => {
  const size = 3 + (i % 3) * 2;
  return {
    left: `${(i * 61) % 100}%`,
    size: `${size}px`,
    bg: i % 4 === 0 ? "var(--gold)" : "var(--accent)",
    opacity: 0.18 + (i % 3) * 0.06,
    anim: `rise ${13 + (i % 7) * 3}s linear ${i * 0.7}s infinite`,
  };
});
---

<!doctype html>
<html
  lang={t.htmlLang}
  data-mood={theme.mood}
  data-hero={theme.hero}
  data-head={theme.headFont}
  style={`--font-head: ${headFont}`}
>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{site.name} — {t.hero.howToJoin}</title>
    <meta name="description" content={`${site.name}: ${t.hero.tagline}`} />
    <link rel="icon" type="image/png" href="/logo.png" />
    <link rel="stylesheet" href="/fonts/fonts.css" />
    {LANGS.map((l) => <link rel="alternate" hreflang={l} href={LANG_PATH[l]} />)}
  </head>
  <body>
    <!-- NAV -->
    <header class="nav">
      <div class="wrap nav-in">
        <a class="brand" href="#top">
          <Creeper />
          <span class="name">ULICRAFT</span>
        </a>
        <nav class="nav-links">
          <a href="#status">{t.nav.status}</a>
          <a href="#features">{t.nav.features}</a>
          <a href="#join">{t.nav.join}</a>
        </nav>
        <span class="nav-spacer"></span>
        <div class="lang-switch" aria-label="Language">
          {LANGS.map((l) => (
            <a href={LANG_PATH[l]} class:list={[l === locale && "on"]} aria-current={l === locale ? "true" : undefined}>{LANG_LABEL[l]}</a>
          ))}
        </div>
        <a class="mc-btn primary sm" href="#join">{t.nav.play}</a>
      </div>
    </header>

    <main id="top">
      <!-- HERO -->
      <section class="hero">
        {theme.dust && (
          <div class="dust" aria-hidden="true">
            {dustBits.map((b) => (
              <i
                style={`position:absolute;left:${b.left};bottom:-20px;width:${b.size};height:${b.size};background:${b.bg};opacity:${b.opacity};image-rendering:pixelated;animation:${b.anim}`}
              />
            ))}
          </div>
        )}
        <div class="wrap hero-grid">
          <div class="hero-logo">
            <img src="/logo.png" alt={site.name} width="707" height="148" />
          </div>
          <div class="hero-copy">
            <span class="eyebrow">{t.hero.eyebrow} {site.mcVersion}</span>
            <h1 class="hero-tagline">{t.hero.tagline}</h1>
            <p class="hero-sub">{t.hero.sub}</p>
            <div class="hero-ip-row">
              <CopyChip value={site.serverAddress} variant="ip" label={t.hero.copyIp} copiedLabel={t.copied} />
              <a class="mc-btn" href="#join">{t.hero.howToJoin}</a>
            </div>
            <div class="hero-meta">
              <span>Java {site.mcVersion}</span>
              <span class="dot"></span>
              <span>{t.hero.metaModpack}</span>
              <span class="dot"></span>
              <span>{t.hero.metaLan}</span>
            </div>
          </div>
          <div class="hero-status">
            <ServerCard
              modded={t.status.modded}
              motd={t.status.motd}
              upTo={t.status.upTo}
            />
          </div>
        </div>
      </section>

      <!-- STATUS -->
      <section id="status" class="pad">
        <div class="wrap">
          <div class="sec-head reveal">
            <span class="eyebrow">{t.status.eyebrow}</span>
            <h2 class="section-title">{t.status.title}</h2>
            <p class="lead">{t.status.lead}</p>
          </div>
          <div class="reveal">
            <ServerCard
              modded={t.status.modded}
              motd={t.status.motd}
              upTo={t.status.upTo}
            />
          </div>
          <div class="stat-grid">
            {site.stats.map((s, i) => (
              <div class="tile reveal" style={`transition-delay:${i * 60}ms`}>
                <div class="k">{s.key}</div>
                <div class="l">{t.statLabels[i]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <!-- FEATURES -->
      <section id="features" class="pad" style="background: var(--bg-2)">
        <div class="wrap">
          <div class="sec-head reveal">
            <span class="eyebrow">{t.features.eyebrow}</span>
            <h2 class="section-title">{t.features.title}</h2>
            <p class="lead">{t.features.lead}</p>
          </div>
          <div class="feat-grid">
            {site.features.map((f, i) => (
              <div class="feat reveal" style={`transition-delay:${(i % 2) * 80}ms`}>
                <PixelIcon glyph={f.glyph} gold={f.gold} />
                <div>
                  <h3>{t.features.items[i].h}</h3>
                  <p>{t.features.items[i].p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <!-- HOW TO JOIN -->
      <section id="join" class="pad">
        <div class="wrap">
          <div class="sec-head reveal">
            <span class="eyebrow">{t.join.eyebrow}</span>
            <h2 class="section-title">{t.join.title}</h2>
            <p class="lead">{t.join.lead}</p>
          </div>

          <div class="steps">
            <!-- STEP 1 -->
            <div class="step reveal">
              <div class="num">1</div>
              <div class="body">
                <span class="kicker">{t.join.s1.kicker}</span>
                <h3>{t.join.s1.h.replace("{name}", launcherName)}</h3>
                <p>{t.join.s1.p.replace(/\{name\}/g, launcherName)}</p>
                <div class="actions">
                  {launcher.downloads.map((d) => (
                    <a class="mc-btn sm" href={`${launcher.base}/${d.file}`}>
                      {d.os} <span class="hint">· {d.hint}</span>
                    </a>
                  ))}
                </div>
              </div>
            </div>

            <!-- STEP 2 -->
            <div class="step reveal">
              <div class="num">2</div>
              <div class="body">
                <span class="kicker">{t.join.s2.kicker}</span>
                <h3>{t.join.s2.h}</h3>
                <p>
                  {t.join.s2.pa} <strong style="color:var(--text)">{LITERALS.authlib}</strong> {t.join.s2.pb}
                </p>
                <div class="actions" style="margin-bottom:14px">
                  <CopyChip value={site.authlibUrl} variant="url" label={t.join.s2.copy} copiedLabel={t.copied} />
                </div>
                <p>
                  {t.join.s2.registerPre} <a href={site.authUrl}>{site.authUrl}</a>.
                </p>
              </div>
            </div>

            <!-- STEP 3 -->
            <div class="step reveal">
              <div class="num">3</div>
              <div class="body">
                <span class="kicker">{t.join.s3.kicker}</span>
                <h3>{t.join.s3.h}</h3>
                <p>{t.join.s3.p}</p>
                <div class="actions">
                  <CopyChip value={site.packwizUrl} variant="url" label={t.join.s2.copy} copiedLabel={t.copied} />
                </div>
              </div>
            </div>

            <!-- STEP 4 -->
            <div class="step reveal">
              <div class="num">4</div>
              <div class="body">
                <span class="kicker">{t.join.s4.kicker}</span>
                <h3>{t.join.s4.h}</h3>
                <p>
                  {t.join.s4.pa} <kbd>{LITERALS.multiplayer}</kbd> → <kbd>{LITERALS.addServer}</kbd>{t.join.s4.pb}
                </p>
                <div class="actions">
                  <CopyChip value={site.serverAddress} variant="ip" label={t.join.s4.copy} copiedLabel={t.copied} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- FOOTER -->
    <footer class="footer">
      <div class="wrap footer-in">
        <a class="brand" href="#top">
          <Creeper />
          <span class="name">ULICRAFT</span>
        </a>
        <div class="footer-links">
          <a class="mc-btn primary sm" href="#join">{t.footer.join}</a>
        </div>
        <p class="disc">
          {t.footer.disc} {site.name} · {site.baseDomain}
        </p>
      </div>
    </footer>

    <script>
      // Copy-to-clipboard for every [data-copy] button (HTTP-LAN safe fallback).
      function copyText(text: string) {
        try {
          if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text);
            return;
          }
        } catch {}
        const ta = document.createElement("textarea");
        ta.value = text;
        ta.style.position = "fixed";
        ta.style.opacity = "0";
        document.body.appendChild(ta);
        ta.select();
        try {
          document.execCommand("copy");
        } catch {}
        document.body.removeChild(ta);
      }
      document.querySelectorAll<HTMLButtonElement>("button[data-copy]").forEach((btn) => {
        let timer: number | undefined;
        btn.addEventListener("click", () => {
          copyText(btn.dataset.copy ?? "");
          const label = btn.dataset.label ?? "Copy";
          btn.textContent = btn.dataset.copied ?? "Copied!";
          btn.classList.add("copied");
          clearTimeout(timer);
          timer = window.setTimeout(() => {
            btn.textContent = label;
            btn.classList.remove("copied");
          }, 1600);
        });
      });

      // Scroll reveal — visible at rest; .anim added when scrolled into view.
      if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
        const els = [...document.querySelectorAll<HTMLElement>(".reveal")];
        const io = new IntersectionObserver(
          (entries) => {
            for (const e of entries) {
              if (e.isIntersecting) {
                e.target.classList.add("anim");
                io.unobserve(e.target);
              }
            }
          },
          { rootMargin: "0px 0px -10% 0px" }
        );
        els.forEach((el) => io.observe(el));
      }
    </script>
  </body>
</html>
