/* inquiry.jsx — the lead-qualifying inquiry form, footer, sticky WhatsApp */

// ---- form field atoms ----
function Field({ label, sub, children }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)", marginBottom: 8 }}>
        {label}{sub ? <span style={{ color: "var(--muted)", fontWeight: 400, marginLeft: 8, fontSize: 12.5 }}>{sub}</span> : null}
      </div>
      {children}
    </label>
  );
}

const inputStyle = {
  width: "100%", padding: "13px 15px", fontFamily: "var(--font-body)", fontSize: 15.5,
  border: "1px solid var(--line)", borderRadius: "var(--r-md)", background: "var(--bone)", color: "var(--ink)",
  outline: "none", transition: "border-color .18s ease, box-shadow .18s ease",
};

function ChipGroup({ options, value, onChange, lang }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
      {options.map((o, i) => {
        const v = pri(o, lang);
        const active = value === v;
        return (
          <button key={i} type="button" onClick={() => onChange(v)} style={{
            padding: "10px 16px", borderRadius: 999, fontSize: 14, fontWeight: 500,
            border: "1px solid " + (active ? "var(--accent)" : "var(--line)"),
            background: active ? "var(--accent-tint)" : "transparent",
            color: active ? "var(--accent-deep)" : "var(--ink-soft)",
            transition: "all .15s ease",
          }}>{v}</button>
        );
      })}
    </div>
  );
}

function Inquiry({ lang }) {
  const q = COPY.inquiry;
  const ref = useReveal();
  const mobile = useIsMobile();
  const [form, setForm] = React.useState({ build: "", useCase: "", size: "", date: "", budget: "", location: "", name: "", phone: "" });
  const set = (k) => (v) => setForm((f) => ({ ...f, [k]: v && v.target ? v.target.value : v }));
  const [focus, setFocus] = React.useState("");

  const L = (ms, en) => (lang === "en" ? en : ms);
  const ready = form.build && form.name && form.phone;

  const submit = (e) => {
    e.preventDefault();
    const lines = [
      L("Hai Sukatukang, saya nak tempah:", "Hi Sukatukang, I'd like to build:"),
      "",
      `• ${L("Jenis", "Build")}: ${form.build || "-"}`,
      `• ${L("Kegunaan", "Use case")}: ${form.useCase || "-"}`,
      `• ${L("Saiz / skala", "Size / scale")}: ${form.size || "-"}`,
      `• ${L("Tarikh", "Date")}: ${form.date || "-"}`,
      `• ${L("Bajet", "Budget")}: ${form.budget || "-"}`,
      `• ${L("Lokasi", "Location")}: ${form.location || "-"}`,
      "",
      `${form.name}${form.phone ? " · " + form.phone : ""}`,
    ];
    const url = "https://wa.me/" + WHATSAPP + "?text=" + encodeURIComponent(lines.join("\n"));
    window.open(url, "_blank");
  };

  const fieldFocus = (name) => ({
    onFocus: () => setFocus(name),
    onBlur: () => setFocus(""),
    style: { ...inputStyle, borderColor: focus === name ? "var(--accent)" : "var(--line)",
      boxShadow: focus === name ? "0 0 0 3px var(--accent-tint)" : "none" },
  });

  return (
    <section id="tempah" ref={ref} style={{ background: "var(--bone)", paddingBlock: "clamp(70px,9vw,120px)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "minmax(280px, 0.8fr) 1.2fr", gap: "clamp(36px,5vw,80px)", alignItems: "start" }}>
        {/* left rail */}
        <div className="reveal" style={{ position: mobile ? "static" : "sticky", top: 100 }}>
          <SectionHead obj={q.eyebrow} title={q.title} intro={q.intro} lang={lang} />
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 28, padding: "16px 18px",
            background: "var(--cream)", border: "1px solid var(--line)", borderRadius: "var(--r-md)" }}>
            <span style={{ width: 38, height: 38, flexShrink: 0, borderRadius: "50%", background: "#25D366",
              display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 18, fontWeight: 700 }}>✓</span>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 600 }}>{pri(q.note, lang)}</div>
              <div style={{ fontSize: 12.5, color: "var(--muted)" }}>{sec(q.note, lang)}</div>
            </div>
          </div>
        </div>

        {/* form */}
        <form onSubmit={submit} className="reveal" style={{ display: "grid", gap: 26 }}>
          <Field label={L("Apa yang anda nak bina?", "What are you building?")} sub={L("Pilih satu", "Pick one")}>
            <ChipGroup options={FORM_OPTS.buildType} value={form.build} onChange={set("build")} lang={lang} />
          </Field>

          <Field label={L("Kegunaan", "Use case")}>
            <ChipGroup options={FORM_OPTS.useCase} value={form.useCase} onChange={set("useCase")} lang={lang} />
          </Field>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <Field label={L("Anggaran saiz / skala", "Approx. size or scale")}>
              <input {...fieldFocus("size")} value={form.size} onChange={set("size")} placeholder={L("cth. 3m troli", "e.g. 3m cart")} />
            </Field>
            <Field label={L("Tarikh acara / penghantaran", "Event or delivery date")} sub={L("jika ada", "if any")}>
              <input {...fieldFocus("date")} value={form.date} onChange={set("date")} placeholder={L("cth. Ogos 2026", "e.g. Aug 2026")} />
            </Field>
          </div>

          <Field label={L("Julat bajet", "Budget range")}>
            <ChipGroup options={FORM_OPTS.budget} value={form.budget} onChange={set("budget")} lang={lang} />
          </Field>

          <Field label={L("Lokasi", "Location")}>
            <input {...fieldFocus("location")} value={form.location} onChange={set("location")} placeholder={L("cth. Shah Alam", "e.g. Shah Alam")} />
          </Field>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <Field label={L("Nama", "Name")}>
              <input {...fieldFocus("name")} value={form.name} onChange={set("name")} placeholder={L("Nama anda", "Your name")} required />
            </Field>
            <Field label={L("Nombor WhatsApp", "WhatsApp number")}>
              <input {...fieldFocus("phone")} value={form.phone} onChange={set("phone")} placeholder="01x-xxx xxxx" required />
            </Field>
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16, marginTop: 4 }}>
            <button type="submit" className="btn btn--primary" style={{ padding: "16px 30px", fontSize: 16, opacity: ready ? 1 : 0.55 }}>
              <span style={{ fontSize: 18 }}>◔</span> {pri(q.submit, lang)} <span className="arrow">→</span>
            </button>
            <span style={{ fontSize: 13, color: "var(--muted)", maxWidth: 240 }}>
              {L("Brief anda dihantar terus, lengkap, ke WhatsApp admin.", "Your brief opens pre-filled in the admin's WhatsApp.")}
            </span>
          </div>
        </form>
      </div>
    </section>
  );
}

// ===================== FOOTER =====================
function Footer({ lang }) {
  const f = COPY.footer;
  const mobile = useIsMobile();
  const links = [
    { label: "WhatsApp", href: "https://wa.me/" + WHATSAPP, note: pri(f.response, lang) },
    { label: "Instagram", href: "#", note: "@sukatukang" },
    { label: "TikTok", href: "#", note: "@sukatukang" },
    { label: "Lokasi", href: "#", note: pri(f.location, lang) },
  ];
  return (
    <footer style={{ background: "var(--espresso)", color: "var(--bone)" }}>
      <div className="wrap" style={{ paddingBlock: "clamp(56px,7vw,90px)" }}>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.4fr 1fr", gap: 40, alignItems: "start" }}>
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 500 }}>Sukatukang</span>
              <span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--accent)" }}></span>
            </div>
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 21, color: "rgba(245,239,228,0.78)", marginTop: 14, maxWidth: 420 }}>
              {pri(f.tagline, lang)}
            </p>
            <a href="#tempah" className="btn btn--primary" style={{ marginTop: 26 }}>{pri(COPY.hero.ctaPrimary, lang)} <span className="arrow">→</span></a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            {links.map((l, i) => (
              <a key={i} href={l.href} target={l.href.startsWith("http") ? "_blank" : undefined} style={{ display: "block", padding: "16px 0", borderTop: "1px solid rgba(245,239,228,0.16)" }}>
                <div style={{ fontSize: 16, fontWeight: 600 }}>{l.label}</div>
                <div style={{ fontSize: 13, color: "rgba(245,239,228,0.55)", marginTop: 3 }}>{l.note}</div>
              </a>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 22, borderTop: "1px solid rgba(245,239,228,0.16)", display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 12, fontSize: 12.5, color: "rgba(245,239,228,0.5)" }}>
          <span>© 2026 Sukatukang. {lang === "en" ? "Built to order." : "Dibina khas mengikut tempahan."}</span>
          <span style={{ fontFamily: "var(--font-mono)" }}>{lang === "en" ? "Pioneer of the custom portable cart in Malaysia" : "Perintis troli boleh alih tersuai di Malaysia"}</span>
        </div>
      </div>
    </footer>
  );
}

// ===================== STICKY MOBILE WHATSAPP =====================
function StickyWhatsApp({ lang }) {
  const mobile = useIsMobile();
  return (
    <a href={"https://wa.me/" + WHATSAPP} target="_blank" className="sticky-wa" style={{
      position: "fixed", right: 18, bottom: 18, zIndex: 60, display: mobile ? "inline-flex" : "none", alignItems: "center", gap: 10,
      background: "#25D366", color: "#fff", padding: "14px 20px", borderRadius: 999, fontWeight: 700, fontSize: 15,
      boxShadow: "0 10px 30px -8px rgba(0,0,0,0.45)",
    }}>
      <span style={{ fontSize: 18 }}>✆</span> {lang === "en" ? "WhatsApp us" : "WhatsApp kami"}
    </a>
  );
}

Object.assign(window, { Inquiry, Footer, StickyWhatsApp });