/* corporate — government / hospital / enterprise accounts + a real inquiry form
   that validates and persists a lead the admin Leads view can act on. */

function CorporatePage() {
  const { t } = useLang();
  const { addLead } = useStore();
  const [form, setForm] = React.useState({ org: "", contact: "", sector: "Government", email: "", trips: "50–250", notes: "" });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(null);
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const segments = [
    { icon: "shield", h: t("corp.seg.gov"), d: t("corp.seg.gov.d") },
    { icon: "plus", h: t("corp.seg.health"), d: t("corp.seg.health.d") },
    { icon: "chart", h: t("corp.seg.ent"), d: t("corp.seg.ent.d") },
  ];
  const features = [
    ["lock", t("corp.f.policy"), t("corp.f.policy.d")],
    ["bolt", t("corp.f.rates"), t("corp.f.rates.d")],
    ["chart", t("corp.f.report"), t("corp.f.report.d")],
    ["chat", t("corp.f.wing"), t("corp.f.wing.d")],
  ];

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.org.trim()) er.org = "leads.required";
    if (!form.contact.trim()) er.contact = "leads.required";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = "leads.email";
    setErrs(er);
    if (Object.keys(er).length) return;
    const rec = addLead({ kind: "corporate", org: form.org, contact: form.contact, sector: form.sector, email: form.email, trips: form.trips, notes: form.notes });
    setSent(rec);
  };
  const fieldErr = (k) => errs[k] ? <div style={{ color: "var(--danger)", fontSize: 12.5, marginTop: 5 }}>{t(errs[k])}</div> : null;

  return (
    <main style={{ paddingTop: 72 }}>
      <section style={{ background: "linear-gradient(160deg,#352617,#1f160c)", color: "#fff", padding: "96px 0 90px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 80% at 90% 10%,rgba(216,184,120,.2),transparent 60%)" }}></div>
        <div className="wrap split" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 50, alignItems: "center" }}>
          <div>
            <span className="eyebrow" style={{ color: "var(--gold-l)" }}>{t("corp.eyebrow")}</span>
            <h1 className="display" style={{ color: "#fff", fontSize: "clamp(38px,5vw,68px)", marginTop: 18 }}>{t("corp.title")}</h1>
            <p className="lead" style={{ color: "rgba(255,255,255,.75)", marginTop: 20, maxWidth: 540 }}>{t("corp.sub")}</p>
            <button className="btn btn-gold btn-lg" style={{ marginTop: 30 }} onClick={() => document.getElementById("inquiry")?.scrollIntoView({ behavior: "smooth" })}>{t("corp.cta")} <Icon name="arrow" size={18} className="flip-rtl" /></button>
          </div>
          <Placeholder slot="corp_hero" label={t("img.corp")} h={340} r="var(--r-xl)" tone="sky" />
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="rcol" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }}>
            {segments.map(s => (
              <div key={s.h} className="card card-pad hover-lift">
                <div style={{ width: 52, height: 52, borderRadius: 14, background: "var(--emerald-wash)", color: "var(--emerald)", display: "grid", placeItems: "center" }}><Icon name={s.icon} size={24} /></div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 24, fontWeight: 600, marginTop: 18 }}>{s.h}</h3>
                <p className="muted" style={{ marginTop: 8, fontSize: 14.5 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <SectionHead eyebrow={t("corp.why")} title={t("corp.whyTitle")} />
          <div className="rcol" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 20, marginTop: 40 }}>
            {features.map(([icon, h, d]) => (
              <div key={h} style={{ display: "flex", gap: 18, padding: 24, background: "var(--card)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)" }}>
                <div style={{ width: 46, height: 46, borderRadius: 12, flexShrink: 0, background: "var(--gold-wash)", color: "var(--gold-d)", display: "grid", placeItems: "center" }}><Icon name={icon} size={22} /></div>
                <div><h4 style={{ fontSize: 17, fontWeight: 700 }}>{h}</h4><p className="muted" style={{ fontSize: 14, marginTop: 5 }}>{d}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" id="inquiry">
        <div className="wrap" style={{ maxWidth: 820 }}>
          <div className="card split" style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "1fr 1.2fr" }}>
            <div style={{ background: "var(--emerald)", color: "#fff", padding: 36 }}>
              <h2 style={{ fontFamily: "var(--serif)", fontSize: 30, fontWeight: 600 }}>{t("corp.form.title")}</h2>
              <p style={{ color: "rgba(255,255,255,.78)", marginTop: 14, fontSize: 14.5 }}>{t("corp.form.sub")}</p>
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14, fontSize: 14 }}>
                {[t("corp.form.b1"), t("corp.form.b2"), t("corp.form.b3"), t("corp.form.b4")].map(x => (
                  <div key={x} style={{ display: "flex", gap: 10, alignItems: "center" }}><Icon name="check" size={16} color="var(--gold-l)" /> {x}</div>
                ))}
              </div>
            </div>
            <div style={{ padding: 36 }}>
              {sent ? (
                <div style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center" }}>
                  <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--emerald-wash)", display: "grid", placeItems: "center" }}><Icon name="check" size={30} color="var(--emerald)" stroke={2.2} /></div>
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 24, fontWeight: 600, marginTop: 16 }}>{t("corp.form.received")}</h3>
                  <p className="muted" style={{ marginTop: 8 }}>{t("corp.form.thanks")} {t("leads.ref")}: <strong style={{ color: "var(--ink)", fontFamily: "monospace" }}>{sent.id}</strong></p>
                </div>
              ) : (
                <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }} noValidate>
                  <div className="field"><label>{t("corp.f.organization")}</label><input className="input" value={form.org} onChange={e => upd("org", e.target.value)} placeholder={t("corp.ph.org")} aria-invalid={!!errs.org} />{fieldErr("org")}</div>
                  <div className="rcol-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <div className="field"><label>{t("corp.f.contact")}</label><input className="input" value={form.contact} onChange={e => upd("contact", e.target.value)} aria-invalid={!!errs.contact} />{fieldErr("contact")}</div>
                    <div className="field"><label>{t("corp.f.sector")}</label><select className="select" value={form.sector} onChange={e => upd("sector", e.target.value)}><option value="Government">{t("corp.sector.gov")}</option><option value="Healthcare">{t("corp.sector.health")}</option><option value="Enterprise">{t("corp.sector.ent")}</option></select></div>
                  </div>
                  <div className="rcol-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <div className="field"><label>{t("corp.f.workEmail")}</label><input className="input" type="email" value={form.email} onChange={e => upd("email", e.target.value)} placeholder="name@org.gov.sa" aria-invalid={!!errs.email} />{fieldErr("email")}</div>
                    <div className="field"><label>{t("corp.f.trips")}</label><select className="select" value={form.trips} onChange={e => upd("trips", e.target.value)}><option>50–250</option><option>250–1,000</option><option>1,000+</option></select></div>
                  </div>
                  <div className="field"><label>{t("corp.f.notes")}</label><textarea className="input" rows="3" value={form.notes} onChange={e => upd("notes", e.target.value)} placeholder={t("corp.ph.notes")} style={{ resize: "vertical", fontFamily: "var(--sans)" }}></textarea></div>
                  <button className="btn btn-primary btn-lg btn-block" type="submit">{t("corp.form.submit")} <Icon name="arrow" size={17} className="flip-rtl" /></button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { CorporatePage });