function HeroArt() {
  // Kompakter Mockup des Track-Menus aus dem UI-Kit
  const cols = [
    { id: 1, h: 4, tn: 27, rows: ["M-LK-01"] },
    { id: 2, h: 4, tn: 28, rows: ["BIO-LK-01", "CH-LK-01"] },
    { id: 3, h: 3, tn: 30, rows: ["EN-GK-02"] },
    { id: 4, h: 3, tn: 26, rows: ["GE-GK-01", "EK-GK-01"] },
  ];
  return (
    <div className="hero-art" aria-hidden="true">
      <div className="winchrome">
        <i/><i/><i/>
        <span className="url">schienengenerator · Q12 · 2026/27</span>
      </div>
      <div className="hero-art-body">
        <div className="hero-art-toolbar">
          <span className="pill">Schienenkandidat #001</span>
          <span className="stage">26 Std. gesamt · 8 Schienen</span>
        </div>
        <div className="hero-art-grid">
          {cols.map(c => (
            <div key={c.id} className="hero-art-col">
              <div className="head">
                <span>Schiene {c.id}</span>
                <span className="meta">{c.tn}·{c.h}h</span>
              </div>
              {c.rows.map((r,i) => <div key={i} className="row">{r}</div>)}
            </div>
          ))}
        </div>
        <div className="hero-art-foot">
          <span className="ok">
            <Icon name="check_circle"/> Keine Konflikte
          </span>
          <span style={{color: "var(--fg-subtle)", fontSize: 12, fontFamily: "var(--font-mono)"}}>
            SA · 28.412 it
          </span>
        </div>
      </div>
    </div>
  );
}

function Hero({ navigate }) {
  return (
    <section className="hero">
      <div className="hero-inner">
        <div>
          <span className="eyebrow">
            <Icon name="auto_awesome"/> Für die gymnasiale Oberstufe
          </span>
          <h1>
            Schienenpläne, die <span className="accent">aufgehen.</span>
          </h1>
          <p className="lede">
            Schienengenerator erstellt aus Schülerwahlen automatisch konfliktfreie
            Kursschienen für Q12 und Q13 — mit Simulated Annealing und
            ein paar Klicks statt einer Woche Excel.
          </p>
          <div className="hero-cta">
            <Button variant="primary" size="lg" icon="download" href="#/download"
                    onClick={(e)=>{e.preventDefault(); navigate("/download")}}>
              Download
            </Button>
            <Button size="lg" iconRight="arrow_forward" href="#features"
                    onClick={(e)=>{ e.preventDefault(); document.getElementById("features")?.scrollIntoView({behavior:"smooth"}); }}>
              So funktioniert's
            </Button>
          </div>
          <div className="hero-meta">
            <span><Icon name="check"/> macOS &amp; Windows</span>
            <span><Icon name="check"/> Lokal, ohne Schul-Cloud</span>
            <span><Icon name="check"/> Excel-In, Excel/XML-Out</span>
          </div>
        </div>
        <HeroArt/>
      </div>
    </section>
  );
}

window.Hero = Hero;