/* ContactPage — quote form + contact panel */
function ContactPage() {
  const { SectionHeader, Input, Select, Textarea, Checkbox, Button, Badge } = window.DS;
  const [sent, setSent] = React.useState(false);
  const [wa, setWa] = React.useState(true);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (busy) return;
    const fd = new FormData(e.target);
    setBusy(true); setErr(false);
    window.sendLead({
      'שם': fd.get('name') || '',
      'טלפון': fd.get('phone') || '',
      'סוג שירות': fd.get('service') || '',
      'פרטים': fd.get('details') || '',
      'מענה בוואטסאפ': wa ? 'כן' : 'לא',
      'מקור': 'עמוד צור קשר',
    })
      .then(() => {
        setSent(true);
        if (window.gsap) {
          requestAnimationFrame(() => {
            gsap.fromTo('#sent-ok', { autoAlpha: 0, scale: .8, y: 20 }, { autoAlpha: 1, scale: 1, y: 0, duration: .8, ease: 'back.out(1.7)' });
          });
        }
      })
      .catch(() => setErr(true))
      .finally(() => setBusy(false));
  };

  return (
    <main data-screen-label="Contact">
      <section className="page-head">
        <div className="bg"><img src="assets/hero-vault.jpg" alt="" fetchpriority="high" decoding="async" /></div>
        <div className="container page-head-inner">
          <nav className="crumb" aria-label="פירורי לחם"><a href="index.html">ראשי</a><span>/</span><span>צור קשר</span></nav>
          <SectionHeader as="h1" tone="dark" kicker="מענה מהיר — בדרך כלל תוך שעה" title="קבלו הצעה"
            description="ספרו לי מה קרה או מה צריך — ואחזור אליכם עם מחיר סגור." />
        </div>
      </section>
      <section className="section">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 'clamp(24px,4vw,56px)', alignItems: 'start' }}>
          <div className="form-card" data-reveal>
            {!sent ? (
              <form onSubmit={submit} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 18px' }}>
                <Input label="שם מלא" name="name" placeholder="ישראל ישראלי" required />
                <Input label="טלפון" name="phone" type="tel" placeholder="050-000-0000" required inputMode="tel" />
                <Select label="סוג השירות" name="service" placeholder="בחרו שירות" required style={{ gridColumn: '1 / -1' }}
                  options={['פריצה שקטה', 'התקנת כספת', 'שדרוג מנגנון נעילה', 'תיקון ושיפוץ', 'מכירת כספות', 'כספת בתקן (נשק / נוהל 150)']} />
                <Textarea label="פרטים" name="details" rows={4} placeholder="סוג הכספת, עיר, מה קרה... אפשר גם לצרף תמונה בוואטסאפ" style={{ gridColumn: '1 / -1' }} />
                <div style={{ gridColumn: '1 / -1' }}>
                  <Checkbox checked={wa} onChange={(e) => setWa(e.target.checked)}>נוח לי לקבל מענה בוואטסאפ</Checkbox>
                </div>
                <div style={{ gridColumn: '1 / -1', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <Button type="submit" size="lg" disabled={busy} icon={<window.LIcon name="chevron-left" size={16} />}>{busy ? 'שולח…' : 'שלחו ואחזור אליכם'}</Button>
                  <Button variant="ghost" size="lg" href="tel:0543312367"><span dir="ltr">054-331-2367</span></Button>
                </div>
                {err && <p className="form-privacy-note" style={{ gridColumn: '1 / -1', color: 'var(--maroon-700)' }}>השליחה נכשלה — נסו שוב או התקשרו: <a href="tel:0543312367" dir="ltr">054-331-2367</a></p>}
                <p className="form-privacy-note" style={{ gridColumn: '1 / -1' }}>הפרטים ישמשו לחזרה אליכם בלבד ולא יועברו לצד שלישי. מסירתם אינה חובה על פי דין. <a href="privacy.html">מדיניות פרטיות</a></p>
              </form>
            ) : (
              <div id="sent-ok" style={{ textAlign: 'center', padding: '34px 10px' }}>
                <div style={{ width: 74, height: 74, borderRadius: '50%', background: 'var(--maroon-500)', margin: '0 auto 20px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <window.LIcon name="check" size={34} style={{ color: '#fff' }} />
                </div>
                <h3 style={{ margin: '0 0 8px' }}>הפנייה אצלי.</h3>
                <p style={{ color: 'var(--text-body)', margin: 0 }}>אחזור אליכם בהקדם — בדרך כלל תוך שעה בשעות הפעילות.</p>
              </div>
            )}
          </div>
          <aside className="contact-panel" data-reveal>
            <span style={{ display: 'inline-block', width: 64, height: 3, background: 'rgba(255,255,255,.6)', borderRadius: 2 }}></span>
            <h3 style={{ color: '#fff', margin: '16px 0 4px' }}>דרכים מהירות אליי</h3>
            <p style={{ color: 'rgba(255,255,255,.75)', fontSize: 15.5, marginBottom: 10 }}>הכי מהיר: תמונה של הכספת בוואטסאפ.</p>
            <div className="contact-row"><window.LIcon name="phone" size={20} /><div><b><a href="tel:0543312367" dir="ltr">054-331-2367</a></b><div style={{ fontSize: 13, color: 'rgba(255,255,255,.6)' }}>שיחה ישירה אליי</div></div></div>
            <div className="contact-row"><window.LIcon name="message-circle" size={20} /><div><b><a href="https://wa.me/972543312367" target="_blank" rel="noopener">וואטסאפ — הודעה לשלום</a></b><div style={{ fontSize: 13, color: 'rgba(255,255,255,.6)' }}>מענה מהיר, אפשר לצרף תמונות</div></div></div>
            <div className="contact-row"><window.LIcon name="mail" size={20} /><div><b><a href="mailto:shalomsafes@gmail.com">shalomsafes@gmail.com</a></b></div></div>
            <div className="contact-row"><window.LIcon name="map-pin" size={20} /><div><b>אשקלון</b><div style={{ fontSize: 13, color: 'rgba(255,255,255,.6)' }}>שירות בכל הארץ</div></div></div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 20 }}>
              <Badge variant="gold-dark">תקן משטרה</Badge>
              <Badge variant="gold-dark">נוהל 150</Badge>
              <Badge variant="gold-dark">סיווג ביטחוני</Badge>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}
window.ContactPage = ContactPage;