/* eslint-disable */
// Section components for Direct Group × Molekula readout

const { useState, useEffect, useRef, useCallback, useMemo } = React;

/* -------------------- Helpers -------------------- */

function Logo({ src, alt, className, style }) {
  return <img src={src} alt={alt} className={className} style={style} />;
}

function DirectMark({ size = 16, fill = "#161616", lime = "#c4de03" }) {
  // Direct's iconic lime arrow + black square pattern, simplified for nav
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect width="16" height="16" fill={fill} />
      <path d="M3 3h4.5C8.6 6.8 10.7 7.8 12.5 7.8c1.2 0 1.95-.45 1.95-.45l.05.05L4.6 16v-3l5.4-4.6C4.3 7.7 3 3 3 3z" fill={lime} transform="scale(0.7) translate(2 2)" />
    </svg>);

}

function useInView(threshold = 0.1) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Synchronous check first — if already in viewport at mount, reveal immediately
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (r.top < vh && r.bottom > 0) {setInView(true);return;}
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {setInView(true);io.disconnect();}});
    }, { threshold, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    // Safety fallback: reveal after 1.2s even if observer hasn't fired
    const t = setTimeout(() => setInView(true), 1200);
    return () => {io.disconnect();clearTimeout(t);};
  }, [threshold]);
  return [ref, inView];
}

function FadeIn({ children, delay = 0 }) {
  const [ref, inView] = useInView();
  return (
    <div ref={ref} className={"fade-in " + (inView ? "is-in" : "")} style={{ transitionDelay: `${delay}ms` }}>
      {children}
    </div>);

}

/* -------------------- NAV -------------------- */

function Nav() {
  const [active, setActive] = useState("");
  useEffect(() => {
    const sections = window.NAV_LINKS.map((l) => document.querySelector(l.href)).filter(Boolean);
    const handler = () => {
      let cur = "";
      for (const s of sections) {
        const r = s.getBoundingClientRect();
        if (r.top < 120 && r.bottom > 120) {cur = "#" + s.id;break;}
      }
      setActive(cur);
    };
    handler();
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, []);
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="nav-brand">
          <img src="brand-logos/direct-group-white.svg" alt="Direct Group" style={{ height: "40px", width: "81px" }} />
          <span className="nav-divider"></span>
          <span className="nav-project">
            <span className="nav-project-name">Molekula</span>
            <span className="nav-project-meta">Executive readout</span>
          </span>
        </a>
        <div className="nav-links">
          {window.NAV_LINKS.map((l) =>
          <a key={l.href} href={l.href} className={"nav-link " + (active === l.href ? "is-active" : "")}>{l.label}</a>
          )}
        </div>
        <div className="nav-meta">v1.0 · 05/2026</div>
      </div>
    </nav>);

}

/* -------------------- HERO -------------------- */

function Hero() {
  const v = window.HERO;
  return (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-top">
            <FadeIn delay={80}>
              <h1 className="h-display hero-title">
                {v.title[0]}
                <em className="em-lime">{v.title[1]}</em>
                {v.title[2]}
              </h1>
            </FadeIn>
            <div className="hero-art" aria-hidden="true">
              <img src="brand-logos/hero-sculpture.png" alt="" style={{ objectFit: "contain" }} />
            </div>
          </div>
          <FadeIn delay={140}>
            <div className="hero-lede-wrap">
              <div className="hero-intro">
                <div className="hero-intro-label">Diagnóza</div>
                <p className="hero-intro-text">{v.lede}</p>
              </div>
              <div className="hero-intro">
                <div className="hero-intro-label hero-intro-label--lime" style={{ fontWeight: "600" }}>Preskripce</div>
                <p className="hero-intro-text" style={{ fontWeight: "600" }}>{v.thesis}</p>
              </div>
            </div>
          </FadeIn>
          <FadeIn delay={220}>
            <div className="hero-stats">
              {window.HERO.stats.map((s, i) =>
              <div className="stat" key={i}>
                  <div className="stat-num">{s.num}{s.suffix && <sup>{s.suffix}</sup>}</div>
                  <div className="stat-label">{s.label}</div>
                </div>
              )}
            </div>
          </FadeIn>
        </div>

        <div className="brand-marquee" style={{ borderWidth: "1px 0px 0px" }}>
          <span className="brand-marquee-label">5 značek v analýze →</span>
          <div className="brand-marquee-list">
            {window.BRANDS_NAV.map((b) =>
            <div className="brand-mark" key={b.id}>
                <Logo
                src={b.logo.replace(".svg", "-white.svg")}
                alt={b.name} />
              
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------- MATURITY INTRO -------------------- */

function MaturityIntro() {
  const levels = window.MATURITY_LEVELS;
  const pos = window.MATURITY_POSITION;
  return (
    <FadeIn>
      <div className="maturity">
        <div className="maturity-head">
          <div className="maturity-eyebrow">Maturity benchmark</div>
          <p className="maturity-lede">
            Pět úrovní zralosti DS — průmyslový žebřík od jednoho Figma souboru po veřejný systém. <span className="maturity-lede-strong">Direct je dnes mezi úrovní 1 a 2.</span>
          </p>
        </div>

        <div className="maturity-grid">
          {levels.map((l) =>
          <div key={l.n} className={"maturity-card" + (l.threshold ? " is-threshold" : "")}>
              <div className="maturity-card-head">
                <span className="maturity-level">Level {l.n}</span>
                {l.threshold && <span className="maturity-threshold-tag">Práh DS</span>}
              </div>
              <div className="maturity-title">{l.title}</div>
              <div className="maturity-body">{l.body}</div>
            </div>
          )}
        </div>

        <div className="maturity-axis" style={{ "--pos": pos + "%" }}>
          <div className="maturity-axis-bar">
            <div className="maturity-axis-fill"></div>
            {[0, 20, 40, 60, 80, 100].map((p) =>
            <div key={p} className="maturity-axis-tick" style={{ left: p + "%" }}></div>
            )}
            <div className="maturity-axis-marker">
              <div className="maturity-axis-marker-line"></div>
              <div className="maturity-axis-marker-chip">
                <span className="maturity-axis-marker-dot"></span>
                Direct dnes
              </div>
            </div>
          </div>
        </div>
      </div>
    </FadeIn>);

}

/* -------------------- DIAGNOSIS -------------------- */

function Diagnosis() {
  return (
    <section id="diagnoza" className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>01 — Diagnóza</div>
          <h2 className="h-section">
            Co dnes máme<br />
            <em className="em-lime">není</em> design systém.
          </h2>
          <p className="lede">Group DS dnes existuje jen jako Figma knihovna Pojišťovny — bez napojení na kód, dokumentaci a automatizaci. Pět zjištění z auditu pěti značek.

          </p>
        </div>

        <MaturityIntro />

        <div className="findings">
          {window.FINDINGS.map((f, i) =>
          <FadeIn key={i} delay={i * 60}>
              <div className="finding">
                <div className="finding-num">{f.label}</div>
                <div>
                  <div className="finding-key">{f.key}</div>
                  <div className="finding-desc" style={{ marginTop: 8 }}>So-what: {f.soWhat}</div>
                </div>
                <div className="finding-desc">{f.desc}</div>
                <div className="finding-tags">
                  {f.tags.map((t, j) =>
                <span key={j} className={"tag " + (j === 0 ? "tag--lime" : "")}>{t}</span>
                )}
                </div>
              </div>
            </FadeIn>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------- TRANSFORMATION AXIS -------------------- */

function TransformationAxis() {
  const cols = [window.AXIS.today, window.AXIS.bridge, window.AXIS.future];
  return (
    <section id="osa" className="section section--tinted">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>02 — Osa transformace</div>
          <h2 className="h-section">
            Z pěti lokálních systémů<br />do jedné <em className="em-lime">group</em> vrstvy.
          </h2>
          <p className="lede">
            Tři kroky — dnes, Molekula, cílový stav. Co každá značka přispěje nebo převezme, bez velkého redesignu.
          </p>
        </div>

        <div className="axis">
          {cols.map((col, i) =>
          <div key={i} className={"axis-col " + (i === 1 ? "axis-col--molekula" : "")} style={{ borderRadius: "24px" }}>
              <div className="axis-col-head">
                <div>
                  <div className="axis-stage">{col.stage}</div>
                  <div className="axis-title" style={{ marginTop: 6 }}>{col.title}</div>
                </div>
                {col.stamp && <span className="axis-stamp">{col.stamp}</span>}
              </div>
              {col.modules ?
            <>
                {col.core &&
              <div className="axis-core">
                    <div className="axis-core-label">Group foundation</div>
                    <div className="axis-core-name">{col.core.name}</div>
                    <div className="axis-core-body">{col.core.body}</div>
                  </div>
              }
                {col.core && <div className="axis-modules-label">4 moduly nad core</div>}
                <ul className="axis-modules">
                  {col.modules.map((m, j) =>
                <li key={j}>
                      <div className="axis-mod-name">{m.name}</div>
                      <div className="axis-mod-body">{m.body}</div>
                    </li>
                )}
                </ul>
              </> :

            <ul className="axis-list">
                  {col.points.map((p, j) => <li key={j}>{p}</li>)}
                </ul>
            }
              <div className="axis-foot">{col.foot}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------- BRAND DOSSIERS -------------------- */

function BrandDossiers() {
  const [active, setActive] = useState(window.DOSSIERS[0].id);
  const dossier = window.DOSSIERS.find((d) => d.id === active);
  const idx = window.DOSSIERS.findIndex((d) => d.id === active);

  return (
    <section id="znacky" className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>03 — Brand dossiers</div>
          <h2 className="h-section" style={{ textWrap: "balance" }}>
            Pět značek, pět <em className="em-lime">rolí</em> ve společné vrstvě.
          </h2>
          <p className="lede">
            Pro každou značku status, role, modul fit, touchpointy, citace z workshopu a otevřené otázky. Klikněte na značku vlevo.
          </p>
        </div>

        <div className="dossier">
          <aside className="dossier-tabs" role="tablist">
            {window.DOSSIERS.map((d, i) =>
            <button
              key={d.id}
              role="tab"
              className={"dtab " + (active === d.id ? "is-active" : "")}
              onClick={() => setActive(d.id)}
              aria-selected={active === d.id}>
              
                <span className="dtab-meta">{String(i + 1).padStart(2, "0")} · {d.statusLabel}</span>
                <span className="dtab-name">{d.name}</span>
                <span className="dtab-marker"></span>
              </button>
            )}
          </aside>

          <article className="dossier-doc" key={dossier.id}>

            {/* DOC HEADER */}
            <header className="doc-header">
              <div className="doc-logo-wrap">
                <Logo src={dossier.logo} alt={dossier.name} style={{ height: 80, width: "auto", display: "block" }} />
              </div>

              <div className="doc-eyebrow-row">
                <div className="doc-num">{String(idx + 1).padStart(2, "0")} / {window.DOSSIERS.length}</div>
                <div className={"dossier-status status-" + dossier.status}>
                  <span className="dossier-status-dot"></span>
                  {dossier.statusLabel}
                </div>
                <div className="doc-role">
                  <span className="eyebrow-dot" style={{ background: "var(--lime)" }}></span>
                  {dossier.role}
                </div>
              </div>

              <h3 className="doc-headline">{dossier.headline}</h3>
              <p className="doc-state">{dossier.state}</p>
            </header>

            {/* META TABLE */}
            <div className="doc-meta-grid">
              {dossier.meta.map((m, i) =>
              <div key={i} className="doc-meta-cell">
                  <div className="doc-meta-label">{m.label}</div>
                  <div className="doc-meta-val">{m.value}</div>
                </div>
              )}
            </div>

            {/* MODULE FIT */}
            {dossier.modules &&
            <section className="doc-modulefit">
                <div className="doc-block-head doc-block-head--lime">
                  <span className="doc-block-label">Modul fit</span>
                  <span className="doc-block-meta">Které moduly značka přebírá</span>
                </div>
                <div className="mfit-grid">
                  {dossier.modules.map((m) => {
                  const moduleData = window.MODULES.find((x) => x.id === m.id || x.name.toLowerCase().replace(/[^a-z]/g, "").includes(m.id.replace(/[^a-z]/g, "")));
                  // Map module id → display name
                  const displayName = {
                    "docs-ai": "Docs + AI",
                    "marketing": "Marketing",
                    "web": "Web",
                    "product-app": "Product / App"
                  }[m.id] || m.id;
                  return (
                    <div key={m.id} className={"mfit-cell " + (m.picked ? "is-picked" : "is-skipped")}>
                        <div className="mfit-check" aria-hidden="true">
                          {m.picked ?
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                              <path d="M2 6.5l3 3 5-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square" strokeLinejoin="miter" />
                            </svg> :

                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                              <path d="M2.5 2.5l7 7M9.5 2.5l-7 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
                            </svg>
                        }
                        </div>
                        <div className="mfit-body">
                          <div className="mfit-name">{displayName}</div>
                          <div className="mfit-note">{m.note}</div>
                        </div>
                      </div>);

                })}
                </div>
              </section>
            }

            {/* CONFIRMED + INTERPRETED */}
            <div className="doc-cols">
              <section className="doc-block">
                <div className="doc-block-head">
                  <span className="doc-block-label">Confirmed</span>
                  <span className="doc-block-meta">Co bylo ve workshopu řečeno</span>
                </div>
                <ul className="doc-list">
                  {dossier.confirmed.map((c, i) =>
                  <li key={i}><span className="doc-li-num">{String(i + 1).padStart(2, "0")}</span><span>{c}</span></li>
                  )}
                </ul>
              </section>
              <section className="doc-block">
                <div className="doc-block-head">
                  <span className="doc-block-label">Interpreted</span>
                  <span className="doc-block-meta">Naše čtení</span>
                </div>
                <ul className="doc-list">
                  {dossier.interpreted.map((c, i) =>
                  <li key={i}><span className="doc-li-num">{String(i + 1).padStart(2, "0")}</span><span>{c}</span></li>
                  )}
                </ul>
              </section>
            </div>

            {/* VALUE INSIGHT + SO-WHAT */}
            <div className="doc-cols">
              <section className="doc-block doc-block--insight">
                <div className="doc-block-head">
                  <span className="doc-block-label" style={{ color: "var(--lime-dark)" }}>Value insight</span>
                </div>
                <p className="doc-insight">{dossier.valueInsight}</p>
              </section>
              <section className="doc-block">
                <div className="doc-block-head">
                  <span className="doc-block-label">So-what pro Direct Group</span>
                </div>
                <p className="doc-paragraph">{dossier.soWhat}</p>
              </section>
            </div>

            {/* TOUCHPOINTS */}
            {dossier.touchpoints &&
            <section className="doc-touchpoints">
                <div className="doc-block-head">
                  <span className="doc-block-label">Touchpointy</span>
                  <span className="doc-block-meta">Co bude DS pokrývat napříč značkou</span>
                </div>
                <div className="tp-grid">
                  <div className="tp-row">
                    <div className="tp-cat">
                      <span className="tp-swatch" style={{ background: "#a8c5ec" }}></span>
                      Digital owned
                    </div>
                    <div className="tp-chips">
                      {dossier.touchpoints.digital.map((t, i) =>
                    <div key={i} className="tp-chip tp-chip--digital">
                          <span className="tp-chip-name">{typeof t === "string" ? t : t.name}</span>
                          {typeof t !== "string" && t.hint && <span className="tp-chip-hint">{t.hint}</span>}
                        </div>
                    )}
                    </div>
                  </div>

                  <div className="tp-row">
                    <div className="tp-cat">
                      <span className="tp-swatch" style={{ background: "#bedfb2" }}></span>
                      Social & earned
                    </div>
                    <div className="tp-chips">
                      {dossier.touchpoints.social.map((t, i) =>
                    <div key={i} className="tp-chip tp-chip--social">{t}</div>
                    )}
                    </div>
                  </div>

                  <div className="tp-row">
                    <div className="tp-cat">
                      <span className="tp-swatch" style={{ background: "#f3c895" }}></span>
                      Paid & OOH
                    </div>
                    <div className="tp-chips">
                      {dossier.touchpoints.paid.map((t, i) =>
                    <div key={i} className="tp-chip tp-chip--paid">{t}</div>
                    )}
                    </div>
                  </div>

                  <div className="tp-row">
                    <div className="tp-cat">
                      <span className="tp-swatch" style={{ background: "#f5d8b6" }}></span>
                      People & partner
                    </div>
                    <div className="tp-chips">
                      {dossier.touchpoints.people.map((t, i) =>
                    <div key={i} className="tp-chip tp-chip--people">{t}</div>
                    )}
                    </div>
                  </div>
                </div>
              </section>
            }

            {/* QUOTES */}
            <section className="doc-quotes">
              <div className="doc-block-head">
                <span className="doc-block-label">Evidence momenty</span>
                <span className="doc-block-meta">Citáty z workshopu</span>
              </div>
              <div className="doc-quotes-grid">
                {dossier.quotes.map((q, i) =>
                <blockquote key={i} className="doc-quote">
                    <span className="doc-quote-mark" aria-hidden="true">"</span>
                    <span>{q}</span>
                  </blockquote>
                )}
              </div>
            </section>

            {/* OPEN QUESTIONS */}
            <section className="doc-questions">
              <div className="doc-block-head">
                <span className="doc-block-label">Open questions</span>
                <span className="doc-block-meta">Co zatím nemáme zodpovězené</span>
              </div>
              <ol className="doc-questions-list">
                {dossier.openQuestions.map((q, i) =>
                <li key={i}>
                    <span className="doc-q-num">Q{String(i + 1).padStart(2, "0")}</span>
                    <span>{q}</span>
                  </li>
                )}
              </ol>
            </section>

            {/* FOOTER */}
            <footer className="doc-footer">
              <div className="doc-footer-left">
                <div className="doc-footer-label">AI-ready handoff</div>
                <div className="doc-footer-val">{dossier.download.split("/").pop()}</div>
              </div>
              <a href={dossier.download} download className="doc-download">
                <span className="doc-download-icon" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M7 1v9m0 0L3 6m4 4l4-4M2 13h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
                  </svg>
                </span>
                Stáhnout .md
              </a>
            </footer>

          </article>
        </div>
      </div>
    </section>);

}

/* -------------------- MODULES -------------------- */

function Modules() {
  const [open, setOpen] = useState(0);
  const toggle = (i) => setOpen(open === i ? -1 : i);
  return (
    <section id="moduly" className="section section--tinted">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>04 — Modulová architektura</div>
          <h2 className="h-section">
            Čtyři moduly<br />
            <em className="em-lime">nad</em> group core.
          </h2>
          <p className="lede">
            Docs+AI, Marketing, Web a Product. Co je uvnitř, jakou hodnotu modul přináší a kde dát pozor — rozkliknutím.
          </p>
        </div>

        <div className="modules">
          {window.MODULES.map((m, i) =>
          <div key={i} className={"module " + (open === i ? "is-open" : "")}>
              <div className="module-head" onClick={() => toggle(i)} role="button" tabIndex={0}
            onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), toggle(i))}>
                <div className="module-num">{m.label}</div>
                <div className="module-name">
                  <span className="module-name-text">{m.name}</span>
                  <span className={"module-tag " + (i === 0 ? "module-tag--lime" : "")}>{m.badge}</span>
                </div>
                <div className="module-summary">{m.summary}</div>
                <button className="module-toggle" aria-label={open === i ? "Sbalit" : "Rozbalit"}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M7 1.5v11M1.5 7h11" stroke="currentColor" strokeWidth="1.4" />
                  </svg>
                </button>
              </div>

              <div className="module-body">
                <div className="module-body-inner">
                  <div className="module-content">
                    <div></div>
                    <div>
                      <div className="module-col-label">Co je uvnitř</div>
                      <ul className="module-col-list">
                        {m.inside.map((x, j) => <li key={j}>{x}</li>)}
                      </ul>
                    </div>
                    <div>
                      <div className="module-col-label">Hodnota pro group</div>
                      <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--gray-85)", margin: 0 }}>{m.group}</p>
                      <div className="module-col-label" style={{ marginTop: "var(--space-6)" }}>Hodnota pro značku</div>
                      <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--gray-85)", margin: 0 }}>{m.brand}</p>
                    </div>
                    <div>
                      <div className="module-col-label">Fit napříč značkami</div>
                      <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: "var(--space-6)" }}>
                        {m.fits.map((b, j) =>
                      <div key={j} style={{ fontSize: 13, color: "var(--gray-85)", display: "flex", alignItems: "center", gap: 8 }}>
                            <span style={{ width: 6, height: 6, background: "var(--ink)" }}></span>
                            {b}
                          </div>
                      )}
                      </div>
                      <div className="module-col-label">Pozor</div>
                      <p style={{ fontSize: 13, lineHeight: 1.5, color: "var(--gray-70)", margin: 0 }}>{m.caution}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------- ROADMAP -------------------- */

function Roadmap() {
  const [view, setView] = useState("popis");
  return (
    <section id="roadmapa" className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>05 — Adoption roadmap</div>
          <h2 className="h-section">
            <em className="em-lime">Tři fáze</em>, šest streamů,<br />
            jeden plán v čase.
          </h2>
          <p className="lede">
            Group identity přijde shora od Planetary. Marketing, web a produkt jedou paralelně a v čase se potkávají v adopci.
          </p>
        </div>

        <div className="roadmap-controls">
          <div className="seg-control" role="tablist" aria-label="Pohled na roadmapu">
            <button
              role="tab"
              aria-selected={view === "popis"}
              className={"seg-btn " + (view === "popis" ? "is-active" : "")}
              onClick={() => setView("popis")}>
              <span className="seg-btn-num">A</span>
              Popis
            </button>
            <button
              role="tab"
              aria-selected={view === "schema"}
              className={"seg-btn " + (view === "schema" ? "is-active" : "")}
              onClick={() => setView("schema")}>
              <span className="seg-btn-num">B</span>
              Schéma · paralelní streamy
            </button>
          </div>
          <div className="roadmap-controls-hint mono">
            {view === "popis" ?
            "Tří-fázové čtení s deliverables." :
            "Streamy běží paralelně a v čase se potkávají."}
          </div>
        </div>

        {view === "popis" ? <RoadmapText /> : <RoadmapSchema />}
      </div>
    </section>);

}

function RoadmapText() {
  return (
    <div className="roadmap">
      {window.ROADMAP.map((p, i) =>
      <FadeIn key={i} delay={i * 80}>
          <div className="phase">
            <div className="phase-meta">
              <div className="phase-num">{p.label}</div>
              <div className="phase-time">{p.time}</div>
            </div>
            <div className="phase-title">{p.title}</div>
            <div>
              <div className="phase-body">{p.body}</div>
              <div className="phase-deliv">
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--gray-70)", marginRight: 4, alignSelf: "center" }}>
                  Deliverables →
                </span>
                {p.deliverables.map((d, j) =>
              <span key={j} className={"tag " + (i === 1 && j === 1 ? "tag--lime" : "")}>{d}</span>
              )}
              </div>
            </div>
          </div>
        </FadeIn>
      )}
    </div>);

}

function RoadmapSchema() {
  const phases = window.ROADMAP_PHASES;
  const streams = window.ROADMAP_STREAMS;
  return (
    <FadeIn>
      <div className="schema-wrap">
        <div className="schema" style={{ gridTemplateColumns: `180px repeat(${phases.length}, 1fr)` }}>
          {/* Header row */}
          <div className="schema-corner">
            <span className="mono schema-corner-label">Streamy ↓ / Fáze →</span>
          </div>
          {phases.map((p, i) =>
          <div key={i} className="schema-phase-head">
              <div className="schema-phase-num mono">Fáze {p.num}</div>
              <div className="schema-phase-title">{p.title}</div>
              <div className="schema-phase-sub mono">{p.sub}</div>
            </div>
          )}

          {/* Stream rows */}
          {streams.map((s) =>
          <React.Fragment key={s.id}>
              <div className={"schema-stream-label " + (s.throughout ? "is-throughout" : "")}>
                <span className="schema-stream-bar"></span>
                <div>
                  <div className="schema-stream-name">{s.name}</div>
                  <div className="schema-stream-desc mono">{s.desc}</div>
                  {s.throughout && <div className="schema-stream-tag mono">napříč fázemi</div>}
                </div>
              </div>
              {phases.map((p, pi) => {
              const phaseNum = pi + 1;
              const nodes = s.nodes.filter((n) => n.phase === phaseNum);
              return (
                <div key={pi} className={"schema-cell " + (nodes.length ? "has-nodes" : "is-empty")}>
                    <span className="schema-cell-line" aria-hidden="true"></span>
                    {nodes.map((n, i) =>
                  <div key={i} className={"schema-node " + (n.primary ? "is-primary" : "") + (s.accent ? " accent-" + s.accent : "")}>
                        <div className="schema-node-label">{n.label}</div>
                        <div className="schema-node-sub mono">{n.sub}</div>
                      </div>
                  )}
                  </div>);

            })}
            </React.Fragment>
          )}
        </div>
      </div>

      <div className="schema-legend">
        <div className="schema-legend-item">
          <span className="schema-legend-swatch is-primary"></span>
          <div>
            <div className="schema-legend-name">Anchor moment</div>
            <div className="schema-legend-desc mono">Klíčový předací bod ve fázi</div>
          </div>
        </div>
        <div className="schema-legend-item">
          <span className="schema-legend-swatch is-throughout"></span>
          <div>
            <div className="schema-legend-name">Throughout</div>
            <div className="schema-legend-desc mono">Stream běží napříč všemi fázemi</div>
          </div>
        </div>
        <div className="schema-legend-item">
          <span className="schema-legend-swatch is-converge"></span>
          <div>
            <div className="schema-legend-name">Sync points</div>
            <div className="schema-legend-desc mono">Streamy se potkávají přes change group + context portal</div>
          </div>
        </div>
      </div>
    </FadeIn>);

}

/* -------------------- OUTPUTS -------------------- */

function Outputs() {
  return (
    <section id="vystupy" className="section section--dark grain">
      <div className="container">
        <div className="section-head outputs-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>06 — Výstupy ke stažení</div>
          <h2 className="h-section" style={{ color: "var(--white)" }}>
            Stáhněte si <em className="em-lime">všechna zjištění</em><br />
            jako kontext pro vaši AI.
          </h2>
          <p className="lede" style={{ color: "rgba(255,255,255,0.78)" }}>
            Tytéž analytické výstupy ve formátu pro AI. Nahrajte do Claude nebo ChatGPT a diskutujte nad zjištěními bez ručního přepisování.
          </p>
          <div className="outputs-cta">
            <a className="pill" href="/deliverables/direct-molekula-deliverables.zip" download>
              Stáhnout vše (.zip)
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v8m0 0L3 5m4 4l4-4M2 13h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" /></svg>
            </a>
            <span className="outputs-cta-hint mono">9 markdownů · klientsky čitelný kontext pro další práci</span>
          </div>
        </div>

        <div className="outputs">
          {window.OUTPUTS.map((o, i) =>
          <a key={i} href={o.href} className="output">
              <div className="output-num">{o.label}</div>
              <div>
                <div className="output-name">
                  {o.name}
                  <span className="output-type mono">{o.type}</span>
                </div>
                <div className="output-desc">{o.desc}</div>
              </div>
              <div className="output-arrow">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M4 9h10m0 0L9 4m5 5l-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
                </svg>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------- FOOTER -------------------- */

function Footer() {
  return (
    <footer className="footer footer--dark grain">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-statement">
            <svg className="footer-arrow" viewBox="0 0 48 52" fill="none" aria-hidden="true">
              <path d="M16.1 0C21.6 15.7 29.9 19.9 37.9 19.9c5.5 0 9.4-2 9.4-2l.3.3L10.7 51.7V37.8L30.4 20.7C6.6 18 0 0 0 0z" fill="#c4de03" />
            </svg>
            <h2 className="h-section footer-statement-head">
              Tohle není další UI kit.<br />
              Je to <em className="em-lime">operating layer</em><br />
              pro agentic éru.
            </h2>
          </div>
          <div className="footer-meta">
            <div className="footer-meta-block">
              <div className="footer-meta-label mono">Document</div>
              <div className="footer-meta-val">{window.META.kind}</div>
            </div>
            <div className="footer-meta-block">
              <div className="footer-meta-label mono">Version</div>
              <div className="footer-meta-val">{window.META.version} · {window.META.date}</div>
            </div>
            <div className="footer-meta-block">
              <div className="footer-meta-label mono">Authors</div>
              <div className="footer-meta-val">{window.META.authors}</div>
            </div>
          </div>
        </div>
        <div className="footer-baseline">
          <div className="footer-confidential">
            <span className="footer-confidential-label mono">Confidential</span>
            <span className="footer-confidential-text">This is an internal document. Please do not share with anyone outside of the intended recipients.</span>
          </div>
          <a href="https://symbio.agency" className="footer-baseline-item footer-symbio-baseline mono" aria-label="Symbio">
            <span>Brought to the world by</span>
            <img src="brand-logos/symbio.svg" alt="Symbio" />
          </a>
        </div>
      </div>
    </footer>);

}

/* -------------------- CTA SLAB -------------------- */

function CtaSlab() {
  return (
    <section className="cta-slab" style={{ borderWidth: "0px 0px 1px", borderStyle: "dashed", borderColor: "rgba(255, 255, 255, 0.1)" }}>
      <div className="container">
        <div className="cta-grid">
          <div className="cta-left">
            <svg className="cta-arrow" viewBox="0 0 48 52" fill="none" aria-hidden="true">
              <path d="M16.1 0C21.6 15.7 29.9 19.9 37.9 19.9c5.5 0 9.4-2 9.4-2l.3.3L10.7 51.7V37.8L30.4 20.7C6.6 18 0 0 0 0z" fill="#c4de03" />
            </svg>
            <h2 className="h-section" style={{ color: "var(--white)", maxWidth: "16ch" }}>
              Tohle není další UI kit.<br />
              Je to <em className="em-lime" style={{ color: "rgb(196, 222, 2)" }}>operating layer</em><br />
              pro agentic éru.
            </h2>
          </div>
          <div className="cta-right">
            <p className="lede">
              Architecture sprint pořeší governance, foundations a moduly. Co půjde generovat a automatizovat — kampaně, weby, dokumentaci, brand assety — připravíme tak, aby to maximálně podporovalo práci s AI agenty.
            </p>
            <p className="lede" style={{ marginTop: "var(--space-4)", color: "rgba(255,255,255,0.6)" }}>
              Příštím krokem je jeden viditelný pilot, který dokáže hodnotu před plošným zavedením.
            </p>
            <div className="cta-actions">
              <a className="pill" href="#vystupy">
                Vidět výstupy
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H4.5M11 3v6.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" /></svg>
              </a>
              <a className="pill pill--ghost" href="#roadmapa">
                Architecture sprint
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Nav, Hero, Diagnosis, TransformationAxis, BrandDossiers, Modules, Roadmap, Outputs, CtaSlab, Footer });