const { Button, Icon, Badge, Input, Select, Textarea } = window.RinseNRepeatDesignSystem_9f80bd;

function BookingScreen({ go }) {
  const D = window.RNR_DATA;
  const isMobile = window.RNRUseIsMobile();
  const [step, setStep] = React.useState('form');
  const [saving, setSaving] = React.useState(false);
  const [form, setForm] = React.useState({ service: '', name: '', email: '', phone: '', date: '', time_window: '', address: '', propertyType: 'Residential', details: '' });
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const timeWindows = ['Morning (9am–12pm)', 'Midday (12pm–3pm)', 'Afternoon (3pm–6pm)', 'Flexible / any time'];

  async function submit() {
    setSaving(true);
    try {
      await window.RNRStore.book({
        customer_name: form.name, phone: form.phone, email: form.email,
        service: form.service, property_type: form.propertyType,
        scheduled_date: form.date || null, time_window: form.time_window,
        address: form.address, details: form.details,
      });
      setStep('done');
    } catch (err) {
      alert('Sorry — could not submit your request. Please call us at ' + D.brand.phone + '.');
      console.error(err);
    } finally { setSaving(false); }
  }

  if (step === 'done') {
    return (
      <section style={{ background: 'var(--paper)', minHeight: 640, display: 'flex', alignItems: 'center', padding: '80px 0' }}>
        <div style={{ maxWidth: 560, margin: '0 auto', padding: '0 28px', textAlign: 'center' }}>
          <span style={{ display: 'inline-flex', width: 76, height: 76, borderRadius: '50%', background: 'var(--success-500)', alignItems: 'center', justifyContent: 'center', marginBottom: 24, boxShadow: 'var(--shadow-md)' }}><Icon name="check" size={40} color="#fff" strokeWidth={3} /></span>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(30px,6.5vw,40px)', color: 'var(--black-900)', margin: 0 }}>You're booked!</h1>
          <p style={{ color: 'var(--gray-600)', fontSize: 18, margin: '14px 0 28px', lineHeight: 1.5 }}>
            Thanks {form.name ? form.name.split(' ')[0] : 'there'} — we've received your request for <b style={{ color: 'var(--orange-500)' }}>{form.service || 'a service'}</b>{form.date ? <> on <b>{form.date}</b></> : null}. We'll confirm by phone within one business day.
          </p>
          <div style={{ background: 'var(--white)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 24, textAlign: 'left', marginBottom: 28 }}>
            {[['user', form.name], ['mail', form.email], ['phone', form.phone], ['map-pin', form.address], ['home', form.propertyType]].filter(([, v]) => v).map(([ic, v]) => (
              <div key={ic} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '8px 0', color: 'var(--gray-700)', fontSize: 15 }}><Icon name={ic} size={18} color="var(--orange-500)" />{v}</div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="primary" onClick={() => go('Home')}>Back to Home</Button>
            <Button variant="outline-accent" onClick={() => { setForm({ service: '', name: '', email: '', phone: '', date: '', time_window: '', address: '', propertyType: 'Residential', details: '' }); setStep('form'); }}>Book Another</Button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section style={{ background: 'var(--paper)', padding: 'clamp(36px,6.5vw,64px) 0 clamp(56px,9vw,88px)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.25fr', gap: isMobile ? 28 : 44, alignItems: 'start' }}>
        {/* Info panel — below the form on mobile so booking comes first */}
        <div style={{ background: 'var(--black-950)', borderRadius: 'var(--radius-2xl)', padding: 'clamp(24px,5.5vw,40px)', ...(isMobile ? { order: 2 } : { position: 'sticky', top: 90 }) }}>
          <Badge variant="orange" dot style={{ marginBottom: 20 }}>Book online</Badge>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(29px,6vw,38px)', color: '#fff', margin: 0, letterSpacing: '-.02em', lineHeight: 1.1 }}>Schedule your clean in under a minute</h1>
          <p style={{ color: 'rgba(255,255,255,.72)', fontSize: 16, lineHeight: 1.6, margin: '18px 0 30px' }}>Pick a service, tell us about your property, and we'll confirm by phone. No deposit required.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[['shield-check', 'Licensed & insured', 'Fully covered on every job'], ['ban', 'No hidden fees', 'The quote is the price you pay'], ['refresh-cw', 'Satisfaction guaranteed', 'We rewash for free if needed'], ['clock', D.brand.hours, D.brand.area]].map(([ic, t, s]) => (
              <div key={t} style={{ display: 'flex', gap: 14 }}>
                <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'rgba(242,106,33,.14)', color: 'var(--orange-500)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><Icon name={ic} size={22} /></span>
                <div>
                  <div style={{ color: '#fff', fontWeight: 700, fontSize: 15.5 }}>{t}</div>
                  <div style={{ color: 'rgba(255,255,255,.55)', fontSize: 13.5 }}>{s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Form */}
        <div style={{ background: 'var(--white)', borderRadius: 'var(--radius-2xl)', boxShadow: 'var(--shadow-md)', padding: 'clamp(22px,5vw,40px)' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, color: 'var(--black-900)', margin: '0 0 24px' }}>Request an appointment</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Select label="Which service?" placeholder="Choose a service" value={form.service} onChange={set('service')} options={D.serviceOptions} />
            <div>
              <span style={{ display: 'block', marginBottom: 7, fontSize: 13, fontWeight: 600, color: 'var(--gray-700)' }}>Property type</span>
              <div style={{ display: 'flex', gap: 10 }}>
                {['Residential', 'Commercial'].map((t) => {
                  const active = form.propertyType === t;
                  return (
                    <button key={t} onClick={() => setForm((f) => ({ ...f, propertyType: t }))}
                      style={{ flex: 1, padding: '13px', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, transition: 'var(--t-all)', background: active ? 'var(--orange-050)' : '#fff', color: active ? 'var(--orange-700)' : 'var(--gray-600)', border: active ? '1.5px solid var(--orange-500)' : '1.5px solid var(--gray-200)' }}>
                      {t}
                    </button>
                  );
                })}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(210px,100%),1fr))', gap: 16 }}>
              <Input label="Full name" placeholder="Jane Homeowner" value={form.name} onChange={set('name')} icon={<Icon name="user" size={18} />} />
              <Input label="Phone" type="tel" placeholder="(555) 000-0000" value={form.phone} onChange={set('phone')} icon={<Icon name="phone" size={18} />} />
            </div>
            <Input label="Email" type="email" placeholder="you@email.com" value={form.email} onChange={set('email')} icon={<Icon name="mail" size={18} />} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(210px,100%),1fr))', gap: 16 }}>
              <Input label="Preferred date" type="date" value={form.date} onChange={set('date')} />
              <Select label="Preferred time" placeholder="Any time" value={form.time_window} onChange={set('time_window')} options={timeWindows} />
            </div>
            <Input label="Property address" placeholder="Street, city, ZIP" value={form.address} onChange={set('address')} icon={<Icon name="map-pin" size={18} />} />
            <Textarea label="Job details (optional)" rows={3} placeholder="Two-story home, vinyl siding, some mildew on the north wall…" value={form.details} onChange={set('details')} />
            <Button variant="primary" size="lg" fullWidth disabled={saving} iconRight={<Icon name="arrow-right" size={20} />} onClick={submit}>{saving ? 'Sending…' : 'Request Appointment'}</Button>
            <p style={{ textAlign: 'center', color: 'var(--gray-500)', fontSize: 13, margin: 0 }}>Or call us at <b style={{ color: 'var(--orange-600)' }}>{D.brand.phone}</b> · {D.brand.hours}</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.RNRBooking = BookingScreen;