/* Screen — Vzdělávání / Co je co */
/* Generic glossary of security types — educational reference only, NOT data
   about any specific issuer or emission. */
const EDU_SECURITY_TYPES = [
  { label: "Zástava nemovitosti", strength: "vyšší", detail: "Zástavní právo k nemovitosti ve prospěch agenta pro zajištění (administrátora emise)." },
  { label: "Bankovní záruka", strength: "vyšší", detail: "Bankovní záruka kryjící jmenovitou hodnotu emise." },
  { label: "Zástava obchodního podílu", strength: "střední", detail: "Zástava obchodního podílu / akcií emitenta nebo dceřiné společnosti." },
  { label: "Zástava pohledávek", strength: "střední", detail: "Zástava souboru pohledávek emitenta z obchodního styku." },
  { label: "Ručení mateřské společnosti", strength: "střední", detail: "Písemné ručitelské prohlášení mateřské / sesterské společnosti ve skupině." },
  { label: "Zástava movitých věcí", strength: "nižší", detail: "Zástavní právo k technologiím a strojnímu vybavení." },
  { label: "Zajištění směnkou", strength: "nižší", detail: "Vlastní blankosměnka emitenta avalovaná vlastníky." },
];

function EducationScreen({ go }) {
  const sections = [
    {
      id: "dluhopis", title: "Co je korporátní dluhopis", icon: "book",
      body: (
        <>
          <p>Korporátní dluhopis je cenný papír, kterým si firma (emitent) půjčuje peníze od investorů. Investor firmě půjčí jmenovitou hodnotu a firma se zavazuje ji k datu splatnosti vrátit a průběžně platit úrok (kupón).</p>
          <p>Na rozdíl od bankovního vkladu <b>korporátní dluhopisy nejsou kryté pojištěním vkladů</b>. Návratnost závisí výhradně na tom, zda emitent dokáže své závazky splatit.</p>
        </>
      ),
    },
    {
      id: "vynos", title: "Výnos vs. kupón", icon: "percent",
      body: (
        <>
          <p><b>Kupón</b> je úroková sazba uvedená v emisních podmínkách, tedy kolik emitent pravidelně vyplácí z jmenovité hodnoty. <b>Cílený výnos</b> (p.a.) je očekávané roční zhodnocení do splatnosti; u dluhopisu s pevným kupónem koupeného za nominál bývají obě čísla blízká.</p>
          <p>U <b>variabilního</b> kupónu se sazba mění (např. podle sazby ČNB), u <b>nulového (diskontovaného)</b> dluhopisu se kupón nevyplácí, výnos je rozdíl mezi nižší nákupní cenou a vyplacenou jmenovitou hodnotou.</p>
          <div className="flag-row" style={{ marginTop: 4 }}><Icon name="warn" size={15} /> Obecné pravidlo: vyšší nabízený výnos zpravidla kompenzuje vyšší riziko nesplacení.</div>
        </>
      ),
    },
    {
      id: "limit", title: "Podlimitní vs. nadlimitní emise", icon: "db",
      body: (
        <>
          <p>Dělení vychází z povinnosti zveřejnit prospekt schválený ČNB.</p>
          <div className="compare-box">
            <div className="cb">
              <h4><span className="badge badge-ok-soft">Nadlimitní</span></h4>
              <ul>
                <li>Vydána <b>s prospektem</b> schváleným ČNB</li>
                <li>Více ověřených, standardizovaných informací</li>
                <li>Obvykle větší objem emise</li>
                <li>ČNB schvaluje formu, ne kvalitu investice</li>
              </ul>
            </div>
            <div className="cb">
              <h4><span className="badge badge-warn">Podlimitní</span></h4>
              <ul>
                <li><b>Bez prospektu</b> (objem do ~1 mil. EUR / 12 měsíců)</li>
                <li>Méně povinně zveřejňovaných údajů</li>
                <li>Často menší a méně likvidní emise</li>
                <li>Vyžaduje vlastní důkladnější prověření</li>
              </ul>
            </div>
          </div>
          <p>Ani schválený prospekt <b>není zárukou</b> návratnosti. ČNB neposuzuje výhodnost ani bonitu emitenta.</p>
        </>
      ),
    },
    {
      id: "zajisteni", title: "Zajištěné vs. nezajištěné", icon: "shield",
      body: (
        <>
          <p>Zajištění určuje, zda mají investoři při problémech emitenta nárok na konkrétní majetek nebo ručitele. <b>Nezajištěný</b> dluhopis takovou oporu nemá, uspokojení závisí na celkové bonitě emitenta.</p>
          <p>U zajištěných emisí je rozhodující <b>čím</b> a <b>jak kvalitně</b> jsou kryté:</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, margin: "8px 0 14px" }}>
            {EDU_SECURITY_TYPES.map((s, k) => {
              const n = s.strength === "vyšší" ? 3 : s.strength === "střední" ? 2 : 1;
              const cls = s.strength === "vyšší" ? "" : s.strength === "střední" ? "mid" : "low";
              return (
                <div key={k} className="spec-row" style={{ borderBottom: "1px solid var(--line-2)" }}>
                  <div><div style={{ fontWeight: 600, color: "var(--ink)", fontSize: 14.5 }}>{s.label}</div><div style={{ fontSize: 13, color: "var(--muted)", marginTop: 2 }}>{s.detail}</div></div>
                  <span className={"sec-meter " + cls} style={{ flex: "none" }}>{[1, 2, 3].map((i) => <span key={i} className={i <= n ? "on" : ""}></span>)}</span>
                </div>
              );
            })}
          </div>
          <div className="flag-row"><Icon name="info" size={15} /> Síla zajištění je orientační. Vždy ověřte reálnou hodnotu zástavy a její pořadí.</div>
        </>
      ),
    },
    {
      id: "spv", title: "Co je SPV a proč na něm záleží", icon: "building",
      body: (
        <>
          <p><b>SPV</b> (special purpose vehicle) je účelově založená společnost, často bez vlastní provozní historie, majetku nebo zaměstnanců. Sama o sobě nemusí mít čím dluh splatit.</p>
          <p>U dluhopisů vydaných přes SPV je proto klíčové, <b>kdo a čím za emisi ručí</b>: zda existuje ručení mateřské firmy, zástava majetku nebo jiné krytí mimo samotné SPV.</p>
        </>
      ),
    },
    {
      id: "rizika", title: "Hlavní rizika", icon: "warn",
      body: (
        <>
          <div className="risk-grid" style={{ margin: "6px 0 8px" }}>
            {[
              { t: "Kreditní riziko", d: "Emitent nemusí být schopen splatit jistinu ani kupón. Nejde o pojištěný vklad." },
              { t: "Riziko likvidity", d: "Dluhopis nemusí jít před splatností snadno prodat za férovou cenu." },
              { t: "Koncentrace", d: "Vložení velké části úspor do jediné emise zvyšuje dopad případného selhání." },
            ].map((r) => (
              <div className="risk-card" key={r.t}><h3 style={{ fontSize: 17 }}>{r.t}</h3><p style={{ color: "var(--ink-2)", marginTop: 8, fontSize: 14, lineHeight: 1.55 }}>{r.d}</p></div>
            ))}
          </div>
          <p>Tato osvěta je obecná a nenahrazuje individuální posouzení. Závazné podmínky jsou vždy v prospektu / emisních podmínkách konkrétní emise.</p>
        </>
      ),
    },
    {
      id: "jak-cist", title: "Jak číst kartu dluhopisu", icon: "list",
      body: (
        <>
          <p>U každé emise na portálu najdete stejnou strukturu údajů. Na co se dívat:</p>
          <div className="spec-list" style={{ marginTop: 6 }}>
            {[
              ["Cílený výnos", "Očekávané roční zhodnocení. Porovnávejte v kontextu rizika, ne izolovaně."],
              ["Zajištění + síla", "Čím je dluh krytý a jak kvalitně. Nezajištěný = bez konkrétní opory."],
              ["Typ emise", "Podlimitní (bez prospektu) vs. nadlimitní (s prospektem ČNB)."],
              ["Splatnost", "Za jak dlouho se vrací jistina. Delší doba = vyšší nejistota."],
              ["Emitent", "Kdo dluží, provozní firma, nebo SPV? Kdo za ní stojí?"],
            ].map(([k, v]) => (
              <div className="spec-row" key={k} style={{ alignItems: "flex-start" }}><span className="sk" style={{ minWidth: 130, fontWeight: 600, color: "var(--ink-2)" }}>{k}</span><span style={{ textAlign: "left", color: "var(--ink-2)", fontWeight: 400 }}>{v}</span></div>
            ))}
          </div>
          <div style={{ marginTop: 20 }}><Btn variant="primary" iconRight="arrowRight" onClick={() => go("bonds")}>Prohlédnout dluhopisy</Btn></div>
        </>
      ),
    },
  ];

  const [active, setActive] = React.useState(sections[0].id);
  React.useEffect(() => {
    const onScroll = () => {
      let cur = sections[0].id;
      for (const s of sections) { const el = document.getElementById("edu-" + s.id); if (el && el.getBoundingClientRect().top < 140) cur = s.id; }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const jump = (id) => { const el = document.getElementById("edu-" + id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); };

  return (
    <div className="screen" data-screen-label="Vzdělávání">
      <div className="page-hero">
        <div className="container" style={{ padding: "40px 24px 32px", maxWidth: 1040 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Vzdělávání · Co je co</div>
          <h1 style={{ fontSize: "clamp(30px, 4vw, 42px)", lineHeight: 1.1, maxWidth: 640 }}>Vyznejte se v dluhopisech</h1>
          <p style={{ fontSize: 17, color: "var(--ink-2)", marginTop: 14, maxWidth: 600, lineHeight: 1.6 }}>
            Stručný, srozumitelný průvodce pojmy, se kterými se v přehledu setkáte. Bez prodejních řečí, jen vysvětlení, ať čtete data správně.
          </p>
        </div>
      </div>

      <div className="container" style={{ padding: "8px 24px 56px", maxWidth: 1040 }}>
        <div style={{ display: "grid", gridTemplateColumns: "210px 1fr", gap: 40, alignItems: "start" }} className="edu-layout">
          <aside className="edu-toc hide-mobile">
            {sections.map((s) => (
              <a key={s.id} href={"#edu-" + s.id} className={active === s.id ? "active" : ""} onClick={(e) => { e.preventDefault(); jump(s.id); }}>{s.title}</a>
            ))}
          </aside>
          <div>
            {sections.map((s) => (
              <section key={s.id} id={"edu-" + s.id} className="edu-section">
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
                  <span className="feature-icon" style={{ width: 38, height: 38, borderRadius: 9 }}><Icon name={s.icon} size={19} /></span>
                  <h2 style={{ fontSize: 25 }}>{s.title}</h2>
                </div>
                {s.body}
              </section>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 8 }}><Disclaimer /></div>
      </div>
    </div>
  );
}

Object.assign(window, { EducationScreen });