// Pretty Rare Boutique — Booking modal (responsive)

function SiteBookingModal({ treatment, onClose }) {
  const [step, setStep] = React.useState('pick');
  const [date, setDate] = React.useState(null);
  const [time, setTime] = React.useState(null);
  const mobile = useMobile();
  const dates = ['Tue 19', 'Wed 20', 'Thu 21', 'Fri 22', 'Sat 23'];
  const times = ['9:30', '11:00', '13:00', '14:30', '16:00'];

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: 'rgba(42, 37, 34, 0.28)',
      backdropFilter: 'blur(28px)',
      WebkitBackdropFilter: 'blur(28px)',
      display: 'flex', alignItems: mobile ? 'flex-end' : 'center', justifyContent: 'center',
      padding: mobile ? 0 : 24,
      animation: 'fadeUp 320ms var(--ease-out) both',
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--surface)',
        border: '1px solid var(--border-gold)',
        borderRadius: mobile ? '24px 24px 0 0' : 28,
        padding: mobile ? '40px 24px 40px' : '52px 56px',
        maxWidth: 580, width: '100%',
        boxShadow: 'var(--shadow-lg)',
        position: 'relative',
        maxHeight: mobile ? '90vh' : 'auto',
        overflowY: mobile ? 'auto' : 'visible',
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: 'absolute', top: 20, right: mobile ? 20 : 24,
          background: 'transparent', border: 0,
          fontFamily: 'var(--font-sans)', fontWeight: 500,
          fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--fg-muted)', cursor: 'pointer',
        }}>Close</button>

        {step === 'pick' && (
          <>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Booking</div>
            <h3 style={{
              fontFamily: 'var(--font-sans)', fontWeight: 700,
              fontSize: mobile ? 20 : 26, letterSpacing: '-0.025em',
              lineHeight: 1.15, margin: 0, color: 'var(--fg)',
            }}>
              {treatment?.name || 'Personalised cosmetic consultation'}
            </h3>
            <div style={{
              fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: 14,
              color: 'var(--fg-muted)', marginTop: 8,
            }}>
              {treatment?.dur || '20 mins'} · {treatment?.price || 'Varies'}
            </div>

            <div style={{ marginTop: 28 }}>
              <Label>Select a date</Label>
              <Pills items={dates} value={date} onChange={setDate} />
            </div>
            <div style={{ marginTop: 20 }}>
              <Label>Select a time</Label>
              <Pills items={times} value={time} onChange={setTime} />
            </div>

            <div style={{ marginTop: 32, display: 'flex', justifyContent: 'flex-end' }}>
              <button
                className="btn"
                disabled={!date || !time}
                onClick={() => date && time && setStep('confirm')}
                style={{
                  opacity: (date && time) ? 1 : 0.4,
                  cursor: (date && time) ? 'pointer' : 'not-allowed',
                  width: mobile ? '100%' : 'auto',
                }}
              >Continue</button>
            </div>
          </>
        )}

        {step === 'confirm' && (
          <>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Confirm</div>
            <h3 style={{
              fontFamily: 'var(--font-sans)', fontWeight: 700,
              fontSize: mobile ? 20 : 26, letterSpacing: '-0.025em',
              lineHeight: 1.15, margin: 0, color: 'var(--fg)',
            }}>Your appointment</h3>

            <div style={{
              marginTop: 28, padding: '20px 24px',
              background: 'var(--surface-alt)',
              borderRadius: 16,
              border: '1px solid var(--border)',
            }}>
              {[
                ['Treatment', treatment?.name || 'Personalised consultation'],
                ['Date', date],
                ['Time', time],
                ['Duration', treatment?.dur || '20 mins'],
                ['Price', treatment?.price || 'Varies'],
              ].map(([label, val]) => (
                <div key={label} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '10px 0', borderBottom: '1px solid var(--border-soft)',
                  fontFamily: 'var(--font-sans)', fontSize: 14,
                }}>
                  <span style={{ color: 'var(--fg-muted)', letterSpacing: '0.02em' }}>{label}</span>
                  <span style={{ color: 'var(--fg)', fontWeight: 500 }}>{val}</span>
                </div>
              ))}
            </div>

            <p className="body body--sm" style={{ marginTop: 20 }}>
              A confirmation will be sent to your email. We will reach out if anything changes.
            </p>

            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexDirection: mobile ? 'column' : 'row' }}>
              <a href="https://prettyrareboutique.gettimely.com" target="_blank" rel="noopener noreferrer" className="btn btn--fill" style={{ flex: 1, textDecoration: "none" }}>Go to booking</a>
              <button className="btn" onClick={() => setStep('pick')}>Back</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function Label({ children }) {
  return (
    <div style={{
      fontFamily: 'var(--font-sans)', fontWeight: 500,
      fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
      color: 'var(--fg-muted)', marginBottom: 12,
    }}>{children}</div>
  );
}

function Pills({ items, value, onChange }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      {items.map((item) => (
        <button key={item} onClick={() => onChange(item)} style={{
          fontFamily: 'var(--font-sans)', fontWeight: 500,
          fontSize: 12, letterSpacing: '0.06em',
          padding: '10px 18px', borderRadius: 999,
          border: value === item ? '1px solid var(--fg)' : '1px solid var(--border)',
          background: value === item ? 'var(--fg)' : 'transparent',
          color: value === item ? 'var(--fg-on-dark)' : 'var(--fg)',
          cursor: 'pointer',
          transition: 'all 220ms var(--ease-soft)',
        }}>{item}</button>
      ))}
    </div>
  );
}

window.SiteBookingModal = SiteBookingModal;