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

const SectorsHero = () => {
  const { lang } = useT();
  const s = window.MR.sectors;
  return (
    <section className="mr-section--hero" style={{ borderBottom: "1px solid var(--color-rule)" }}>
      <div className="mr-container">
        <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();
  return (
    <section id={item.id} className="mr-section" style={{
      background: idx % 2 === 1 ? "var(--color-accent)" : "transparent",
      borderBottom: "1px solid var(--color-rule)",
      scrollMarginTop: 80,
      ...(idx % 2 === 1 && {
        "--color-ink":   "#F8F9FA",
        "--color-ink-2": "rgba(248, 249, 250, 0.78)",
        "--color-ink-3": "rgba(248, 249, 250, 0.55)",
        "--color-ink-4": "rgba(248, 249, 250, 0.35)",
        "--color-rule":  "rgba(248, 249, 250, 0.20)"
      })
    }}>
      <div className="mr-container">
        {/* Lead image */}
        <Reveal>
          {item.lead ? (
            <img src={item.lead} alt={item.en} className="mr-sector-lead" />
          ) : (
            <div className="mr-sector-lead mr-sector-lead--placeholder">
              lead image · pending
            </div>
          )}
        </Reveal>

        {/* Headline + capabilities */}
        <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>
          </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 URL carries an anchor (/sectors#military etc), scroll to it on mount. */
  React.useEffect(() => {
    const id = window.location.hash.replace(/^#/, "");
    if (!id) return;
    const t = setTimeout(() => {
      const el = document.getElementById(id);
      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}/>)}

    </main>
  );
};

window.PageSectors = PageSectors;
