/* Country pages — detail (country.html?slug=…) + index (countries.html). */

function CountryAppCard({ app }) {
  return (
    <a
      href={`app.html?slug=${app.slug}`}
      className="app-card"
      style={{ "--card-tint": `oklch(0.85 0.12 ${app.cover.hue} / 0.5)` }}
    >
      <div className="app-card__head">
        <AppIcon app={app} size={56} />
        <div className="app-card__id">
          <div className="app-card__name" style={{ fontSize: 18 }}>{app.name}</div>
          <div className="app-card__cat">{app.category}</div>
        </div>
      </div>
      <p className="app-card__tagline" style={{ fontSize: 14 }}>{app.tagline}</p>
      <div className="app-card__foot">
        <PlatformChips platforms={app.platforms} />
        <span className="mono-meta" style={{ color: "var(--accent)" }}>View →</span>
      </div>
    </a>
  );
}

function CountryPage() {
  const slug = new URLSearchParams(window.location.search).get("slug");
  const country = window.findCountry(slug);

  React.useEffect(() => {
    if (!country) { document.title = "Country — Innoveev"; return; }
    document.title = `${country.name} — Where we work — Innoveev`;
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name", "description"); document.head.appendChild(m); }
    m.setAttribute("content", country.intro);
  }, [country]);

  if (!country) {
    return (
      <>
        <Nav />
        <main className="section container">
          <h1 className="h2">Country not found.</h1>
          <p className="lede"><a href="countries.html">← All countries</a></p>
        </main>
        <Footer />
      </>
    );
  }

  const apps = (country.apps || [])
    .map((s) => (window.APPS || []).find((a) => a.slug === s))
    .filter(Boolean);

  return (
    <>
      <Nav />

      <header className="container app-detail__nav">
        <div className="app-detail__crumbs">
          <a href="index.html">Innoveev</a>
          <span aria-hidden="true">›</span>
          <a href="countries.html">Where we work</a>
          <span aria-hidden="true">›</span>
          <span>{country.name}</span>
        </div>
      </header>

      <section className="country-hero" style={{ "--accent-hue": country.hue, "--c-hue": country.hue }}>
        <div className="container country-hero__grid">
          <div className="country-hero__text">
            <span className="eyebrow">{country.eyebrow}</span>
            <h1 className="country-hero__title">{country.name}</h1>
            <p className="country-hero__kicker">{country.kicker}</p>
            <p className="country-hero__intro">{country.intro}</p>
            <div className="country-office">
              <div className="country-office__city">{country.office.city}</div>
              <div className="country-office__meta">
                <span>{country.office.code}</span>
                <span>·</span>
                <span>{country.office.tz}</span>
                <span>·</span>
                <span>{country.office.role}</span>
              </div>
            </div>
          </div>
          <div className="country-hero__viz">
            <CountryGlobe country={country} zoom={1.0} />
          </div>
        </div>
      </section>

      <section className="section section--tight">
        <div className="container">
          <div className="country-stats">
            {country.stats.map((s) => (
              <div key={s.k} className="country-stat">
                <div className="country-stat__v">{s.v}</div>
                <div className="country-stat__k">{s.k}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {country.gallery && (
        <section className="section section--tight">
          <div className="container">
            <div className="country-gallery">
              {country.gallery.map((g) => (
                <image-slot
                  key={g.id}
                  id={g.id}
                  placeholder={g.label}
                  shape="rounded"
                  radius="16"
                  className="country-gallery__slot"
                  style={{ display: "block", width: "100%", height: "280px" }}
                ></image-slot>
              ))}
            </div>
            <p className="country-gallery__hint">Drag your own photos onto any frame — they'll stick.</p>
          </div>
        </section>
      )}

      <section className="section section--tight">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">On the ground</span>
              <h2 className="h2 section-head__title">What we do here.</h2>
            </div>
          </div>
          <div className="country-prose">
            {country.story.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          {country.note && (
            <p className="country-note">{country.note}</p>
          )}
        </div>
      </section>

      {country.market && (
        <section className="section section--tight">
          <div className="container">
            <div className="section-head">
              <div>
                <span className="eyebrow">Technology & the market</span>
                <h2 className="h2 section-head__title">{country.market.title}</h2>
              </div>
            </div>
            <div className="country-prose">
              {country.market.body.map((p, i) => <p key={i}>{p}</p>)}
            </div>
            {country.market.signals && (
              <div className="country-stats" style={{ marginTop: 28 }}>
                {country.market.signals.map((s) => (
                  <div key={s.k} className="country-stat">
                    <div className="country-stat__v">{s.v}</div>
                    <div className="country-stat__k">{s.k}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </section>
      )}

      {apps.length > 0 && (
        <section className="section section--tight">
          <div className="container">
            <div className="section-head">
              <div>
                <span className="eyebrow">Shipped here</span>
                <h2 className="h2 section-head__title">Products from {country.name}.</h2>
              </div>
              {country.appsNote && <p className="lede section-head__lede">{country.appsNote}</p>}
            </div>
            <div className="app-related">
              {apps.map((app) => <CountryAppCard key={app.slug} app={app} />)}
            </div>
          </div>
        </section>
      )}

      <section className="section section--tight">
        <div className="container">
          <div className="faq-closing">
            <h2 className="faq-closing__title">{country.cta.title}</h2>
            <p className="faq-closing__lede">{country.cta.lede}</p>
            <div className="faq-closing__ctas">
              <a href="contact.html" className="btn btn--primary">Talk to us <Arrow /></a>
              <a href="countries.html" className="btn btn--secondary">All countries</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <StickyCTA />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
      <BuildMode />
      <KeyboardEggs />
    </>
  );
}

function CountriesIndexPage() {
  React.useEffect(() => {
    document.title = "Where we work — Innoveev";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name", "description"); document.head.appendChild(m); }
    m.setAttribute("content", "Innoveev works across Syria, the UAE, Estonia and Türkiye — our roots, our headquarters, and the markets where we ship.");
  }, []);

  const apps = window.APPS || [];
  const countFor = (c) => (c.apps || []).filter((s) => apps.some((a) => a.slug === s)).length;

  return (
    <>
      <Nav />

      <header className="sub-hero sub-hero--bleed">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
        </div>
        <div className="container">
          <div className="sub-hero__head">
            <span className="eyebrow">Where we work</span>
            <h1 className="sub-hero__title">Four countries, <em>one team.</em></h1>
            <p className="sub-hero__lede">
              From our Syrian roots to our Dubai headquarters, an Estonian EU base and an
              Istanbul bridge — here's where Innoveev builds, and what we've shipped in
              each place.
            </p>
          </div>
        </div>
      </header>

      <section className="section section--tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="country-grid">
            {window.COUNTRIES.map((c) => (
              <a key={c.slug} href={`country.html?slug=${c.slug}`} className="country-card" data-cursor="Explore" style={{ "--c-hue": c.hue }}>
                <div className="country-card__viz">
                  <CountryGlobe country={c} />
                </div>
                <div className="country-card__body">
                  <div className="country-card__name">{c.name}</div>
                  <div className="country-card__role">{c.office.city} · {c.office.role}</div>
                  <p className="country-card__kicker">{c.kicker}</p>
                  <div className="country-card__foot">
                    <span>{countFor(c) > 0 ? `${countFor(c)} product${countFor(c) === 1 ? "" : "s"} shipped` : "Studio & operations"}</span>
                    <strong>Explore →</strong>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--tight">
        <div className="container">
          <div className="faq-closing">
            <h2 className="faq-closing__title">Wherever you're <em>building.</em></h2>
            <p className="faq-closing__lede">
              MENA reach, EU delivery, global standards — from one studio across four time zones.
            </p>
            <div className="faq-closing__ctas">
              <a href="contact.html" className="btn btn--primary">Start a project <Arrow /></a>
              <a href="apps.html" className="btn btn--secondary">See our work</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <StickyCTA />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
      <BuildMode />
      <KeyboardEggs />
    </>
  );
}

window.CountryPage = CountryPage;
window.CountriesIndexPage = CountriesIndexPage;