// Hero A — Classic split: copy + bullets on left, floating form card on right
// Matches brand: light paper bg, navy ink, blue accent, generous whitespace.

function HeroClassic({ onSubmit }) {
  return (
    <section className="vp-hero-section" style={{
      background: `linear-gradient(180deg, ${VP_COLORS.paperWarm} 0%, ${VP_COLORS.paper} 100%)`,
      borderBottom: `1px solid ${VP_COLORS.lineSoft}`,
      padding: '72px 0 96px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle grid background */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${VP_COLORS.line} 1px, transparent 1px), linear-gradient(90deg, ${VP_COLORS.line} 1px, transparent 1px)`,
        backgroundSize: '64px 64px',
        opacity: 0.35,
        maskImage: 'radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%)',
        pointerEvents: 'none',
      }}/>

      <div className="vp-hero-grid" style={{
        maxWidth: 1200, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64,
        alignItems: 'start',
        position: 'relative',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 11px 6px 8px',
            background: '#fff',
            border: `1px solid ${VP_COLORS.line}`,
            borderRadius: 999,
            fontSize: 12.5,
            color: VP_COLORS.inkSoft,
            fontFamily: "'Inter', sans-serif",
            marginBottom: 22,
            boxShadow: '0 1px 0 rgba(18,24,40,.03)',
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: '50%',
              background: VP_COLORS.success,
              boxShadow: `0 0 0 4px oklch(0.62 0.14 155 / 0.18)`,
            }}/>
            <span style={{ fontWeight: 500 }}>Live-Webinar</span>
            <span style={{ color: VP_COLORS.line }}>·</span>
            <span className="vp-chip-date-full" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11.5, letterSpacing: '0.02em' }}>
              {WEBINAR_LABEL.toUpperCase()}
            </span>
            <span className="vp-chip-date-short" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11.5, letterSpacing: '0.02em', display: 'none' }}>
              {WEBINAR_LABEL_SHORT}
            </span>
          </div>

          <h1 style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 'clamp(36px, 4.6vw, 56px)',
            fontWeight: 600,
            lineHeight: 1.04,
            letterSpacing: '-0.025em',
            color: VP_COLORS.ink,
            margin: '0 0 18px',
            textWrap: 'balance',
          }}>
            Entdecke Vergabepilot.AI<br/>
            <span style={{ color: VP_COLORS.inkMuted, fontWeight: 400 }}> jetzt in der Praxis.</span>
          </h1>

          <p style={{
            fontSize: 17,
            lineHeight: 1.55,
            color: VP_COLORS.inkSoft,
            maxWidth: 540,
            margin: '0 0 32px',
            textWrap: 'pretty',
          }}>
            In unserer Experten-Session zeigen wir dir live, wie du mit KI relevante
            öffentliche Ausschreibungen automatisiert findest und in wenigen Minuten bewertest.
          </p>

          <div style={{ display: 'grid', gap: 11, marginBottom: 36 }}>
            {BULLETS.map((b, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
                <span style={{
                  flexShrink: 0, marginTop: 3,
                  width: 18, height: 18, borderRadius: '50%',
                  background: VP_COLORS.accentSoft,
                  color: VP_COLORS.accent,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, fontWeight: 700,
                }}>✓</span>
                <span style={{ fontSize: 15, color: VP_COLORS.ink, lineHeight: 1.5 }}>{b}</span>
              </div>
            ))}
          </div>

          {/* Hosts row */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            paddingTop: 24,
            borderTop: `1px solid ${VP_COLORS.lineSoft}`,
          }}>
            <div style={{ display: 'flex' }}>
              {HOSTS.map((h, i) => (
                <div key={i} style={{ marginLeft: i === 0 ? 0 : -12 }}>
                  <HostAvatar name={h.name} photo={h.photo} color={h.color} size={42} />
                </div>
              ))}
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500, color: VP_COLORS.ink }}>
                Mit {HOSTS[0].name.split(' ')[0]}, {HOSTS[1].name.split(' ')[0]} & {HOSTS[2].name.split(' ')[0]}
              </div>
              <div style={{ fontSize: 12.5, color: VP_COLORS.inkMuted }}>
                Vergabepilot.AI · Produkt & Customer Success
              </div>
            </div>
          </div>
        </div>

        {/* Form card */}
        <div className="vp-hero-card vp-sticky" style={{
          background: '#fff',
          border: `1px solid ${VP_COLORS.line}`,
          borderRadius: 16,
          padding: 28,
          boxShadow: '0 1px 2px rgba(18,24,40,.04), 0 12px 32px -12px rgba(18,24,40,.12)',
          position: 'sticky', top: 24,
        }}>
          <div style={{
            fontSize: 11.5,
            fontFamily: "'JetBrains Mono', monospace",
            letterSpacing: '0.05em',
            color: VP_COLORS.accent,
            marginBottom: 8,
            textTransform: 'uppercase',
          }}>
            → Platz sichern
          </div>
          <h2 style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 22, fontWeight: 600,
            letterSpacing: '-0.015em',
            color: VP_COLORS.ink,
            margin: '0 0 6px',
          }}>
            Jetzt kostenlos anmelden
          </h2>
          <p style={{
            fontSize: 13.5, color: VP_COLORS.inkSoft,
            margin: '0 0 16px', lineHeight: 1.5,
          }}>
            Begrenzte Teilnehmerzahl. Du erhältst den Zugangslink direkt per E-Mail.
          </p>
          <div style={{ marginBottom: 18 }}>
            <div style={{
              fontSize: 10.5,
              fontFamily: "'JetBrains Mono', monospace",
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: VP_COLORS.inkMuted, marginBottom: 8,
            }}>Webinar startet in</div>
            <CountdownLight />
          </div>
          <RegistrationForm onSubmit={onSubmit} formId="anmelden" />
        </div>
      </div>
    </section>
  );
}

window.HeroClassic = HeroClassic;