function BookingPage() {
  const [step, setStep] = React.useState(1);
  const [treatment, setTreatment] = React.useState('Ganzer Körper');
  const [tier, setTier] = React.useState('Einzelstunde');
  const [slot, setSlot] = React.useState('Di, 14. Jul · 10:00');
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');

  return (
    <div style={{ maxWidth: 640, margin: '0 auto', padding: 'var(--space-8) var(--space-6)', background: '#fff', minHeight: '100vh' }}>
      <div className="eyebrow" style={{ marginBottom: 'var(--space-3)', color: 'var(--ink-700)' }}>Vakuum Technik · Termin buchen</div>
      <h1 className="headline" style={{ fontSize: '1.5rem', marginBottom: 'var(--space-6)', color: 'var(--ink-700)' }}>In drei Schritten zum Termin.</h1>

      <div style={{ display: 'flex', gap: 'var(--space-2)', marginBottom: 'var(--space-6)' }}>
        {[1, 2, 3].map((n) => (
          <div key={n} style={{ flex: 1, height: 4, borderRadius: 2, background: n <= step ? 'var(--brand-primary)' : 'var(--border-subtle)' }} />
        ))}
      </div>

      {step === 1 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          <Select label="Behandlung" options={['Ganzer Körper', 'Einzelne Körperzonen']} value={treatment} onChange={(e) => setTreatment(e.target.value)} labelStyle={{ color: 'var(--ink-700)' }} inputStyle={{ background: 'var(--clay-50)', color: 'var(--ink-700)' }} />
          <Select
            label="Tarif"
            options={treatment === 'Ganzer Körper'
              ? ['Einzelstunde · 150,- EUR', 'Schnupperstunde · 80,- EUR', '5er Abo · 140,- EUR/Behandlung', '10er Abo · 120,- EUR/Behandlung']
              : ['Einzelstunde · 100,- EUR', '5er Abo · 90,- EUR/Behandlung', '10er Abo · 80,- EUR/Behandlung']}
            value={tier}
            onChange={(e) => setTier(e.target.value)}
            labelStyle={{ color: 'var(--ink-700)' }}
            inputStyle={{ background: 'var(--clay-50)', color: 'var(--ink-700)' }}
          />
          <Input label="Termin" placeholder="z. B. Di, 14. Jul · 10:00" value={slot} onChange={(e) => setSlot(e.target.value)} labelStyle={{ color: 'var(--ink-700)' }} inputStyle={{ background: 'var(--clay-50)', color: 'var(--ink-700)', fontStyle: 'italic' }} />
          <div><Button onClick={() => setStep(2)}>Weiter</Button></div>
        </div>
      )}

      {step === 2 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          <Input label="Name" placeholder="Ihr Name" value={name} onChange={(e) => setName(e.target.value)} inputStyle={{ background: 'var(--clay-50)', color: 'var(--ink-700)' }} />
          <Input label="E-Mail" type="email" placeholder="ihre@email.de" value={email} onChange={(e) => setEmail(e.target.value)} inputStyle={{ background: 'var(--clay-50)', color: 'var(--ink-700)' }} />
          <div style={{ display: 'flex', gap: 'var(--space-3)' }}>
            <Button variant="secondary" onClick={() => setStep(1)}>Zurück</Button>
            <Button onClick={() => setStep(3)}>Termin bestätigen</Button>
          </div>
        </div>
      )}

      {step === 3 && (
        <Card style={{ padding: 0, background: 'var(--clay-50)' }}>
          <div style={{ padding: 'var(--space-6)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', marginBottom: 'var(--space-3)' }}>
              <div style={{
                width: 26,
                height: 26,
                borderRadius: '50%',
                background: 'var(--pink-500)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 0,
              }}>
                <svg width="13" height="11" viewBox="0 0 12 10" fill="none">
                  <path d="M1 5L4.5 8.5L11 1.5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div className="eyebrow" style={{ color: 'var(--ink-700)' }}>Buchungswunsch erfolgreich versendet</div>
            </div>
            <h2 style={{ fontFamily: 'var(--font-serif-display)', fontSize: '1.6rem', marginBottom: 'var(--space-4)', color: 'var(--ink-700)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-eyebrow)' }}>Wir freuen uns auf Sie{name ? `, ${name}` : ''}.</h2>
            <p style={{ font: 'var(--text-body)', color: 'var(--ink-700)', opacity: 0.9, marginBottom: 'var(--space-2)' }}>{treatment} · {tier} · {slot}</p>
            <p style={{ font: 'var(--text-body-sm)', color: 'var(--ink-700)', opacity: 0.75 }}>Eine finale Buchungsbestätigung erhalten Sie per E-Mail.</p>
          </div>
        </Card>
      )}
    </div>
  );
}

window.BookingPage = BookingPage;