// Hero B — Centered/Editorial: big statement + form below
// Very focused conversion-optimized center stack; mono tag + oversized headline.

function HeroCentered({ onSubmit }) {
  return (
    <section className="vp-hero-section" style={{
      background: VP_COLORS.paper,
      padding: '72px 0 72px',
      borderBottom: `1px solid ${VP_COLORS.lineSoft}`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Soft radial accent */}
      <div style={{
        position: 'absolute', top: '-20%', left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 900, borderRadius: '50%',
        background: `radial-gradient(circle, oklch(0.52 0.17 255 / 0.08) 0%, transparent 60%)`,
        pointerEvents: 'none',
      }}/>

      <div style={{
        maxWidth: 860, margin: '0 auto', padding: '0 32px',
        textAlign: 'center', position: 'relative',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '6px 12px',
          background: '#fff',
          border: `1px solid ${VP_COLORS.line}`,
          borderRadius: 999,
          fontSize: 12,
          fontFamily: "'JetBrains Mono', monospace",
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          color: VP_COLORS.inkSoft,
          marginBottom: 28,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: VP_COLORS.success,
            animation: 'vpPulse 2s ease-in-out infinite',
          }}/>
          Live-Webinar · {WEBINAR_LABEL}
        </div>

        <h1 style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: 'clamp(40px, 5.5vw, 68px)',
          fontWeight: 600,
          lineHeight: 1.0,
          letterSpacing: '-0.03em',
          color: VP_COLORS.ink,
          margin: '0 0 22px',
          textWrap: 'balance',
        }}>
          In 45 Minuten zur ersten<br/>
          passenden Ausschreibung<br/>
          <span style={{
            background: `linear-gradient(90deg, ${VP_COLORS.accent}, ${VP_COLORS.accentDeep})`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            backgroundClip: 'text', fontStyle: 'italic', fontWeight: 500,
          }}>— live & mit KI.</span>
        </h1>

        <p style={{
          fontSize: 18,
          lineHeight: 1.55,
          color: VP_COLORS.inkSoft,
          maxWidth: 620,
          margin: '0 auto 40px',
          textWrap: 'pretty',
        }}>
          Entdecke Vergabepilot.AI in der Praxis: automatisch Ausschreibungen finden,
          KI-gestützt bewerten und nie wieder eine relevante Vergabe verpassen.
        </p>

        {/* Countdown */}
        <div style={{ marginBottom: 28, display: 'flex', justifyContent: 'center' }}>
          <CountdownLight />
        </div>

        {/* Inline email-first capture that expands to full form */}
        <div style={{
          maxWidth: 460, margin: '0 auto 28px',
          background: '#fff',
          border: `1px solid ${VP_COLORS.line}`,
          borderRadius: 16,
          padding: 24,
          boxShadow: '0 1px 2px rgba(18,24,40,.03), 0 20px 48px -20px rgba(18,24,40,.18)',
          textAlign: 'left',
        }}>
          <RegistrationForm onSubmit={onSubmit} formId="anmelden" />
        </div>

        {/* Hosts chip row */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          padding: '8px 14px 8px 10px',
          background: '#fff',
          border: `1px solid ${VP_COLORS.line}`,
          borderRadius: 999,
          fontSize: 13,
        }}>
          <div style={{ display: 'flex' }}>
            {HOSTS.map((h, i) => (
              <div key={i} style={{ marginLeft: i === 0 ? 0 : -10 }}>
                <HostAvatar name={h.name} photo={h.photo} color={h.color} size={28} />
              </div>
            ))}
          </div>
          <span style={{ color: VP_COLORS.inkSoft }}>
            Mit dem Vergabepilot-Team
          </span>
        </div>
      </div>

      <style>{`
        @keyframes vpPulse {
          0%, 100% { box-shadow: 0 0 0 0 oklch(0.62 0.14 155 / .6); }
          50%      { box-shadow: 0 0 0 6px oklch(0.62 0.14 155 / 0); }
        }
      `}</style>
    </section>
  );
}

window.HeroCentered = HeroCentered;