/* Contact page — submits leads to /api/leads */

const _cms_c = window.__CMS__?.content || {};
const _c2 = (s, k, fb) => _cms_c[s]?.[k] ?? fb;

function ContactPage() {
  const [mobile, setMobile] = React.useState(false);
  const [form, setForm]     = React.useState({ name: '', phone: '', email: '', org: '', interest: 'דגלים', message: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  useReveal();

  const phone   = _c2('general', 'phone',    '03-6248480');
  const wa      = _c2('general', 'whatsapp', '050-1234567');
  const email   = _c2('general', 'email',    'info@rubinflags.co.il');
  const address = _c2('general', 'address',  'האורגים 12, תל אביב');
  const hours   = _c2('general', 'hours',    'ראשון - חמישי 08:00-17:00');
  const waNum   = wa.replace(/[^0-9]/g,'').replace(/^0/,'');

  const handleChange = (e) => setForm(f => ({ ...f, [e.target.name]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('/api/leads', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (res.ok) {
        setStatus('sent');
        setForm({ name: '', phone: '', email: '', org: '', interest: 'דגלים', message: '' });
      } else {
        setStatus('error');
      }
    } catch {
      setStatus('error');
    }
  };

  return (
    <React.Fragment>
      <TopBar />
      <Header current="contact.html" onMobileOpen={() => setMobile(true)} />
      <MobileMenu open={mobile} onClose={() => setMobile(false)} />
      <main>
        <section className="page-hero">
          <div className="container">
            <div className="breadcrumb">
              <a href="index.html">דף הבית</a>
              <span className="sep">›</span>
              <span>צור קשר</span>
            </div>
            <h1>נשמח לדבר איתכם</h1>
            <p>מנהל לקוח ייעודי יחזור אליכם תוך שעה בשעות העבודה — או בוואטסאפ מיידית.</p>
          </div>
        </section>

        <section className="section">
          <div className="container">
            <div className="contact-grid">
              <div className="contact-form reveal">
                <h2>שלחו לנו הודעה</h2>
                <p>נחזור אליכם תוך שעה בשעות העבודה. ניתן גם לפנות בוואטסאפ או בטלפון.</p>

                {status === 'sent' ? (
                  <div style={{ padding: '32px', textAlign: 'center', background: 'rgba(34,197,94,0.08)', borderRadius: 12, border: '1px solid rgba(34,197,94,0.3)' }}>
                    <div style={{ fontSize: 48, marginBottom: 12 }}>✓</div>
                    <strong style={{ fontSize: 20, color: '#22c55e', display: 'block', marginBottom: 8 }}>הבקשה נשלחה בהצלחה!</strong>
                    <p style={{ color: 'var(--text-2)', margin: 0 }}>ניצור איתכם קשר בהקדם האפשרי.</p>
                    <button className="btn btn-outline" style={{ marginTop: 20 }} onClick={() => setStatus('idle')}>שלחו פנייה נוספת</button>
                  </div>
                ) : (
                  <form onSubmit={submit}>
                    <div className="field-row">
                      <div className="field">
                        <label>שם מלא *</label>
                        <input type="text" name="name" value={form.name} onChange={handleChange} placeholder="ישראל ישראלי" required />
                      </div>
                      <div className="field">
                        <label>טלפון *</label>
                        <input type="tel" name="phone" value={form.phone} onChange={handleChange} placeholder="050-0000000" required />
                      </div>
                    </div>
                    <div className="field-row">
                      <div className="field">
                        <label>אימייל</label>
                        <input type="email" name="email" value={form.email} onChange={handleChange} placeholder="name@example.com" />
                      </div>
                      <div className="field">
                        <label>שם הארגון</label>
                        <input type="text" name="org" value={form.org} onChange={handleChange} placeholder="חברה / עירייה / מוסד" />
                      </div>
                    </div>
                    <div className="field">
                      <label>מעניין אותי</label>
                      <select name="interest" value={form.interest} onChange={handleChange}>
                        <option>דגלים</option>
                        <option>דגלי חוף</option>
                        <option>רולאפים</option>
                        <option>חולצות מודפסות</option>
                        <option>שילוט</option>
                        <option>מפות שולחן</option>
                        <option>מוצרי פרסום</option>
                        <option>מיתוג אירועים</option>
                        <option>פרויקט מיוחד</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>פרטים נוספים</label>
                      <textarea name="message" value={form.message} onChange={handleChange}
                        placeholder="ספרו לנו על הפרויקט — סוג, כמות, מועד, כל פרט שיעזור..."></textarea>
                    </div>
                    {status === 'error' && (
                      <p style={{ color: '#ef4444', fontSize: 14, marginBottom: 12 }}>אירעה שגיאה. נסו שוב או פנו אלינו בטלפון.</p>
                    )}
                    <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%' }} disabled={status === 'sending'}>
                      {status === 'sending' ? 'שולח...' : 'שלחו בקשה להצעת מחיר'}
                    </button>
                  </form>
                )}
              </div>

              <div className="contact-info reveal">
                <a href={`tel:${phone}`} className="info-card">
                  <div className="ic"><Icon name="phone" size={22} /></div>
                  <div>
                    <strong>טלפון משרד</strong>
                    <span>{phone} · {hours}</span>
                  </div>
                </a>
                <a href={`https://wa.me/972${waNum}`} className="info-card" target="_blank" rel="noopener noreferrer">
                  <div className="ic" style={{ background: 'rgba(37,211,102,0.10)', color: '#25D366' }}><Icon name="whatsapp" size={22} /></div>
                  <div>
                    <strong>WhatsApp</strong>
                    <span>{wa} · מענה מיידי</span>
                  </div>
                </a>
                <a href={`mailto:${email}`} className="info-card">
                  <div className="ic"><Icon name="mail" size={22} /></div>
                  <div>
                    <strong>אימייל</strong>
                    <span>{email}</span>
                  </div>
                </a>
                <div className="info-card">
                  <div className="ic"><Icon name="pin" size={22} /></div>
                  <div>
                    <strong>הכתובת שלנו</strong>
                    <span>{address}</span>
                  </div>
                </div>
                <div className="map-box">
                  <div className="map-pin"><Icon name="pin" size={16} /></div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <StickyWhatsapp />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ContactPage />);