/* ── GET STARTED PAGE ───────────────────────────────────────────── */

function GetStartedPage() {
  const [form, setForm] = useState({
    fullName: "", company: "", email: "", phone: "",
    teamSize: "", plan: "", notes: "",
  });
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  async function submit(e) {
    e.preventDefault();
    setSubmitting(true);
    try {
      const base = (window.VITE_API_URL) || "/api";
      await fetch(base + "/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          full_name: form.fullName,
          company: form.company,
          email: form.email,
          phone: form.phone,
          team_size: form.teamSize,
          plan: form.plan,
          message: form.notes,
        }),
      });
    } catch { /* swallow — still show success */ }
    finally {
      setSubmitting(false);
      setSubmitted(true);
    }
  }

  // animated step indicator
  const STEPS = ["Tell us about you", "Pick a plan", "We set you up", "You go live"];

  return (
    <div className="kr-page kr-gs-page" style={{ minHeight: "100vh", background: "#fff", color: "var(--ink)" }}>
      <style>{`
        .kr-gs-page .kr-input { height:44px; font-size:13px; padding-left:40px; padding-right:14px; border-radius:12px }
        .kr-gs-page .kr-input.kr-input-plain { padding-left:14px }
        .kr-gs-page .kr-input-wrap .kr-input-icon svg { width:15px; height:15px }
        .kr-gs-page .kr-select { height:44px; font-size:13px; border-radius:12px }
        .kr-gs-page .kr-textarea { font-size:13px; border-radius:12px; padding:10px 14px }
      `}</style>
      <div className="kr-gs-layout" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "100vh" }}>

        {/* ════════ LEFT — Light + CRM motion (mirrors login page) ════════ */}
        <div className="kr-gs-left" style={{
          position: "relative", overflow: "hidden",
          background: "linear-gradient(180deg, #f5f8ff 0%, #ffffff 60%, #fafbfd 100%)",
          color: "var(--ink)",
          display: "flex", flexDirection: "column", padding: "32px 48px",
        }}>
          {/* subtle grid */}
          <div className="kr-grid" style={{ position: "absolute", inset: 0, opacity: .35, pointerEvents: "none" }} />
          {/* dot mesh */}
          <div className="kr-dots" style={{ position: "absolute", inset: 0, opacity: .35, pointerEvents: "none" }} />
          {/* drifting orbs */}
          <div style={{
            position: "absolute", top: -120, left: -100, width: 460, height: 460, borderRadius: "50%",
            background: "radial-gradient(circle, rgba(147,197,253,.5), transparent 70%)",
            filter: "blur(46px)", animation: "kr-orb-drift 14s ease-in-out infinite", pointerEvents: "none",
          }} />
          <div style={{
            position: "absolute", bottom: -140, right: -120, width: 520, height: 520, borderRadius: "50%",
            background: "radial-gradient(circle, rgba(196,181,253,.45), transparent 70%)",
            filter: "blur(50px)", animation: "kr-orb-drift 18s ease-in-out infinite", animationDelay: "-6s", pointerEvents: "none",
          }} />
          <div style={{
            position: "absolute", top: "40%", right: -80, width: 280, height: 280, borderRadius: "50%",
            background: "radial-gradient(circle, rgba(254,229,138,.55), transparent 70%)",
            filter: "blur(36px)", animation: "kr-orb-drift 12s ease-in-out infinite", animationDelay: "-3s", pointerEvents: "none",
          }} />

          {/* TOP — logo + free-trial pill */}
          <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", zIndex: 5 }}>
            <KredooLogo size={28} />
            <div className="kr-pill kr-pill-gold" style={{ background: "linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,251,239,.9))", backdropFilter: "blur(8px)" }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15 9 22 9 16.5 13.5 18.5 21 12 17 5.5 21 7.5 13.5 2 9 9 9 12 2" /></svg>
              15-Day Free Trial · No Credit Card
            </div>
          </div>

          {/* MIDDLE — heading + CRM visual */}
          <div style={{ position: "relative", zIndex: 2, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", padding: "40px 0" }}>
            <div style={{ maxWidth: 540, marginInline: "auto", width: "100%" }}>
              <div className="kr-pill" style={{ background: "rgba(255,255,255,.85)", marginBottom: 18 }}>
                <span className="kr-dot" />
                Get your team on Kredoo
              </div>

              <h2 className="display" style={{
                margin: 0, fontSize: "clamp(40px, 4.4vw, 56px)", fontWeight: 800, lineHeight: 1.02, letterSpacing: "-.03em",
                color: "var(--ink)",
              }}>
                Let's get your team<br />
                <span style={{
                  background: "linear-gradient(135deg,#0a0e1a 0%, #2D3436 60%, #0a0e1a 100%)",
                  WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                  backgroundClip: "text", position: "relative",
                }}>
                  on Kredoo.
                </span>
              </h2>
              <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.55, fontWeight: 500, color: "var(--muted)", maxWidth: 480 }}>
                Tell us about your team and we'll set everything up. Typically responds within 24 hours with credentials and a personalised onboarding flow.
              </p>
            </div>

            {/* CRM motion visual */}
            <div style={{ marginTop: 48, position: "relative", paddingInline: 36 }}>
              <CRMVisual />
            </div>
          </div>

          {/* BOTTOM — testimonial */}
          <div style={{ position: "relative", zIndex: 2, marginTop: 32, padding: "16px 20px", borderRadius: 16, background: "rgba(255,255,255,.7)", backdropFilter: "blur(8px)", border: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ display: "flex", flexShrink: 0 }}>
              {["#3b82f6","#8b5cf6","#10b981","#C9A227"].map((c, i) => (
                <span key={i} style={{ width: 28, height: 28, borderRadius: "50%", background: c, marginLeft: i === 0 ? 0 : -8, border: "2px solid #fff", display: "grid", placeItems: "center", color: "#fff", fontSize: 10, fontWeight: 800 }}>
                  {["RP","SA","AK","VT"][i]}
                </span>
              ))}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <p style={{ margin: 0, fontSize: 13, fontWeight: 600, color: "var(--ink)", lineHeight: 1.45 }}>
                "Kredoo got our entire sales team onboarded in <span style={{ background: "linear-gradient(135deg,#E0B842,#C9A227)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", fontWeight: 800 }}>under a day</span>. The CRM finally fits how we actually sell."
              </p>
              <p style={{ margin: "4px 0 0", fontSize: 11, fontWeight: 700, color: "var(--muted-2)" }}>Rohan P. · Founder, Skystone Realty</p>
            </div>
            <div style={{ display: "flex", gap: 2, color: "var(--gold)" }}>
              {[0,1,2,3,4].map(i => (
                <svg key={i} width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15 9 22 9 16.5 13.5 18.5 21 12 17 5.5 21 7.5 13.5 2 9 9 9 12 2" /></svg>
              ))}
            </div>
          </div>
        </div>

        {/* ════════ RIGHT — Form ════════ */}
        <div className="kr-gs-right" style={{ position: "relative", display: "flex", flexDirection: "column", padding: "22px 40px", background: "#fafbfd" }}>
          <div className="kr-dots" style={{ position: "absolute", inset: 0, opacity: .35, pointerEvents: "none" }} />

          {/* Mobile-only logo */}
          <div className="kr-gs-mobile-logo" style={{ position: "relative", zIndex: 5 }}>
            <KredooLogo size={24} />
          </div>

          {/* progress strip */}
          <div className="kr-gs-steps" style={{ position: "relative", display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
            {STEPS.map((step, i) => (
              <div key={step} style={{ display: "flex", alignItems: "center", gap: 8, flex: i < STEPS.length - 1 ? 1 : 0 }}>
                <div style={{
                  width: 24, height: 24, borderRadius: "50%",
                  background: i === 0 ? "var(--ink)" : "#fff",
                  border: `1.5px solid ${i === 0 ? "var(--ink)" : "var(--line-2)"}`,
                  color: i === 0 ? "var(--gold)" : "var(--muted-2)",
                  display: "grid", placeItems: "center",
                  fontSize: 11, fontWeight: 800,
                }}>
                  {i + 1}
                </div>
                <span className="kr-gs-step-label" style={{ fontSize: 11, fontWeight: 700, color: i === 0 ? "var(--ink)" : "var(--muted-2)", whiteSpace: "nowrap" }}>{step}</span>
                {i < STEPS.length - 1 && <span style={{ flex: 1, height: 1, background: "var(--line-2)" }} />}
              </div>
            ))}
          </div>

          {/* form */}
          <div style={{ position: "relative", flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div style={{ animation: "kr-rise .6s var(--ease)" }}>
              <h2 className="display" style={{ margin: 0, fontSize: 28, fontWeight: 800, lineHeight: 1.05, letterSpacing: "-.025em", color: "var(--ink)" }}>
                Tell us about yourself.
              </h2>
              <p style={{ margin: "6px 0 18px", fontSize: 13, fontWeight: 500, color: "var(--muted)" }}>
                We'll reach out within 24 hours with credentials and a personalised onboarding flow.
              </p>

              {submitted ? (
                <SuccessCard onReset={() => { setSubmitted(false); setForm({ fullName: "", company: "", email: "", phone: "", teamSize: "", plan: "", notes: "" }); }} />
              ) : (
                <form onSubmit={submit}>
                  <div className="kr-form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                    <Field label="Full name">
                      <input className="kr-input kr-input-plain" placeholder="e.g. Ravi Kumar" value={form.fullName} onChange={update("fullName")} />
                    </Field>
                    <Field label="Company name">
                      <input className="kr-input kr-input-plain" placeholder="e.g. Acme Realty" value={form.company} onChange={update("company")} />
                    </Field>
                  </div>

                  <Field label="Work email" style={{ marginTop: 10 }}>
                    <div className="kr-input-wrap">
                      <span className="kr-input-icon">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16v16H4z" /><polyline points="22 6 12 13 2 6" /></svg>
                      </span>
                      <input type="email" className="kr-input" placeholder="you@company.com" value={form.email} onChange={update("email")} />
                    </div>
                  </Field>

                  <Field label="Phone number" style={{ marginTop: 10 }}>
                    <div className="kr-input-wrap">
                      <span className="kr-input-icon">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg>
                      </span>
                      <input type="tel" className="kr-input" placeholder="+91 98765 43210" value={form.phone} onChange={update("phone")} />
                    </div>
                  </Field>

                  <div className="kr-form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 10 }}>
                    <Field label="Team size">
                      <select className="kr-select" value={form.teamSize} onChange={update("teamSize")}>
                        <option value="">Select size…</option>
                        <option>Just me</option>
                        <option>2 – 5</option>
                        <option>6 – 15</option>
                        <option>16 – 50</option>
                        <option>50+</option>
                      </select>
                    </Field>
                    <Field label="Plan interest">
                      <select className="kr-select" value={form.plan} onChange={update("plan")}>
                        <option value="">Select plan…</option>
                        <option>Starter — ₹499</option>
                        <option>Growth — ₹2,499</option>
                        <option>Pro — ₹4,999</option>
                        <option>Business — ₹8,999</option>
                        <option>Enterprise — ₹14,999</option>
                      </select>
                    </Field>
                  </div>

                  <Field label="Anything else?" sublabel="optional" style={{ marginTop: 10 }}>
                    <textarea className="kr-textarea" style={{ minHeight: 70 }} placeholder="Tell us more about your team's setup, current tools, or onboarding needs…" value={form.notes} onChange={update("notes")} />
                  </Field>

                  <button type="submit" disabled={submitting} className="kr-cta-primary" style={{ marginTop: 14, width: "100%", height: 48, borderRadius: 14 }}>
                    {submitting ? (
                      <>
                        <span style={{ width: 14, height: 14, borderRadius: "50%", border: "2px solid rgba(255,255,255,.3)", borderTopColor: "var(--gold)", animation: "kr-spin-slow .8s linear infinite" }} />
                        Submitting…
                      </>
                    ) : (
                      <>Submit request <span className="kr-arrow">→</span></>
                    )}
                  </button>

                  <p style={{ margin: "8px 0 0", textAlign: "center", fontSize: 11, fontWeight: 600, color: "var(--muted-2)" }}>
                    No credit card required · Cancel anytime
                  </p>
                  <p style={{ margin: "10px 0 0", textAlign: "center", fontSize: 12, fontWeight: 600, color: "var(--muted)" }}>
                    Already have an account? <a href="/login" style={{ color: "var(--ink)", fontWeight: 800, textDecoration: "underline", textDecorationColor: "var(--gold)", textUnderlineOffset: 4 }}>Sign in</a>
                  </p>
                </form>
              )}
            </div>
          </div>

          <div style={{ position: "relative", display: "flex", justifyContent: "flex-end", alignItems: "center", fontSize: 11, fontWeight: 600, color: "var(--muted-2)", paddingTop: 16 }}>
            <div style={{ display: "flex", gap: 14 }}>
              <a href="/">Privacy</a>
              <a href="/">Terms</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({ label, sublabel, children, style }) {
  return (
    <div style={style}>
      <label style={{ display: "block", fontSize: 10, fontWeight: 800, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 5 }}>
        {label}{sublabel && <span style={{ marginLeft: 6, color: "var(--muted-2)", fontWeight: 700, textTransform: "none", letterSpacing: 0 }}>({sublabel})</span>}
      </label>
      {children}
    </div>
  );
}

function SuccessCard({ onReset }) {
  return (
    <div style={{ padding: 28, borderRadius: 20, border: "1px solid rgba(16,185,129,.3)", background: "linear-gradient(180deg,#F1FBF7,#fff)", textAlign: "center", animation: "kr-pop .5s var(--ease)" }}>
      <div style={{ width: 56, height: 56, borderRadius: "50%", background: "linear-gradient(135deg,#10b981,#047857)", display: "grid", placeItems: "center", margin: "0 auto", boxShadow: "0 10px 26px -8px rgba(16,185,129,.45)" }}>
        <Check size={26} color="#fff" />
      </div>
      <h3 className="display" style={{ margin: "16px 0 0", fontSize: 26, fontWeight: 800, color: "var(--ink)", letterSpacing: "-.02em" }}>You're on the list</h3>
      <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--muted)", fontWeight: 500 }}>
        Our onboarding team will reach out within 24 hours with your workspace credentials.
      </p>
      <button onClick={onReset} className="kr-cta-ghost" style={{ marginTop: 18 }}>
        Submit another request
      </button>
    </div>
  );
}

Object.assign(window, { GetStartedPage });