// Shared primitives, data, and the VergabePilot wordmark logo (original, not the site's SVG)

const VP_COLORS = {
  ink: 'oklch(0.22 0.02 250)',
  inkSoft: 'oklch(0.42 0.02 250)',
  inkMuted: 'oklch(0.58 0.015 250)',
  paper: 'oklch(0.985 0.004 80)',
  paperWarm: 'oklch(0.965 0.012 80)',
  line: 'oklch(0.90 0.01 250)',
  lineSoft: 'oklch(0.94 0.008 250)',
  accent: 'oklch(0.52 0.17 255)',      // blue
  accentDeep: 'oklch(0.38 0.16 255)',
  accentSoft: 'oklch(0.95 0.04 255)',
  success: 'oklch(0.62 0.14 155)',
  warn: 'oklch(0.70 0.15 75)',
};

// Original wordmark — paper plane glyph + "Vergabepilot.AI"
function Logo({ variant = 'dark', size = 22 }) {
  const fg = variant === 'dark' ? VP_COLORS.ink : '#fff';
  const accent = VP_COLORS.accent;
  const src = variant === 'dark'
    ? 'https://www.vergabepilot.ai/logo.svg'
    : 'https://www.vergabepilot.ai/logo-light.svg';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <img src={src} alt="Vergabepilot.AI" style={{ height: size * 1.35, width: 'auto', display: 'block' }} />
      <span style={{
        fontFamily: "'Inter', sans-serif",
        fontWeight: 600,
        fontSize: size * 0.92,
        letterSpacing: '-0.02em',
        color: fg,
        lineHeight: 1,
      }}>
        Vergabepilot<span style={{ color: accent }}>.AI</span>
      </span>
    </div>
  );
}

// Team portraits — photo if provided, otherwise initials placeholder
function HostAvatar({ name, color, photo, size = 56 }) {
  const initials = name.split(' ').map(n => n[0]).join('').slice(0, 2);
  if (photo) {
    return (
      <div style={{
        width: size, height: size, borderRadius: '50%',
        backgroundImage: `url(${photo})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        border: `2px solid ${VP_COLORS.paper}`,
        boxShadow: '0 2px 8px rgba(18,24,40,.12)',
        flexShrink: 0,
      }}/>
    );
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: color,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontWeight: 600, fontSize: size * 0.36,
      fontFamily: "'Inter', sans-serif", letterSpacing: '-0.01em',
      border: `2px solid ${VP_COLORS.paper}`,
      boxShadow: '0 2px 8px rgba(18,24,40,.12)',
      flexShrink: 0,
    }}>
      {initials}
    </div>
  );
}

const HOSTS = [
  { name: 'Marko Jeftic',      role: 'Geschäftsführer',   color: 'oklch(0.50 0.14 245)',
    photo: 'https://cdn.prod.website-files.com/6489ddd1c152234a91b82b55/653a7cb02b6123098f6196d4_Marko.webp' },
  { name: 'Phillip Fuchs',     role: 'Sales',              color: 'oklch(0.45 0.12 150)',
    photo: 'https://cdn.prod.website-files.com/6489ddd1c152234a91b82b55/68a1b5f0af68326b3a2d5d45_f4b2ad82-cc8d-408a-9c53-6d83fd4dd6f2.jpg' },
  { name: 'Louis Krall',       role: 'Marketing',          color: 'oklch(0.55 0.16 30)',
    photo: 'https://cdn.prod.website-files.com/6489ddd1c152234a91b82b55/68a4615d65f0a88e7b209716_img-20250706-wa0001_1_-photoroom.png' },
];

const BULLETS = [
  'Ausschreibungen aus 300+ öffentlichen Vergabeportalen automatisiert durchsuchen',
  'Keine relevanten Ausschreibungen mehr verpassen, dank KI-Suche',
  'Vergaben schnell und strukturiert in wenigen Minuten bewerten',
  'Fragen direkt im Webinar klären',
  'Kostenlose 2-wöchige Testphase möglich',
];

const STATS = [
  { n: '300+',    l: 'Vergabeportale integriert' },
  { n: '10.000+', l: 'Aktive Ausschreibungen' },
  { n: '500+',    l: 'Neue Ausschreibungen / Tag' },
  { n: '< 5 Min', l: 'Go / No-Go-Entscheidung' },
];

const TESTIMONIALS = [
  {
    quote: 'Die Suche nach Ausschreibungen war für uns faktisch eine Vollzeitaufgabe. Mit Vergabepilot.AI ist sie es nicht mehr.',
    name: 'Dr. Maximilian Lerch',
    company: 'IFB Eigenschenk GmbH',
    color: 'oklch(0.48 0.13 230)',
    photo: 'https://cms.vergabepilot.ai/api/media/file/maximilian-lerch-ifb.jpeg',
  },
  {
    quote: 'Mit Vergabepilot sehen wir rund 75 % weniger irrelevante Ergebnisse, bearbeiten aber deutlich mehr passende Ausschreibungen.',
    name: 'Marcus Landschof',
    company: 'Sinus Nachrichtentechnik GmbH',
    color: 'oklch(0.50 0.14 60)',
    photo: 'https://cms.vergabepilot.ai/api/media/file/Marcus%20Landschof.jpg',
  },
  {
    quote: 'Eine der besten und sinnvollsten Umsetzungen von KI im Vertriebsbereich.',
    name: 'Axel Hengemuehle',
    company: 'Venn Telecom',
    color: 'oklch(0.48 0.15 340)',
    photo: 'https://cms.vergabepilot.ai/api/media/file/Axel%20Hengemuehle.jpeg',
  },
];

const FAQS = [
  { q: 'Ist das Webinar wirklich kostenlos?', a: 'Ja, die Teilnahme ist zu 100 % kostenlos und unverbindlich. Du erhältst nach der Anmeldung den Zugangslink per E-Mail.' },
  { q: 'Bekomme ich die Aufzeichnung?', a: 'Alle angemeldeten Teilnehmer erhalten im Nachgang automatisch den Link zur Aufzeichnung – auch wenn du live nicht dabei sein kannst.' },
  { q: 'Wie lange dauert das Webinar?', a: 'Rund 45 Minuten Live-Demo und Produktvorstellung, anschließend 15 Minuten für deine Fragen.' },
  { q: 'Für wen ist das Webinar geeignet?', a: 'Für Unternehmen im B2B-Umfeld, die regelmäßig auf öffentliche Ausschreibungen bieten oder einsteigen möchten – Vertrieb, Geschäftsführung, Business Development.' },
  { q: 'Brauche ich Vorwissen?', a: 'Nein. Wir zeigen die Plattform von Grund auf – sowohl für Einsteiger als auch erfahrene Bieter ist die Session relevant.' },
];

// --- Registration form (shared across hero variants) ---
function RegistrationForm({ compact = false, onSubmit, inverse = false, formId }) {
  const [state, setState] = React.useState({ firstName: '', lastName: '', email: '', company: '', consent: false });
  const [status, setStatus] = React.useState('idle'); // idle | submitting | done
  const [errors, setErrors] = React.useState({});

  const validate = () => {
    const e = {};
    if (!state.firstName.trim()) e.firstName = 'Bitte ausfüllen';
    if (!state.lastName.trim())  e.lastName  = 'Bitte ausfüllen';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email)) e.email = 'Gültige E-Mail nötig';
    if (!state.company.trim())   e.company   = 'Bitte ausfüllen';
    if (!state.consent)          e.consent   = 'Zustimmung erforderlich';
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setStatus('submitting');
    setTimeout(() => {
      setStatus('done');
      if (onSubmit) onSubmit(state);
    }, 900);
  };

  if (status === 'done') {
    return (
      <div style={{
        padding: '28px 24px', borderRadius: 14,
        background: inverse ? 'rgba(255,255,255,.06)' : VP_COLORS.accentSoft,
        border: `1px solid ${inverse ? 'rgba(255,255,255,.18)' : VP_COLORS.accent}`,
        textAlign: 'center',
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: '50%',
          background: VP_COLORS.accent, color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 22, marginBottom: 12,
        }}>✓</div>
        <div style={{ fontWeight: 600, fontSize: 17, color: inverse ? '#fff' : VP_COLORS.ink, marginBottom: 6 }}>
          Du bist angemeldet.
        </div>
        <div style={{ color: inverse ? 'rgba(255,255,255,.75)' : VP_COLORS.inkSoft, fontSize: 14, lineHeight: 1.55 }}>
          Wir haben dir eine Bestätigung an <b>{state.email}</b> geschickt. Du erhältst kurz vor dem Webinar den Zugangslink.
        </div>
      </div>
    );
  }

  const fieldStyle = (hasError) => ({
    width: '100%',
    padding: '11px 13px',
    fontSize: 14.5,
    fontFamily: "'Inter', sans-serif",
    border: `1px solid ${hasError ? 'oklch(0.60 0.18 25)' : (inverse ? 'rgba(255,255,255,.22)' : VP_COLORS.line)}`,
    borderRadius: 8,
    background: inverse ? 'rgba(255,255,255,.06)' : '#fff',
    color: inverse ? '#fff' : VP_COLORS.ink,
    outline: 'none',
    transition: 'border-color .15s, box-shadow .15s',
    boxSizing: 'border-box',
  });

  const labelStyle = {
    display: 'block',
    fontSize: 12,
    fontWeight: 500,
    color: inverse ? 'rgba(255,255,255,.75)' : VP_COLORS.inkSoft,
    marginBottom: 6,
    letterSpacing: '0.01em',
  };

  return (
    <form id={formId} onSubmit={submit} style={{ display: 'grid', gap: compact ? 10 : 12 }}>
      <div className="vp-name-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <div>
          <label style={labelStyle}>Vorname</label>
          <input style={fieldStyle(errors.firstName)} value={state.firstName} onChange={e => setState(s => ({ ...s, firstName: e.target.value }))} placeholder="Max" />
        </div>
        <div>
          <label style={labelStyle}>Nachname</label>
          <input style={fieldStyle(errors.lastName)} value={state.lastName} onChange={e => setState(s => ({ ...s, lastName: e.target.value }))} placeholder="Mustermann" />
        </div>
      </div>
      <div>
        <label style={labelStyle}>Geschäftliche E-Mail</label>
        <input type="email" style={fieldStyle(errors.email)} value={state.email} onChange={e => setState(s => ({ ...s, email: e.target.value }))} placeholder="max@unternehmen.de" />
      </div>
      <div>
        <label style={labelStyle}>Unternehmen</label>
        <input style={fieldStyle(errors.company)} value={state.company} onChange={e => setState(s => ({ ...s, company: e.target.value }))} placeholder="Unternehmen GmbH" />
      </div>
      <label style={{
        display: 'flex', alignItems: 'flex-start', gap: 9,
        fontSize: 12.5, lineHeight: 1.5,
        color: inverse ? 'rgba(255,255,255,.7)' : VP_COLORS.inkMuted,
        cursor: 'pointer', marginTop: 2,
      }}>
        <input
          type="checkbox"
          checked={state.consent}
          onChange={e => setState(s => ({ ...s, consent: e.target.checked }))}
          style={{ marginTop: 2, accentColor: VP_COLORS.accent, cursor: 'pointer' }}
        />
        <span style={{ color: errors.consent ? 'oklch(0.60 0.18 25)' : 'inherit' }}>
          Ich stimme der Verarbeitung meiner Daten zu. Mehr in der <u>Datenschutzerklärung</u>.
        </span>
      </label>
      <button
        type="submit"
        disabled={status === 'submitting'}
        style={{
          marginTop: 4,
          padding: '14px 20px',
          background: VP_COLORS.accent,
          color: '#fff',
          border: 'none',
          borderRadius: 10,
          fontSize: 15,
          fontWeight: 600,
          fontFamily: "'Inter', sans-serif",
          letterSpacing: '-0.005em',
          cursor: status === 'submitting' ? 'wait' : 'pointer',
          opacity: status === 'submitting' ? 0.7 : 1,
          boxShadow: '0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -6px oklch(0.52 0.17 255 / 0.55)',
          transition: 'transform .08s, box-shadow .2s',
        }}
        onMouseDown={e => e.currentTarget.style.transform = 'translateY(1px)'}
        onMouseUp={e => e.currentTarget.style.transform = 'translateY(0)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
      >
        {status === 'submitting' ? 'Wird gesendet …' : 'Kostenlos zum Webinar anmelden →'}
      </button>
      <div style={{
        fontSize: 11.5,
        color: inverse ? 'rgba(255,255,255,.55)' : VP_COLORS.inkMuted,
        textAlign: 'center',
        marginTop: -2,
        fontFamily: "'JetBrains Mono', monospace",
        letterSpacing: '0.02em',
      }}>
        100 % KOSTENLOS · KEINE KREDITKARTE · DSGVO-KONFORM
      </div>
    </form>
  );
}

// Shared countdown target: 29 May 2026, 11:00 CET (Central European Time = UTC+1 in May -> CEST actually UTC+2)
// 29 May 2026 11:00 Europe/Berlin = 09:00 UTC
const WEBINAR_TARGET_MS = Date.UTC(2026, 4, 29, 9, 0, 0);
const WEBINAR_LABEL = '29. Mai 2026 · 11:00 Uhr (MESZ)';
const WEBINAR_LABEL_SHORT = '29. MAI · 11:00';

function useCountdown(targetMs) {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, targetMs - now);
  return {
    days: Math.floor(diff / 86400000),
    hrs:  Math.floor((diff % 86400000) / 3600000),
    mins: Math.floor((diff % 3600000) / 60000),
    secs: Math.floor((diff % 60000) / 1000),
    done: diff === 0,
  };
}

function CountdownLight() {
  const { days, hrs, mins, secs } = useCountdown(WEBINAR_TARGET_MS);
  const Cell = ({ n, l }) => (
    <div className="vp-cd-cell" style={{ textAlign: 'center', minWidth: 48, flex: '0 0 auto' }}>
      <div className="vp-cd-num" style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 24, fontWeight: 500,
        color: VP_COLORS.ink,
        letterSpacing: '-0.02em', lineHeight: 1,
        fontVariantNumeric: 'tabular-nums',
      }}>{String(n).padStart(2, '0')}</div>
      <div style={{
        fontSize: 10, letterSpacing: '0.12em',
        textTransform: 'uppercase',
        color: VP_COLORS.inkMuted, marginTop: 5,
      }}>{l}</div>
    </div>
  );
  return (
    <div className="vp-cd-wrap" style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '12px 14px',
      background: '#fff',
      border: `1px solid ${VP_COLORS.line}`,
      borderRadius: 12,
      justifyContent: 'space-between',
      maxWidth: '100%',
      boxSizing: 'border-box',
    }}>
      <Cell n={days} l="Tage" />
      <span style={{ color: VP_COLORS.line, fontSize: 16 }}>:</span>
      <Cell n={hrs}  l="Std" />
      <span style={{ color: VP_COLORS.line, fontSize: 16 }}>:</span>
      <Cell n={mins} l="Min" />
      <span style={{ color: VP_COLORS.line, fontSize: 16 }}>:</span>
      <Cell n={secs} l="Sek" />
    </div>
  );
}

Object.assign(window, {
  VP_COLORS, Logo, HostAvatar, HOSTS, BULLETS, STATS, TESTIMONIALS, FAQS, RegistrationForm,
  WEBINAR_TARGET_MS, WEBINAR_LABEL, WEBINAR_LABEL_SHORT, useCountdown, CountdownLight,
});