/* Screen — O portálu / Legal + shared Footer */
function AboutScreen({ go }) {
  const sections = [
    { id: "co-je", icon: "info", title: "Co portál je a co není", body: (
      <>
        <p>Dluhopisy.cz je <b>informační a srovnávací nástroj</b>. Agregujeme veřejně dostupná data o korporátních dluhopisech registrovaných u České národní banky a zobrazujeme je v přehledné podobě.</p>
        <p style={{ marginTop: 12 }}>Portál <b>není</b> investiční poradce, obchodník s cennými papíry ani zprostředkovatel. <b>Neradíme, nedoporučujeme</b> a nehodnotíme bonitu emitentů. Veškerá rozhodnutí jsou na vás, případně na vašem licencovaném poradci.</p>
      </>
    ) },
    { id: "data", icon: "db", title: "Zdroj dat a aktualizace", body: (
      <>
        <p>Data pocházejí z <b>veřejného registru emisí ČNB</b> a <b>veřejného obchodního rejstříku</b> (ARES). Portál zobrazuje pouze veřejně dostupné údaje o emitentech a počtu jejich schválených emisí, nikoli neveřejné či odhadované hodnoty.</p>
        <div style={{ display: "flex", gap: 16, marginTop: 16, flexWrap: "wrap" }}>
          <div className="card stat-card" style={{ minWidth: 150 }}><span className="label">Aktualizace</span><span className="value" style={{ fontSize: 18 }}>{window.MARKET.updated}</span></div>
          <div className="card stat-card" style={{ minWidth: 150 }}><span className="label">Emitentů</span><span className="value">{window.MARKET.issuers}</span></div>
          <div className="card stat-card" style={{ minWidth: 150 }}><span className="label">Schválených emisí</span><span className="value">{window.MARKET.emissions}</span></div>
        </div>
        <p style={{ marginTop: 16, fontSize: 13.5, color: "var(--muted)" }}>Data mohou být neaktuální nebo neúplná. Pro závazné informace vždy nahlédněte do oficiálního prospektu v registru ČNB.</p>
      </>
    ) },
    { id: "gdpr", icon: "shield", title: "GDPR a zpracování dat", body: (
      <>
        <p>Zpracováváme pouze e-mailové adresy a telefonní čísla dobrovolně poskytnuté k odběru upozornění na nové emise. Tyto údaje neprodáváme a nepředáváme třetím stranám.</p>
        <p style={{ marginTop: 12 }}>Odběr můžete kdykoli zrušit. Máte právo na přístup, opravu a výmaz svých údajů, napište nám na kontaktní adresu níže.</p>
      </>
    ) },
    { id: "kontakt", icon: "mail", title: "Kontakt", body: (
      <p>Dotazy, opravy dat a podněty: <a href="mailto:redakce@dluhopisy.cz" style={{ color: "var(--accent-strong)", fontWeight: 500 }}>redakce@dluhopisy.cz</a></p>
    ) },
  ];
  return (
    <div className="screen" data-screen-label="O portálu">
      <div className="container" style={{ padding: "24px 24px 64px", maxWidth: 860 }}>
        <nav className="crumb" style={{ marginBottom: 24 }}><a href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>Domů</a><span className="sep">›</span><span style={{ color: "var(--ink-2)" }}>O portálu</span></nav>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Informační portál</div>
        <h1 style={{ fontSize: 38, lineHeight: 1.1, maxWidth: 600 }}>O portálu</h1>
        <p style={{ fontSize: 17, color: "var(--ink-2)", marginTop: 16, maxWidth: 620, lineHeight: 1.6 }}>Přehled korporátních dluhopisů pro české investory. Veřejná data z registru ČNB, žádná doporučení.</p>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 28, paddingBottom: 28, borderBottom: "1px solid var(--line)" }}>
          {sections.map((s) => (
            <a key={s.id} href={"#" + s.id} className="badge" style={{ padding: "7px 13px", fontSize: 13, cursor: "pointer" }} onClick={(e) => { e.preventDefault(); const el = document.getElementById(s.id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); }}>{s.title}</a>
          ))}
        </div>
        <div style={{ marginTop: 8 }}>
          {sections.map((s) => (
            <section key={s.id} id={s.id} style={{ padding: "36px 0", borderBottom: "1px solid var(--line)", scrollMarginTop: 80 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}><span className="feature-icon" style={{ width: 38, height: 38, borderRadius: 9 }}><Icon name={s.icon} size={19} /></span><h2 style={{ fontSize: 23 }}>{s.title}</h2></div>
              <div style={{ color: "var(--ink-2)", fontSize: 15.5, lineHeight: 1.65, maxWidth: 660 }}>{s.body}</div>
            </section>
          ))}
        </div>
        <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
          <Btn variant="primary" iconRight="arrowRight" onClick={() => go("bonds")}>Procházet dluhopisy</Btn>
          <Btn variant="ghost" onClick={() => go("home")}>Zpět na úvod</Btn>
        </div>
      </div>
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="footer-sub">
        <div className="container container-wide" style={{ padding: "40px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 440 }}>
            <h3 style={{ color: "#fff", fontSize: 22 }}>Chcete vědět o nových emisích?</h3>
            <p style={{ color: "oklch(0.86 0.03 248)", marginTop: 6, fontSize: 14.5 }}>Občasný e-mail nebo SMS, když do registru přibyde nová emise. Žádný spam.</p>
          </div>
          <button className="btn" onClick={() => openLead("alert")} style={{ background: "#fff", color: "var(--accent-strong)", fontWeight: 600, padding: "13px 22px" }}>Zapnout upozornění <Icon name="arrowRight" size={16} /></button>
        </div>
      </div>
      <Disclaimer thin />
      <div className="container container-wide" style={{ padding: "40px 24px", display: "flex", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
        <div style={{ maxWidth: 360 }}>
          <Logo onClick={() => go("home")} />
          <p style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 14, lineHeight: 1.6 }}>Portál slouží výhradně k informačním účelům. Nejde o investiční poradenství ani nabídku k úpisu. Data pocházejí z veřejného registru emisí ČNB a mohou být neaktuální.</p>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 16, fontSize: 12.5, color: "var(--muted)" }}><Icon name="db" size={14} /> Zdroj dat: <b style={{ color: "var(--ink-2)", fontWeight: 600 }}>registr ČNB</b></div>
        </div>
        <div style={{ display: "flex", gap: 56, flexWrap: "wrap" }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--faint)", marginBottom: 12 }}>Portál</div>
            <FootLink onClick={() => go("bonds")}>Dluhopisy</FootLink>
            <FootLink onClick={() => go("issuers")}>Emitenti</FootLink>
            <FootLink onClick={() => go("compare")}>Srovnávač</FootLink>
            <FootLink onClick={() => go("education")}>Vzdělávání</FootLink>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--faint)", marginBottom: 12 }}>Právní</div>
            <FootLink onClick={() => go("about")}>O portálu</FootLink>
            <FootLink onClick={() => go("about")}>Kontakt</FootLink>
            <FootAnchor href="privacy.html">Zásady ochrany osobních údajů</FootAnchor>
            <FootAnchor href="cookies.html">Zásady používání cookies</FootAnchor>
          </div>
        </div>
      </div>
      <div className="container container-wide" style={{ padding: "0 24px 32px" }}>
        <div className="hr" style={{ marginBottom: 18 }} />
        <p style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.6, maxWidth: 900 }}>
          Investice do korporátních dluhopisů jsou spojeny s rizikem. Hodnota investice může klesat i stoupat a návratnost vložených prostředků není garantována. Existuje riziko částečné nebo úplné ztráty investice, zejména u nezajištěných a podlimitních emisí. Minulé výnosy nejsou zárukou výnosů budoucích. Tyto stránky nejsou nabídkou, výzvou k úpisu ani investičním doporučením.
        </p>
        <p style={{ fontSize: 12, color: "var(--faint)", lineHeight: 1.6, marginTop: 14 }}>
          Provozovatel: Clientelo Czech s.r.o., IČO 221 93 456, se sídlem Platnéřská 90/13, 110 00 Praha 1, zapsaná v OR u MS v Praze, sp. zn. C 412348.
        </p>
        <p style={{ fontSize: 12, color: "var(--faint)", marginTop: 14 }}>© 2026 Clientelo Czech s.r.o. Portál dluhopisů, informační portál. Není investičním doporučením.</p>
      </div>
    </footer>
  );
}
function FootLink({ children, onClick }) {
  return <a href="#" onClick={(e) => { e.preventDefault(); onClick(); }} style={{ display: "block", fontSize: 14, color: "var(--ink-2)", padding: "5px 0", cursor: "pointer" }} onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent-strong)"} onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-2)"}>{children}</a>;
}
function FootAnchor({ children, href }) {
  return <a href={href} style={{ display: "block", fontSize: 14, color: "var(--ink-2)", padding: "5px 0", cursor: "pointer" }} onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent-strong)"} onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-2)"}>{children}</a>;
}

Object.assign(window, { AboutScreen, Footer });