// Si Fashion — Enquiry drawer (the primary B2B conversion path)
const { useState: __us, useEffect: __ue } = React;

function EnquiryDrawer({ context, onClose }) {
  const [step, setStep] = __us(1);
  const [done, setDone] = __us(false);
  const [form, setForm] = __us({
    name: "",
    company: context.brand || "",
    role: "",
    email: "",
    phone: "",
    type: context.type || "Represent my brand",
    territories: [],
    message: context.brand
      ? `I'd like to discuss ${context.brand} for our market.`
      : "",
  });

  __ue(() => {
    document.body.style.overflow = "hidden";
    const h = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", h);
    };
  }, [onClose]);

  const set = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const toggleTerritory = (t) =>
    setForm(s => ({
      ...s,
      territories: s.territories.includes(t)
        ? s.territories.filter(x => x !== t)
        : [...s.territories, t],
    }));

  const enquiryTypes = [
    { t: "Represent my brand", d: "International label seeking MENA distribution." },
    { t: "Become a retailer", d: "Retail door / platform wanting to stock the roster." },
    { t: "Sports speciality", d: "Sports brand seeking placement and activation." },
    { t: "Brand development", d: "Homegrown label seeking positioning support." },
    { t: "Press / Lookbook", d: "Editorial enquiry or line-sheet request." },
    { t: "Careers", d: "Current or future opportunities at Si Fashion." },
  ];

  const submit = (e) => {
    if (e) e.preventDefault();
    setDone(true);
  };

  const canStep2 = form.name && form.email && form.type;

  return (
    <div className="enq-drawer" onClick={onClose}>
      <aside className="enq-panel" onClick={e => e.stopPropagation()}>
        <div className="enq-head">
          <div>
            <Eyebrow>{done ? "Enquiry received" : `Connect With Us · Step ${step} of 2`}</Eyebrow>
            {!done && (
              <div style={{ marginTop: 10, display: "flex", gap: 6 }}>
                <span style={{ width: 32, height: 3, background: step >= 1 ? "var(--accent)" : "var(--border)" }}></span>
                <span style={{ width: 32, height: 3, background: step >= 2 ? "var(--accent)" : "var(--border)" }}></span>
              </div>
            )}
          </div>
          <button className="close-btn" onClick={onClose} aria-label="Close"><CloseIcon /></button>
        </div>

        {done ? (
          <div className="enq-success">
            <div className="check">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                <path d="M5 13l4 4L19 7"/>
              </svg>
            </div>
            <h2>Thank you, {form.name.split(" ")[0] || "there"}.</h2>
            <p className="muted" style={{ maxWidth: "50ch" }}>
              Your <strong style={{ color: "var(--primary)" }}>{form.type.toLowerCase()}</strong> enquiry
              has been routed to the right team. We'll come back within five working days
              {form.territories.length > 0 ? <>, with a view on placement across <strong style={{ color: "var(--primary)" }}>{form.territories.length} {form.territories.length === 1 ? "territory" : "territories"}</strong></> : ""}.
            </p>
            <div style={{ marginTop: 14, display: "flex", gap: 12 }}>
              <button className="btn" onClick={onClose}>Close <ArrowRight /></button>
              <a className="btn ghost" href={SF_DATA.contact.emailHref}>Email instead</a>
            </div>
            <p style={{ marginTop: 16, fontSize: 12, color: "var(--ink-dim)" }}>
              In a hurry? Call <a href={SF_DATA.contact.phoneHref} style={{ color: "var(--secondary)", borderBottom: "1px solid currentColor" }}>{SF_DATA.contact.phone}</a> — Dubai Design District, GMT+4.
            </p>
          </div>
        ) : (
          <div className="enq-body">
            {step === 1 ? (
              <>
                <h2>Tell us about your enquiry.</h2>
                <p className="sub">
                  Sixty seconds. We use this to route you to the right person — distribution,
                  retail, sports speciality, brand development, press or careers.
                </p>

                <div className="field">
                  <label>Enquiry type</label>
                  <div className="enq-type-grid">
                    {enquiryTypes.map(o => (
                      <button key={o.t} type="button"
                        className={"enq-type-btn" + (form.type === o.t ? " on" : "")}
                        onClick={() => set("type", o.t)}>
                        <span className="t">{o.t}</span>
                        <span className="d">{o.d}</span>
                      </button>
                    ))}
                  </div>
                </div>

                <div className="form-row two" style={{ marginTop: 22 }}>
                  <div className="field">
                    <label>Your name *</label>
                    <input value={form.name} onChange={e => set("name", e.target.value)} placeholder="Full name" />
                  </div>
                  <div className="field">
                    <label>Role *</label>
                    <input value={form.role} onChange={e => set("role", e.target.value)} placeholder="e.g. Founder, Wholesale Manager" />
                  </div>
                </div>

                <div className="form-row two" style={{ marginTop: 14 }}>
                  <div className="field">
                    <label>Company / Brand</label>
                    <input value={form.company} onChange={e => set("company", e.target.value)} placeholder="Brand or company name" />
                  </div>
                  <div className="field">
                    <label>Email *</label>
                    <input type="email" value={form.email} onChange={e => set("email", e.target.value)} placeholder="you@brand.com" />
                  </div>
                </div>

                <div className="form-foot">
                  <span className="note">
                    *Required. We never share details with third parties.
                  </span>
                  <button className="btn" disabled={!canStep2} style={{ opacity: canStep2 ? 1 : 0.5 }}
                    onClick={() => canStep2 && setStep(2)}>
                    Continue <ArrowRight />
                  </button>
                </div>
              </>
            ) : (
              <form onSubmit={submit}>
                <h2>Where & what.</h2>
                <p className="sub">
                  Pick territories of interest and tell us a little about the conversation
                  you want to have.
                </p>

                <div className="field" style={{ marginTop: 18 }}>
                  <label>Territories of interest</label>
                  <div className="terr-pills">
                    {SF_DATA.territories.map(t => (
                      <button type="button" key={t}
                        className={"terr-pill" + (form.territories.includes(t) ? " on" : "")}
                        onClick={() => toggleTerritory(t)}>
                        {t}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="form-row two" style={{ marginTop: 22 }}>
                  <div className="field">
                    <label>Phone (optional)</label>
                    <input value={form.phone} onChange={e => set("phone", e.target.value)} placeholder="+1 555 …" />
                  </div>
                  <div className="field">
                    <label>Line sheet upload (optional)</label>
                    <input type="file" accept=".pdf,.zip,.png,.jpg,.jpeg" />
                  </div>
                </div>

                <div className="field" style={{ marginTop: 14 }}>
                  <label>Message</label>
                  <textarea value={form.message} onChange={e => set("message", e.target.value)}
                    placeholder="A few lines on your brand, positioning, and how you'd like to grow in the region." />
                </div>

                <div className="form-foot">
                  <button type="button" className="link-arrow" onClick={() => setStep(1)} style={{ borderBottom: "1px solid currentColor" }}>← Back</button>
                  <button type="submit" className="btn">Send enquiry <ArrowRight /></button>
                </div>
              </form>
            )}

            <div style={{ marginTop: 36, paddingTop: 22, borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 12 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-dim)" }}>
                Prefer email or phone?
              </span>
              <div style={{ display: "flex", gap: 20 }}>
                <a href={SF_DATA.contact.emailHref} className="link-arrow">{SF_DATA.contact.email}</a>
                <a href={SF_DATA.contact.phoneHref} className="link-arrow">{SF_DATA.contact.phone}</a>
              </div>
            </div>
          </div>
        )}
      </aside>
    </div>
  );
}

Object.assign(window, { EnquiryDrawer });