/* pages-home.jsx — landing hub with all sections */

function Hero({ onNav }) {
  return (
    <section className="hero">
      <div className="wrap hero__grid">
        <div className="hero__copy">
          <span className="eyebrow">Rekruten-Schmiede · Vorbereitungsportal</span>
          <h1 className="hero__title">Bereit für deinen<br />Dienststart.</h1>
          <p className="hero__lead">
            Strukturierte Vorbereitung, Checklisten und Trainingspläne für angehende
            Rekruten. Klar gegliedert, ohne Umwege — damit der erste Tag kein Sprung ins Ungewisse ist.
          </p>
          <div className="hero__cta">
            <button className="btn btn--lg" onClick={() => onNav('kw-plan')}>
              Vorbereitung starten <Icon name="arrowRight" size={19} />
            </button>
            <button className="btn btn--ghost btn--lg" onClick={() => onNav('kurse')}>
              Kursübersicht ansehen
            </button>
          </div>
          <dl className="hero__stats">
            <div><dt>12</dt><dd>Wochen-Plan</dd></div>
            <div><dt>24</dt><dd>Checklisten-Punkte</dd></div>
            <div><dt>4</dt><dd>Kursbereiche</dd></div>
          </dl>
        </div>

        <div className="hero__media">
          <image-slot id="hero-main" class="hero__img"
            shape="rounded" radius="10"
            placeholder="Bild hierher ziehen — Rekrut / Ausrüstung"></image-slot>
          <div className="hero__media-tag card">
            <Icon name="shieldCheck" size={20} />
            <div>
              <strong>Schritt für Schritt</strong>
              <span className="muted">Vom ersten Tag rückwärts geplant</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function QuickAccess({ onNav }) {
  return (
    <section className="section section--alt" id="schnellzugriff">
      <div className="wrap">
        <SectionHead eyebrow="Schnellzugriff" title="Alles Wichtige auf einen Blick"
          lead="Die zentralen Werkzeuge für deine Vorbereitung — direkt erreichbar." />
        <div className="tiles">
          {QUICK_LINKS.map(q => (
            <button key={q.id} className="tile" onClick={() => onNav(q.id)}>
              <span className="tile__icon"><Icon name={q.icon} size={22} /></span>
              <span className="tile__body">
                <span className="tile__top">
                  <span className="tile__label">{q.label}</span>
                  <Icon name={q.external ? 'external' : 'arrowRight'} size={17} className="tile__arrow" />
                </span>
                <span className="tile__desc">{q.desc}</span>
              </span>
              <span className="tile__meta mono">{q.meta}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function InfoSection() {
  const blocks = [
    { icon: 'shield', h: 'Was ist die Rekruten-Schmiede?', p: 'Ein privates, unabhängiges Informationsportal, das die Wochen vor dem Dienststart strukturiert. Keine Behörde — sondern eine klare Vorbereitungshilfe.' },
    { icon: 'user', h: 'Für wen ist die Plattform?', p: 'Für angehende Rekruten, die sich gezielt vorbereiten wollen: organisatorisch, körperlich und mental. Auch für Angehörige, die mitplanen.' },
    { icon: 'compass', h: 'Was bekommst du hier?', p: 'Checklisten, einen 7-Tage-Plan, einen 12-Wochen-Kalender und Kurse zu Fitness, Material und mentaler Vorbereitung — an einem Ort.' },
  ];
  return (
    <section className="section" id="info">
      <div className="wrap">
        <SectionHead eyebrow="Orientierung" title="Was ist die Rekruten-Schmiede?"
          lead="Drei Fragen, kurz beantwortet. Mehr Struktur, weniger Unsicherheit." />
        <div className="info-grid">
          {blocks.map((b, i) => (
            <article key={i} className="info-card card">
              <span className="info-card__icon"><Icon name={b.icon} size={22} /></span>
              <h3>{b.h}</h3>
              <p>{b.p}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CourseTeaser({ onNav }) {
  return (
    <section className="section section--alt">
      <div className="wrap">
        <div className="teaser-head">
          <SectionHead eyebrow="Kursübersicht" title="Vier Bereiche, ein Ziel"
            lead="Vorbereitung, Fitness, Mentales und Material — modular aufgebaut." />
          <button className="btn btn--quiet" onClick={() => onNav('kurse')}>
            Alle Kurse <Icon name="arrowRight" size={17} />
          </button>
        </div>
        <div className="cat-grid">
          {COURSE_CATEGORIES.map(c => (
            <button key={c.id} className="cat-card card" data-tint={c.tint} onClick={() => onNav('kurse')}>
              <span className="cat-card__bar" />
              <span className="cat-card__icon"><Icon name={c.icon} size={24} /></span>
              <h3>{c.label}</h3>
              <p>{c.blurb}</p>
              <span className="cat-card__foot mono">{c.courses.length} Kurse <Icon name="chevronRight" size={15} /></span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function PlanTeaser({ onNav }) {
  const preview = KW_PLAN.slice(0, 4);
  return (
    <section className="section" id="kw-teaser">
      <div className="wrap teaser-split">
        <div className="teaser-split__copy">
          <SectionHead eyebrow="KW-Plan & Kalender" title="Woche für Woche vorbereitet"
            lead="Ein 12-Wochen-Plan strukturiert deine Vorbereitung nach Kalenderwochen. Aufgaben abhaken, Fortschritt wird gespeichert." />
          <ul className="check-list">
            {['Aufgaben je Kalenderwoche', 'Fortschritt bleibt erhalten', 'Vier Phasen bis zum Dienststart'].map((t, i) => (
              <li key={i}><Icon name="check" size={17} /> {t}</li>
            ))}
          </ul>
          <button className="btn" onClick={() => onNav('kw-plan')}>
            Zum KW-Plan <Icon name="arrowRight" size={18} />
          </button>
        </div>
        <div className="teaser-split__media">
          <ul className="week-preview">
            {preview.map(w => (
              <li key={w.kw} className="week-preview__row card" data-tint={w.tint}>
                <span className="week-preview__kw mono">KW {w.kw}</span>
                <span className="week-preview__body">
                  <strong>Woche {w.week}</strong>
                  <span className="muted">{w.phase}</span>
                </span>
                <span className="chip chip--mono">{w.tasks.length} Aufgaben</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function ShopTeaser({ onNav }) {
  return (
    <section className="section section--alt">
      <div className="wrap">
        <div className="teaser-head">
          <SectionHead eyebrow="Rekruten-Shop" title="Material & Pakete"
            lead="Optionale Pakete für alle, die mehr Struktur möchten." />
          <button className="btn btn--quiet" onClick={() => onNav('shop')}>
            Zum Shop <Icon name="arrowRight" size={17} />
          </button>
        </div>
        <div className="shop-teaser-grid">
          {SHOP.slice(0, 3).map(s => (
            <button key={s.id} className="shop-mini card" data-tint={s.tint} onClick={() => onNav('shop')}>
              <image-slot id={`shop-mini-${s.id}`} class="shop-mini__img" shape="rounded" radius="7"
                placeholder="Produktbild"></image-slot>
              <span className="shop-mini__body">
                <span className="shop-mini__row">
                  <strong>{s.name}</strong>
                  {s.badge && <span className="chip">{s.badge}</span>}
                </span>
                <span className="muted shop-mini__desc">{s.desc}</span>
                <span className="shop-mini__price mono">{s.price}</span>
              </span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage({ onNav }) {
  return (
    <main>
      <Hero onNav={onNav} />
      <QuickAccess onNav={onNav} />
      <InfoSection />
      <CourseTeaser onNav={onNav} />
      <PlanTeaser onNav={onNav} />
      <ShopTeaser onNav={onNav} />
    </main>
  );
}

Object.assign(window, { HomePage });