/* global React, ReactDOM */
function ContactApp() {
  const [lang, setLang, t] = useLang();
  useReveal();
  const cp = t.contact_page;
  return (
    <>
      <Header active="contact" t={t} lang={lang} setLang={setLang} />
      <section className="page-head">
        <div className="container">
          <div className="crumbs"><a href="home.html">{t.common.home}</a><span className="sep">/</span><span>{t.nav.contact}</span></div>
          <h1>{cp.title_a}<br/><em>{cp.title_b}</em></h1>
          <p className="lede">{cp.lede}</p>
        </div>
      </section>

      <section className="s qr" style={{paddingTop: 80}}>
        <div className="container qr-inner">
          <div className="reveal">
            <span style={{fontFamily:"var(--mono)", fontSize:12, color:"var(--copper-500)", letterSpacing:"0.18em", display:"block", marginBottom:16}}>{cp.duty_eyebrow}</span>
            <h2 className="display" style={{color:"white", fontSize:48, marginBottom: 32}}>{cp.duty_phone}</h2>
            <p style={{color:"rgba(255,255,255,0.7)", fontSize:18, lineHeight:1.5, marginBottom: 40, maxWidth:"40ch"}}>
              {cp.duty_lede}
            </p>
            <div style={{borderTop:"1px solid rgba(255,255,255,0.15)", paddingTop:32, display:"grid", gridTemplateColumns:"1fr 1fr", gap:32}}>
              {[
                { label: cp.mail_general, addr: "sales@ptsspain.com" },
                { label: cp.mail_crew, addr: "sales@ptsspain.com" },
                { label: cp.mail_compliance, addr: "sales@ptsspain.com" },
                { label: cp.mail_press, addr: "sales@ptsspain.com" }
              ].map(m => (
                <div key={m.addr}>
                  <h4 style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", color:"rgba(255,255,255,0.5)", marginBottom: 12}}>{m.label}</h4>
                  <p style={{color:"white", fontFamily:"var(--display)", fontSize:18}}>{m.addr}</p>
                </div>
              ))}
            </div>
          </div>
          <form className="qr-form reveal" onSubmit={(e) => { e.preventDefault(); alert(cp.submit_demo); }}>
            <div className="row">
              <div className="field">
                <label>{t.qr_section.vessel}</label>
                <input type="text" placeholder={cp.vessel_ph} />
              </div>
              <div className="field">
                <label>{t.qr_section.imo}</label>
                <input type="text" placeholder="9123456" />
              </div>
            </div>
            <div className="row">
              <div className="field">
                <label>{t.qr_section.port}</label>
                <select><option>Las Palmas</option><option>Barcelona</option><option>Valencia</option><option>Algeciras</option><option>Bilbao</option></select>
              </div>
              <div className="field">
                <label>{t.qr_section.date}</label>
                <input type="date" />
              </div>
            </div>
            <div className="row">
              <div className="field">
                <label>{t.qr_section.service}</label>
                <select>{t.services.map(s => <option key={s.id}>{s.name}</option>)}</select>
              </div>
              <div className="field">
                <label>{t.qr_section.contact}</label>
                <input type="email" placeholder={cp.contact_ph} />
              </div>
            </div>
            <div className="row">
              <div className="field" style={{gridColumn:"1 / -1", borderRight:0}}>
                <label>{cp.message}</label>
                <textarea rows="3" placeholder={cp.message_ph} style={{resize:"vertical"}}></textarea>
              </div>
            </div>
            <div className="submit-row">
              <span className="legal">{t.qr_section.legal}</span>
              <button type="submit" className="btn">{t.qr_section.submit} <span className="arrow">→</span></button>
            </div>
          </form>
        </div>
      </section>

      <section className="s">
        <div className="container">
          <div className="s-head reveal">
            <div>
              <span className="num">{t.common.offices_eyebrow}</span>
              <h2 className="display">{t.common.offices_title}</h2>
            </div>
            <p className="lede">{t.common.offices_lede}</p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 32}} className="reveal">
            {t.offices.map(o => (
              <div key={o.city} style={{borderTop:"1px solid var(--ink)", paddingTop: 24}}>
                <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--accent)", letterSpacing:"0.18em", textTransform:"uppercase"}}>{o.role}</span>
                <h3 className="display" style={{fontSize: 32, marginTop: 12, marginBottom: 20}}>{o.city}</h3>
                <ul style={{listStyle:"none", color:"var(--ink-2)", fontSize:15, lineHeight: 1.7}}>
                  {o.lines.map(l => <li key={l}>{l}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer t={t} />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("app")).render(<ContactApp />);