// CustomOrder.jsx — the multi-line custom brief form
function CustomOrder({ onBack, onSubmit }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [state, setState] = React.useState({
    name: '', email: '', what: '', deadline: '', notes: ''
  });
  const set = (k, v) => setState(s => ({ ...s, [k]: v }));

  const handleSubmit = async () => {
    setSending(true);
    setError(null);
    try {
      const res = await fetch('https://formspree.io/f/xnjlgjvq', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: state.name,
          email: state.email,
          message: state.what,
          deadline: state.deadline,
          budget: state.notes,
        }),
      });
      if (res.ok) {
        setSubmitted(true);
        onSubmit && onSubmit(state);
      } else {
        setError('Something went wrong — please try emailing me directly at hello@madeyours.ca');
      }
    } catch (e) {
      setError('Something went wrong — please try emailing me directly at hello@madeyours.ca');
    } finally {
      setSending(false);
    }
  };

  if (submitted) {
    return (
      <section className="mys-section">
        <div className="mys-page" style={{ maxWidth: 560, textAlign: 'center' }}>
          <svg viewBox="0 0 100 130" style={{ height: 120, marginBottom: 20 }}>
            <path d="M 10 50 A 40 40 0 0 1 90 50 L 90 120 A 5 5 0 0 1 85 125 L 15 125 A 5 5 0 0 1 10 120 Z" fill="none" stroke="#3B2A14" strokeWidth="2"/>
            <path d="M 15 50 A 35 35 0 0 1 85 50 L 85 120 L 15 120 Z" fill="none" stroke="#3B2A14" strokeWidth="1"/>
            <circle cx="50" cy="25" r="5" fill="none" stroke="#3B2A14" strokeWidth="1.5"/>
            <line x1="50" y1="10" x2="50" y2="15" stroke="#3B2A14" strokeWidth="1"/>
            <text x="50" y="65" textAnchor="middle" fill="#3B2A14" style={{ fontFamily: "'Cormorant Garamond','EB Garamond',Georgia,serif", fontStyle: 'italic', fontWeight: 600, fontSize: 24 }}>Made</text>
            <text x="50" y="88" textAnchor="middle" fill="#3B2A14" style={{ fontFamily: "'Cormorant Garamond','EB Garamond',Georgia,serif", fontStyle: 'italic', fontWeight: 600, fontSize: 24 }}>Yours</text>
            <line x1="30" y1="102" x2="70" y2="102" stroke="#C8956C" strokeWidth="1.5"/>
            <text x="50" y="112" textAnchor="middle" fill="#B4B2A9" style={{ fontFamily: "'Inter',system-ui,sans-serif", fontWeight: 500, fontSize: 7, letterSpacing: '1px' }}>EST. 2026</text>
          </svg>
          <h1 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 44, margin: '0 0 10px', letterSpacing: '-0.02em' }}>
            Got it, {state.name.split(' ')[0] || 'friend'}.
          </h1>
          <hr className="mys-rule center" />
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
            I'll read through your note tonight and email you back within a day or two
            with a sketch and a price. Nothing's committed yet — this is just a conversation.
          </p>
          <button className="mys-btn mys-btn-secondary" onClick={onBack} style={{ marginTop: 20 }}>
            Back to the shop
          </button>
        </div>
      </section>
    );
  }

  return (
    <section className="mys-section" style={{ paddingTop: 28 }}>
      <div className="mys-page" style={{ maxWidth: 720 }}>
        <button className="mys-btn mys-btn-ghost mys-btn-sm" onClick={onBack} style={{ marginBottom: 20 }}>
          ← Back
        </button>
        <p className="mys-eyebrow">Start a custom</p>
        <h1 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 56, margin: '0 0 10px', letterSpacing: '-0.02em', lineHeight: 1.05 }}>
          Tell me what you're thinking.
        </h1>
        <hr className="mys-rule" />
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 560, marginBottom: 36 }}>
          Describe the piece in your own words. I'll read it, sketch something,
          and email you back with a price. No commitment — think of this as a first note.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 18 }}>
          <div className="mys-field">
            <label>Your name</label>
            <input className="mys-input" value={state.name} onChange={e => set('name', e.target.value)} placeholder="Sam Arthur" />
          </div>
          <div className="mys-field">
            <label>Email</label>
            <input className="mys-input" value={state.email} onChange={e => set('email', e.target.value)} placeholder="you@example.com" />
          </div>
        </div>

        <div className="mys-field" style={{ marginBottom: 18 }}>
          <label>What is it?</label>
          <textarea
            className="mys-textarea"
            rows={4}
            value={state.what}
            onChange={e => set('what', e.target.value)}
            placeholder="A walnut board with my grandmother's pie recipe in her handwriting. Roughly 12″×8″. Her handwriting photo I can send — it's a little faded."
          />
          <span className="mys-hint"><em>The more specific, the better.</em> Dimensions, materials, photos of handwriting — it all helps.</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 18 }}>
          <div className="mys-field">
            <label>Needed by?</label>
            <input className="mys-input" value={state.deadline} onChange={e => set('deadline', e.target.value)} placeholder="Mom's birthday · May 14" />
          </div>
          <div className="mys-field">
            <label>Budget (rough)</label>
            <select className="mys-select" value={state.notes} onChange={e => set('notes', e.target.value)}>
              <option>No strong preference</option>
              <option>$30 – $75</option>
              <option>$75 – $150</option>
              <option>$150 – $300</option>
              <option>$300+</option>
            </select>
          </div>
        </div>

        {error && (
          <p style={{ fontSize: 13, color: 'var(--danger)', marginTop: 12 }}>{error}</p>
        )}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 28, paddingTop: 20, borderTop: '0.5px solid var(--cream-edge)' }}>
          <p className="mys-stamp">I reply within a day · usually faster</p>
          <button className="mys-btn mys-btn-primary mys-btn-lg" onClick={handleSubmit} disabled={sending}>
            {sending ? 'Sending…' : <span>Send it over <span className="mys-btn-arrow">→</span></span>}
          </button>
        </div>
      </div>
    </section>
  );
}

window.CustomOrder = CustomOrder;