// Catering form + policy components (separate file to keep page-catering manageable)
const { useState: useStateCForm } = React;

function CateringForm() {
  const [form, setForm] = useStateCForm({
    name: '', email: '', phone: '', branch: '', headcount: 12, date: '', platter: 'Mezze Platter', notes: '',
  });
  const [submitted, setSubmitted] = useStateCForm(false);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <section id="inquire" className="section section--cream" style={{ scrollMarginTop: 120 }}>
      <div className="container container--wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'start' }} className="cater-grid">
          <div>
            <div className="eyebrow">Inquiry</div>
            <h2 className="section-title">Tell us about the table.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              We'll come back with a final quote, a delivery slot, and the chafing-dish list within the hour.
              Prefer to talk? WhatsApp the catering hotline directly.
            </p>

            <div style={{
              marginTop: 32,
              padding: 24,
              background: 'var(--paper)',
              border: '1px solid var(--line)',
              borderRadius: 'var(--radius)',
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--terracotta)' }}>TWO WHATSAPP HOTLINES</div>
              <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <a href="https://wa.me/971565266357" target="_blank" rel="noopener" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--olive)', color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon.whatsapp width="20" height="20" />
                  </span>
                  <div>
                    <div className="serif" style={{ fontSize: 18, color: 'var(--charcoal)', fontWeight: 600 }}>056 526 6357</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-2)' }}>Headquarters · Sat–Thu 9–21</div>
                  </div>
                </a>
                <a href="https://wa.me/971561166672" target="_blank" rel="noopener" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--terracotta)', color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon.whatsapp width="20" height="20" />
                  </span>
                  <div>
                    <div className="serif" style={{ fontSize: 18, color: 'var(--charcoal)', fontWeight: 600 }}>056 116 6672</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-2)' }}>Facebook hotline · 7 days</div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: 36 }}>
            {submitted ? (
              <div style={{ textAlign: 'center', padding: '32px 0' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--olive)', color: 'var(--paper)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                  <Icon.check width="28" height="28" />
                </div>
                <div className="serif" style={{ fontSize: 28, color: 'var(--charcoal)', fontWeight: 600 }}>Quote on the way.</div>
                <div style={{ fontSize: 15, color: 'var(--ink-2)', marginTop: 12, lineHeight: 1.5, maxWidth: 360, margin: '12px auto 0' }}>
                  We'll WhatsApp you within an hour at <strong>{form.phone || 'the number you gave us'}</strong> with
                  a final quote and a delivery slot.
                </div>
                <button className="btn btn--ghost" style={{ marginTop: 28 }} onClick={() => { setSubmitted(false); setForm({ name:'', email:'', phone:'', branch:'', headcount:12, date:'', platter:'Mezze Platter', notes:'' }); }}>
                  Send another →
                </button>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'grid', gap: 18 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div className="field"><label className="field__label">Your name</label><input required value={form.name} onChange={e => update('name', e.target.value)} placeholder="Layla Nasr" /></div>
                  <div className="field"><label className="field__label">Phone</label><input required type="tel" value={form.phone} onChange={e => update('phone', e.target.value)} placeholder="+971 50 …" /></div>
                </div>
                <div className="field"><label className="field__label">Email</label><input type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="for the formal quote" /></div>
                <div className="field">
                  <label className="field__label">Platter</label>
                  <select value={form.platter} onChange={e => update('platter', e.target.value)}>
                    <option>Mezze Platter</option>
                    <option>Mixed Grill Tray</option>
                    <option>Shawarma Sandwich Box</option>
                    <option>Arabic Feast</option>
                    <option>Bespoke / mix &amp; match</option>
                  </select>
                </div>
                <div className="field">
                  <label className="field__label">Head count — <span style={{ color: 'var(--terracotta)', fontWeight: 700 }}>{form.headcount} people</span></label>
                  <input type="range" min="4" max="200" value={form.headcount} onChange={e => update('headcount', +e.target.value)} style={{ accentColor: 'var(--terracotta)' }} />
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
                    <span>4</span><span>50</span><span>100</span><span>200+</span>
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div className="field"><label className="field__label">Delivery date</label><input required type="date" value={form.date} onChange={e => update('date', e.target.value)} /></div>
                  <div className="field">
                    <label className="field__label">Pick-up branch</label>
                    <select value={form.branch} onChange={e => update('branch', e.target.value)}>
                      <option value="">Nearest to delivery address</option>
                      {window.BRANCHES.filter(b => b.format !== 'delivery').map(b => (
                        <option key={b.id} value={b.id}>{b.name} · {b.emirate}</option>
                      ))}
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label className="field__label">Dietary notes &amp; delivery address</label>
                  <textarea value={form.notes} onChange={e => update('notes', e.target.value)} placeholder="e.g. 2 vegetarians, no nuts. Office reception, 7th floor."></textarea>
                </div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
                  <button className="btn btn--primary" type="submit">Send inquiry →</button>
                  <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>Or WhatsApp the form to us instead.</span>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 820px) { .cater-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function CateringPolicy() {
  const policies = [
    { n: '48h', label: 'Lead time', body: 'Standard orders go in 48 hours ahead. Mezze-only and sandwich boxes — same day, before 11am.' },
    { n: '15%', label: 'Group deposit', body: 'A 15% deposit secures the slot. The rest is paid on delivery (card, transfer, cash).' },
    { n: 'AED 0', label: 'Delivery fee', body: 'Within Dubai &amp; Abu Dhabi for orders over AED 600. Northern Emirates: from AED 80.' },
    { n: '24/7', label: 'Pickup', body: 'Most outlets allow scheduled pickup. Al Raffa flagship runs an extended catering counter.' },
  ];
  return (
    <section className="section">
      <div className="container container--wide">
        <div className="eyebrow">House rules</div>
        <h2 className="section-title">How catering works.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 48 }} className="policy-grid">
          {policies.map(p => (
            <div key={p.label} style={{ padding: 28, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--radius)' }}>
              <div className="serif" style={{ fontSize: 44, color: 'var(--terracotta)', fontWeight: 600, lineHeight: 1 }}>{p.n}</div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--charcoal)', marginTop: 10, textTransform: 'uppercase' }}>{p.label}</div>
              <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 10, lineHeight: 1.5 }} dangerouslySetInnerHTML={{ __html: p.body }} />
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .policy-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </section>
  );
}

window.CateringForm = CateringForm;
window.CateringPolicy = CateringPolicy;