function FloatingInput({ label, value, onChange, type = 'text', prefix, placeholder }) {
  const [focused, setFocused] = React.useState(false);
  const lifted = focused || value.length > 0;
  return (
    <div style={{ position: 'relative', marginBottom: '16px' }}>
      <label style={{
        position: 'absolute', left: prefix ? '46px' : '18px',
        top: lifted ? '9px' : '50%',
        transform: lifted ? 'translateY(0) scale(0.78)' : 'translateY(-50%) scale(1)',
        transformOrigin: 'left center',
        color: focused ? '#C94CFF' : '#7C7C90',
        fontSize: '14px', fontWeight: 500, pointerEvents: 'none',
        transition: 'all 250ms cubic-bezier(0.16,1,0.3,1)',
        letterSpacing: '-0.01em', zIndex: 1,
      }}>{label}</label>
      {prefix && (
        <span style={{
          position: 'absolute', left: '18px', top: '50%', transform: 'translateY(-50%)',
          color: focused ? '#C94CFF' : '#7C7C90', fontSize: '14px', fontWeight: 500,
          transition: 'color 250ms', pointerEvents: 'none',
        }}>{prefix}</span>
      )}
      <input
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder={focused ? placeholder : ''}
        style={{
          width: '100%', height: '62px',
          background: 'rgba(11,11,18,0.9)',
          border: `1px solid ${focused ? 'rgba(201,76,255,0.45)' : 'rgba(255,255,255,0.07)'}`,
          borderRadius: '14px', color: '#F5F2FF',
          fontSize: '14px', fontFamily: 'inherit',
          padding: lifted ? `26px 18px 10px ${prefix ? '46px' : '18px'}` : `0 18px 0 ${prefix ? '46px' : '18px'}`,
          outline: 'none', boxSizing: 'border-box',
          boxShadow: focused ? '0 0 0 4px rgba(201,76,255,0.07)' : 'none',
          transition: 'border-color 250ms, box-shadow 250ms',
          letterSpacing: '-0.01em',
          colorScheme: 'dark',
        }}
      />
    </div>
  );
}

function Booking({ artist, tier, onDone }) {
  const [form, setForm] = React.useState({ email: '', instagram: '', songUrl: '', startDate: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [errors, setErrors] = React.useState({});

  function validate() {
    const e = {};
    if (!form.email.includes('@')) e.email = 'Valid email required';
    if (!form.instagram) e.instagram = 'Instagram handle required';
    if (!form.songUrl.includes('spotify')) e.songUrl = 'Spotify link required';
    if (!form.startDate) e.startDate = 'Start date required';
    return e;
  }

  async function handleSubmit(e) {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setLoading(true);
    await new Promise(r => setTimeout(r, 1400));
    setLoading(false);
    setSubmitted(true);
  }

  if (submitted) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 40px', maxWidth: '480px', margin: '0 auto' }}>
        <div style={{
          width: '64px', height: '64px', borderRadius: '50%',
          background: 'linear-gradient(135deg, rgba(94,43,255,0.2), rgba(201,76,255,0.15))',
          border: '1px solid rgba(201,76,255,0.3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 32px',
          boxShadow: '0 0 40px rgba(201,76,255,0.1)',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M4 12l6 6 10-10" stroke="#C94CFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <h3 style={{ fontSize: '32px', fontWeight: 800, letterSpacing: '-0.04em', color: '#F5F2FF', margin: '0 0 14px', fontFamily: "'Syne', sans-serif" }}>
          You're in.
        </h3>
        <p style={{ color: '#A1A1B3', fontSize: '16px', lineHeight: 1.6, letterSpacing: '-0.01em', margin: '0 0 8px' }}>
          We'll DM you within 24 hours.
        </p>
        <p style={{ color: '#7C7C90', fontSize: '13px', letterSpacing: '-0.01em', fontFamily: "'JetBrains Mono', monospace" }}>
          @aestheticsrecords
        </p>
      </div>
    );
  }

  return (
    <section style={{ padding: '80px 40px 160px', maxWidth: '480px', margin: '0 auto' }}>
      <FadeIn>
        <div style={{ marginBottom: '48px' }}>
          <div style={{ color: '#7C7C90', fontSize: '11px', fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: '16px', fontFamily: "'JetBrains Mono', monospace" }}>
            Book your campaign
          </div>
          <h2 style={{ fontSize: 'clamp(28px,4vw,44px)', fontWeight: 800, letterSpacing: '-0.04em', color: '#F5F2FF', margin: '0 0 8px', lineHeight: 1.05 }}>
            {artist?.name || artist?.artist || 'Your track'} × {tier?.name}
          </h2>
          <p style={{ color: '#7C7C90', fontSize: '13px', letterSpacing: '-0.01em', fontFamily: "'JetBrains Mono', monospace" }}>
            {tier?.name} — ${tier?.price} one-time
          </p>
        </div>
        <form onSubmit={handleSubmit}>
          <FloatingInput label="Email address" value={form.email} onChange={v => setForm(f => ({...f, email: v}))} type="email" />
          {errors.email && <p style={{ color: '#EF4444', fontSize: '12px', marginTop: '-8px', marginBottom: '12px' }}>{errors.email}</p>}
          <FloatingInput label="Instagram handle" prefix="@" value={form.instagram} onChange={v => setForm(f => ({...f, instagram: v}))} />
          {errors.instagram && <p style={{ color: '#EF4444', fontSize: '12px', marginTop: '-8px', marginBottom: '12px' }}>{errors.instagram}</p>}
          <FloatingInput label="Spotify song link" value={form.songUrl} onChange={v => setForm(f => ({...f, songUrl: v}))} placeholder="https://open.spotify.com/track/..." />
          {errors.songUrl && <p style={{ color: '#EF4444', fontSize: '12px', marginTop: '-8px', marginBottom: '12px' }}>{errors.songUrl}</p>}
          <FloatingInput label="Campaign start date" value={form.startDate} onChange={v => setForm(f => ({...f, startDate: v}))} type="date" />
          {errors.startDate && <p style={{ color: '#EF4444', fontSize: '12px', marginTop: '-8px', marginBottom: '12px' }}>{errors.startDate}</p>}
          <button type="submit" disabled={loading} style={{
            width: '100%', height: '58px', marginTop: '12px',
            background: 'linear-gradient(135deg, #5E2BFF 0%, #C94CFF 100%)',
            border: 'none', borderRadius: '14px',
            color: '#F5F2FF', fontSize: '15px', fontWeight: 700,
            cursor: loading ? 'not-allowed' : 'pointer', letterSpacing: '-0.01em',
            fontFamily: "'Syne', sans-serif", opacity: loading ? 0.7 : 1,
            transition: 'opacity 200ms, box-shadow 200ms',
            boxShadow: loading ? 'none' : '0 8px 30px rgba(94,43,255,0.25)',
          }}>
            {loading ? 'Processing...' : `Book campaign — $${tier?.price}`}
          </button>
          <p style={{ color: '#7C7C90', fontSize: '12px', textAlign: 'center', marginTop: '16px', letterSpacing: '-0.01em', fontFamily: "'JetBrains Mono', monospace" }}>
            Stripe checkout · Secure payment
          </p>
        </form>
      </FadeIn>
    </section>
  );
}

Object.assign(window, { Booking });