// Book purchase modal — $17 paid checkout

const BookModal = ({ onClose, onConfirm }) => {
  const [form, setForm] = React.useState({ firstName: '', lastName: '', email: '', phone: '' });
  const [processing, setProcessing] = React.useState(false);
  const [error, setError] = React.useState('');

  const startCheckout = async () => {
    if (!form.firstName.trim() || !form.lastName.trim() || !form.email.includes('@') || processing) {
      setError('Enter your first name, last name, and email.');
      return;
    }
    setProcessing(true);
    setError('');
    try {
      const res = await fetch('/api/book-checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.url) throw new Error(data.error || 'Unable to start checkout.');
      window.top.location.href = data.url;
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to start checkout.');
      setProcessing(false);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div>
            <div className="section-eyebrow">— THE BOOK · $17 · DIGITAL</div>
            <h2 className="serif" style={{ fontSize: 40, margin: '8px 0 0', letterSpacing: '-0.02em', lineHeight: 1 }}>Never <em>Undertreated.</em></h2>
          </div>
          <div className="pay-row">
            <div className="pay-field"><label>First name</label><input value={form.firstName} onChange={(e) => setForm({ ...form, firstName: e.target.value })} placeholder="First" /></div>
            <div className="pay-field"><label>Last name</label><input value={form.lastName} onChange={(e) => setForm({ ...form, lastName: e.target.value })} placeholder="Last" /></div>
          </div>
          <div className="pay-field">
            <label>Email</label>
            <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="you@somewhere.com" />
          </div>
          <div className="pay-field">
            <label>Phone</label>
            <input type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="Optional" />
          </div>
          {error && <div style={{ color: 'var(--accent)', fontSize: 13 }}>{error}</div>}
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-soft" onClick={onClose} style={{ flex: 1, justifyContent: 'center' }}>Cancel</button>
            <button className="btn btn-primary" onClick={startCheckout} disabled={processing} style={{ flex: 2, justifyContent: 'center' }}>
              {processing ? 'Opening checkout...' : 'Continue to checkout · $17'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { BookModal });