/* support — 24/7 global hub (Riyadh <-> Egypt), contacts, and a real message
   form that validates and persists a ticket visible in the admin Leads view. */

function GlobalHub() {
  const { t } = useLang();
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", background: "linear-gradient(160deg,#352617,#1f160c)", color: "#fff", position: "relative" }}>
      <div style={{ position: "relative", height: 380, overflow: "hidden" }}>
        <svg viewBox="0 0 800 380" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} aria-hidden="true">
          <defs>
            <radialGradient id="glow" cx="50%" cy="50%" r="50%"><stop offset="0%" stopColor="#C9A24B" stopOpacity=".9" /><stop offset="100%" stopColor="#C9A24B" stopOpacity="0" /></radialGradient>
          </defs>
          {Array.from({ length: 14 }).map((_, r) => Array.from({ length: 28 }).map((_, c) => (
            <circle key={r + "-" + c} cx={20 + c * 28} cy={20 + r * 26} r="1.3" fill="rgba(255,255,255,.12)" />
          )))}
          <path d="M 250 215 Q 380 90 560 175" fill="none" stroke="var(--gold-l)" strokeWidth="2" strokeDasharray="5 6" />
          <circle cx="250" cy="215" r="26" fill="url(#glow)" />
          <circle cx="250" cy="215" r="7" fill="var(--gold)" />
          <circle cx="560" cy="175" r="30" fill="url(#glow)" />
          <circle cx="560" cy="175" r="8" fill="#fff" />
        </svg>
        <div style={{ position: "absolute", left: "26%", top: "62%", transform: "translate(-50%,0)", textAlign: "center" }}>
          <div style={{ fontWeight: 700, fontSize: 15 }}>{t("support.egyptTeam")}</div>
          <div style={{ fontSize: 12, color: "rgba(255,255,255,.65)" }}>{t("support.egyptDesc")}</div>
        </div>
        <div style={{ position: "absolute", left: "70%", top: "30%", transform: "translate(-50%,0)", textAlign: "center" }}>
          <div style={{ fontWeight: 700, fontSize: 15, color: "var(--gold-l)" }}>{t("support.riyadhHQ")}</div>
          <div style={{ fontSize: 12, color: "rgba(255,255,255,.65)" }}>{t("support.riyadhDesc")}</div>
        </div>
      </div>
    </div>
  );
}

function SupportPage() {
  const { t } = useLang();
  const { addTicket } = useStore();
  const [form, setForm] = React.useState({ name: "", phone: "", email: "", message: "" });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(null);
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = "leads.required";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = "leads.email";
    if (!form.message.trim()) er.message = "leads.required";
    setErrs(er);
    if (Object.keys(er).length) return;
    setSent(addTicket({ kind: "support", name: form.name, phone: form.phone, email: form.email, message: form.message }));
  };
  const fieldErr = (k) => errs[k] ? <div style={{ color: "var(--danger)", fontSize: 12.5, marginTop: 5 }}>{t(errs[k])}</div> : null;

  return (
    <main style={{ paddingTop: 96, background: "var(--paper)" }}>
      <div className="wrap" style={{ paddingTop: 36, paddingBottom: 30 }}>
        <SectionHead eyebrow={t("support.eyebrow")} title={t("support.title")} sub={t("support.sub")} />
      </div>
      <div className="wrap" style={{ paddingBottom: 70 }}>
        <GlobalHub />
        <div className="rcol" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1.2fr", gap: 22, marginTop: 26 }}>
          <div className="card card-pad">
            <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--emerald-wash)", color: "var(--emerald)", display: "grid", placeItems: "center" }}><Icon name="pin" size={22} /></div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 21, fontWeight: 600, marginTop: 16 }}>{t("support.hq")}</h3>
            <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.6 }}>{t("support.hqAddr")}</p>
          </div>
          <div className="card card-pad">
            <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--gold-wash)", color: "var(--gold-d)", display: "grid", placeItems: "center" }}><Icon name="phone" size={22} /></div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 21, fontWeight: 600, marginTop: 16 }}>{t("support.call")}</h3>
            <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.8, direction: "ltr" }}>+966 59 702 3357<br />+966 55 240 8555</p>
          </div>
          <div className="card card-pad">
            <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--emerald-wash)", color: "var(--emerald)", display: "grid", placeItems: "center" }}><Icon name="mail" size={22} /></div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 21, fontWeight: 600, marginTop: 16 }}>{t("support.email")}</h3>
            <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.8, direction: "ltr" }}>info@thirdwing.sa<br />gm@thirdwing.sa</p>
          </div>
        </div>

        <div className="card split" style={{ marginTop: 26, padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "1fr 1fr" }}>
          <div style={{ padding: 36, borderInlineEnd: "1px solid var(--line)" }}>
            <h2 style={{ fontFamily: "var(--serif)", fontSize: 28, fontWeight: 600 }}>{t("support.sendTitle")}</h2>
            <p className="muted" style={{ marginTop: 8, fontSize: 14.5 }}>{t("support.sendSub")}</p>
            {sent ? (
              <div style={{ marginTop: 30, display: "flex", gap: 14, alignItems: "center", padding: 18, background: "var(--emerald-wash)", borderRadius: 14 }}>
                <Icon name="check" size={24} color="var(--emerald)" stroke={2.2} /><div style={{ color: "var(--emerald-d)", fontWeight: 600 }}>{t("support.sent")} <span style={{ fontFamily: "monospace", fontWeight: 400 }}>· {sent.id}</span></div>
              </div>
            ) : (
              <form onSubmit={submit} style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 14 }} noValidate>
                <div className="rcol-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <div className="field"><label>{t("support.f.name")}</label><input className="input" value={form.name} onChange={e => upd("name", e.target.value)} aria-invalid={!!errs.name} />{fieldErr("name")}</div>
                  <div className="field"><label>{t("support.f.phone")}</label><input className="input" value={form.phone} onChange={e => upd("phone", e.target.value)} placeholder="+966" /></div>
                </div>
                <div className="field"><label>{t("support.f.email")}</label><input className="input" type="email" value={form.email} onChange={e => upd("email", e.target.value)} aria-invalid={!!errs.email} />{fieldErr("email")}</div>
                <div className="field"><label>{t("support.f.help")}</label><textarea className="input" rows="3" value={form.message} onChange={e => upd("message", e.target.value)} aria-invalid={!!errs.message} style={{ resize: "vertical", fontFamily: "var(--sans)" }}></textarea>{fieldErr("message")}</div>
                <button className="btn btn-primary btn-block" type="submit">{t("support.send")} <Icon name="arrow" size={16} className="flip-rtl" /></button>
              </form>
            )}
          </div>
          <div style={{ background: "var(--emerald)", color: "#fff", padding: 36, display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <Icon name="chat" size={32} color="var(--gold-l)" />
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 600, marginTop: 16 }}>{t("support.instant")}</h3>
            <p style={{ color: "rgba(255,255,255,.78)", marginTop: 10, fontSize: 14.5 }}>{t("support.instantSub")}</p>
            <WingLauncherButton />
          </div>
        </div>
      </div>
    </main>
  );
}

function WingLauncherButton() {
  const { t } = useLang();
  const { setWingOpen } = useStore();
  return <button className="btn btn-gold" style={{ marginTop: 22, alignSelf: "flex-start" }} onClick={() => setWingOpen(true)}><Icon name="chat" size={17} /> {t("support.chatWing")}</button>;
}

Object.assign(window, { SupportPage, GlobalHub });