/* Screen — Homepage (bond information server) */
function PreviewCard({ go }) {
  const top = window.BONDS.slice(0, 6);
  return (
    <div className="hero-visual preview-card" aria-label="Náhled seznamu dluhopisů">
      <div className="preview-top">
        <span className="preview-dot" style={{ background: "oklch(0.74 0.16 25)" }}></span>
        <span className="preview-dot" style={{ background: "oklch(0.82 0.14 85)" }}></span>
        <span className="preview-dot" style={{ background: "oklch(0.72 0.12 150)" }}></span>
        <span className="mono" style={{ marginLeft: 8, fontSize: 12, color: "var(--muted)" }}>Dluhopisy · ČNB</span>
      </div>
      <div>
        {top.map((b) => {
          return (
            <div className="preview-row" key={b.id}>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{b.shortName}</div>
                <div style={{ fontSize: 11.5, color: "var(--faint)", marginTop: 1 }}>{b.region || "ČR"}{b.isSPV ? " · SPV" : ""}</div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span className="yield-badge">{b.bondCount}<span className="yb-pa">emisí</span></span>
              </div>
            </div>
          );
        })}
      </div>
      <div className="preview-foot">
        <span style={{ fontSize: 12.5, color: "var(--muted)" }}>+ {window.BONDS.length - 6} dalších emitentů</span>
        <a href="#" onClick={(e) => { e.preventDefault(); go("bonds"); }} style={{ color: "var(--accent-strong)", fontWeight: 500, fontSize: 13 }}>Zobrazit vše →</a>
      </div>
    </div>
  );
}

function SectionHead({ eyebrow, title, subtitle }) {
  return (
    <div className="sec-head">
      {eyebrow && <div className="eyebrow" style={{ marginBottom: 12 }}>{eyebrow}</div>}
      <h2 style={{ fontSize: "clamp(24px, 3vw, 32px)", lineHeight: 1.15 }}>{title}</h2>
      {subtitle && <p style={{ color: "var(--ink-2)", marginTop: 12, fontSize: 16, lineHeight: 1.55 }}>{subtitle}</p>}
    </div>
  );
}

function FAQ() {
  const items = [
    { q: "Je portál zdarma?", a: "Ano. Procházení přehledu, filtrování, profily emitentů, srovnávač i vzdělávací sekce jsou zcela zdarma a bez registrace. Dobrovolně zadáte jen kontakt, pokud chcete dostávat upozornění na nové emise." },
    { q: "Odkud pocházejí data?", a: "Z veřejného registru emisí ČNB a veřejného obchodního rejstříku (ARES). Zobrazujeme jen veřejně dostupné údaje o emitentech a počtu jejich schválených emisí. Datum poslední aktualizace najdete na stránce O portálu." },
    { q: "Radíte mi, který dluhopis koupit?", a: "Ne. Portál je informační a srovnávací nástroj. Nedoporučujeme konkrétní emise, nehodnotíme bonitu emitentů a nejsme investiční poradce ani zprostředkovatel." },
    { q: "Co znamená „cílený výnos“?", a: "Očekávané roční zhodnocení do splatnosti (p.a.). U dluhopisu s pevným kupónem koupeného za nominál bývá blízké kupónu. Vyšší výnos zpravidla znamená vyšší riziko. Vysvětlujeme ve Vzdělávání." },
    { q: "Jaký je rozdíl mezi podlimitní a nadlimitní emisí?", a: "Nadlimitní emise má prospekt schválený ČNB; podlimitní (objem do ~1 mil. EUR za 12 měsíců) prospekt nemá a zveřejňuje méně údajů. Detail najdete v sekci Vzdělávání." },
    { q: "Jsou korporátní dluhopisy pojištěné?", a: "Ne. Na rozdíl od bankovních vkladů nejsou kryté pojištěním vkladů. Návratnost závisí na schopnosti emitenta splácet a na případném zajištění." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}><span>{it.q}</span><span className="faq-ic"><Icon name="chevDown" size={18} /></span></button>
          {open === i && <div className="faq-a">{it.a}</div>}
        </div>
      ))}
    </div>
  );
}

function HomeScreen({ go }) {
  const M = window.MARKET;
  const features = [
    { icon: "list", title: "Přehled emitentů", text: "Stovky emitentů z registru ČNB: počet schválených emisí, sídlo, typ subjektu a data schválení.", to: "bonds", cta: "Procházet emitenty" },
    { icon: "building", title: "Profily emitentů", text: "Kdo za emisemi stojí: údaje z veřejného rejstříku, statutární orgán, základní kapitál a emisní historie.", to: "issuers", cta: "Prozkoumat emitenty" },
    { icon: "book", title: "Vzdělávání", text: "Srozumitelně vysvětlené pojmy: výnos vs. kupón, podlimitní emise, zajištění, SPV i rizika.", to: "education", cta: "Naučit se základy" },
  ];

  return (
    <div className="screen" data-screen-label="Homepage">
      {/* HERO */}
      <section className="hero">
        <div aria-hidden="true" className="hero-grid-bg" />
        <div className="container container-wide" style={{ position: "relative", padding: "68px 24px 52px" }}>
          <div className="hero-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20, display: "inline-flex", alignItems: "center", gap: 8, whiteSpace: "nowrap" }}><Icon name="db" size={14} /> Data z registru ČNB · aktualizováno {M.updated}</div>
              <h1 style={{ fontSize: "clamp(32px, 4.6vw, 52px)", lineHeight: 1.06, letterSpacing: "-0.022em" }}>
                Korporátní dluhopisy<br /><span style={{ color: "var(--accent)" }}>na jednom místě.</span>
              </h1>
              <p style={{ fontSize: "clamp(16px, 2vw, 18px)", color: "var(--ink-2)", marginTop: 20, maxWidth: 500, lineHeight: 1.6 }}>
                Nezávislý informační portál českého trhu korporátních dluhopisů. Filtrujte podle kraje a typu subjektu, prostudujte emitenty, srovnejte je vedle sebe a nechte si hlídat nové emise.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 28 }}>
                <Btn variant="primary" size="lg" iconRight="arrowRight" onClick={() => go("bonds")}>Procházet dluhopisy</Btn>
                <Btn variant="ghost" size="lg" icon="book" onClick={() => go("education")}>Jak to funguje</Btn>
              </div>
              <div className="trust-row">
                <span className="ti"><Icon name="check" size={14} /> Zdarma a bez registrace</span>
                <span className="ti"><Icon name="check" size={14} /> Data z registru ČNB</span>
                <span className="ti"><Icon name="check" size={14} /> Žádná doporučení</span>
              </div>
            </div>
            <PreviewCard go={go} />
          </div>
          <div className="hero-stats">
            {[
              { v: M.issuers, l: "emitentů v registru" },
              { v: M.emissions, l: "schválených emisí" },
              { v: M.regions, l: "krajů ČR" },
              { v: window.fmtPct(M.spvShare), l: "podíl SPV" },
            ].map((s, i) => (
              <div key={i} className="hero-stat"><div className="num" style={{ fontSize: 24, fontWeight: 500, color: "var(--ink)" }}>{s.v}</div><div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 4 }}>{s.l}</div></div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section className="container container-wide" style={{ padding: "76px 24px 0" }}>
        <SectionHead eyebrow="Co tu najdete" title="Všechna data o dluhopisech, přehledně" subtitle="Ne leták konkrétního prodejce, ale nezávislý přehled celého trhu. Data jsou hrdina." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 20 }}>
          {features.map((f, i) => (
            <div key={i} className="card feature-card" style={{ display: "flex", flexDirection: "column" }}>
              <div className="feature-icon"><Icon name={f.icon} size={22} /></div>
              <h3 style={{ fontSize: 19, marginTop: 18 }}>{f.title}</h3>
              <p style={{ color: "var(--ink-2)", marginTop: 8, fontSize: 14.5, lineHeight: 1.55, flex: 1 }}>{f.text}</p>
              <button className="nav-link" style={{ marginTop: 16, color: "var(--accent-strong)", fontWeight: 500, alignSelf: "flex-start", padding: "4px 0", display: "inline-flex", alignItems: "center", gap: 6 }} onClick={() => go(f.to)}>{f.cta} <Icon name="arrowRight" size={15} /></button>
            </div>
          ))}
        </div>
      </section>

      {/* QUICK YIELD ENTRY */}
      <section className="container container-wide" style={{ padding: "64px 24px 0" }}>
        <div className="card" style={{ padding: "30px 32px", background: "var(--accent-softer)", borderColor: "var(--accent-soft)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div>
            <h3 style={{ fontSize: 21 }}>Hledáte podle kraje nebo počtu emisí?</h3>
            <p style={{ color: "var(--ink-2)", marginTop: 6, fontSize: 14.5, maxWidth: 520 }}>Zúžíte přehled podle kraje, typu subjektu i počtu schválených emisí a srovnejte až 4 emitenty vedle sebe.</p>
          </div>
          <Btn variant="primary" iconRight="arrowRight" onClick={() => go("bonds")}>Otevřít filtr</Btn>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="container container-wide" style={{ padding: "76px 24px 8px" }}>
        <SectionHead eyebrow="Jak to funguje" title="Od přehledu k rozhodnutí ve třech krocích" />
        <div className="steps">
          {[
            { n: "01", icon: "filter", t: "Filtrujte trh", d: "Zúžíte stovky emitentů podle kraje, typu subjektu a počtu schválených emisí na ty, co vás zajímají." },
            { n: "02", icon: "compare", t: "Studujte a srovnávejte", d: "Otevřete profil emitenta s údaji z rejstříku a postavte až 4 emitenty vedle sebe." },
            { n: "03", icon: "mail", t: "Hlídejte novinky", d: "Necháte si poslat upozornění, jakmile do registru přibyde nová emise nebo emitent." },
          ].map((s) => (
            <div key={s.n} className="card step-card">
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}><span className="feature-icon" style={{ width: 38, height: 38, borderRadius: 9 }}><Icon name={s.icon} size={19} /></span><span className="step-num">{s.n}</span></div>
              <h3 style={{ fontSize: 18, marginTop: 18 }}>{s.t}</h3>
              <p style={{ color: "var(--ink-2)", marginTop: 8, fontSize: 14, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* DO / DON'T */}
      <section className="container container-wide" style={{ padding: "80px 24px 0" }}>
        <SectionHead eyebrow="Bez malých písmenek" title="Co portál je a co není" subtitle="Jsme na straně investora, který chce mít přehled. Ne na straně toho, kdo něco prodává." />
        <div className="dodont">
          <div className="dodont-col">
            <div className="dodont-head do"><Icon name="check" size={16} /> Co děláme</div>
            <ul className="dodont-list">
              <li>Sbíráme a přehledně zobrazujeme veřejná data o emisích a emitentech.</li>
              <li>Umožníme filtrovat podle výnosu, zajištění a typu emise a srovnat až 4 emise.</li>
              <li>Vysvětlujeme pojmy a upozorníme na nové emise e-mailem.</li>
            </ul>
          </div>
          <div className="dodont-col">
            <div className="dodont-head dont"><Icon name="x" size={16} /> Co neděláme</div>
            <ul className="dodont-list dont">
              <li>Neradíme, který dluhopis koupit, ani neprodáváme žádné produkty.</li>
              <li>Nehodnotíme bonitu emitentů ani pravděpodobnost splacení.</li>
              <li>Nejsme investiční poradce, obchodník s cennými papíry ani zprostředkovatel.</li>
            </ul>
          </div>
        </div>
      </section>

      {/* RISK */}
      <section className="container container-wide" style={{ padding: "80px 24px 0" }}>
        <SectionHead eyebrow="Než se rozhodnete" title="Na co si dát pozor" subtitle="Obecná osvěta, ne doporučení. Závazné podmínky najdete vždy v prospektu konkrétní emise." />
        <div className="risk-grid">
          {[
            { icon: "coins", t: "Vyšší výnos = vyšší riziko", d: "Nadprůměrný výnos obvykle kompenzuje vyšší riziko nesplacení. Zvažte, zda mu rozumíte." },
            { icon: "building", t: "Pozor na SPV struktury", d: "Účelově založené firmy nemusí mít majetek ani historii. Klíčové je, kdo a čím za emisi ručí." },
            { icon: "db", t: "Čtěte prospekt", d: "Závazné jsou jen podmínky v prospektu schváleném ČNB, ne letáky ani marketingové sliby." },
          ].map((r) => (
            <div className="risk-card" key={r.t}><div className="risk-ic"><Icon name={r.icon} size={20} /></div><h3 style={{ fontSize: 18, marginTop: 16 }}>{r.t}</h3><p style={{ color: "var(--ink-2)", marginTop: 8, fontSize: 14, lineHeight: 1.55 }}>{r.d}</p></div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section className="container" style={{ padding: "80px 24px 0", maxWidth: 840 }}>
        <SectionHead eyebrow="Časté dotazy" title="Co se ptá většina investorů" />
        <FAQ />
      </section>

      <Footer go={go} />
    </div>
  );
}

Object.assign(window, { HomeScreen, PreviewCard });