// reel-screens.jsx — Pixel-faithful mockups of the actual SiteAuditor app
// (based on screenshots provided by the user). Mobile/PWA viewport with
// app bar, bottom nav, and the real screen layouts.

// ──────────────────────────────────────────────────────────────
// Shared bits — app bar with logo, bottom nav, shield SVG
// ──────────────────────────────────────────────────────────────
function ShieldLogo({ size = 44 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 10,
      background: 'linear-gradient(135deg, #1c2540, #1f3a8a)',
      border: `1px solid ${SA.border}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <svg width={size*0.55} height={size*0.55} viewBox="0 0 24 24" fill="none" stroke={SA.accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2 4 5v7c0 4.4 3.4 8.4 8 10 4.6-1.6 8-5.6 8-10V5l-8-3z"/>
        <path d="M9 12l2 2 4-4" stroke={SA.accent2} />
      </svg>
    </div>
  );
}

function AppBar({ right }) {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0,
      padding: '32px 36px', display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', background: SA.bg,
      borderBottom: `1px solid ${SA.borderLight}`, zIndex: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <ShieldLogo size={60} />
        <span style={{ fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 34, color: SA.text, letterSpacing: '-0.015em' }}>SiteAuditor</span>
      </div>
      {right}
    </div>
  );
}

function BottomNav({ active = 'analyse' }) {
  const items = [
    { id: 'analyse', label: 'Analyse', icon: 'globe' },
    { id: 'monitoring', label: 'Monitoring', icon: 'bars' },
    { id: 'settings', label: 'Einstellungen', icon: 'cog' },
  ];
  const Icon = ({ kind, color, size = 32 }) => {
    const c = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
    if (kind === 'globe')  return <svg {...c}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18"/></svg>;
    if (kind === 'bars')   return <svg {...c}><path d="M4 17v-3M9 17v-7M14 17V8M19 17v-5"/></svg>;
    if (kind === 'cog')    return <svg {...c}><circle cx="12" cy="12" r="3"/><path d="M19.4 14.4l1.6.9-2 3.4-1.7-.9c-.6.5-1.3.9-2 1.2l-.3 1.9h-4l-.3-1.9c-.7-.3-1.4-.7-2-1.2l-1.7.9-2-3.4 1.6-.9c-.1-.7-.1-1.5 0-2.2l-1.6-.9 2-3.4 1.7.9c.6-.5 1.3-.9 2-1.2L9.9 4h4l.3 1.9c.7.3 1.4.7 2 1.2l1.7-.9 2 3.4-1.6.9c.1.7.1 1.5 0 2.2z"/></svg>;
    return null;
  };
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, height: 130,
      background: SA.bg, borderTop: `1px solid ${SA.borderLight}`,
      display: 'flex', zIndex: 10,
    }}>
      {items.map(item => {
        const isActive = item.id === active;
        const color = isActive ? SA.text : SA.textMuted;
        return (
          <div key={item.id} style={{
            flex: 1, display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 10,
          }}>
            <Icon kind={item.icon} color={color} size={36} />
            <span style={{
              fontFamily: 'var(--sans)', fontSize: 20,
              fontWeight: isActive ? 600 : 500, color,
            }}>{item.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Screen 1 · Homepage (Startseite)
// ──────────────────────────────────────────────────────────────
function SiteAuditorHome({ typedUrl = '', showCursor = true, time = 0, buttonPress = 0 }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: SA.bg, color: SA.text,
      position: 'relative', overflow: 'hidden',
    }}>
      <AppBar right={
        <button style={{
          background: SA.accent, color: '#0d1117', border: 'none',
          padding: '14px 26px', borderRadius: 10,
          fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 24,
          display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer',
          letterSpacing: '-0.01em',
        }}>
          <span>→</span>
          <span>Anmelden</span>
        </button>
      } />

      <div style={{
        padding: '180px 56px 56px', display: 'flex', flexDirection: 'column', gap: 30,
      }}>
        {/* Hero */}
        <h1 style={{
          margin: 0, fontFamily: 'var(--sans)', fontWeight: 800,
          fontSize: 100, lineHeight: 1.0, letterSpacing: '-0.035em',
          color: SA.text, textAlign: 'center',
        }}>
          DSGVO,<br/>Sicherheit&nbsp;&amp;&nbsp;Recht
        </h1>
        <div style={{
          textAlign: 'center', fontFamily: 'var(--sans)', fontWeight: 600,
          fontSize: 60, lineHeight: 1.1, letterSpacing: '-0.025em', color: SA.accent,
        }}>— automatisch geprüft</div>

        <p style={{
          textAlign: 'center', margin: 0, fontSize: 28, lineHeight: 1.45,
          color: SA.textDim, padding: '0 16px',
        }}>
          DSGVO, Impressum, Datenschutz, Security-Header,
          Tracker, Accessibility und mehr — vollautomatisch
          in Sekunden analysiert.
        </p>

        {/* URL input card */}
        <div style={{
          marginTop: 14, background: SA.bg, border: `1.5px solid ${SA.accent}`,
          borderRadius: 14, padding: '32px 24px',
          display: 'flex', flexDirection: 'column', gap: 22,
        }}>
          <div style={{ textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke={SA.textDim} strokeWidth="2" strokeLinecap="round">
              <circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/>
            </svg>
          </div>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 30, color: typedUrl ? SA.text : SA.textMuted,
            textAlign: 'center', letterSpacing: '-0.005em', minHeight: 38,
          }}>
            {typedUrl || 'https://ihre-domain.de'}
            {showCursor && <span style={{ color: SA.accent }}>{blinkCursor(time, SA.accent)}</span>}
          </div>
          <button style={{
            background: SA.accent, color: '#0d1117', border: 'none',
            padding: '24px', borderRadius: 12,
            fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 30,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
            cursor: 'pointer', letterSpacing: '-0.015em',
            transform: `scale(${1 - buttonPress * 0.04})`,
            filter: buttonPress > 0.1 ? `brightness(${1 - buttonPress * 0.2})` : 'none',
            transition: 'transform 60ms',
          }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0d1117" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 2 4 5v7c0 4.4 3.4 8.4 8 10 4.6-1.6 8-5.6 8-10V5l-8-3z"/>
            </svg>
            Jetzt prüfen
          </button>
        </div>

        <div style={{
          textAlign: 'center', fontSize: 22, color: SA.textDim, lineHeight: 1.5,
        }}>
          Bitte nur Webseiten prüfen, für die Sie<br/>
          berechtigt sind · <span style={{ color: SA.accent }}>Was wird geprüft?</span>
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Screen 2 · Audit running (Analyse läuft)
// ──────────────────────────────────────────────────────────────
const RUN_STEPS = [
  'Webseite abrufen & HTTP-Header analysieren',
  'TLS-Zertifikat & HTTPS-Konfiguration prüfen',
  'Sicherheits-Header analysieren (CSP, HSTS, X-Frame)',
  'Impressum & Datenschutzerklärung suchen',
  'Cookie-Consent & Tracker identifizieren',
  'Subdomain-Enumeration & DNS-Konfiguration',
  'Responsive Design & externe CSS analysieren',
  'Accessibility & WCAG-Konformität prüfen',
  'SEO-Signale & Performance messen',
  'Analyse abschließen & Report erstellen',
];

function AuditRunning({ progress = 0, time = 0 }) {
  // Compute which step is "active" and which are done
  const stepCount = RUN_STEPS.length;
  const activeIdx = Math.min(stepCount - 1, Math.floor(progress * stepCount));
  const remainingSec = Math.max(0, Math.ceil((1 - progress) * 25));

  return (
    <div style={{
      width: '100%', height: '100%', background: SA.bg, color: SA.text,
      position: 'relative', overflow: 'hidden',
    }}>
      <AppBar right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 26, color: SA.text }}>Analyse</span>
          <div style={{
            width: 48, height: 48, borderRadius: 10, border: `1px solid ${SA.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', background: SA.bgCard,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={SA.text} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
            </svg>
          </div>
        </div>
      } />

      <div style={{
        padding: '170px 36px 150px', display: 'flex', flexDirection: 'column', gap: 30,
      }}>
        {/* Spinner */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
          <div style={{ position: 'relative', width: 180, height: 180 }}>
            <svg width={180} height={180} style={{ position: 'absolute', inset: 0, transform: `rotate(${time*180}deg)` }}>
              <circle cx="90" cy="90" r="82" fill="none" stroke={SA.bgCard} strokeWidth="6" />
              <circle cx="90" cy="90" r="82" fill="none" stroke={SA.accent} strokeWidth="6"
                strokeDasharray="80 415" strokeLinecap="round" />
            </svg>
            <svg width={180} height={180} style={{ position: 'absolute', inset: 0, transform: `rotate(${-time*140}deg)` }}>
              <circle cx="90" cy="90" r="64" fill="none" stroke={SA.borderLight} strokeWidth="4" />
              <circle cx="90" cy="90" r="64" fill="none" stroke={SA.accent2} strokeWidth="4"
                strokeDasharray="40 322" strokeLinecap="round" />
            </svg>
            <div style={{
              position: 'absolute', inset: 0, display: 'flex',
              alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{ width: 12, height: 12, borderRadius: '50%', background: SA.accent }} />
            </div>
          </div>
        </div>

        {/* Status text */}
        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontFamily: 'var(--sans)', fontWeight: 800, fontSize: 64,
            letterSpacing: '-0.025em', color: SA.text, lineHeight: 1.05,
          }}>Analyse läuft…</div>
          <div style={{
            marginTop: 14, fontFamily: 'var(--mono)', fontSize: 26,
            color: SA.accent,
          }}>https://siteauditor.de/</div>
        </div>

        {/* Progress bar */}
        <div style={{ marginTop: 12 }}>
          <div style={{
            height: 14, background: SA.bgCard, borderRadius: 7,
            border: `1px solid ${SA.borderLight}`, overflow: 'hidden',
          }}>
            <div style={{
              height: '100%', width: `${progress*100}%`,
              background: SA.accent, transition: 'width 60ms linear',
            }} />
          </div>
          <div style={{
            marginTop: 14, display: 'flex', justifyContent: 'space-between',
            fontFamily: 'var(--sans)',
          }}>
            <span style={{ fontSize: 28, fontWeight: 700, color: SA.accent }}>{Math.round(progress*100)} %</span>
            <span style={{ fontSize: 22, color: SA.textDim, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={SA.textDim} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
              </svg>
              ca. {remainingSec}s verbleibend
            </span>
          </div>
        </div>

        {/* Steps */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
          {RUN_STEPS.map((s, i) => {
            const isDone = i < activeIdx;
            const isActive = i === activeIdx;
            const isPending = i > activeIdx;
            const bg = isActive ? SA.accentBg : 'transparent';
            const border = isActive ? `1px solid rgba(88,166,255,0.45)` : '1px solid transparent';
            const color = isDone ? SA.text : isActive ? SA.text : SA.textMuted;
            const fw = isActive ? 600 : 500;
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 16,
                padding: '14px 18px', borderRadius: 10, background: bg, border,
              }}>
                <span style={{ width: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {isDone && (
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={SA.pass} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M4 12l5 5 11-11"/>
                    </svg>
                  )}
                  {isActive && (
                    <svg width="22" height="22" viewBox="0 0 24 24" fill={SA.accent}>
                      <path d="M5 4l14 8-14 8V4z"/>
                    </svg>
                  )}
                  {isPending && (
                    <div style={{ width: 18, height: 18, borderRadius: '50%', border: `1.5px solid ${SA.textMuted}` }} />
                  )}
                </span>
                <span style={{
                  fontFamily: 'var(--sans)', fontSize: 22, fontWeight: fw, color, lineHeight: 1.3,
                }}>{s}</span>
              </div>
            );
          })}
        </div>
      </div>

      <BottomNav active="analyse" />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Screen 3 · Audit results (Auswertung) — Sicherheit-Karte expandiert
// ──────────────────────────────────────────────────────────────
const SEC_CHECKS = [
  { title: 'HTTPS / TLS aktiviert',                 desc: 'Die Webseite wird über HTTPS ausgeliefert – Daten werden verschlüsselt übertragen.' },
  { title: 'TLS-Zertifikat gültig',                 desc: 'Das TLS-Zertifikat ist gültig und vertrauenswürdig.' },
  { title: 'SSL-Zertifikat Ablaufdatum (noch 89 Tage)', desc: 'Zertifikat gültig bis 18.8.2026 (noch 89 Tage). Aussteller: Let\u2019s Encrypt.' },
  { title: 'HTTP → HTTPS Weiterleitung',            desc: 'HTTP-Aufrufe werden automatisch auf HTTPS weitergeleitet.' },
  { title: 'CAA DNS-Record',                        desc: 'CAA-Record vorhanden. Autorisierte Zertifizierungsstellen: letsencrypt.org.' },
  { title: 'SPF DNS-Record (E-Mail-Spoofing)',      desc: 'SPF mit Softfail (~all): Nicht autorisierte Server werden markiert, aber nicht blockiert.' },
];

function AuditResults({ checksAnalyzed = 84, reveal = 1 }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: SA.bg, color: SA.text,
      position: 'relative', overflow: 'hidden',
    }}>
      <AppBar right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 26, color: SA.text }}>Analyse</span>
          <div style={{
            width: 48, height: 48, borderRadius: 10, border: `1px solid ${SA.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', background: SA.bgCard,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={SA.text} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
            </svg>
          </div>
        </div>
      } />

      <div style={{
        padding: '170px 36px 150px', display: 'flex', flexDirection: 'column', gap: 22,
      }}>
        {/* Site preview thumbnail */}
        <div style={{
          background: SA.bgCard, border: `1px solid ${SA.border}`, borderRadius: 12,
          height: 220, padding: 0, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: 12, left: 12, right: 12, height: 24,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#3a3f47' }} />
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#3a3f47' }} />
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#3a3f47' }} />
            <div style={{ flex: 1, background: SA.bg, height: 22, borderRadius: 5, marginLeft: 8 }} />
          </div>
          {/* a faint preview rectangle */}
          <div style={{
            position: 'absolute', top: 50, left: 12, right: 12, bottom: 12,
            background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 14px, rgba(255,255,255,0.02) 14px 28px)',
            borderRadius: 6,
          }} />
          {/* Mock CTA button inside thumb */}
          <div style={{
            position: 'absolute', top: 80, right: 30, padding: '6px 16px',
            background: SA.accent, color: '#fff', borderRadius: 4,
            fontFamily: 'var(--sans)', fontSize: 12, fontWeight: 600,
          }}>Alle akzeptieren</div>
        </div>

        <div style={{
          fontFamily: 'var(--sans)', fontSize: 26, color: SA.textDim, textAlign: 'center',
        }}>
          <span style={{ fontWeight: 700, color: SA.text }}>{checksAnalyzed}</span> Prüfpunkte analysiert
        </div>

        {/* PDF button */}
        <button style={{
          background: SA.bgCard, color: SA.text, border: `1px solid ${SA.border}`,
          padding: '20px', borderRadius: 12,
          fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 26,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={SA.text} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 4v12M6 12l6 6 6-6M4 20h16"/>
          </svg>
          PDF-Bericht
        </button>

        {/* Sicherheit accordion — expanded */}
        <div style={{
          background: SA.bgCard, border: `1px solid ${SA.border}`,
          borderRadius: 12, overflow: 'hidden',
        }}>
          {/* Header */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 16, padding: '20px 24px',
            borderBottom: `2px solid ${SA.pass}`,
          }}>
            <div style={{
              width: 50, height: 50, borderRadius: 10, background: SA.accentBg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `1px solid rgba(88,166,255,0.35)`,
            }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={SA.accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 2 4 5v7c0 4.4 3.4 8.4 8 10 4.6-1.6 8-5.6 8-10V5l-8-3z"/>
              </svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 28, color: SA.text, letterSpacing: '-0.01em' }}>Sicherheit</div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 20, color: SA.textDim }}>18 Prüfpunkte</div>
            </div>
            <div style={{
              padding: '6px 14px', borderRadius: 999, background: SA.passBg,
              border: `1px solid rgba(63,185,80,0.4)`, color: SA.pass,
              fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 22,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>18 <span>✓</span></div>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={SA.textDim} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M6 15l6-6 6 6"/>
            </svg>
          </div>

          {/* Checks list */}
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {SEC_CHECKS.map((chk, i) => {
              const revealAt = i / SEC_CHECKS.length;
              const p = Math.max(0, Math.min(1, (reveal - revealAt) * 4));
              return (
                <div key={i} style={{
                  display: 'flex', gap: 16, padding: '20px 24px',
                  borderBottom: i < SEC_CHECKS.length-1 ? `1px solid ${SA.borderLight}` : 'none',
                  opacity: p, transform: `translateX(${(1-p)*-10}px)`,
                }}>
                  <div style={{
                    width: 30, height: 30, borderRadius: '50%', flexShrink: 0,
                    background: SA.passBg, border: `1px solid rgba(63,185,80,0.4)`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={SA.pass} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M4 12l5 5 11-11"/>
                    </svg>
                  </div>
                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <div style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 23, color: SA.text, letterSpacing: '-0.01em' }}>{chk.title}</div>
                    <div style={{ fontFamily: 'var(--sans)', fontSize: 18, color: SA.textDim, lineHeight: 1.45 }}>{chk.desc}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <BottomNav active="analyse" />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Screen 4 · /info — "Was prüft SiteAuditor?"
// ──────────────────────────────────────────────────────────────
function CatIcon({ kind, size = 36, color }) {
  const c = color || SA.accent;
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'security':   return <svg {...common}><path d="M12 2 4 5v7c0 4.4 3.4 8.4 8 10 4.6-1.6 8-5.6 8-10V5l-8-3z"/></svg>;
    case 'seo':        return <svg {...common}><circle cx="11" cy="11" r="6"/><path d="M21 21l-5.6-5.6"/></svg>;
    case 'performance':return <svg {...common}><path d="M13 2 4 14h6l-2 8 10-12h-6l1-8z"/></svg>;
    case 'legal':      return <svg {...common}><path d="M12 3v18M3 7h18M6 7l-3 7c0 1.7 1.3 3 3 3s3-1.3 3-3l-3-7zM18 7l-3 7c0 1.7 1.3 3 3 3s3-1.3 3-3l-3-7z"/></svg>;
    case 'privacy':    return <svg {...common}><circle cx="12" cy="12" r="2.5"/><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/></svg>;
    case 'a11y':       return <svg {...common}><circle cx="12" cy="4" r="2"/><path d="M5 9l5 2v4l-2 7M19 9l-5 2v4l2 7M9 13h6"/></svg>;
    case 'responsive': return <svg {...common}><rect x="3" y="5" width="11" height="13" rx="1"/><rect x="15" y="9" width="6" height="11" rx="1"/></svg>;
    case 'tech':       return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19.4 14.4l1.6.9-2 3.4-1.7-.9c-.6.5-1.3.9-2 1.2l-.3 1.9h-4l-.3-1.9c-.7-.3-1.4-.7-2-1.2l-1.7.9-2-3.4 1.6-.9c-.1-.7-.1-1.5 0-2.2l-1.6-.9 2-3.4 1.7.9c.6-.5 1.3-.9 2-1.2L9.9 4h4l.3 1.9c.7.3 1.4.7 2 1.2l1.7-.9 2 3.4-1.6.9c.1.7.1 1.5 0 2.2z"/></svg>;
    default: return null;
  }
}

const INFO_CATS = [
  { name: 'Sicherheit',       icon: 'security',    desc: 'HTTPS, Security-Header, DMARC, SPF, DKIM', n: 14 },
  { name: 'SEO',              icon: 'seo',         desc: 'Title, Meta, Schema.org, Canonical, Sitemap', n: 18 },
  { name: 'Performance',      icon: 'performance', desc: 'Ladezeit, Komprimierung, Caching', n: 12 },
  { name: 'Rechtliches',      icon: 'legal',       desc: 'Impressum, Datenschutz, Cookie-Consent', n: 10 },
  { name: 'Datenschutz',      icon: 'privacy',     desc: 'Tracker, Google Fonts, externe Ressourcen', n: 14 },
  { name: 'Barrierefreiheit', icon: 'a11y',        desc: 'ARIA, Alt-Texte, Kontrast, Tastatur-Nav', n: 15 },
  { name: 'Responsive',       icon: 'responsive',  desc: 'Mobile-Optimierung, Touch-Targets', n: 12 },
  { name: 'Technik',          icon: 'tech',        desc: 'Favicon, HTTP/2, 404, Hosting-Provider', n: 10 },
];

function InfoPage({ reveal = 1 }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: SA.bg, color: SA.text,
      position: 'relative', overflow: 'hidden',
    }}>
      <AppBar right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{
            fontFamily: 'var(--sans)', fontSize: 24, color: SA.textDim,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>← Zurück</span>
          <button style={{
            background: SA.accent, color: '#0d1117', border: 'none',
            padding: '14px 24px', borderRadius: 10,
            fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 22,
          }}>Jetzt prüfen</button>
        </div>
      } />

      <div style={{
        padding: '170px 56px 60px', display: 'flex', flexDirection: 'column', gap: 30,
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '10px 20px', borderRadius: 999,
            border: `1px solid rgba(88,166,255,0.45)`, background: SA.accentBg,
            fontFamily: 'var(--sans)', fontSize: 20, color: SA.accent, fontWeight: 700,
            letterSpacing: '0.06em',
          }}>
            TRANSPARENZ &amp; VOLLSTÄNDIGKEIT
          </div>
        </div>

        <h1 style={{
          margin: 0, fontFamily: 'var(--sans)', fontWeight: 800,
          fontSize: 90, lineHeight: 0.98, letterSpacing: '-0.035em', color: SA.text,
        }}>
          Was prüft<br/>
          <span style={{ color: SA.accent }}>SiteAuditor?</span>
        </h1>

        <p style={{
          margin: 0, fontSize: 26, lineHeight: 1.45, color: SA.textDim,
        }}>
          Eine vollständige Analyse Ihrer Website in unter
          60 Sekunden — bis zu 124 Prüfpunkte in 9 Kategorien.
          Kostenlos, ohne Registrierung.
        </p>

        {/* Grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginTop: 14,
        }}>
          {INFO_CATS.map((c, i) => {
            const revealAt = i / INFO_CATS.length;
            const p = Math.max(0, Math.min(1, (reveal - revealAt) * 4));
            return (
              <div key={i} style={{
                background: SA.bgCard, border: `1px solid ${SA.border}`,
                borderRadius: 12, padding: '22px',
                display: 'flex', flexDirection: 'column', gap: 12,
                opacity: p, transform: `translateY(${(1-p)*16}px)`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <CatIcon kind={c.icon} size={40} color={SA.accent} />
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 16, color: SA.textDim,
                    letterSpacing: '0.08em',
                  }}>{String(c.n).padStart(2,'0')} pkt</span>
                </div>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.015em', color: SA.text }}>
                  {c.name}
                </div>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 16, color: SA.textDim, lineHeight: 1.4 }}>
                  {c.desc}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ShieldLogo, AppBar, BottomNav,
  SiteAuditorHome, AuditRunning, AuditResults, InfoPage,
  RUN_STEPS, SEC_CHECKS, INFO_CATS, CatIcon,
});