/* GA-Coach · Kompetenz-Check — Landing-Sektionen */

function KCBenefit({ icon, children }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, color: 'rgba(255,255,255,.92)', fontSize: 14.5, fontWeight: 600 }}>
      <span style={{ width: 26, height: 26, borderRadius: 999, background: 'rgba(144,186,229,.2)', color: 'var(--ga-secondary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={icon} size={15} /></span>
      {children}
    </div>
  );
}

function KCHero({ onStart }) {
  useLucide([]);
  const bg = circuitDataUri();
  return (
    <section id="top" style={{ background: `var(--ga-primary-900) ${bg}`, backgroundSize: '340px 340px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(1100px 540px at 80% -10%, rgba(47,88,164,.55), transparent 60%)', pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative' }}>
        <div className="hero-grid" style={{ padding: '76px 0 88px' }}>
          <div className="reveal in">
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', borderRadius: 999, background: 'rgba(144,186,229,.16)', border: '1px solid rgba(144,186,229,.3)', color: '#cfe1f6', fontSize: 12.5, fontWeight: 700, letterSpacing: '.04em' }}>
              <Icon name="clipboard-list" size={15} /> Kostenloser GA-Kompetenz-Check
            </div>
            <h1 style={{ fontSize: 'clamp(33px, 5vw, 56px)', fontWeight: 800, lineHeight: 1.08, letterSpacing: '-.02em', color: '#fff', margin: '20px 0 0', textWrap: 'balance' }}>
              Wo stehst du aktuell in der <span style={{ color: 'var(--ga-secondary)' }}>Gebäudeautomation?</span>
            </h1>
            <p style={{ fontSize: 'clamp(16px,2vw,19px)', lineHeight: 1.6, color: 'rgba(255,255,255,.84)', margin: '20px 0 0', maxWidth: 540 }}>
              Finde in nur 5 Minuten heraus, wie gut dein Wissen bereits ist — und erhalte einen persönlichen Lernplan mit passenden Empfehlungen für deinen nächsten Entwicklungsschritt.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
              <button onClick={onStart} className="btn btn-light btn-lg"><Icon name="gauge" size={19} /> Kostenlosen Kompetenz-Check starten</button>
            </div>
            <div style={{ display: 'flex', gap: '14px 26px', marginTop: 28, flexWrap: 'wrap' }}>
              <KCBenefit icon="check">Kostenlos</KCBenefit>
              <KCBenefit icon="clock">ca. 5 Minuten</KCBenefit>
              <KCBenefit icon="file-text">Persönlicher Kompetenzbericht</KCBenefit>
              <KCBenefit icon="route">Individuelle Lernempfehlungen</KCBenefit>
            </div>
          </div>
          <div className="reveal in" style={{ display: 'flex', justifyContent: 'center' }}>
            <KCHeroPreview onStart={onStart} />
          </div>
        </div>
      </div>
    </section>
  );
}

function KCHeroPreview() {
  useLucide([]);
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 400 }}>
      <div style={{ background: '#fff', borderRadius: 22, padding: 24, boxShadow: '0 30px 70px rgba(0,0,0,.45)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/coach-photo.png" alt="Dennis" width="52" height="52" style={{ borderRadius: 999, border: '3px solid #fff', boxShadow: 'var(--ga-shadow-2)', objectFit: 'cover' }} />
          <div>
            <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ga-primary)' }}>Dein Ergebnis</div>
            <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--ga-text)', lineHeight: 1.1, marginTop: 2 }}>Du startest als <span style={{ color: 'var(--ga-primary)' }}>Intermediate</span></div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, margin: '18px 0 6px' }}>
          {[1, 1, 1, 0].map((on, i) => <div key={i} style={{ flex: 1, height: 8, borderRadius: 999, background: on ? 'var(--ga-primary)' : 'var(--ga-line)' }} />)}
        </div>
        <div style={{ fontSize: 11, color: 'var(--ga-muted)', fontWeight: 700, letterSpacing: '.03em' }}>Beginner · Advanced Beginner · Intermediate · Advanced</div>

        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 11 }}>
          {[{ l: 'Funktionslisten', v: 82 }, { l: 'BACnet & Netzwerk', v: 64 }, { l: 'Regelung & Betrieb', v: 45 }].map(r => (
            <div key={r.l}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, fontWeight: 700, color: 'var(--ga-text-soft)', marginBottom: 5 }}><span>{r.l}</span><span style={{ color: 'var(--ga-primary)' }}>{r.v}%</span></div>
              <div className="rep-bar-track"><div className="rep-bar-fill" style={{ width: r.v + '%' }} /></div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18, padding: '13px 15px', borderRadius: 12, background: 'var(--ga-section)', border: '1px solid var(--ga-line)', display: 'flex', alignItems: 'center', gap: 11 }}>
          <span style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--ga-primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="route" size={18} /></span>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ga-text)', lineHeight: 1.35 }}>Persönlicher Lernpfad mit 4 Modulen</div>
        </div>
      </div>
      <div style={{ position: 'absolute', right: -16, top: 26, background: 'var(--ga-accent-amber)', color: '#3a2600', borderRadius: 12, padding: '9px 13px', boxShadow: 'var(--ga-shadow-3)', display: 'flex', alignItems: 'center', gap: 8, fontWeight: 800, fontSize: 13, transform: 'rotate(3deg)' }}>
        <Icon name="sparkles" size={16} /> 100 % gratis
      </div>
    </div>
  );
}

function KCWhy() {
  useLucide([]);
  const points = [
    { i: 'shield-off', t: 'Keine Prüfung', d: 'Du wirst nicht getestet oder bewertet — es geht allein um deine Standortbestimmung.' },
    { i: 'smile', t: 'Kein Bestehen, kein Durchfallen', d: 'Es gibt keine falschen Antworten. Antworte einfach ehrlich, dann passt das Ergebnis.' },
    { i: 'scan-line', t: 'Ehrliche Einschätzung', d: 'Du siehst klar, wo deine Stärken liegen und wo noch Luft nach oben ist.' },
    { i: 'route', t: 'Persönliche Empfehlungen', d: 'Statt allgemeiner Tipps bekommst du einen Lernpfad, der zu deinem Wissensstand passt.' },
    { i: 'compass', t: 'Orientierung für deine Entwicklung', d: 'Du weißt danach genau, welcher nächste Schritt dich wirklich weiterbringt.' },
  ];
  return (
    <section className="section container">
      <div className="split-2" style={{ alignItems: 'flex-start' }}>
        <div className="reveal" style={{ position: 'sticky', top: 96 }}>
          <div className="eyebrow"><Icon name="help-circle" size={14} /> Warum dieser Check?</div>
          <h2 style={{ fontSize: 'clamp(28px,4vw,38px)', fontWeight: 800, lineHeight: 1.15, letterSpacing: '-.01em', margin: '12px 0 0', textWrap: 'balance' }}>
            Ein ehrlicher Blick auf dein Wissen — ohne Druck.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ga-muted)', margin: '16px 0 0', maxWidth: 460 }}>
            Der Kompetenz-Check ist kein Quiz und keine Prüfung. Er ist dein kostenloses Werkzeug, um deinen aktuellen Stand sauber einzuordnen und gezielt weiterzukommen.
          </p>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginTop: 24, padding: '16px 18px', background: 'var(--ga-primary-050)', borderRadius: 14, borderLeft: '3px solid var(--ga-primary)', maxWidth: 460 }}>
            <img src="assets/coach-photo.png" alt="Dennis" width="48" height="48" style={{ borderRadius: 999, objectFit: 'cover', flexShrink: 0 }} />
            <div style={{ fontSize: 14, color: 'var(--ga-text-soft)', lineHeight: 1.5 }}><b>„Antworte einfach ehrlich.</b> Genau so wird dein Lernpfad richtig gut."<br /><span style={{ color: 'var(--ga-muted)', fontSize: 12.5, fontWeight: 700 }}>— Dennis, dein Coach</span></div>
          </div>
        </div>
        <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {points.map(p => (
            <div key={p.t} className="card" style={{ padding: 20, display: 'flex', gap: 15 }}>
              <BadgeIcon name={p.i} size={46} />
              <div>
                <h3 style={{ fontSize: 16.5, fontWeight: 800, lineHeight: 1.25 }}>{p.t}</h3>
                <p style={{ fontSize: 14, color: 'var(--ga-muted)', lineHeight: 1.5, marginTop: 4 }}>{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function KCProcess({ onStart }) {
  useLucide([]);
  const steps = [
    { i: 'list-checks', t: 'Fragen beantworten', d: '12 kurze, ehrliche Fragen zu deinem Arbeitsalltag in der GA.' },
    { i: 'scan-search', t: 'Kompetenz analysieren', d: 'Wir werten deine Stärken und Entwicklungsfelder automatisch aus.' },
    { i: 'file-text', t: 'Persönlichen Report erhalten', d: 'Dein Kompetenzlevel, dein Profil und konkrete Empfehlungen.' },
    { i: 'rocket', t: 'Mit Lernpfad starten', d: 'Direkt loslegen — mit den Modulen, die dich am meisten weiterbringen.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--ga-section)' }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 44px' }}>
          <div className="eyebrow" style={{ justifyContent: 'center' }}><Icon name="git-commit-horizontal" size={14} /> So läuft dein Check</div>
          <h2 style={{ fontSize: 'clamp(28px,4vw,38px)', fontWeight: 800, lineHeight: 1.15, letterSpacing: '-.01em', margin: '12px 0 0', textWrap: 'balance' }}>In vier Schritten zu deinem Lernplan.</h2>
        </div>
        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 18 }}>
          {steps.map((s, i) => (
            <div key={s.t} className="card" style={{ padding: 24, position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <BadgeIcon name={s.i} size={52} />
                <span style={{ fontSize: 40, fontWeight: 800, color: 'var(--ga-line-strong)', lineHeight: 1 }}>{i + 1}</span>
              </div>
              <h3 style={{ fontSize: 17, fontWeight: 800, margin: '16px 0 0', lineHeight: 1.25 }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: 'var(--ga-muted)', lineHeight: 1.5, marginTop: 6 }}>{s.d}</p>
            </div>
          ))}
        </div>
        <div className="reveal" style={{ textAlign: 'center', marginTop: 36 }}>
          <button onClick={onStart} className="btn btn-primary btn-lg"><Icon name="gauge" size={19} /> Jetzt starten — kostenlos</button>
        </div>
      </div>
    </section>
  );
}

function KCAudience() {
  useLucide([]);
  const roles = ['GA-Planer', 'MSR-Fachplaner', 'Systemintegratoren', 'Inbetriebnehmer', 'Servicetechniker', 'Berufseinsteiger', 'Young Professionals', 'Ingenieure der GA'];
  return (
    <section className="section--tight container">
      <div className="reveal" style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto' }}>
        <div className="eyebrow" style={{ justifyContent: 'center' }}><Icon name="users" size={14} /> Für wen?</div>
        <h2 style={{ fontSize: 'clamp(24px,3.4vw,32px)', fontWeight: 800, lineHeight: 1.2, letterSpacing: '-.01em', margin: '12px 0 22px', textWrap: 'balance' }}>Gemacht für Fachkräfte der Gebäudeautomation.</h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center' }}>
          {roles.map(r => (
            <span key={r} className="chip" style={{ fontSize: 13.5, padding: '9px 16px' }}><Icon name="check" size={14} /> {r}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function KCFinalCTA({ onStart }) {
  useLucide([]);
  const bg = circuitDataUri();
  return (
    <section style={{ background: `var(--ga-primary-900) ${bg}`, backgroundSize: '340px 340px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(800px 420px at 20% 120%, rgba(47,88,164,.6), transparent 60%)', pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', padding: '76px 24px', textAlign: 'center' }}>
        <h2 style={{ fontSize: 'clamp(28px,4vw,40px)', fontWeight: 800, lineHeight: 1.12, letterSpacing: '-.01em', color: '#fff', textWrap: 'balance', maxWidth: 680, margin: '0 auto' }}>
          In 5 Minuten weißt du, wo du stehst.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,.82)', margin: '16px auto 0', maxWidth: 520 }}>
          Kein Risiko, keine Kosten. Nur ein klarer Blick auf dein Wissen — und ein Plan, der dich weiterbringt.
        </p>
        <button onClick={onStart} className="btn btn-light btn-lg" style={{ marginTop: 30 }}><Icon name="gauge" size={19} /> Kompetenz-Check starten</button>
      </div>
    </section>
  );
}

Object.assign(window, { KCHero, KCWhy, KCProcess, KCAudience, KCFinalCTA, KCBenefit });