// Contact page
const Contact = ({ t, lang }) => {
  return (
    <div>
      <div className="page-header">
        <div className="container">
          <div className="eyebrow">{t.contact.eyebrow}</div>
          <h1 className="t-h1">{t.contact.h1}</h1>
          <p className="sub">{t.contact.sub}</p>
        </div>
      </div>

      <div className="container">
        <div className="contact-grid">
          <div className="contact-info">
            <div className="section-eyebrow">{t.contact.offices}</div>
            <h2 className="t-h2" style={{ margin: "16px 0 8px" }}>{lang === "ar" ? "الرياض" : "Riyadh"}</h2>
            <p style={{ color: "var(--ink-500)", margin: 0 }}>{t.contact.ksa_office}</p>

            <dl>
              <dt><Icon name="phone" size={14}/></dt>
              <dd style={{ fontFamily: "var(--font-mono)" }}>{t.contact.ksa_phone}</dd>
              <dt><Icon name="mail" size={14}/></dt>
              <dd>{t.contact.email}</dd>
              <dt><Icon name="clock" size={14}/></dt>
              <dd>{t.contact.hours}</dd>
            </dl>

            {/* Stylized map of the office location */}
            <div style={{ height: 220, background: "var(--green-800)", borderRadius: 6, position: "relative", overflow: "hidden", marginTop: 24 }}>
              <svg viewBox="0 0 400 220" width="100%" height="100%" style={{ display: "block" }}>
                <rect width="400" height="220" fill="#0a3927"/>
                <g stroke="rgba(232,214,168,0.15)" strokeWidth="0.6">
                  {Array.from({ length: 12 }, (_, i) => <line key={i} x1={i * 40} y1="0" x2={i * 40} y2="220"/>)}
                  {Array.from({ length: 7 }, (_, i) => <line key={i} x1="0" y1={i * 36} x2="400" y2={i * 36}/>)}
                </g>
                <line x1="0" y1="110" x2="400" y2="110" stroke="rgba(232,214,168,0.6)" strokeWidth="2.5"/>
                <line x1="200" y1="0"   x2="200" y2="220" stroke="rgba(232,214,168,0.6)" strokeWidth="2.5"/>
                <text x="20" y="105" fontFamily="var(--font-mono)" fontSize="9" fill="#E8D6A8" opacity="0.7">KING FAHD RD</text>
                <text x="208" y="20" fontFamily="var(--font-mono)" fontSize="9" fill="#E8D6A8" opacity="0.7">OLAYA ST</text>
                <circle cx="225" cy="100" r="14" fill="none" stroke="#C8A35A" strokeWidth="1" opacity="0.5">
                  <animate attributeName="r" values="14;26;14" dur="2.4s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite"/>
                </circle>
                <circle cx="225" cy="100" r="6" fill="#C8A35A" stroke="#fff" strokeWidth="1.5"/>
                <text x="225" y="84" textAnchor="middle" fontFamily="var(--font-sans)" fontSize="10" fill="#fff" fontWeight="500">Daoob HQ</text>
              </svg>
            </div>
          </div>

          <div>
            <div className="card" style={{ padding: 36 }}>
              <h2 className="t-h3" style={{ margin: "0 0 24px" }}>{t.contact.form_h}</h2>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div className="field">
                  <label>{t.contact.f_name}</label>
                  <input/>
                </div>
                <div className="field">
                  <label>{t.contact.f_email}</label>
                  <input/>
                </div>
                <div className="field" style={{ gridColumn: "span 2" }}>
                  <label>{t.contact.f_org}</label>
                  <input/>
                </div>
                <div className="field" style={{ gridColumn: "span 2" }}>
                  <label>{t.contact.f_topic}</label>
                  <select>
                    {t.contact.f_topic_opts.map(o => <option key={o}>{o}</option>)}
                  </select>
                </div>
                <div className="field" style={{ gridColumn: "span 2" }}>
                  <label>{t.contact.f_msg}</label>
                  <textarea rows="6"/>
                </div>
              </div>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 24 }}>
                {t.contact.f_submit} <Icon name="arrow-right" size={14}/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Contact });