/* Contact page */

function ContactPage({ navigate }) {
  const { CONTACT } = window.MOBICO_DATA;
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="06 / CONTACT"
        title="Talk to us about your <em>specification.</em>"
        intro="Architects, fit-out firms, procurement teams — start a project enquiry below. We respond within one business day."
        breadcrumb="MOBICO · Contact"
      />

      <section style={{padding:"56px 0 96px"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:48}}>
            {/* Form */}
            <div style={{gridColumn:"span 7"}}>
              <div className="mono" style={{color:"var(--mobico)", marginBottom:8}}>ENQUIRY</div>
              <h2 style={{fontSize:36, fontWeight:600, letterSpacing:"-0.02em", margin:"0 0 32px"}}>
                Request a quote.
              </h2>
              <QuoteForm mode="quote" />
            </div>

            {/* Sidebar */}
            <div style={{gridColumn:"span 5"}}>
              <div className="mono" style={{color:"var(--mobico)", marginBottom:8}}>OFFICES</div>
              <h2 style={{fontSize:36, fontWeight:600, letterSpacing:"-0.02em", margin:"0 0 24px"}}>
                Two locations.
              </h2>

              <div style={{display:"grid", gap:24}}>
                <LocationCard
                  tag="SHOWROOM · d3"
                  name="Dubai Design District"
                  addr={CONTACT.d3.addr}
                  phone={CONTACT.d3.phone}
                  hours={CONTACT.d3.hours.split(" · ")[0]}
                  note="By appointment"
                  primary
                />
                <LocationCard
                  tag="OFFICE"
                  name="Karama"
                  addr={CONTACT.karama.addr}
                  phone={CONTACT.karama.phone}
                  hours={CONTACT.karama.hours}
                />
              </div>

              <div style={{marginTop:32, padding:"16px 18px", background:"var(--paper-2)", border:"1px solid var(--line)"}}>
                <div className="mono" style={{color:"var(--muted)", marginBottom:8}}>P.O. BOX</div>
                <div style={{fontWeight:500}}>{CONTACT.po}</div>
              </div>

              <div style={{marginTop:32}}>
                <div className="mono" style={{color:"var(--muted)", marginBottom:8}}>EMAIL</div>
                <div style={{fontSize:15, color:"var(--ink-2)"}}>
                  Please use the form opposite. A dedicated email address will be published once confirmed.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function LocationCard({ tag, name, addr, phone, hours, note, primary }) {
  return (
    <div style={{
      padding:"22px 24px",
      border:"1px solid " + (primary ? "var(--ink)" : "var(--line)"),
      background: primary ? "var(--ink)" : "var(--surface)",
      color: primary ? "#fff" : "var(--ink)",
      position:"relative",
    }}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start"}}>
        <div className="mono" style={{color: primary ? "#9b97ff" : "var(--mobico)"}}>{tag}</div>
        {primary && <span className="mono" style={{
          background:"#9b97ff", color:"var(--ink)", padding:"3px 8px",
        }}>PRIMARY</span>}
      </div>
      <div style={{fontSize:22, fontWeight:600, letterSpacing:"-0.01em", margin:"10px 0 12px"}}>{name}</div>
      <div style={{fontSize:14, color: primary ? "#cdd0d6" : "var(--ink-2)", lineHeight:1.6}}>{addr}</div>
      <div style={{
        display:"grid", gridTemplateColumns:"1fr 1fr", gap:16,
        marginTop:18, paddingTop:14,
        borderTop:"1px solid " + (primary ? "#2a2d35" : "var(--line)"),
      }}>
        <div>
          <div className="mono" style={{color: primary ? "#7c8190" : "var(--muted)"}}>PHONE</div>
          <div style={{marginTop:4, fontWeight:500}}>{phone}</div>
        </div>
        <div>
          <div className="mono" style={{color: primary ? "#7c8190" : "var(--muted)"}}>HOURS</div>
          <div style={{marginTop:4, fontWeight:500, fontSize:13}}>{hours}</div>
          {note && <div style={{fontSize:12, color: primary ? "#7c8190" : "var(--muted)", marginTop:2}}>{note}</div>}
        </div>
      </div>
    </div>
  );
}

window.ContactPage = ContactPage;