// Contact page
function Contact() {
  const { go } = useRouter();
  return (
    <main>
      <section className="page-head">
        <div className="wrap">
          <div className="crumbs" style={{marginBottom: 18}}>
            <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>Home</a>
            <span>/</span>
            <span style={{color:'var(--ink)'}}>Contact</span>
          </div>
          <div className="page-head-row">
            <h1>Get in touch.<br/><span style={{color:'var(--muted)'}}>Day or night.</span></h1>
            <p className="lead">WhatsApp is fastest — but the sales desk picks up the phone 24/7. Walk-ins welcome at our Al Quoz production studio.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="contact-grid">
            <div className="contact-left">
              <div className="eyebrow no-rule" style={{marginBottom: 24}}>01 — Studio &amp; production</div>
              <h2 className="h-card" style={{fontSize: 28, marginBottom: 28, lineHeight: 1.2}}>Arabian Prints<br/>Al Quoz Industrial Area 2</h2>

              <div className="contact-row">
                <div className="k">Address</div>
                <div className="v">Arabian Prints<br/>Al Quoz Industrial Area 2<br/>Dubai, United Arab Emirates</div>
                <div className="sub" style={{marginTop: 8}}>Production studio &amp; sales counter</div>
              </div>
              <div className="contact-row">
                <div className="k">Phone &amp; WhatsApp</div>
                <div className="v"><a href={`tel:${PHONE_RAW}`}>{PHONE}</a></div>
                <div className="sub">One number — calls, WhatsApp messages, voice notes.</div>
              </div>
              <div className="contact-row">
                <div className="k">Email</div>
                <div className="v"><a href={`mailto:${EMAIL}`}>{EMAIL}</a></div>
                <div className="sub">For quotes, large jobs, exhibition briefs.</div>
              </div>
              <div className="contact-row">
                <div className="k">Hours</div>
                <div className="v">24/7 sales desk · WhatsApp anytime</div>
                <div className="sub">Walk-in counter: Saturday–Thursday, 09:00–19:00. Order cutoff for next-day: 11:00.</div>
              </div>

              <div className="map-embed" style={{marginTop: 32}}>
                <iframe
                  title="Google Maps search for Arabian Prints Dubai"
                  src="https://www.google.com/maps?q=Arabian%20Prints%20Dubai%20printing&z=14&output=embed"
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
                <a className="map-embed-link" href="https://www.google.com/maps/search/?api=1&query=Arabian%20Prints%20Dubai%20printing" target="_blank" rel="noopener">
                  Open in Google Maps
                </a>
              </div>
            </div>

            <div className="contact-right">
              <div className="eyebrow no-rule" style={{marginBottom: 16}}>02 — Fastest path</div>

              <a className="btn btn-wa btn-lg" href={waLink('Hi Arabian Prints, I would like a quote / to chat about a job.')} target="_blank" rel="noopener" style={{justifyContent:'flex-start', paddingLeft: 22}}>
                <WaIcon /> WhatsApp +971 55 166 8588
              </a>
              <a className="btn btn-ink btn-lg" href={`tel:${PHONE_RAW}`} style={{justifyContent:'flex-start', paddingLeft: 22}}>
                <PhoneIcon /> Call {PHONE}
              </a>
              <a className="btn btn-primary btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('quote'); }} style={{justifyContent:'flex-start', paddingLeft: 22}}>
                Get a Quote <span className="btn-arrow" style={{marginLeft:'auto'}}>→</span>
              </a>
              <a className="btn btn-ghost btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('upload'); }} style={{justifyContent:'flex-start', paddingLeft: 22}}>
                <UploadIcon /> Upload artwork &amp; order
              </a>

              <hr className="hr" style={{margin:'24px 0'}} />

              <div className="eyebrow no-rule" style={{marginBottom: 12}}>Production turnaround</div>
              <div className="contact-row">
                <div className="k">Express business cards</div>
                <div className="v">24 hours</div>
              </div>
              <div className="contact-row">
                <div className="k">Premium business cards</div>
                <div className="v">2 working days</div>
              </div>
              <div className="contact-row">
                <div className="k">Roll-up banners</div>
                <div className="v">Overnight</div>
              </div>
              <div className="contact-row">
                <div className="k">Signage &amp; exhibition</div>
                <div className="v">3 – 5 working days</div>
              </div>
            </div>
          </div>

          <div className="ribbon" style={{marginTop: 40}}>
            <div className="ribbon-dot" aria-hidden="true"></div>
            <div>
              <b>Note for demo.</b> Both addresses appear on the legacy site (Al Khabisi/Deira vs. Al Quoz Industrial 2). For this design we've shown a single canonical address — to be confirmed with the client before launch.
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Contact });