/* ===== screen-jurisdictions.jsx — jurisdictions hub with comparison + DMCC detail ===== */

function JurisdictionsScreen({ locale, setRoute }) {
  const [filter, setFilter] = React.useState("All");
  const [open, setOpen] = React.useState(null);
  const groups = ["All", "Mainland", "Free Zone", "Offshore", "Regional"];
  const list = filter === "All" ? DATA.jurisdictions : DATA.jurisdictions.filter(j => j.group === filter);

  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 }}>Jurisdictions</div>
          <h1 style={{ marginBottom: 16, fontSize: "clamp(36px,3.4vw,52px)" }}>
            25+ jurisdictions, <span style={{ color: "var(--accent-deep)", fontFamily: "Fraunces, serif", fontStyle: "italic", fontWeight: 500 }}>one honest comparison.</span>
          </h1>
          <p className="muted" style={{ fontSize: 17, maxWidth: 720 }}>
            UAE mainland, free zones, offshore and the wider GCC. We compare qualitatively — ownership, scope, visas, activities — and never publish government fees that change without notice.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 56 }}>
        <div className="wrap">
          {/* filter */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28, flexWrap: "wrap", gap: 16 }}>
            <div style={{ display: "flex", gap: 8 }}>
              {groups.map(g => (
                <button key={g} onClick={() => setFilter(g)} className={"btn btn-sm " + (filter === g ? "btn-primary" : "btn-ghost")}>
                  {g}
                </button>
              ))}
            </div>
            <div style={{ fontSize: 13, color: "var(--muted)" }}>
              Showing <b style={{ color: "var(--cz-ink)" }}>{list.length}</b> of {DATA.jurisdictions.length}
            </div>
          </div>

          {/* cards */}
          <div className="grid g-3">
            {list.map(j => (
              <button key={j.id} className="card card-hover" onClick={() => setOpen(j)} style={{
                textAlign: "left", cursor: "pointer", background: "#fff",
                display: "flex", flexDirection: "column", gap: 14, padding: 26,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="chip chip-line">{j.group}</span>
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 22, color: "var(--accent-deep)" }}>{j.icon}</span>
                </div>
                <div>
                  <h3 style={{ fontSize: 22, marginBottom: 4, color: "var(--cz-ink)" }}>{j.name}</h3>
                  <div style={{ fontSize: 13, color: "var(--muted)", fontWeight: 500 }}>{j.suited}</div>
                </div>
                <p style={{ fontSize: 14, color: "var(--cz-ink)", lineHeight: 1.55 }}>{j.benefit}</p>
                <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 6, color: "var(--accent-deep)", fontSize: 13, fontWeight: 500 }}>
                  See details <Icon name="chevron" size={12}/>
                </div>
              </button>
            ))}
          </div>

          {/* deeper comparison */}
          <div style={{ marginTop: 80 }}>
            <SectionHead eyebrow="Side by side" title="The qualitative comparison the live site doesn't give you."
              sub="No government fees — those change. Use this to narrow the family, then the calculator and an advisor to pin down the number."/>
            <CompareTable/>
          </div>
        </div>
      </section>

      {open && <JurisdictionDrawer j={open} onClose={() => setOpen(null)} setRoute={setRoute}/>}
    </main>
  );
}

function CompareTable() {
  const rows = [
    { label: "Ownership", values: ["100% foreign (most activities)", "100% foreign", "100% foreign", "100% foreign"] },
    { label: "Trade scope", values: ["UAE-wide + abroad", "Zone + abroad", "International only", "Country-specific"] },
    { label: "Office", values: ["Ejari office", "Flexi-desk → private", "Registered agent", "Varies"] },
    { label: "Visa eligibility", values: ["Tied to office size", "Tied to package", "Generally none", "MISA / Qatari rules"] },
    { label: "Setup speed", values: ["2–4 weeks", "5–10 days", "3–7 days", "4–8 weeks"] },
    { label: "Best for", values: ["UAE-facing retail & services", "Trade, services, tech, finance", "Holding, succession", "GCC market access"] },
    { label: "Examples", values: ["Dubai Mainland", "DMCC · DIFC · IFZA · Meydan", "RAK ICC · BVI · Mauritius", "KSA · Qatar Free Zone"] },
  ];
  const heads = ["Mainland", "Free Zone", "Offshore", "Regional"];
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", background: "#fff" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr repeat(4, 1fr)", borderBottom: "1px solid var(--line)" }}>
        <div style={{ padding: "20px 24px", fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em" }}>Property</div>
        {heads.map((h, i) => (
          <div key={h} style={{
            padding: "20px 24px", borderLeft: "1px solid var(--line)",
            background: i === 1 ? "var(--cz-ink)" : "transparent",
            color: i === 1 ? "#fff" : "var(--cz-ink)",
            fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 16,
          }}>
            {h}
            {i === 1 && <div style={{ fontSize: 11, color: "var(--accent)", fontWeight: 500, marginTop: 2, fontFamily: "var(--f-mono)" }}>MOST FLEXIBLE</div>}
          </div>
        ))}
      </div>
      {rows.map((r, ri) => (
        <div key={r.label} style={{ display: "grid", gridTemplateColumns: "1.2fr repeat(4, 1fr)", borderTop: ri === 0 ? "0" : "1px solid var(--line)" }}>
          <div style={{ padding: "18px 24px", fontWeight: 500, fontSize: 14, color: "var(--cz-ink)" }}>{r.label}</div>
          {r.values.map((v, i) => (
            <div key={i} style={{
              padding: "18px 24px", fontSize: 14, color: "var(--cz-ink)",
              borderLeft: "1px solid var(--line)",
              background: i === 1 ? "color-mix(in srgb, var(--accent-tint) 50%, transparent)" : "transparent",
            }}>{v}</div>
          ))}
        </div>
      ))}
    </div>
  );
}

function JurisdictionDrawer({ j, onClose, setRoute }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(4,31,66,.4)", zIndex: 100,
      display: "flex", justifyContent: "flex-end", backdropFilter: "blur(2px)",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "min(640px, 100vw)", height: "100vh", background: "#fff",
        boxShadow: "var(--sh-3)", overflowY: "auto",
        animation: "slide-in .3s ease",
      }}>
        <div style={{
          padding: "32px 40px 24px", borderBottom: "1px solid var(--line)",
          background: "var(--paper-2)", position: "sticky", top: 0, zIndex: 2,
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
            <span className="chip chip-line">{j.group}</span>
            <button onClick={onClose} style={{ background: "transparent", border: 0, fontSize: 22, color: "var(--muted)", padding: 4 }}>✕</button>
          </div>
          <h2 style={{ fontSize: 38, marginBottom: 6 }}>Setting up in {j.name}</h2>
          <div style={{ fontSize: 14, color: "var(--muted)" }}>{j.suited}</div>
        </div>

        <div style={{ padding: 40 }}>
          <p style={{ fontSize: 16, color: "var(--cz-ink)", marginBottom: 26, lineHeight: 1.7 }}>{j.benefit}</p>

          <div className="eyebrow" style={{ marginBottom: 14 }}>Best suited for</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 30 }}>
            {(j.id === "dmcc" ? ["General trading","Commodities","Crypto & blockchain","Professional services","Consulting"]
            : j.id === "difc" ? ["Asset management","Fintech","Family offices","Foundations","Holding"]
            : j.id === "meydan" ? ["Consulting","Holding","Digital","Remote-first SMEs"]
            : ["Trading","Services","Consulting","E-commerce"]).map(t => (
              <span key={t} className="chip">{t}</span>
            ))}
          </div>

          <div className="eyebrow" style={{ marginBottom: 14 }}>What's typical (qualitative)</div>
          <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 30 }}>
            {[
              ["Ownership", "100% foreign"],
              ["Office", j.group === "Offshore" ? "Registered agent" : j.id === "meydan" ? "Virtual / flexi" : "Flexi-desk → private"],
              ["Visa quota", j.group === "Offshore" ? "Generally none" : j.id === "meydan" ? "Up to 3 with virtual office" : "Scales with office size"],
              ["Setup speed", j.group === "Offshore" ? "3–7 working days" : j.group === "Mainland" ? "2–4 weeks" : "5–10 working days"],
              ["Renewal cycle", "Annual"],
            ].map(([k, v], i) => (
              <div key={k} style={{ display: "grid", gridTemplateColumns: "180px 1fr", padding: "14px 20px",
                borderTop: i === 0 ? "0" : "1px solid var(--line)" }}>
                <div style={{ fontSize: 13, color: "var(--muted)" }}>{k}</div>
                <div style={{ fontSize: 14, color: "var(--cz-ink)", fontWeight: 500 }}>{v}</div>
              </div>
            ))}
          </div>

          <div style={{ padding: 18, borderRadius: 12, background: "var(--accent-tint)", border: "1px solid color-mix(in srgb, var(--accent) 22%, transparent)", fontSize: 13.5, color: "var(--cz-ink)", marginBottom: 26, display: "flex", gap: 12 }}>
            <span style={{ color: "var(--accent-deep)", flexShrink: 0 }}><Icon name="check" size={18}/></span>
            <div><b>No fixed price here.</b> {j.name} fees depend on activity, visas, office and packages. Use the calculator for an indicative range — an advisor confirms.</div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <button className="btn btn-accent" onClick={() => setRoute("calculator")} style={{ justifyContent: "center" }}>
              Estimate cost for {j.name} <Icon name="arrow" size={14}/>
            </button>
            <a className="btn btn-wa" href={waLink(`I'd like to set up in ${j.name}`)} style={{ justifyContent: "center" }}>
              <Icon name="wa" size={14}/> Ask on WhatsApp
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { JurisdictionsScreen });