/* Sectors page — three long-form blocks anchored by hash. */

const SectorsHero = () => {
  const { lang } = useT();
  const s = window.MR.sectors;
  return (
    <section style={{ borderBottom: "1px solid var(--color-rule)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "88px 32px 96px" }}>
        <Reveal><span className="eyebrow">{s.kicker[lang]}</span></Reveal>
        <Reveal delay={120} as="h1" style={{
          fontFamily: "var(--font-serif)", fontWeight: 400,
          fontSize: "clamp(40px, 6vw, 72px)", lineHeight: 1.05,
          letterSpacing: "-0.02em", margin: "16px 0 28px",
          maxWidth: 980, textWrap: "balance"
        }}>
          {s.title[lang]}
        </Reveal>
        <Reveal delay={240}>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--color-ink-2)",
                      maxWidth: 640, marginBottom: 40 }}>
            {s.lede[lang]}
          </p>
        </Reveal>
        <Reveal delay={340}>
          <nav style={{ display: "flex", gap: 32, flexWrap: "wrap",
                        borderTop: "1px solid var(--color-ink)", paddingTop: 16 }}>
            {s.list.map(item => (
              <a key={item.id} href={`#${item.id}`}
                 onClick={(e) => {
                   e.preventDefault();
                   const el = document.getElementById(item.id);
                   if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
                 }}
                 className="mr-link" style={{ color: "var(--color-ink)" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em",
                               color: "var(--color-ink-3)", marginRight: 10 }}>
                  {item.num}
                </span>
                {item[lang]}
              </a>
            ))}
          </nav>
        </Reveal>
      </div>
    </section>
  );
};

const SectorBlock = ({ item, idx }) => {
  const { lang } = useT();
  const flip = idx % 2 === 1;
  return (
    <section id={item.id} style={{
      padding: "120px 0",
      background: idx % 2 === 1 ? "var(--color-paper)" : "transparent",
      borderBottom: "1px solid var(--color-rule)",
      scrollMarginTop: 80
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px" }}>
        <div style={{ display: "grid",
                      gridTemplateColumns: "120px 1fr 1fr",
                      gap: 48, alignItems: "start" }}>
          <Reveal>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 88,
                          lineHeight: 1, color: "var(--color-ink-3)",
                          letterSpacing: "-0.02em" }}>
              {item.num}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11,
                          letterSpacing: "0.16em", textTransform: "uppercase",
                          color: "var(--color-ink-3)", marginTop: 12 }}>
              {item.eyebrow[lang]}
            </div>
          </Reveal>

          <Reveal delay={120}>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400,
                         fontSize: "clamp(36px, 4.4vw, 56px)", lineHeight: 1.05,
                         letterSpacing: "-0.02em", margin: "0 0 20px",
                         textWrap: "balance" }}>
              {item[lang]}
            </h2>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 21,
                        lineHeight: 1.4, color: "var(--color-ink)",
                        margin: "0 0 32px", textWrap: "balance",
                        fontStyle: "italic", maxWidth: 480 }}>
              {item.lede[lang]}
            </p>
            <div style={{ display: "flex", gap: 24, alignItems: "baseline",
                          paddingTop: 20, borderTop: "1px solid var(--color-rule)" }}>
              <span className="eyebrow">{item.stat[lang === "ka" ? "ka" : "en"] || item.stat.en}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 14,
                             color: "var(--color-ink)" }}>
                {item.stat.v}
              </span>
            </div>
          </Reveal>

          <Reveal delay={240}>
            <ul style={{ listStyle: "none", padding: 0, margin: 0,
                         display: "flex", flexDirection: "column", gap: 20,
                         borderTop: "1px solid var(--color-ink)", paddingTop: 24 }}>
              {item.caps.map((c, i) => (
                <li key={i} style={{ display: "grid",
                                     gridTemplateColumns: "32px 1fr",
                                     gap: 16, fontSize: 16, lineHeight: 1.55,
                                     color: "var(--color-ink-2)",
                                     paddingBottom: 20,
                                     borderBottom: i < item.caps.length - 1 ? "1px solid var(--color-rule)" : "none" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11,
                                 letterSpacing: "0.10em",
                                 color: "var(--color-ink-3)", paddingTop: 4 }}>
                    0{i + 1}
                  </span>
                  <span>{c[lang]}</span>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

const PageSectors = () => {
  const { lang } = useT();
  const s = window.MR.sectors;
  /* If hash carries an anchor (#military etc), scroll to it on mount */
  React.useEffect(() => {
    const h = window.location.hash;
    if (!h) return;
    /* hash router uses #/path; sub-anchor would need ?, but we honor #/sectors#x by parsing */
    const m = h.match(/^#\/sectors#(.+)$/);
    if (m) {
      const t = setTimeout(() => {
        const el = document.getElementById(m[1]);
        if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
      }, 300);
      return () => clearTimeout(t);
    }
  }, []);
  return (
    <main>
      <SectorsHero/>
      {s.list.map((item, i) => <SectorBlock key={item.id} item={item} idx={i}/>)}
      <section style={{ padding: "96px 32px", textAlign: "center" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11,
                       letterSpacing: "0.16em", textTransform: "uppercase",
                       color: "var(--color-ink-3)" }}>
          {s.preliminary[lang]}
        </span>
      </section>
    </main>
  );
};

window.PageSectors = PageSectors;
