/* ===== screen-services.jsx — services hub + Company Formation detail ===== */

function ServicesScreen({ locale, setRoute }) {
  const [open, setOpen] = React.useState("company-formation");
  const sv = DATA.services.find(s => s.id === open) || DATA.services[0];
  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 }}>Services</div>
          <h1 style={{ marginBottom: 16, fontSize: "clamp(36px,3.4vw,52px)" }}>
            Twelve specialist services — <span style={{ color: "var(--accent-deep)", fontFamily: "Fraunces, serif", fontStyle: "italic", fontWeight: 500 }}>one advisor relationship.</span>
          </h1>
          <p className="muted" style={{ fontSize: 17, maxWidth: 720 }}>
            Start with company formation, stay with us for everything after — visas, banking, tax, HR, legal, workspace, and concierge — co-ordinated by a single point of contact.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1.6fr", gap: 56 }}>
            {/* services list */}
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Choose a service</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {DATA.services.map(s => {
                  const active = open === s.id;
                  return (
                    <button key={s.id} onClick={() => setOpen(s.id)} style={{
                      display: "flex", alignItems: "center", gap: 14, padding: "14px 16px",
                      borderRadius: 12, border: "1px solid " + (active ? "var(--cz-ink)" : "transparent"),
                      background: active ? "#fff" : "transparent",
                      boxShadow: active ? "var(--sh-1)" : "none",
                      textAlign: "left", cursor: "pointer",
                      transition: "background .12s ease",
                    }}>
                      <div style={{
                        width: 36, height: 36, borderRadius: 8,
                        background: active ? "var(--cz-ink)" : "var(--paper-2)",
                        color: active ? "var(--accent)" : "var(--cz-ink)",
                        display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                      }}>
                        <Icon name={s.icon} size={18}/>
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: active ? 600 : 500, fontSize: 14, color: "var(--cz-ink)" }}>{s.label}</div>
                        <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>{s.blurb}</div>
                      </div>
                      <Icon name="chevron" size={14}/>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* detail panel */}
            <div className="card" style={{ padding: 40, background: "#fff", position: "sticky", top: 96, alignSelf: "flex-start" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
                <div style={{ width: 56, height: 56, borderRadius: 12, background: "var(--accent-tint)",
                  color: "var(--accent-deep)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={sv.icon} size={26}/>
                </div>
                <div>
                  <div className="eyebrow">Service · 01–08 weeks</div>
                  <h2 style={{ fontSize: 30, marginTop: 4 }}>{sv.label}</h2>
                </div>
              </div>
              <p style={{ fontSize: 16, color: "var(--muted)", marginBottom: 28 }}>{sv.blurb}</p>

              {sv.includes && (
                <>
                  <div className="eyebrow" style={{ marginBottom: 14 }}>How it works</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 0, marginBottom: 28 }}>
                    {sv.includes.map((inc, i) => (
                      <div key={inc} style={{
                        display: "flex", gap: 16, alignItems: "flex-start",
                        padding: "16px 0", borderBottom: i === sv.includes.length - 1 ? "0" : "1px solid var(--line)",
                      }}>
                        <div style={{
                          width: 28, height: 28, borderRadius: 999,
                          background: "var(--accent-tint)", color: "var(--accent-deep)",
                          display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12,
                          fontFamily: "var(--f-mono)", fontWeight: 600, flexShrink: 0,
                        }}>{String(i + 1).padStart(2, "0")}</div>
                        <div style={{ flex: 1, fontSize: 14.5, color: "var(--cz-ink)", paddingTop: 4 }}>{inc}</div>
                        <div style={{ fontSize: 12, color: "var(--muted-2)", paddingTop: 4 }}>{["2–4 days","1 day","3–5 days","5–10 days","2 days"][i] || "—"}</div>
                      </div>
                    ))}
                  </div>
                </>
              )}

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <button className="btn btn-accent" onClick={() => setRoute("calculator")} style={{ justifyContent: "center" }}>
                  Get a cost estimate <Icon name="arrow" size={14}/>
                </button>
                <a className="btn btn-wa" href={waLink(`I'd like to talk about ${sv.label}`)} style={{ justifyContent: "center" }}>
                  <Icon name="wa" size={14}/> WhatsApp an advisor
                </a>
              </div>

              <div style={{ marginTop: 26, padding: 18, borderRadius: 12, background: "var(--paper-2)", display: "flex", gap: 14, alignItems: "center" }}>
                <img src="media/leader-wael.webp" alt="" style={{ width: 44, height: 44, borderRadius: "50%", objectFit: "cover" }}/>
                <div style={{ flex: 1, fontSize: 13, color: "var(--cz-ink)" }}>
                  <b>Wael</b> leads {sv.label.toLowerCase()}. Average response time under 30 min, Mon–Fri.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ServicesScreen });