/* Contact.jsx */

function Contact() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name:'', phone:'', message:'' });

  const hours = ar ? [
    ['السبت', '٩:٠٠ ص – ٩:٠٠ م'],
    ['الأحد', '٩:٠٠ ص – ٩:٠٠ م'],
    ['الاثنين', '٩:٠٠ ص – ٩:٠٠ م'],
    ['الثلاثاء', '٩:٠٠ ص – ٩:٠٠ م'],
    ['الأربعاء', '٩:٠٠ ص – ٩:٠٠ م'],
    ['الخميس', '٩:٠٠ ص – ٩:٠٠ م'],
    ['الجمعة', 'مغلقة'],
  ] : [
    ['Saturday','9:00 AM – 9:00 PM'],
    ['Sunday','9:00 AM – 9:00 PM'],
    ['Monday','9:00 AM – 9:00 PM'],
    ['Tuesday','9:00 AM – 9:00 PM'],
    ['Wednesday','9:00 AM – 9:00 PM'],
    ['Thursday','9:00 AM – 9:00 PM'],
    ['Friday','Closed'],
  ];

  return (
    <main>
      <section className="page-hero container">
        <Reveal><Eyebrow>{ar?'تواصل':'Contact'}</Eyebrow></Reveal>
        <Reveal delay={120} as="h1">{ar?'هنا، في الرياض.':'Here, in Riyadh.'}</Reveal>
        <Reveal delay={280}>
          <p className="lede">
            {ar?'تقدر تزورنا، تتصل، أو ترسل رسالة. كلها وصلت.':'Drop by, call, or send a note — all of them reach us.'}
          </p>
        </Reveal>
      </section>

      <section className="section container">
        <div className="contact-grid">
          {/* Map */}
          <Reveal className="contact-map">
            <div className="map-frame">
              {/* Stylized abstract map */}
              <svg viewBox="0 0 600 500" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
                <rect width="600" height="500" fill="#EFE7D7"/>
                {/* roads */}
                <g stroke="#D9CFB8" strokeWidth="14" fill="none" strokeLinecap="round">
                  <path d="M-40 180 L260 180 L320 240 L640 240"/>
                  <path d="M-40 350 L640 350"/>
                  <path d="M180 -40 L180 540"/>
                  <path d="M430 -40 L430 200 L520 290 L520 540"/>
                </g>
                <g stroke="#E8DFCB" strokeWidth="6" fill="none">
                  <path d="M-40 120 L300 120 L320 100 L640 100"/>
                  <path d="M-40 420 L640 420"/>
                  <path d="M80 -40 L80 540"/>
                  <path d="M290 -40 L290 540"/>
                  <path d="M380 -40 L380 540"/>
                </g>
                {/* blocks */}
                <g fill="#E8DFCB">
                  <rect x="200" y="200" width="80" height="40" rx="4"/>
                  <rect x="200" y="260" width="80" height="80" rx="4"/>
                  <rect x="450" y="260" width="60" height="80" rx="4"/>
                  <rect x="100" y="200" width="80" height="80" rx="4"/>
                  <rect x="100" y="360" width="80" height="50" rx="4"/>
                </g>
                {/* clinic pin */}
                <g transform="translate(300 250)">
                  <circle r="40" fill="#0F5B4E" opacity="0.12"/>
                  <circle r="24" fill="#0F5B4E" opacity="0.2"/>
                  <circle r="11" fill="#0F5B4E"/>
                  <circle r="4" fill="#F6F1E7"/>
                </g>
              </svg>
              <div className="map-pin-label">
                <div className="pin-bull">●</div>
                <div>
                  <div className="pin-title">{ar?'عيادة آب مي أب':'App Me Up'}</div>
                  <div className="pin-sub">{ar?'شارع الأمير محمد بن عبدالعزيز':'Prince Muhammad Bin Abdulaziz Rd'}</div>
                </div>
              </div>
            </div>
          </Reveal>

          {/* Right column */}
          <div className="contact-info">
            <Reveal>
              <div className="info-block">
                <h3 className="info-h">{ar?'العنوان':'Address'}</h3>
                <p>
                  {ar
                    ? <>شارع الأمير محمد بن عبدالعزيز<br/>حي السليمانية، الرياض<br/>المملكة العربية السعودية</>
                    : <>Prince Muhammad Bin Abdulaziz Rd<br/>Al Sulaimaniyah, Riyadh<br/>Saudi Arabia</>}
                </p>
                <a href="#" className="info-link">{ar?'افتح في الخرائط ←':'Open in Maps →'}</a>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div className="info-block">
                <h3 className="info-h">{ar?'تواصل':'Get in touch'}</h3>
                <p>
                  <a href="tel:+966505354288" dir="ltr">+966 50 535 4288</a><br/>
                  <a href="mailto:info@appmeup.sa">info@appmeup.sa</a>
                </p>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div className="info-block">
                <h3 className="info-h">{ar?'ساعات العمل':'Hours'}</h3>
                <table className="hours-table">
                  <tbody>
                    {hours.map(([d,h]) => (
                      <tr key={d}><td>{d}</td><td>{h}</td></tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Message form */}
      <section className="section container">
        <div className="contact-form-wrap">
          <Reveal>
            <Eyebrow>{ar?'أرسل لنا':'Send a note'}</Eyebrow>
            <h2 style={{marginTop:14, marginBottom:32}}>{ar?'سؤال؟ نحن نسمع.':'A question? We\'re listening.'}</h2>
          </Reveal>
          <Reveal delay={120}>
            {sent ? (
              <div className="form-done">
                <svg viewBox="0 0 64 64" width="44" height="44" fill="none" style={{color:'var(--forest)'}}>
                  <circle cx="32" cy="32" r="30" stroke="currentColor" strokeWidth="1.5"/>
                  <path d="M20 33 L29 42 L45 24" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <p>{ar?'وصلت رسالتك. سنرد خلال يوم عمل.':'Got it. We\'ll reply within one working day.'}</p>
              </div>
            ) : (
              <form onSubmit={(e)=>{e.preventDefault();setSent(true);}}>
                <div className="form-grid">
                  <div className="field"><label>{ar?'الاسم':'Name'}</label><input value={form.name} onChange={e=>setForm({...form,name:e.target.value})} required/></div>
                  <div className="field"><label>{ar?'رقم الهاتف':'Phone'}</label><input value={form.phone} onChange={e=>setForm({...form,phone:e.target.value})} placeholder="+966" dir="ltr" required/></div>
                  <div className="field" style={{gridColumn:'1 / -1'}}><label>{ar?'رسالتك':'Your message'}</label><textarea rows="5" value={form.message} onChange={e=>setForm({...form,message:e.target.value})} required></textarea></div>
                </div>
                <div style={{marginTop:24}}>
                  <button type="submit" className="btn btn-primary">{ar?'إرسال':'Send'}</button>
                </div>
              </form>
            )}
          </Reveal>
        </div>
      </section>
    </main>
  );
}

window.Contact = Contact;