/* ===== screen-contact.jsx ===== */

function ContactScreen({ locale, setRoute }) {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", email: "", interest: "Company Formation", message: "" });
  const u = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <main>
      <section style={{ padding: "56px 0 36px", background: "var(--paper-2)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap-tight">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Contact</div>
          <h1 style={{ marginBottom: 16, fontSize: "clamp(36px,3.4vw,52px)" }}>
            We're in Downtown Dubai. <span style={{ color: "var(--accent-deep)", fontFamily: "Fraunces, serif", fontStyle: "italic", fontWeight: 500 }}>Pick the fastest way.</span>
          </h1>
          <p className="muted" style={{ fontSize: 17, maxWidth: 680 }}>
            Most enquiries reach an advisor in under 30 minutes. WhatsApp is the fastest. The form is fine too — your advisor will pick it up the same morning.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 56 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64 }}>
          {/* left — channels + map */}
          <div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 28 }}>
              <ChannelCard icon="wa" tag="Fastest · usually under 5 min"
                title="WhatsApp" value="+971 55 203 7894"
                href={waLink()} accent/>
              <ChannelCard icon="phone" tag="Mon–Fri · 09:00–18:00 GMT+4"
                title="Call us" value="+971 4 567 7333"
                sub="Toll-free 800 5423673" href="tel:+97145677333"/>
              <ChannelCard icon="mail" tag="Reply within 24 hours"
                title="Email" value="hello@creativezone.ae"
                sub="(public inbox — confirm before publishing)" href="#"/>
              <ChannelCard icon="pin" tag="Walk in welcome"
                title="Visit us" value="Office 104–105, Level 1"
                sub="Emaar Square — Building 4, Downtown Dubai"/>
            </div>

            {/* map */}
            <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 28 }}>
              <MapPlaceholder/>
              <div style={{ padding: 22, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 2 }}>Emaar Square — Building 4</div>
                  <div style={{ fontSize: 13, color: "var(--muted)" }}>Sheikh Mohammed Bin Rashid Boulevard, Downtown Dubai</div>
                </div>
                <a className="btn btn-sm btn-ghost" href="#">
                  Directions <Icon name="arrow" size={12}/>
                </a>
              </div>
            </div>

            <div className="card" style={{ padding: 22, background: "var(--paper-2)", border: 0 }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Office hours</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                {[["Monday – Friday", "09:00 – 18:00"],
                  ["Saturday", "By appointment"],
                  ["Sunday", "Closed"],
                  ["Time zone", "GMT+4 (Dubai)"]].map(([k, v]) => (
                  <div key={k}>
                    <div style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".08em" }}>{k}</div>
                    <div style={{ fontSize: 14, color: "var(--cz-ink)", fontWeight: 500, marginTop: 2 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* right — form */}
          <div>
            <div className="card" style={{ padding: 36, background: "#fff" }}>
              {sent ? (
                <div style={{ textAlign: "center", padding: "40px 0" }}>
                  <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--accent)", color: "#fff",
                    display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                    <Icon name="check" size={28}/>
                  </div>
                  <h3 style={{ fontSize: 22, marginBottom: 8 }}>Got it — your advisor will be in touch.</h3>
                  <p className="muted">An advisor matched to "{form.interest}" will reach you within 30 minutes.</p>
                  <a className="btn btn-accent" style={{ marginTop: 18 }} href={waLink()}>
                    <Icon name="wa" size={14}/> Or chat now on WhatsApp
                  </a>
                </div>
              ) : (
                <>
                  <h2 style={{ fontSize: 28, marginBottom: 6 }}>Book a free consultation</h2>
                  <p className="muted" style={{ marginBottom: 26, fontSize: 14 }}>
                    30 minutes with a specialist — pick a service, tell us a bit, and we'll match you with the right advisor.
                  </p>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}>
                    <div className="field"><label>Full name</label><input value={form.name} onChange={e => u("name", e.target.value)} placeholder="Jane Carter"/></div>
                    <div className="field"><label>Email</label><input value={form.email} onChange={e => u("email", e.target.value)} placeholder="jane@company.com"/></div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}>
                    <div className="field"><label>Phone / WhatsApp</label><input placeholder="+971 …"/></div>
                    <div className="field"><label>I'm interested in</label>
                      <select value={form.interest} onChange={e => u("interest", e.target.value)}>
                        {DATA.services.map(s => <option key={s.id}>{s.label}</option>)}
                      </select>
                    </div>
                  </div>
                  <div className="field" style={{ marginBottom: 18 }}>
                    <label>Anything specific?</label>
                    <textarea rows={4} value={form.message} onChange={e => u("message", e.target.value)} placeholder="E.g. relocating from Singapore Q3 with a 4-person team..."/>
                  </div>
                  <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}
                    onClick={() => form.name && form.email && setSent(true)}>
                    Send to an advisor <Icon name="arrow" size={14}/>
                  </button>
                  <div style={{ fontSize: 12, color: "var(--muted-2)", textAlign: "center", marginTop: 14 }}>
                    We don't share data with third parties. See <a href="#" style={{ color: "var(--accent-deep)", textDecoration: "underline" }}>Privacy</a>.
                  </div>
                </>
              )}
            </div>

            <div style={{ marginTop: 22, padding: 18, borderRadius: 12, background: "var(--cz-ink)", color: "#fff", display: "flex", gap: 14, alignItems: "center" }}>
              <img src="media/leader-lorenzo.webp" alt="" style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover", border: "2px solid var(--accent)" }}/>
              <div style={{ flex: 1, fontSize: 13 }}>
                <div style={{ color: "rgba(255,255,255,.6)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em" }}>From the CEO</div>
                <div style={{ marginTop: 2 }}>"Get to a real human fast — that's the bar." — Lorenzo Jooris, Group CEO.</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function ChannelCard({ icon, tag, title, value, sub, href, accent }) {
  const inner = (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: accent ? "#25D366" : "var(--accent-tint)",
          color: accent ? "#fff" : "var(--accent-deep)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Icon name={icon} size={20}/>
        </div>
        <div style={{ fontSize: 11, color: "var(--muted-2)", textAlign: "right", maxWidth: 110 }}>{tag}</div>
      </div>
      <div style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 4 }}>{title}</div>
      <div style={{ fontFamily: "var(--f-display)", fontSize: 19, color: "var(--cz-ink)", fontWeight: 600, letterSpacing: "-0.01em" }}>{value}</div>
      {sub && <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4 }}>{sub}</div>}
    </>
  );
  const style = { padding: 20, display: "block", textDecoration: "none" };
  return href
    ? <a className="card card-hover" style={style} href={href}>{inner}</a>
    : <div className="card" style={style}>{inner}</div>;
}

function MapPlaceholder() {
  // Stylised "map" — vector-ish with a pin. Real map would be a lazy iframe.
  return (
    <div style={{
      aspectRatio: "16 / 9", position: "relative", overflow: "hidden",
      background: "#0B2447",
      backgroundImage: `
        linear-gradient(transparent 24px, rgba(255,255,255,.04) 25px),
        linear-gradient(90deg, transparent 24px, rgba(255,255,255,.04) 25px)
      `,
      backgroundSize: "25px 25px",
    }}>
      {/* fake roads */}
      <svg viewBox="0 0 800 450" preserveAspectRatio="none" style={{ width: "100%", height: "100%", position: "absolute" }}>
        <path d="M0 240 Q200 220 400 230 T800 200" stroke="rgba(255,255,255,.16)" strokeWidth="36" fill="none"/>
        <path d="M0 240 Q200 220 400 230 T800 200" stroke="rgba(28,176,149,.5)" strokeWidth="2" fill="none" strokeDasharray="2 6"/>
        <path d="M380 0 L420 450" stroke="rgba(255,255,255,.1)" strokeWidth="28" fill="none"/>
        <path d="M150 80 L680 380" stroke="rgba(255,255,255,.06)" strokeWidth="20" fill="none"/>
        {/* district labels */}
        <text x="100" y="60" fill="rgba(255,255,255,.4)" style={{ fontSize: 11, fontFamily: "monospace", letterSpacing: ".1em" }}>BURJ KHALIFA</text>
        <text x="600" y="380" fill="rgba(255,255,255,.4)" style={{ fontSize: 11, fontFamily: "monospace", letterSpacing: ".1em" }}>DOWNTOWN</text>
        <text x="540" y="160" fill="rgba(255,255,255,.4)" style={{ fontSize: 11, fontFamily: "monospace", letterSpacing: ".1em" }}>EMAAR SQUARE</text>
        {/* the pin */}
        <g transform="translate(560 220)">
          <circle r="36" fill="var(--accent)" opacity=".18"/>
          <circle r="20" fill="var(--accent)" opacity=".4"/>
          <circle r="9" fill="var(--accent)"/>
          <circle r="3" fill="#fff"/>
        </g>
      </svg>
      <div style={{ position: "absolute", bottom: 14, left: 16, fontSize: 11, color: "rgba(255,255,255,.55)", fontFamily: "var(--f-mono)" }}>
        25.1972°N · 55.2744°E · TO BE CONFIRMED
      </div>
    </div>
  );
}

Object.assign(window, { ContactScreen });