// Hero C — Dark/Urgent: bold dark background, live indicator, punchy CTA-focused
// Feels like a Meta Ads landing — contrast, urgency, countdown.

function Countdown() {
  const { days, hrs, mins, secs } = useCountdown(WEBINAR_TARGET_MS);

  const Cell = ({ n, l }) => (
    <div style={{ textAlign: 'center', minWidth: 64 }}>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 34, fontWeight: 500,
        color: '#fff',
        letterSpacing: '-0.02em',
        lineHeight: 1,
        fontVariantNumeric: 'tabular-nums',
      }}>{String(n).padStart(2, '0')}</div>
      <div style={{
        fontSize: 10.5, letterSpacing: '0.12em',
        textTransform: 'uppercase',
        color: 'rgba(255,255,255,.5)',
        marginTop: 6,
        fontFamily: "'Inter', sans-serif",
      }}>{l}</div>
    </div>
  );

  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 18,
      padding: '14px 20px',
      background: 'rgba(255,255,255,.04)',
      border: '1px solid rgba(255,255,255,.1)',
      borderRadius: 14,
    }}>
      <Cell n={days} l="Tage" />
      <span style={{ color: 'rgba(255,255,255,.2)', fontSize: 22 }}>:</span>
      <Cell n={hrs}  l="Std" />
      <span style={{ color: 'rgba(255,255,255,.2)', fontSize: 22 }}>:</span>
      <Cell n={mins} l="Min" />
      <span style={{ color: 'rgba(255,255,255,.2)', fontSize: 22 }}>:</span>
      <Cell n={secs} l="Sek" />
    </div>
  );
}

function HeroDark({ onSubmit }) {
  return (
    <section className="vp-hero-section" style={{
      background: `
        radial-gradient(ellipse at 20% 0%, oklch(0.32 0.12 255 / 0.5), transparent 55%),
        radial-gradient(ellipse at 85% 100%, oklch(0.28 0.10 270 / 0.5), transparent 55%),
        oklch(0.16 0.02 255)
      `,
      padding: '64px 0 88px',
      position: 'relative', overflow: 'hidden',
      color: '#fff',
    }}>
      {/* Noise / grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)`,
        backgroundSize: '48px 48px',
        maskImage: 'radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%)',
        pointerEvents: 'none',
      }}/>

      <div className="vp-hero-grid" style={{
        maxWidth: 1200, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1.2fr 0.95fr', gap: 56,
        alignItems: 'center', position: 'relative',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 9,
            padding: '6px 11px 6px 10px',
            background: 'oklch(0.60 0.20 25 / 0.18)',
            border: '1px solid oklch(0.60 0.20 25 / 0.35)',
            borderRadius: 999,
            fontSize: 12,
            color: 'oklch(0.85 0.10 25)',
            fontFamily: "'JetBrains Mono', monospace",
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            marginBottom: 24,
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: '50%',
              background: 'oklch(0.65 0.22 25)',
              boxShadow: '0 0 0 4px oklch(0.65 0.22 25 / .25)',
              animation: 'vpBlink 1.2s ease-in-out infinite',
            }}/>
            Nur noch wenige Plätze frei
          </div>

          <h1 style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 'clamp(38px, 5vw, 62px)',
            fontWeight: 600,
            lineHeight: 1.02,
            letterSpacing: '-0.028em',
            color: '#fff',
            margin: '0 0 20px',
            textWrap: 'balance',
          }}>
            Schluss mit stundenlanger<br/>
            Ausschreibungs-Recherche.<br/>
            <span style={{ color: 'oklch(0.80 0.12 255)', fontWeight: 500 }}>
              Lass die KI das für dich übernehmen.
            </span>
          </h1>

          <p style={{
            fontSize: 17,
            lineHeight: 1.55,
            color: 'rgba(255,255,255,.72)',
            maxWidth: 540,
            margin: '0 0 32px',
          }}>
            Live-Demo · Kostenlos · 45 Minuten. Wir zeigen dir, wie Vergabepilot.AI
            aus 300+ Portalen in Sekunden die passenden Ausschreibungen filtert.
          </p>

          <div style={{ marginBottom: 32 }}>
            <div style={{
              fontSize: 11.5,
              fontFamily: "'JetBrains Mono', monospace",
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              color: 'rgba(255,255,255,.5)',
              marginBottom: 10,
            }}>
              Webinar startet in
            </div>
            <Countdown />
          </div>

          <div style={{ display: 'grid', gap: 9, maxWidth: 520 }}>
            {BULLETS.slice(0, 3).map((b, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
                <span style={{
                  flexShrink: 0, marginTop: 4,
                  width: 16, height: 16, borderRadius: '50%',
                  background: 'oklch(0.62 0.14 155 / 0.2)',
                  border: '1px solid oklch(0.62 0.14 155 / 0.5)',
                  color: 'oklch(0.75 0.15 155)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 9.5, fontWeight: 700,
                }}>✓</span>
                <span style={{ fontSize: 15, color: 'rgba(255,255,255,.85)', lineHeight: 1.5 }}>{b}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Form panel — frosted */}
        <div className="vp-dark-card" style={{
          background: 'rgba(255,255,255,.04)',
          backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
          border: '1px solid rgba(255,255,255,.1)',
          borderRadius: 18,
          padding: 28,
          boxShadow: '0 24px 64px -24px rgba(0,0,0,.5)',
        }}>
          <div style={{
            fontSize: 11.5,
            fontFamily: "'JetBrains Mono', monospace",
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: 'oklch(0.80 0.12 255)',
            marginBottom: 8,
          }}>
            → Platz sichern
          </div>
          <h2 style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 24, fontWeight: 600,
            letterSpacing: '-0.02em',
            color: '#fff',
            margin: '0 0 6px',
          }}>
            Jetzt kostenlos anmelden
          </h2>
          <p style={{
            fontSize: 13.5, color: 'rgba(255,255,255,.65)',
            margin: '0 0 20px', lineHeight: 1.5,
          }}>
            Du erhältst den Zugangslink direkt per E-Mail.
          </p>
          <RegistrationForm inverse onSubmit={onSubmit} formId="anmelden" />
        </div>
      </div>

      <style>{`
        @keyframes vpBlink {
          0%, 100% { opacity: 1; }
          50%      { opacity: 0.4; }
        }
      `}</style>
    </section>
  );
}

window.HeroDark = HeroDark;