// All page components: Home, AutomationPage, ServicesPage, ContactPage, BlogList, BlogPost

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoR } = React;

// ============================================================
// HOME
// ============================================================
function HomePage({ lang, setRoute, heroVariant }) {
  const t = (p) => window.t(lang, p);

  return (
    <main id="main" className="page-fade">
      <Hero variant={heroVariant} lang={lang} setRoute={setRoute} />

      <ClientLogos lang={lang} />

      {/* Problem we solve */}
      <section className="section">
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow">{t("problem.eyebrow")}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2">{t("problem.title")}</Reveal>
              <Reveal as="p" className="lede" delay={1}>{t("problem.lede")}</Reveal>
              <Reveal as="p" className="h3" delay={2} style={{ marginTop: 28, color: "var(--brand)", maxWidth: "30ch", fontFamily: "var(--font-display)" }}>
                {t("problem.tagline")}
              </Reveal>
            </div>
          </div>
          <div className="issue-list">
            {t("problem.items").map((it, i) => (
              <Reveal key={i} className="card" delay={i + 1}>
                <span className="num">0{i + 1}</span>
                <h3 className="h3" style={{ marginTop: 16 }}>{it.h}</h3>
                <p className="body" style={{ marginTop: 12 }}>{it.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* What we automate (areas) */}
      <section className="section" style={{ background: "var(--bg-sunken)" }}>
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow">{t("areas.eyebrow")}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2">{t("areas.title")}</Reveal>
              <Reveal as="p" className="lede" delay={1}>{t("areas.lede")}</Reveal>
            </div>
          </div>
          <div className="area-grid">
            {t("areas.items").map((a, i) => (
              <Reveal as="div" key={i} className="area" delay={i + 1}>
                <span className="area-num">A.0{i + 1}</span>
                <h3 className="h3">{a.h}</h3>
                <p>{a.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Business value */}
      <section className="section">
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow">{t("value.eyebrow")}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2">{t("value.title")}</Reveal>
              <Reveal as="p" className="lede" delay={1}>{t("value.lede")}</Reveal>
            </div>
          </div>
          <div className="grid-4">
            {t("value.items").map((it, i) => (
              <Reveal key={i} className="card" delay={i + 1}>
                <span className="num">→ 0{i + 1}</span>
                <h3 className="h4" style={{ marginTop: 18 }}>{it.h}</h3>
                <p className="body" style={{ marginTop: 8, fontSize: 14.5 }}>{it.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Manifest #1 — "We build systems that you own" */}
      <Manifesto lang={lang} />

      {/* Strategic automation + enables */}
      <section className="section" style={{ background: "var(--brand)", color: "var(--brand-ink)" }}>
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow" style={{ color: "color-mix(in oklab, var(--brand-ink) 60%, transparent)" }}>{t("strategic.eyebrow")}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2" style={{ color: "var(--brand-ink)" }}>{t("strategic.title")}</Reveal>
            </div>
          </div>
          <div className="grid-4">
            {t("strategic.items").map((it, i) => (
              <Reveal as="div" key={i} delay={i + 1} style={{ borderTop: "1px solid color-mix(in oklab, var(--brand-ink) 20%, transparent)", paddingTop: 24 }}>
                <span className="num" style={{ color: "color-mix(in oklab, var(--brand-ink) 50%, transparent)", fontFamily: "var(--font-mono)" }}>0{i + 1}</span>
                <h3 className="h4" style={{ marginTop: 14, color: "var(--brand-ink)" }}>{it.h}</h3>
                <p className="body" style={{ marginTop: 8, fontSize: 14.5, color: "color-mix(in oklab, var(--brand-ink) 78%, transparent)" }}>{it.p}</p>
              </Reveal>
            ))}
          </div>

          {/* enables list */}
          <Reveal style={{ marginTop: 80, display: "grid", gridTemplateColumns: "minmax(0, 220px) minmax(0, 1fr)", gap: 64 }}>
            <span className="eyebrow" style={{ color: "color-mix(in oklab, var(--brand-ink) 60%, transparent)" }}>{t("strategic.enables.eyebrow")}</span>
            <ul style={{ padding: 0, listStyle: "none", margin: 0, columnCount: 2, columnGap: 48 }}>
              {t("strategic.enables.items").map((x, i) => (
                <li key={i} style={{
                  fontFamily: "var(--font-display)",
                  fontSize: "clamp(20px, 1.8vw, 26px)",
                  lineHeight: 1.3,
                  letterSpacing: "-0.015em",
                  color: "var(--brand-ink)",
                  borderTop: "1px solid color-mix(in oklab, var(--brand-ink) 18%, transparent)",
                  padding: "16px 0",
                  breakInside: "avoid",
                }}>
                  <span style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 11,
                    color: "color-mix(in oklab, var(--brand-ink) 50%, transparent)",
                    letterSpacing: "0.08em",
                    marginRight: 14,
                  }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  {x}
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
      </section>

      {/* People */}
      <section className="section">
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow">{t("people.eyebrow")}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2" style={{ maxWidth: "24ch" }}>{t("people.title")}</Reveal>
              <Reveal as="p" className="lede" delay={1}>{t("people.lede")}</Reveal>
            </div>
          </div>
          <div className="grid-4">
            {t("people.items").map((it, i) => (
              <Reveal key={i} className="card" delay={i + 1}>
                <span className="num">/{String(i + 1).padStart(2, "0")}</span>
                <h3 className="h4" style={{ marginTop: 18 }}>{it.h}</h3>
                <p className="body" style={{ marginTop: 8, fontSize: 14.5 }}>{it.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Event-driven automation — animated */}
      <section className="section" style={{ background: "var(--bg-sunken)" }}>
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow">{t("eda.eyebrow")}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2">{t("eda.title")}</Reveal>
              <Reveal as="p" className="lede" delay={1}>{t("eda.lede")}</Reveal>
            </div>
          </div>

          <Reveal>
            <EDAVisual lang={lang} />
          </Reveal>

          <Reveal as="p" className="h3" delay={1} style={{ marginTop: 48, textAlign: "center", maxWidth: "30ch", marginInline: "auto", color: "var(--brand)" }}>
            {t("eda.bottom")}
          </Reveal>
        </div>
      </section>

      {/* Security & Compliance */}
      <section className="section">
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow">{t("security.eyebrow")}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2">{t("security.title")}</Reveal>
            </div>
          </div>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {t("security.items").map((it, i) => (
              <Reveal as="div" key={i} delay={i + 1} style={{
                display: "grid",
                gridTemplateColumns: "60px minmax(0, 360px) minmax(0, 1fr)",
                gap: 32,
                padding: "24px 0",
                borderBottom: "1px solid var(--line)",
                alignItems: "baseline",
              }}>
                <span className="num" style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)" }}>S.0{i + 1}</span>
                <h3 className="h3">{it.h}</h3>
                <p className="body" style={{ maxWidth: "60ch" }}>{it.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Partners — Red Hat / F5 / Veeam / NetBox Labs */}
      <Partners lang={lang} />

      {/* ROI Calculator — disabled until calibration & QA (still wired up; just not rendered). */}
      {/* <ROICalculator lang={lang} setRoute={setRoute} /> */}

      {/* Team */}
      <section className="section" style={{ background: "var(--bg-sunken)" }}>
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow">{t("team.eyebrow")}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2">{t("team.title")}</Reveal>
              <Reveal as="p" className="lede" delay={1}>{t("team.lede")}</Reveal>
            </div>
          </div>
          <div className="team-grid">
            {t("team.members").map((m, i) => {
              const initials = m.name.split(" ").map(s => s[0]).join("");
              const hasPhoto = !!m.photo;
              return (
                <Reveal as="div" key={i} className="team-card" delay={i + 1}>
                  <div className={`avatar ${hasPhoto ? "" : "no-photo"}`}>
                    {hasPhoto ? (
                      <img
                        src={m.photo}
                        alt={m.name}
                        loading="lazy"
                        onError={(e) => {
                          // Fallback to initials if photo missing
                          e.target.style.display = "none";
                          e.target.parentElement.classList.add("no-photo");
                          e.target.parentElement.textContent = initials;
                        }}
                      />
                    ) : initials}
                  </div>
                  <div className="name-row">
                    <div>
                      <div className="name">{m.name}</div>
                      <div className="role">{m.role}</div>
                    </div>
                    {m.linkedin && (
                      <a
                        href={m.linkedin}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="li-link"
                        aria-label={`${m.name} on LinkedIn`}
                        title={`${m.name} on LinkedIn`}
                      >
                        <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.601 0 4.267 2.37 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zM7.119 20.452H3.554V9h3.565v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                        </svg>
                        <span>{t("team.linkedinLabel") || "LinkedIn profile"}</span>
                      </a>
                    )}
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      <Manifest2 lang={lang} />
      <PhilosophySection lang={lang} />

      <CTABanner lang={lang} setRoute={setRoute} />
    </main>
  );
}

// === EDA visual: triggers → engine → actions, animated ===
function EDAVisual({ lang }) {
  const t = (p) => window.t(lang, p);
  const [tick, setTick] = useStateP(0);
  useEffectP(() => {
    const id = setInterval(() => setTick((x) => (x + 1) % 4), 1200);
    return () => clearInterval(id);
  }, []);
  const triggers = t("eda.triggers.items");
  const actions = t("eda.actions.items");

  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)",
      gap: 28,
      alignItems: "center",
      background: "var(--bg-elev)",
      border: "1px solid var(--line)",
      borderRadius: "var(--radius-lg)",
      padding: 32,
      marginTop: 32,
    }}>
      <div>
        <span className="eyebrow">{t("eda.triggers.h")}</span>
        <ul style={{ padding: 0, listStyle: "none", margin: "16px 0 0" }}>
          {triggers.map((x, i) => {
            const active = (tick === 0) && i === (Date.now() / 1200 | 0) % triggers.length;
            return (
              <li key={i} style={{
                padding: "12px 14px",
                borderRadius: 6,
                marginTop: i === 0 ? 0 : 6,
                background: active ? "var(--mint)" : "var(--bg-sunken)",
                border: "1px solid var(--line-2)",
                fontSize: 14,
                fontFamily: "var(--font-mono)",
                color: "var(--ink-2)",
                transition: "all .3s ease",
                display: "flex",
                gap: 10,
                alignItems: "center",
              }}>
                <span style={{ width: 8, height: 8, borderRadius: 4, background: active ? "var(--accent)" : "var(--ink-4)" }} />
                {x}
              </li>
            );
          })}
        </ul>
      </div>

      {/* Engine */}
      <div style={{ textAlign: "center", padding: "0 8px" }}>
        <svg width="140" height="140" viewBox="0 0 140 140">
          <circle cx="70" cy="70" r="60" fill="none" stroke="var(--line)" />
          <circle cx="70" cy="70" r="60" fill="none" stroke="var(--brand)" strokeDasharray="6,8"
            transform="rotate(0 70 70)">
            <animateTransform attributeName="transform" type="rotate" from="0 70 70" to="360 70 70" dur="9s" repeatCount="indefinite" />
          </circle>
          <circle cx="70" cy="70" r="36" fill="var(--brand)" />
          <text x="70" y="68" textAnchor="middle" fontSize="11" fontFamily="var(--font-mono)" fill="var(--brand-ink)" letterSpacing="0.08em">AAP</text>
          <text x="70" y="84" textAnchor="middle" fontSize="9" fontFamily="var(--font-mono)" fill="color-mix(in oklab, var(--brand-ink) 70%, transparent)">engine</text>
        </svg>
        <div className="tiny" style={{ fontFamily: "var(--font-mono)", marginTop: 4 }}>event-driven</div>
      </div>

      <div>
        <span className="eyebrow">{t("eda.actions.h")}</span>
        <ul style={{ padding: 0, listStyle: "none", margin: "16px 0 0" }}>
          {actions.map((x, i) => {
            const active = (tick >= 2) && i === (Date.now() / 1200 | 0) % actions.length;
            return (
              <li key={i} style={{
                padding: "12px 14px",
                borderRadius: 6,
                marginTop: i === 0 ? 0 : 6,
                background: active ? "var(--mint)" : "var(--bg-sunken)",
                border: "1px solid var(--line-2)",
                fontSize: 14,
                fontFamily: "var(--font-mono)",
                color: "var(--ink-2)",
                transition: "all .3s ease",
                display: "flex",
                gap: 10,
                alignItems: "center",
              }}>
                <span style={{ color: "var(--good)" }}>→</span>
                {x}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}

// ============================================================
// AUTOMATION PAGE (products)
// ============================================================
function AutomationPage({ lang, setRoute, anchor }) {
  const t = (p) => window.t(lang, p);
  const products = t("products.items");

  useEffectP(() => {
    if (!anchor) return;
    const el = document.getElementById(anchor);
    if (el) setTimeout(() => window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" }), 120);
  }, [anchor]);

  return (
    <main id="main" className="page-fade">
      <section className="page-header">
        <div className="container-wide">
          <span className="eyebrow">{t("products.eyebrow")}</span>
          <h1 className="h1">{t("automation.h1")}</h1>
          <p className="lede">{t("automation.lede")}</p>

          <div style={{ display: "flex", gap: 10, marginTop: 36, flexWrap: "wrap" }}>
            {products.map((p, i) => (
              <a
                key={p.id}
                href={`#${p.id}`}
                onClick={(e) => {
                  e.preventDefault();
                  const el = document.getElementById(p.id);
                  if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
                }}
                className="tag"
                style={{ padding: "8px 16px", cursor: "pointer", color: "var(--ink-2)" }}
              >
                <span className="dot" />
                {String(i + 1).padStart(2, "0")} · {p.kicker}
              </a>
            ))}
          </div>
        </div>
      </section>

      {products.map((p, i) => (
        <section
          key={p.id}
          id={p.id}
          className="section"
          style={{ background: i % 2 === 0 ? "var(--bg)" : "var(--bg-sunken)" }}
        >
          <div className="container-wide">
            <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.4fr) minmax(0, 1fr)", gap: 64 }}>
              <div style={{ position: "sticky", top: 100, alignSelf: "start" }}>
                <div className="step-num" style={{ fontSize: 88 }}>{String(i + 1).padStart(2, "0")}</div>
                <div className="eyebrow" style={{ marginTop: 12 }}>{p.kicker}</div>
                <div className="tiny" style={{ marginTop: 8, color: "var(--ink-3)" }}>{p.tagline}</div>
              </div>
              <div>
                <Reveal as="h2" className="h2" style={{ maxWidth: "22ch" }}>{p.h}</Reveal>
                <Reveal as="p" className="lede" delay={1} style={{ marginTop: 20, maxWidth: "62ch" }}>{p.p}</Reveal>

                {p.whyP && (
                  <Reveal delay={2} style={{ marginTop: 40, padding: "24px 28px", background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)" }}>
                    <span className="eyebrow">{p.why}</span>
                    <p className="body" style={{ marginTop: 12 }}>{p.whyP}</p>
                  </Reveal>
                )}

                {p.whyList && (
                  <Reveal delay={2} style={{ marginTop: 40, padding: "24px 28px", background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)" }}>
                    <span className="eyebrow">{p.why}</span>
                    <ul style={{ padding: 0, listStyle: "none", margin: "16px 0 0" }}>
                      {p.whyList.map((c, j) => (
                        <li key={j} style={{
                          padding: "10px 0",
                          borderTop: j === 0 ? 0 : "1px dashed var(--line-2)",
                          color: "var(--ink-2)",
                          fontSize: 15,
                          display: "flex",
                          gap: 12,
                          alignItems: "baseline",
                        }}>
                          <span style={{ color: "var(--accent)", fontFamily: "var(--font-mono)" }}>✓</span>
                          <span>{c}</span>
                        </li>
                      ))}
                    </ul>
                  </Reveal>
                )}

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, marginTop: 48, borderTop: "1px solid var(--line)", paddingTop: 36 }}>
                  <Reveal delay={3}>
                    <span className="eyebrow">{p.covers}</span>
                    <ul style={{ padding: 0, listStyle: "none", margin: "16px 0 0" }}>
                      {p.coversList.map((c, j) => (
                        <li key={j} style={{
                          padding: "12px 0",
                          borderTop: j === 0 ? 0 : "1px dashed var(--line-2)",
                          color: "var(--ink-2)",
                          fontSize: 15,
                        }}>
                          <span style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)", marginRight: 12 }}>{String(j + 1).padStart(2, "0")}</span>
                          {c}
                        </li>
                      ))}
                    </ul>
                  </Reveal>
                  <Reveal delay={4}>
                    <span className="eyebrow">{p.outputs}</span>
                    <ul style={{ padding: 0, listStyle: "none", margin: "16px 0 0" }}>
                      {p.outputsList.map((c, j) => (
                        <li key={j} style={{
                          padding: "12px 0",
                          borderTop: j === 0 ? 0 : "1px dashed var(--line-2)",
                          color: "var(--ink-2)",
                          fontSize: 15,
                        }}>
                          <span style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)", marginRight: 12 }}>→</span>
                          {c}
                        </li>
                      ))}
                    </ul>
                  </Reveal>
                </div>

                <Reveal delay={5} style={{ marginTop: 48 }}>
                  {i === 0 && <AuditVisual />}
                  {i === 1 && <DeployVisual />}
                  {i === 2 && <OpsVisual />}
                </Reveal>

                <Reveal delay={6} style={{ marginTop: 32 }}>
                  <button className="btn btn-brand" onClick={() => setRoute({ name: "contact" })}>
                    {lang === "cs" ? "Domluvit konzultaci" : lang === "de" ? "Beratung vereinbaren" : "Book a consultation"} <span className="arrow">→</span>
                  </button>
                </Reveal>
              </div>
            </div>
          </div>
        </section>
      ))}

      <Pricing lang={lang} setRoute={setRoute} />
      <TrustWall lang={lang} />

      <CTABanner lang={lang} setRoute={setRoute} />
    </main>
  );
}

// Audit visual: heat map
function AuditVisual() {
  const cells = Array.from({ length: 7 * 5 }, (_, i) => ((i * 31) % 7 + Math.floor(i / 7)) % 5);
  return (
    <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: 28 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16, alignItems: "center" }}>
        <span className="eyebrow">Process heat-map (sample)</span>
        <span className="tiny" style={{ fontFamily: "var(--font-mono)" }}>cold → hot · automation potential</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "140px repeat(7, 1fr)", gap: 4, alignItems: "center" }}>
        <div></div>
        {["Po", "Út", "St", "Čt", "Pá", "So", "Ne"].map((d) => (
          <div key={d} className="tiny" style={{ textAlign: "center", fontFamily: "var(--font-mono)", letterSpacing: "0.08em" }}>{d}</div>
        ))}
        {["Patching", "Provisioning", "Firewall změny", "Access mgmt", "Cert renewal"].map((row, r) => (
          <React.Fragment key={row}>
            <div className="tiny" style={{ fontFamily: "var(--font-sans)", color: "var(--ink-2)" }}>{row}</div>
            {Array.from({ length: 7 }).map((_, c) => {
              const heat = cells[r * 7 + c];
              const bg = [
                "color-mix(in oklab, var(--brand) 5%, transparent)",
                "color-mix(in oklab, var(--brand) 14%, transparent)",
                "color-mix(in oklab, var(--brand) 28%, transparent)",
                "color-mix(in oklab, var(--brand) 48%, transparent)",
                "color-mix(in oklab, var(--brand) 70%, transparent)",
              ][heat];
              return <div key={c} style={{ aspectRatio: "1 / 1", background: bg, borderRadius: 4, border: "1px solid var(--line-2)" }} />;
            })}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function DeployVisual() {
  const stages = ["plan", "playbook", "stage", "test", "deploy", "verify"];
  return (
    <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: 28 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16, alignItems: "center" }}>
        <span className="eyebrow">Deployment pipeline</span>
        <span className="tiny" style={{ fontFamily: "var(--font-mono)" }}>Day 0 → Day 1 → Day 2</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${stages.length}, 1fr)`, gap: 8 }}>
        {stages.map((s, i) => (
          <div key={s} style={{ padding: "16px 12px", background: "var(--bg-sunken)", border: "1px solid var(--line)", borderRadius: 6, position: "relative" }}>
            <div className="tiny" style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)" }}>{String(i + 1).padStart(2, "0")}</div>
            <div style={{ fontWeight: 500, fontSize: 14, marginTop: 4 }}>{s}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--good)", marginTop: 8 }}>✓ idempotent</div>
            {i < stages.length - 1 && <div style={{ position: "absolute", right: -8, top: "50%", width: 8, height: 1, background: "var(--ink-4)" }} />}
          </div>
        ))}
      </div>
    </div>
  );
}

function OpsVisual() {
  const events = [
    { t: "03:14:22", l: "patch · web-fleet · ok", k: "ok" },
    { t: "03:14:48", l: "cert-rotation · *.api.bank · ok", k: "ok" },
    { t: "03:15:01", l: "fw-rule · dmz-egress · approved", k: "ok" },
    { t: "03:15:33", l: "EDA · cpu-spike on db-04 · remediated", k: "warn" },
    { t: "03:16:09", l: "compliance scan · CIS lvl 1 · pass", k: "ok" },
  ];
  return (
    <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "16px 24px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--line-2)" }}>
        <span className="eyebrow">Operations stream · last 24 h</span>
        <span className="tag"><span className="dot" style={{ background: "var(--good)" }} />all systems normal</span>
      </div>
      <div>
        {events.map((e, i) => (
          <div key={i} style={{ padding: "14px 24px", display: "grid", gridTemplateColumns: "100px 1fr auto", gap: 16, alignItems: "center", borderTop: i === 0 ? 0 : "1px dashed var(--line-2)", fontFamily: "var(--font-mono)", fontSize: 13 }}>
            <span style={{ color: "var(--ink-4)" }}>{e.t}</span>
            <span style={{ color: "var(--ink-2)" }}>{e.l}</span>
            <span style={{ color: e.k === "ok" ? "var(--good)" : "var(--warn)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em" }}>{e.k}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// SERVICES PAGE (supporting services + technical competences)
// ============================================================
function ServicesPage({ lang, setRoute, anchor }) {
  const t = (p) => window.t(lang, p);
  const arch = t("services.architecture");
  const cons = t("services.consulting");
  const comp = t("services.competence");

  useEffectP(() => {
    if (!anchor) return;
    const el = document.getElementById(anchor);
    if (el) setTimeout(() => window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" }), 120);
  }, [anchor]);

  return (
    <main id="main" className="page-fade">
      <section className="page-header">
        <div className="container-wide">
          <span className="eyebrow">{t("services.eyebrow")}</span>
          <h1 className="h1">{t("services.h1")}</h1>
          <p className="lede">{t("services.lede")}</p>
        </div>
      </section>

      {/* IT Architecture */}
      <section id="it-architecture" className="section">
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.4fr) minmax(0, 1fr)", gap: 64 }}>
            <div style={{ position: "sticky", top: 100, alignSelf: "start" }}>
              <div className="step-num" style={{ fontSize: 68 }}>01</div>
              <div className="eyebrow" style={{ marginTop: 12 }}>service</div>
            </div>
            <div>
              <Reveal as="h2" className="h2" style={{ maxWidth: "20ch" }}>{arch.h}</Reveal>
              <Reveal as="p" className="lede" delay={1} style={{ marginTop: 16, maxWidth: "62ch" }}>{arch.p}</Reveal>
              <Reveal delay={2} style={{ marginTop: 32 }}>
                <ul style={{ padding: 0, listStyle: "none", margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--line)" }}>
                  {arch.items.map((b, j) => (
                    <li key={j} style={{
                      padding: "20px 24px 20px 0",
                      borderBottom: "1px solid var(--line)",
                      borderRight: j % 2 === 0 ? "1px solid var(--line)" : 0,
                      paddingLeft: j % 2 === 1 ? 24 : 0,
                      fontSize: 16,
                      color: "var(--ink)",
                      fontWeight: 500,
                      display: "flex",
                      gap: 16,
                      alignItems: "center",
                    }}>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)" }}>0{j + 1}</span>
                      {b}
                    </li>
                  ))}
                </ul>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Consulting */}
      <section id="consulting" className="section" style={{ background: "var(--bg-sunken)" }}>
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.4fr) minmax(0, 1fr)", gap: 64 }}>
            <div style={{ position: "sticky", top: 100, alignSelf: "start" }}>
              <div className="step-num" style={{ fontSize: 68 }}>02</div>
              <div className="eyebrow" style={{ marginTop: 12 }}>service</div>
            </div>
            <div>
              <Reveal as="h2" className="h2" style={{ maxWidth: "20ch" }}>{cons.h}</Reveal>
              <Reveal as="p" className="lede" delay={1} style={{ marginTop: 16, maxWidth: "62ch" }}>{cons.p}</Reveal>
              <Reveal delay={2} style={{ marginTop: 32 }}>
                <div className="grid-3">
                  {cons.items.map((it, j) => (
                    <div key={j} className="card">
                      <span className="num">0{j + 1}</span>
                      <h3 className="h4" style={{ marginTop: 16 }}>{it.h}</h3>
                      <p className="body" style={{ marginTop: 8, fontSize: 14.5 }}>{it.p}</p>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Technical competences */}
      <section id="technical" className="section">
        <div className="container-wide">
          <div className="section-head">
            <div className="sticky-eyebrow">
              <span className="eyebrow">{comp.eyebrow}</span>
            </div>
            <div className="right">
              <Reveal as="h2" className="h2">{comp.h}</Reveal>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--line)" }}>
            {comp.items.map((it, j) => (
              <Reveal as="div" key={j} delay={j + 1} style={{
                display: "grid",
                gridTemplateColumns: "minmax(0, 0.6fr) minmax(0, 1fr)",
                gap: 48,
                padding: "40px 0",
                borderBottom: "1px solid var(--line)",
              }}>
                <div>
                  <span className="num" style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)" }}>T.0{j + 1}</span>
                  <h3 className="h3" style={{ marginTop: 12, maxWidth: "20ch" }}>{it.h}</h3>
                  <p className="body" style={{ marginTop: 12, maxWidth: "48ch", color: "var(--ink-3)" }}>{it.p}</p>
                </div>
                <ul style={{ padding: 0, listStyle: "none", margin: 0 }}>
                  {it.bullets.map((b, k) => (
                    <li key={k} style={{
                      padding: "10px 0",
                      borderTop: k === 0 ? "1px solid var(--line)" : "1px dashed var(--line-2)",
                      fontSize: 15,
                      color: "var(--ink-2)",
                      display: "flex",
                      gap: 14,
                    }}>
                      <span style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)" }}>{String(k + 1).padStart(2, "0")}</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CTABanner lang={lang} setRoute={setRoute} />
    </main>
  );
}

// ============================================================
// CONTACT PAGE
// ============================================================
function ContactPage({ lang, setRoute }) {
  const t = (p) => window.t(lang, p);
  // Read ROI calculator pre-fill (if any) from sessionStorage
  const prefill = useMemoR(() => {
    try {
      const raw = sessionStorage.getItem("wa.contact.prefill");
      if (raw) {
        sessionStorage.removeItem("wa.contact.prefill");
        return JSON.parse(raw);
      }
    } catch (e) {}
    return null;
  }, []);

  const [form, setForm] = useStateP({
    name: "",
    company: "",
    email: "",
    role: "",
    topic: prefill?.topic || t("contact.topics")[0],
    message: prefill?.message || "",
  });
  const [errors, setErrors] = useStateP({});
  const [status, setStatus] = useStateP("idle");

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = lang === "cs" ? "vyplňte" : lang === "de" ? "Pflicht" : "required";
    if (!form.email.trim()) er.email = lang === "cs" ? "vyplňte" : lang === "de" ? "Pflicht" : "required";
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) er.email = lang === "cs" ? "neplatný formát" : lang === "de" ? "ungültig" : "invalid";
    if (!form.message.trim() || form.message.trim().length < 10) er.message = lang === "cs" ? "min. 10 znaků" : lang === "de" ? "min. 10 Zeichen" : "min 10 chars";
    setErrors(er);
    return Object.keys(er).length === 0;
  };

  const submit = (e) => {
    e.preventDefault();
    if (!validate()) return;
    setStatus("sending");
    setTimeout(() => setStatus("success"), 900);
  };

  return (
    <main id="main" className="page-fade">
      <section className="page-header">
        <div className="container-wide">
          <span className="eyebrow">{t("nav.contact")}</span>
          <h1 className="h1">{t("contact.h1")}</h1>
          <p className="lede">{t("contact.lede")}</p>
        </div>
      </section>

      {/* Call booker — primary path */}
      <section className="section" style={{ paddingBottom: 24 }}>
        <div className="container-wide">
          <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 20, flexWrap: "wrap" }}>
            <span className="eyebrow">{t("callBooker.eyebrow")}</span>
            <hr className="hr" style={{ flex: 1 }} />
          </div>
          <Reveal>
            <CallBooker lang={lang} />
          </Reveal>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 24 }}>
        <div className="container-wide">
          <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 32, flexWrap: "wrap" }}>
            <span className="eyebrow">
              {lang === "cs" ? "Nebo pošlete async zprávu" : lang === "de" ? "Oder senden Sie eine async Nachricht" : "Or send an async message"}
            </span>
            <hr className="hr" style={{ flex: 1 }} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.3fr) minmax(0, 1fr)", gap: 80 }}>
            <Reveal>
              {status === "success" ? (
                <div className="form-success">
                  <h3 className="h3" style={{ color: "var(--good)", marginBottom: 8 }}>✓ {t("contact.success")}</h3>
                  <p className="body" style={{ color: "var(--ink-2)" }}>
                    {lang === "cs" && "Mezitím se klidně podívejte na blog nebo na to, co automatizujeme."}
                    {lang === "en" && "In the meantime, feel free to browse the blog or see what we automate."}
                    {lang === "de" && "In der Zwischenzeit stöbern Sie gerne im Blog."}
                  </p>
                  <div style={{ marginTop: 20, display: "flex", gap: 12 }}>
                    <button className="btn btn-ghost" onClick={() => setRoute({ name: "blog" })}>{t("nav.blog")} →</button>
                    <button className="btn btn-ghost" onClick={() => setRoute({ name: "home" })}>{t("nav.home")}</button>
                  </div>
                </div>
              ) : (
                <form onSubmit={submit} noValidate>
                  <div className="form-row">
                    <div className="form-group">
                      <label>{t("contact.fields.name")} <span className="req">*</span></label>
                      <input className="form-input" value={form.name} onChange={update("name")} autoComplete="name" />
                      {errors.name && <span className="form-error">{errors.name}</span>}
                    </div>
                    <div className="form-group">
                      <label>{t("contact.fields.company")}</label>
                      <input className="form-input" value={form.company} onChange={update("company")} autoComplete="organization" />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="form-group">
                      <label>{t("contact.fields.email")} <span className="req">*</span></label>
                      <input className="form-input" type="email" value={form.email} onChange={update("email")} autoComplete="email" />
                      {errors.email && <span className="form-error">{errors.email}</span>}
                    </div>
                    <div className="form-group">
                      <label>{t("contact.fields.role")}</label>
                      <input className="form-input" value={form.role} onChange={update("role")} />
                    </div>
                  </div>
                  <div className="form-group">
                    <label>{t("contact.fields.topic")}</label>
                    <select className="form-select" value={form.topic} onChange={update("topic")}>
                      {t("contact.topics").map((x) => <option key={x}>{x}</option>)}
                    </select>
                  </div>
                  <div className="form-group">
                    <label>{t("contact.fields.message")} <span className="req">*</span></label>
                    <textarea
                      className="form-textarea"
                      value={form.message}
                      onChange={update("message")}
                      placeholder={
                        lang === "cs" ? "Stručně popište, na čem byste rádi pracovali. Co automatizovat, jaké prostředí, jaké blokátory."
                        : lang === "en" ? "Briefly describe what you'd like to work on. What to automate, what environment, what blockers."
                        : "Beschreiben Sie kurz, woran Sie arbeiten möchten."
                      }
                    />
                    {errors.message && <span className="form-error">{errors.message}</span>}
                  </div>
                  <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 12, flexWrap: "wrap" }}>
                    <button type="submit" className="btn btn-brand" disabled={status === "sending"}>
                      {status === "sending" ? t("contact.sending") : t("contact.send")}
                      {status !== "sending" && <span className="arrow">→</span>}
                    </button>
                    <span className="tiny" style={{ color: "var(--ink-3)" }}>{t("contact.gdpr")}</span>
                  </div>
                </form>
              )}
            </Reveal>

            <Reveal delay={1}>
              <div style={{
                background: "var(--bg-sunken)",
                border: "1px solid var(--line)",
                borderRadius: "var(--radius-lg)",
                padding: 32,
                position: "sticky",
                top: 100,
              }}>
                <span className="eyebrow">{t("contact.infoTitle")}</span>
                <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 16 }}>
                  <div>
                    <div className="tiny" style={{ color: "var(--ink-3)" }}>E-mail</div>
                    <a href="mailto:hello@weautomate.cz" style={{ fontSize: 16, fontFamily: "var(--font-mono)" }}>hello@weautomate.cz</a>
                  </div>
                  <div>
                    <div className="tiny" style={{ color: "var(--ink-3)" }}>LinkedIn</div>
                    <a href="https://www.linkedin.com/company/weautomate-1" target="_blank" rel="noreferrer" style={{ fontSize: 16, fontFamily: "var(--font-mono)" }}>weautomate-1</a>
                  </div>
                  <div>
                    <div className="tiny" style={{ color: "var(--ink-3)" }}>{lang === "cs" ? "Adresa" : lang === "de" ? "Adresse" : "Location"}</div>
                    <div style={{ fontSize: 16 }}>{t("contact.location")}</div>
                  </div>
                </div>

                <hr className="hr" style={{ margin: "32px 0" }} />

                <span className="eyebrow">{t("contact.expect")}</span>
                <ul style={{ padding: 0, listStyle: "none", margin: "16px 0 0" }}>
                  {t("contact.expectList").map((x, i) => (
                    <li key={i} style={{
                      fontSize: 14,
                      padding: "10px 0",
                      borderTop: i === 0 ? 0 : "1px dashed var(--line-2)",
                      color: "var(--ink-2)",
                      display: "flex",
                      gap: 10,
                    }}>
                      <span style={{ color: "var(--good)", fontFamily: "var(--font-mono)" }}>✓</span>
                      <span>{x}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// BLOG LIST
// ============================================================
function BlogList({ lang, setRoute }) {
  const t = (p) => window.t(lang, p);
  const posts = window.__POSTS[lang] || window.__POSTS.en;
  const dateFmt = (d) => {
    const dt = new Date(d);
    const m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    return `${m[dt.getMonth()]} ${dt.getDate()}, ${dt.getFullYear()}`;
  };

  return (
    <main id="main" className="page-fade">
      <section className="page-header">
        <div className="container-wide">
          <span className="eyebrow">{t("nav.blog")}</span>
          <h1 className="h1">{t("blog.h1")}</h1>
          <p className="lede">{t("blog.lede")}</p>
        </div>
      </section>

      <section className="section">
        <div className="container-wide">
          <Reveal>
            <div
              onClick={() => setRoute({ name: "post", slug: posts[0].slug })}
              style={{
                cursor: "pointer",
                display: "grid",
                gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)",
                gap: 48,
                paddingBottom: 56,
                borderBottom: "1px solid var(--line)",
                marginBottom: 8,
              }}
            >
              <div className="blog-cover" style={{ aspectRatio: "4/3" }}>
                <BlogCoverArt seed={0} />
              </div>
              <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div className="meta" style={{ display: "flex", gap: 16, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em" }}>
                  <span>{posts[0].tag}</span>
                  <span>·</span>
                  <span>{dateFmt(posts[0].date)}</span>
                  <span>·</span>
                  <span>{posts[0].read} {t("blog.readTime")}</span>
                </div>
                <h2 className="h2" style={{ marginTop: 16, maxWidth: "22ch" }}>{posts[0].title}</h2>
                <p className="lede" style={{ marginTop: 16, maxWidth: "56ch" }}>{posts[0].excerpt}</p>
                <div style={{ marginTop: 24 }}>
                  <span className="btn btn-ghost" style={{ pointerEvents: "none" }}>
                    {t("blog.readMore")} <span className="arrow">→</span>
                  </span>
                </div>
              </div>
            </div>
          </Reveal>

          <div className="blog-list">
            {posts.slice(1).map((p, i) => (
              <Reveal
                as="div"
                key={p.slug}
                className="blog-card"
                delay={i + 1}
                onClick={() => setRoute({ name: "post", slug: p.slug })}
              >
                <div className="meta">
                  <span>{p.tag}</span>
                  <span>·</span>
                  <span>{dateFmt(p.date)}</span>
                  <span>·</span>
                  <span>{p.read} {t("blog.readTime")}</span>
                </div>
                <h3 className="h3" style={{ maxWidth: "24ch" }}>{p.title}</h3>
                <p className="body" style={{ maxWidth: "52ch" }}>{p.excerpt}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function BlogCoverArt({ seed = 0 }) {
  const variants = [
    (<svg key={0} viewBox="0 0 400 300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill="var(--bg-sunken)" />
      {Array.from({ length: 14 }).map((_, i) => (
        <line key={i} x1={i * 30} y1="0" x2={i * 30 + 60} y2="300" stroke="var(--line)" />
      ))}
      <circle cx="280" cy="100" r="60" fill="var(--brand)" opacity="0.18" />
      <circle cx="280" cy="100" r="6" fill="var(--accent)" />
      <text x="32" y="270" fontFamily="var(--font-mono)" fontSize="11" fill="var(--ink-3)" letterSpacing="0.1em">AUDIT</text>
    </svg>),
    (<svg key={1} viewBox="0 0 400 300" width="100%" height="100%">
      <rect width="400" height="300" fill="var(--bg-sunken)" />
      {Array.from({ length: 10 }).map((_, i) => (
        <rect key={i} x={20 + i * 38} y={130} width="20" height={i * 12 + 8} fill="var(--brand)" opacity={0.3 + (i / 30)} />
      ))}
      <text x="32" y="270" fontFamily="var(--font-mono)" fontSize="11" fill="var(--ink-3)" letterSpacing="0.1em">EDA</text>
    </svg>),
    (<svg key={2} viewBox="0 0 400 300" width="100%" height="100%">
      <rect width="400" height="300" fill="var(--bg-sunken)" />
      <path d="M0,150 Q100,80 200,150 T400,150" stroke="var(--brand)" strokeWidth="2" fill="none" />
      <path d="M0,180 Q100,250 200,180 T400,180" stroke="var(--accent)" strokeWidth="2" fill="none" opacity="0.6" />
      <text x="32" y="270" fontFamily="var(--font-mono)" fontSize="11" fill="var(--ink-3)" letterSpacing="0.1em">LOCK-IN</text>
    </svg>),
    (<svg key={3} viewBox="0 0 400 300" width="100%" height="100%">
      <rect width="400" height="300" fill="var(--bg-sunken)" />
      {Array.from({ length: 6 }).map((_, r) =>
        Array.from({ length: 8 }).map((_, c) => (
          <rect key={`${r}-${c}`} x={20 + c * 46} y={20 + r * 42} width="38" height="34" fill={(r + c) % 3 === 0 ? "var(--brand)" : "var(--bg-elev)"} stroke="var(--line)" opacity={(r + c) % 3 === 0 ? 0.7 : 1} />
        ))
      )}
      <text x="32" y="290" fontFamily="var(--font-mono)" fontSize="11" fill="var(--ink-3)" letterSpacing="0.1em">F5</text>
    </svg>),
    (<svg key={4} viewBox="0 0 400 300" width="100%" height="100%">
      <rect width="400" height="300" fill="var(--bg-sunken)" />
      <circle cx="200" cy="150" r="80" fill="none" stroke="var(--brand)" strokeWidth="1" opacity="0.4" />
      <circle cx="200" cy="150" r="50" fill="none" stroke="var(--brand)" strokeWidth="1" opacity="0.7" />
      <circle cx="200" cy="150" r="22" fill="var(--brand)" />
      <circle cx="200" cy="150" r="4" fill="var(--accent)" />
      <text x="32" y="270" fontFamily="var(--font-mono)" fontSize="11" fill="var(--ink-3)" letterSpacing="0.1em">AI</text>
    </svg>),
    (<svg key={5} viewBox="0 0 400 300" width="100%" height="100%">
      <rect width="400" height="300" fill="var(--bg-sunken)" />
      <path d="M50,80 L350,80 M50,150 L350,150 M50,220 L350,220" stroke="var(--line)" strokeDasharray="3,4" />
      <circle cx="100" cy="80" r="8" fill="var(--brand)" />
      <circle cx="200" cy="150" r="8" fill="var(--brand)" />
      <circle cx="300" cy="220" r="8" fill="var(--accent)" />
      <text x="32" y="270" fontFamily="var(--font-mono)" fontSize="11" fill="var(--ink-3)" letterSpacing="0.1em">TEAM</text>
    </svg>),
  ];
  return variants[seed % variants.length];
}

// ============================================================
// BLOG POST
// ============================================================
function BlogPost({ lang, setRoute, slug }) {
  const t = (p) => window.t(lang, p);
  const posts = window.__POSTS[lang] || window.__POSTS.en;
  const idx = Math.max(0, posts.findIndex((p) => p.slug === slug));
  const post = posts[idx] || posts[0];
  // Lookup body: per-slug per-lang override > per-lang default > en default
  const bodies = window.__ARTICLE_BODY || {};
  const slugBody = bodies[post.slug];
  const body = (slugBody && (slugBody[lang] || slugBody.en)) || bodies[lang] || bodies.en;
  const related = posts.filter((_, i) => i !== idx).slice(0, 3);
  const dateFmt = (d) => {
    const dt = new Date(d);
    const m = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    return `${m[dt.getMonth()]} ${dt.getDate()}, ${dt.getFullYear()}`;
  };

  return (
    <main id="main" className="page-fade">
      <ArticleSEO post={post} body={body} lang={lang} />
      <section className="page-header" style={{ paddingTop: 64 }}>
        <div className="container">
          <button className="btn btn-ghost btn-sm" onClick={() => setRoute({ name: "blog" })} style={{ marginBottom: 24 }}>
            ← {t("blog.backToBlog")}
          </button>
          <div className="meta" style={{ display: "flex", gap: 16, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginTop: 8 }}>
            <span>{post.tag}</span>
            <span>·</span>
            <span>{dateFmt(post.date)}</span>
            <span>·</span>
            <span>{post.read} {t("blog.readTime")}</span>
          </div>
          <h1 className="h1" style={{ maxWidth: "22ch", fontSize: "clamp(36px, 4vw, 56px)", marginTop: 12 }}>{post.title}</h1>
          <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{
              width: 40, height: 40, borderRadius: 20,
              background: "var(--bg-sunken)",
              border: "1px solid var(--line)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--font-display)", fontSize: 14, color: "var(--ink-2)",
            }}>
              {post.author.split(" ").map(s => s[0]).join("")}
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{post.author}</div>
              <div className="tiny" style={{ color: "var(--ink-3)" }}>WeAutomate</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="blog-cover" style={{ aspectRatio: "16/7", marginBottom: 64 }}>
            <BlogCoverArt seed={idx} />
          </div>
          <article className="article-prose" dangerouslySetInnerHTML={{ __html: body }} onClick={(e) => {
            const a = e.target.closest("a[data-route]");
            if (a) {
              e.preventDefault();
              setRoute({ name: a.getAttribute("data-route") });
            }
          }} />
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-sunken)" }}>
        <div className="container-wide">
          <span className="eyebrow">{t("blog.related")}</span>
          <div className="grid-3" style={{ marginTop: 24 }}>
            {related.map((p, i) => (
              <Reveal
                as="div"
                key={p.slug}
                className="card"
                delay={i + 1}
                onClick={() => setRoute({ name: "post", slug: p.slug })}
                style={{ cursor: "pointer" }}
              >
                <div className="meta" style={{ display: "flex", gap: 12, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em" }}>
                  <span>{p.tag}</span>
                  <span>·</span>
                  <span>{p.read} min</span>
                </div>
                <h3 className="h4" style={{ marginTop: 14 }}>{p.title}</h3>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CTABanner lang={lang} setRoute={setRoute} />
    </main>
  );
}

window.HomePage = HomePage;
window.AutomationPage = AutomationPage;
window.ServicesPage = ServicesPage;
window.ContactPage = ContactPage;
window.BlogList = BlogList;
window.BlogPost = BlogPost;

// === Article SEO — JSON-LD BlogPosting + dynamic <title>/description per article ===
function ArticleSEO({ post, body, lang }) {
  useEffectP(() => {
    const prevTitle = document.title;
    const meta = document.querySelector('meta[name="description"]');
    const prevDesc = meta?.getAttribute("content");

    const langTitles = {
      cs: `${post.title} | Blog WeAutomate`,
      en: `${post.title} | WeAutomate Blog`,
      de: `${post.title} | WeAutomate Blog`,
    };
    document.title = langTitles[lang] || langTitles.en;
    if (meta) meta.setAttribute("content", post.excerpt);

    const sid = "__article-jsonld";
    let s = document.getElementById(sid);
    if (s) s.remove();
    s = document.createElement("script");
    s.id = sid;
    s.type = "application/ld+json";
    // Strip HTML tags for plain-text articleBody preview
    const plain = (body || "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim().substring(0, 400);
    s.textContent = JSON.stringify({
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "headline": post.title,
      "description": post.excerpt,
      "image": (window.__blogOgImage && window.__blogOgImage(post.slug)) || "https://www.weautomate.cz/assets/og-blog.png",
      "datePublished": post.date,
      "dateModified": post.date,
      "author": {
        "@type": "Person",
        "name": post.author,
        "url": "https://www.linkedin.com/company/weautomate-1",
      },
      "publisher": {
        "@type": "Organization",
        "name": "WeAutomate",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.weautomate.cz/assets/logo-wide.svg",
        },
      },
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": `https://www.weautomate.cz/blog/${post.slug}`,
      },
      "keywords": post.tag,
      "inLanguage": lang,
      "articleBody": plain,
      "wordCount": plain.split(/\s+/).length,
    });
    document.head.appendChild(s);

    return () => {
      document.title = prevTitle;
      if (meta && prevDesc) meta.setAttribute("content", prevDesc);
      const sx = document.getElementById(sid);
      if (sx) sx.remove();
    };
  }, [post.slug, lang]);

  return null;
}

window.ArticleSEO = ArticleSEO;