// Enquiry modal — multi-step, sector-qualified per design brief
const { useState: useStateE, useEffect: useEffectE, useRef: useRefE } = React;

function EnquiryModal({ open, onClose, t, initialSector = null }) {
  const [step, setStep] = useStateE(0);
  const [data, setData] = useStateE({
    sector: initialSector,
    name: "",
    email: "",
    phone: "",
    date: "",
    guests: "",
    venue: "",
    message: "",
  });
  const [submitted, setSubmitted] = useStateE(false);

  useEffectE(() => {
    if (open) {
      setStep(initialSector ? 1 : 0);
      setData((d) => ({ ...d, sector: initialSector || d.sector }));
      setSubmitted(false);
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [open, initialSector]);

  useEffectE(() => {
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const canStep1 = !!data.sector;
  const canStep2 = data.name.trim() && /.+@.+\..+/.test(data.email);

  const submit = () => setSubmitted(true);

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "rgba(16, 12, 10, 0.55)",
      backdropFilter: "blur(8px)",
      WebkitBackdropFilter: "blur(8px)",
      display: "flex", alignItems: "stretch", justifyContent: "flex-end",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "min(560px, 100%)", height: "100%", background: "var(--paper)",
        overflowY: "auto", display: "flex", flexDirection: "column",
        animation: "slideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1)",
      }}>
        <style>{`
          @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
          @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
          .enquiry-field { display: flex; flex-direction: column; gap: 8px; }
          .enquiry-field label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
          .enquiry-field input, .enquiry-field textarea, .enquiry-field select {
            border: 0; border-bottom: 1px solid var(--line-strong);
            background: transparent; padding: 10px 0; font: inherit; color: var(--ink);
            border-radius: 0; transition: border-color 0.2s;
          }
          .enquiry-field input:focus, .enquiry-field textarea:focus, .enquiry-field select:focus {
            outline: none; border-bottom-color: var(--accent);
          }
          .sector-card { animation: fadeIn 0.4s ease both; }
        `}</style>

        <div style={{ padding: "28px 40px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--line)" }}>
          <div className="mono-tiny" style={{ color: "var(--muted)" }}>
            {submitted ? "Received" : step === 0 ? "Step 1 of 3 · Sector" : step === 1 ? "Step 2 of 3 · Details" : "Step 3 of 3 · Project"}
          </div>
          <button onClick={onClose} aria-label="Close" style={{ fontSize: 22, lineHeight: 1, color: "var(--muted)" }}>×</button>
        </div>

        {submitted ? (
          <SuccessPane data={data} onClose={onClose} />
        ) : (
          <div style={{ padding: 40, flex: 1, display: "flex", flexDirection: "column" }}>
            {step === 0 && <SectorStep data={data} set={set} />}
            {step === 1 && <DetailsStep data={data} set={set} />}
            {step === 2 && <ProjectStep data={data} set={set} />}

            <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 32, borderTop: "1px solid var(--line)" }}>
              <button onClick={() => step === 0 ? onClose() : setStep(step - 1)}
                style={{ fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)" }}>
                ← {step === 0 ? "Cancel" : "Back"}
              </button>
              <StepDots step={step} />
              {step < 2 ? (
                <button className="btn btn-primary" onClick={() => setStep(step + 1)}
                  disabled={(step === 0 && !canStep1) || (step === 1 && !canStep2)}
                  style={{
                    opacity: ((step === 0 && !canStep1) || (step === 1 && !canStep2)) ? 0.35 : 1,
                    cursor: ((step === 0 && !canStep1) || (step === 1 && !canStep2)) ? "not-allowed" : "pointer",
                  }}>
                  Continue<Arrow />
                </button>
              ) : (
                <button className="btn btn-primary" onClick={submit}>Send enquiry<Arrow /></button>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function StepDots({ step }) {
  return (
    <div style={{ display: "flex", gap: 6 }}>
      {[0, 1, 2].map((i) => (
        <span key={i} style={{
          width: i === step ? 24 : 6, height: 6, borderRadius: 4,
          background: i <= step ? "var(--accent)" : "var(--line-strong)",
          transition: "all 0.3s ease",
        }} />
      ))}
    </div>
  );
}

function SectorStep({ data, set }) {
  const sectors = [
    { id: "wedding", title: "Wedding", desc: "Ceremony, reception and the days around them.", img: "media/wedding-1.webp" },
    { id: "corporate", title: "Corporate", desc: "Galas, launches, exhibitions and brand activations.", img: "media/corporate-tile.webp" },
    { id: "social", title: "Social", desc: "Milestones, anniversaries, private celebrations.", img: "media/social-tile.webp" },
  ];
  return (
    <div className="sector-card">
      <h2 className="serif" style={{ fontSize: 32, lineHeight: 1.1, margin: "0 0 8px", fontWeight: 400 }}>What are we planning?</h2>
      <p style={{ color: "var(--muted)", margin: "0 0 28px" }}>So we can route your enquiry to the right designer.</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {sectors.map((s) => (
          <button key={s.id} onClick={() => set("sector", s.id)}
            style={{
              display: "flex", alignItems: "center", gap: 16, padding: 14,
              background: data.sector === s.id ? "var(--ivory)" : "var(--paper)",
              border: "1px solid " + (data.sector === s.id ? "var(--ink)" : "var(--line)"),
              textAlign: "left", transition: "all 0.2s ease",
            }}>
            <div style={{ width: 64, height: 64, background: "var(--line)", overflow: "hidden", flex: "0 0 64px" }}>
              <img src={s.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div style={{ flex: 1 }}>
              <div className="serif" style={{ fontSize: 22, fontWeight: 400 }}>{s.title}</div>
              <div style={{ color: "var(--muted)", fontSize: 13 }}>{s.desc}</div>
            </div>
            <div style={{
              width: 18, height: 18, borderRadius: 99,
              border: "1px solid " + (data.sector === s.id ? "var(--ink)" : "var(--line-strong)"),
              background: data.sector === s.id ? "var(--ink)" : "transparent",
              transition: "all 0.2s",
            }} />
          </button>
        ))}
      </div>
    </div>
  );
}

function DetailsStep({ data, set }) {
  return (
    <div className="sector-card">
      <h2 className="serif" style={{ fontSize: 32, lineHeight: 1.1, margin: "0 0 8px", fontWeight: 400 }}>How can we reach you?</h2>
      <p style={{ color: "var(--muted)", margin: "0 0 28px" }}>Personal and discreet — we do not share details with third parties.</p>
      <div style={{ display: "grid", gap: 22 }}>
        <div className="enquiry-field">
          <label>Name</label>
          <input value={data.name} onChange={(e) => set("name", e.target.value)} placeholder="Full name" />
        </div>
        <div className="enquiry-field">
          <label>Email</label>
          <input type="email" value={data.email} onChange={(e) => set("email", e.target.value)} placeholder="you@email.com" />
        </div>
        <div className="enquiry-field">
          <label>Phone (optional)</label>
          <input value={data.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+971…" />
        </div>
      </div>
    </div>
  );
}

function ProjectStep({ data, set }) {
  return (
    <div className="sector-card">
      <h2 className="serif" style={{ fontSize: 32, lineHeight: 1.1, margin: "0 0 8px", fontWeight: 400 }}>Tell us about the event.</h2>
      <p style={{ color: "var(--muted)", margin: "0 0 28px" }}>Approximate is fine. We'll refine in the consultation.</p>
      <div style={{ display: "grid", gap: 22 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
          <div className="enquiry-field">
            <label>Date or season</label>
            <input value={data.date} onChange={(e) => set("date", e.target.value)} placeholder="e.g. Autumn 2026" />
          </div>
          <div className="enquiry-field">
            <label>Guest count</label>
            <input value={data.guests} onChange={(e) => set("guests", e.target.value)} placeholder="Approx." />
          </div>
        </div>
        <div className="enquiry-field">
          <label>Location / venue</label>
          <input value={data.venue} onChange={(e) => set("venue", e.target.value)} placeholder="City, venue if known" />
        </div>
        <div className="enquiry-field">
          <label>Concept, references, anything else</label>
          <textarea rows={5} value={data.message} onChange={(e) => set("message", e.target.value)} placeholder="A few sentences is plenty." />
        </div>
      </div>
    </div>
  );
}

function SuccessPane({ data, onClose }) {
  return (
    <div style={{ padding: 60, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", animation: "fadeIn 0.5s ease both" }}>
      <div style={{ width: 56, height: 56, borderRadius: 999, border: "1px solid var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 28 }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path d="M5 12l4 4L19 7" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
      <h2 className="serif" style={{ fontSize: 40, lineHeight: 1.05, fontWeight: 400, fontStyle: "italic", margin: "0 0 14px" }}>
        Thank you, {data.name.split(" ")[0] || "friend"}.
      </h2>
      <p style={{ color: "var(--muted)", margin: "0 0 8px", fontSize: 16, lineHeight: 1.6 }}>
        Your {data.sector} enquiry is with our studio. We respond personally within two working days — usually the same day.
      </p>
      <p style={{ color: "var(--muted)", margin: "0 0 36px", fontSize: 16, lineHeight: 1.6 }}>
        In the meantime, you may enjoy our latest case studies, or write directly to <a href="mailto:info@carousel.ae" style={{ color: "var(--ink)", borderBottom: "1px solid var(--accent)" }}>info@carousel.ae</a>.
      </p>
      <div style={{ display: "flex", gap: 12 }}>
        <button className="btn btn-primary" onClick={onClose}>Continue browsing</button>
      </div>
    </div>
  );
}

Object.assign(window, { EnquiryModal });