/* Technology page — M1 specifications + four-layer software stack. */

const TechHero = () => {
  const { lang } = useT();
  const t = window.MR.tech;
  return (
    <section style={{ borderBottom: "1px solid var(--color-rule)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "88px 32px 88px" }}>
        <Reveal><span className="eyebrow">{t.kicker[lang]}</span></Reveal>
        <Reveal delay={120} as="h1" style={{
          fontFamily: "var(--font-serif)", fontWeight: 400,
          fontSize: "clamp(56px, 9vw, 120px)", lineHeight: 1.0,
          letterSpacing: "-0.025em", margin: "16px 0 32px"
        }}>
          {t.title[lang]}
        </Reveal>
        <Reveal delay={240} as="p" style={{
          fontFamily: "var(--font-serif)", fontSize: "clamp(20px, 2.2vw, 26px)",
          lineHeight: 1.4, color: "var(--color-ink)", maxWidth: 780,
          marginBottom: 16, fontWeight: 400, textWrap: "balance"
        }}>
          {t.lede[lang]}
        </Reveal>
        <Reveal delay={340}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em",
                        textTransform: "uppercase", color: "var(--color-ink-3)" }}>
            {t.preliminary[lang]}
          </span>
        </Reveal>
      </div>
    </section>
  );
};

const SpecPlate = () => {
  const { lang } = useT();
  const t = window.MR.tech;
  return (
    <section style={{ background: "var(--color-paper)", borderBottom: "1px solid var(--color-rule)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "96px 32px" }}>
        <Reveal>
          <span className="eyebrow">{t.spec.eyebrow[lang]}</span>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, marginTop: 40, alignItems: "start" }}>
          {/* Left: small schematic again */}
          <Reveal style={{ position: "sticky", top: 96 }}>
            <Schematic/>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em",
                          textTransform: "uppercase", color: "var(--color-ink-3)",
                          marginTop: 20, textAlign: "right" }}>
              MM-1 / REV. 03
            </div>
          </Reveal>

          {/* Right: spec table */}
          <Reveal delay={120}>
            <table style={{ width: "100%", borderCollapse: "collapse",
                            borderTop: "1px solid var(--color-ink)" }}>
              <tbody>
                {t.spec.rows.map((r, i) => (
                  <tr key={i} style={{ borderBottom: "1px solid var(--color-rule)" }}>
                    <td style={{ padding: "18px 0", verticalAlign: "top",
                                 fontSize: 14.5, color: "var(--color-ink-2)", width: "44%" }}>
                      {r[lang]}
                    </td>
                    <td style={{ padding: "18px 0", verticalAlign: "top",
                                 fontFamily: "var(--font-mono)", fontSize: 14,
                                 letterSpacing: "0.02em", color: "var(--color-ink)" }}>
                      {r.v}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>

            {/* Modular payload row */}
            <div style={{ marginTop: 56 }}>
              <span className="eyebrow">{t.payload.eyebrow[lang]}</span>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 0, marginTop: 16,
                            borderTop: "1px solid var(--color-rule)" }}>
                {t.payload.items.map((p, i) => (
                  <div key={i} style={{
                    flex: "1 1 auto", padding: "16px 20px 16px 0",
                    borderBottom: "1px solid var(--color-rule)",
                    fontSize: 14.5, color: "var(--color-ink)",
                    minWidth: "45%"
                  }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em",
                                   color: "var(--color-ink-3)", marginRight: 12 }}>
                      0{i + 1}
                    </span>
                    {p[lang]}
                  </div>
                ))}
              </div>
            </div>

            {/* Manufacturing line */}
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.4,
                        color: "var(--color-ink)", marginTop: 56, fontStyle: "italic",
                        textWrap: "balance", maxWidth: 580 }}>
              {t.manufacture[lang]}
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

const StackLayer = ({ layer, idx, lang }) => (
  <Reveal delay={idx * 60}>
    <div style={{
      display: "grid", gridTemplateColumns: "120px 1fr 1.6fr",
      gap: 32, padding: "48px 0",
      borderBottom: "1px solid var(--color-rule)"
    }}>
      <div>
        <div style={{ fontFamily: "var(--font-serif)", fontSize: 56,
                      lineHeight: 1, fontWeight: 400, color: "var(--color-ink-3)",
                      letterSpacing: "-0.02em" }}>
          {layer.num}
        </div>
      </div>
      <div>
        <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 400,
                     fontSize: 30, lineHeight: 1.15, letterSpacing: "-0.01em",
                     margin: "8px 0 4px", textWrap: "balance" }}>
          {lang === "ka" ? layer.ka : layer.en}
        </h3>
        <div style={{ fontSize: 14, color: "var(--color-ink-3)",
                      fontStyle: "italic" }}>
          {lang === "ka" ? layer.kaSub : layer.enSub}
        </div>
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0,
                   display: "flex", flexDirection: "column", gap: 12 }}>
        {layer.items.map((it, i) => (
          <li key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr",
                               gap: 12, fontSize: 15.5, lineHeight: 1.55,
                               color: "var(--color-ink)" }}>
            <span style={{ color: "var(--color-ink-3)", fontFamily: "var(--font-mono)",
                           fontSize: 11, letterSpacing: "0.10em", paddingTop: 4 }}>
              —
            </span>
            <span style={{ color: "var(--color-ink-2)" }}>{it[lang]}</span>
          </li>
        ))}
      </ul>
    </div>
  </Reveal>
);

const Stack = () => {
  const { lang } = useT();
  const t = window.MR.tech;
  return (
    <section style={{ padding: "120px 0 96px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px" }}>
        <Reveal>
          <span className="eyebrow">{t.stack.eyebrow[lang]}</span>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400,
                       fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.05,
                       letterSpacing: "-0.02em", margin: "16px 0 8px" }}>
            {t.stack.title[lang]}
          </h2>
          <p style={{ fontSize: 18, color: "var(--color-ink-2)", maxWidth: 540, marginBottom: 56 }}>
            {t.stack.sub[lang]}
          </p>
        </Reveal>
        <div style={{ borderTop: "1px solid var(--color-ink)" }}>
          {t.stack.layers.map((l, i) => (
            <StackLayer key={l.num} layer={l} idx={i} lang={lang}/>
          ))}
        </div>
      </div>
    </section>
  );
};

const PageTech = () => (
  <main>
    <TechHero/>
    <SpecPlate/>
    <Stack/>
  </main>
);

window.PageTech = PageTech;