// pages/assessment.jsx — multi-step free assessment CTA with dropdown options
function AssessmentCTA() {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    focus: "",
    teamSize: "",
    biggestDrain: "",
    timeline: "",
    name: "",
    email: "",
    company: ""
  });

  const focusOptions = [
    { id: "sales-pipe",   label: "Sales & lead-pipe automation",        icon: "↗" },
    { id: "support",      label: "Customer support & inbox",            icon: "✉" },
    { id: "ops",          label: "Internal ops & approvals",            icon: "↺" },
    { id: "finance",      label: "Finance (AR/AP, reporting)",           icon: "$" },
    { id: "data",         label: "Data plumbing & analytics",            icon: "≋" },
    { id: "agent",        label: "Build me an AI agent",                 icon: "◉" },
    { id: "unsure",       label: "Not sure — help me figure it out",     icon: "?" }
  ];
  const sizes    = ["1–10", "11–50", "51–200", "201–1000", "1000+"];
  const drains   = ["Time", "Errors", "Hiring cost", "Customer experience", "Reporting / visibility"];
  const timelines= ["This month", "Next 60 days", "This quarter", "Just exploring"];

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const can = {
    0: !!data.focus,
    1: !!data.teamSize && !!data.biggestDrain && !!data.timeline,
    2: !!data.name && !!data.email && !!data.company
  };

  const steps = ["Focus", "Context", "Details", "Booked"];

  return (
    <section className="section" id="book" style={{
      background: "var(--ink)", color: "var(--bg)",
      borderRadius: "var(--radius-lg) var(--radius-lg) 0 0",
      position: "relative", overflow: "hidden"
    }}>
      <div className="wrap" style={{ position: "relative" }}>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "start"
        }}>
          {/* LEFT — pitch */}
          <div className="reveal">
            <div className="kicker" style={{ color: "color-mix(in oklab, var(--bg) 65%, transparent)", marginBottom: 24 }}>
              Free · 45 min · no slides
            </div>
            <h2 className="h2" style={{ color: "var(--bg)", margin: 0 }}>
              Book a free <br />
              <span className="serif-i" style={{ color: "var(--accent)" }}>AI &amp; automation</span><br />
              assessment.
            </h2>
            <p style={{
              marginTop: 24, fontSize: 18, lineHeight: 1.55, maxWidth: 460,
              color: "color-mix(in oklab, var(--bg) 75%, transparent)"
            }}>
              Tell us what's draining your week. We'll come back inside 48&nbsp;hours with
              two or three workflows we'd build first, what they cost, and what they'd save.
              No deck. No CRO theatrics.
            </p>

            <ul style={{ listStyle: "none", padding: 0, margin: "40px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                "You leave with a short written plan, whether you hire us or not.",
                "We only build things that pay back in under 90 days.",
                "If we're not a fit we'll tell you, and recommend who is."
              ].map((t, i) => (
                <li key={i} style={{ display: "flex", gap: 14, fontSize: 15, color: "color-mix(in oklab, var(--bg) 88%, transparent)" }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: "50%", background: "var(--accent)",
                    display: "grid", placeItems: "center", flexShrink: 0, marginTop: 2,
                    color: "#fff", fontSize: 12, fontWeight: 700
                  }}>✓</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* RIGHT — multi-step form */}
          <div className="reveal" style={{ "--rd": ".12s" }}>
            <div style={{
              background: "var(--bg-elev)", color: "var(--ink)",
              borderRadius: 22, padding: 36, minHeight: 540,
              boxShadow: "0 30px 80px rgba(0,0,0,.25), 0 1px 0 color-mix(in oklab, var(--bg) 50%, transparent) inset",
              display: "flex", flexDirection: "column"
            }}>
              {/* progress */}
              <div style={{ display: "flex", gap: 8, marginBottom: 28 }}>
                {steps.map((s, i) => (
                  <div key={s} style={{ flex: 1 }}>
                    <div style={{
                      height: 4, borderRadius: 4,
                      background: i <= step ? "var(--accent)" : "var(--line)",
                      transition: "background .35s"
                    }}></div>
                    <div style={{
                      fontSize: 11, fontFamily: "var(--f-mono)", marginTop: 8,
                      color: i === step ? "var(--ink)" : "var(--ink-4)",
                      textTransform: "uppercase", letterSpacing: ".1em"
                    }}>{`0${i + 1}`} · {s}</div>
                  </div>
                ))}
              </div>

              {step === 0 && (
                <div>
                  <div className="h3" style={{ marginBottom: 8 }}>Where would AI help most today?</div>
                  <div style={{ color: "var(--ink-3)", fontSize: 14, marginBottom: 24 }}>Pick the closest — we'll refine on the call.</div>
                  <CustomSelect
                    label="Focus area"
                    placeholder="Choose a focus area…"
                    value={data.focus}
                    onChange={(v) => set('focus', v)}
                    options={focusOptions}
                  />
                </div>
              )}

              {step === 1 && (
                <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
                  <div>
                    <div className="h3" style={{ marginBottom: 8 }}>A few quick details.</div>
                    <div style={{ color: "var(--ink-3)", fontSize: 14 }}>30 seconds — we promise.</div>
                  </div>
                  <FieldGroup label="Team size">
                    <ChipRow value={data.teamSize} onChange={(v) => set('teamSize', v)} options={sizes} />
                  </FieldGroup>
                  <FieldGroup label="Biggest drain right now">
                    <ChipRow value={data.biggestDrain} onChange={(v) => set('biggestDrain', v)} options={drains} />
                  </FieldGroup>
                  <FieldGroup label="When could you start?">
                    <ChipRow value={data.timeline} onChange={(v) => set('timeline', v)} options={timelines} />
                  </FieldGroup>
                </div>
              )}

              {step === 2 && (
                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                  <div>
                    <div className="h3" style={{ marginBottom: 8 }}>How do we reach you?</div>
                    <div style={{ color: "var(--ink-3)", fontSize: 14 }}>We reply within one business day.</div>
                  </div>
                  <Input placeholder="Your name"   value={data.name}    onChange={(v) => set('name', v)} />
                  <Input placeholder="Work email"  value={data.email}   onChange={(v) => set('email', v)} type="email" />
                  <Input placeholder="Company"     value={data.company} onChange={(v) => set('company', v)} />
                </div>
              )}

              {step === 3 && (
                <div style={{ textAlign: "center", paddingTop: 40, paddingBottom: 40 }}>
                  <div style={{
                    width: 64, height: 64, borderRadius: "50%", background: "var(--accent-soft)",
                    color: "var(--accent)", display: "grid", placeItems: "center",
                    fontSize: 30, margin: "0 auto 22px"
                  }}>✓</div>
                  <div className="h2" style={{ fontSize: 36, margin: 0 }}>Got it, {data.name?.split(' ')[0] || "friend"}.</div>
                  <p style={{ marginTop: 16, color: "var(--ink-3)", maxWidth: 360, marginInline: "auto", fontSize: 15 }}>
                    You'll get a calendar link + short reading in your inbox within one business day.
                  </p>
                  <button className="btn" style={{ marginTop: 28 }}
                    onClick={() => { setStep(0); setData({ focus: "", teamSize: "", biggestDrain: "", timeline: "", name: "", email: "", company: "" }); }}>
                    Book another <Arrow />
                  </button>
                </div>
              )}

              {/* nav */}
              {step < 3 && (
                <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 28 }}>
                  <button
                    onClick={() => setStep(s => Math.max(0, s - 1))}
                    disabled={step === 0}
                    style={{
                      background: "transparent", border: 0, padding: "10px 4px",
                      color: step === 0 ? "var(--ink-5)" : "var(--ink-3)",
                      cursor: step === 0 ? "default" : "pointer", fontSize: 14
                    }}>
                    ← Back
                  </button>
                  <button
                    onClick={() => can[step] && setStep(s => s + 1)}
                    disabled={!can[step]}
                    className="btn btn-accent"
                    style={{ opacity: can[step] ? 1 : 0.4 }}>
                    {step === 2 ? "Send" : "Continue"} <Arrow />
                  </button>
                </div>
              )}
            </div>

            <div style={{
              marginTop: 18, textAlign: "center",
              fontSize: 12, fontFamily: "var(--f-mono)",
              color: "color-mix(in oklab, var(--bg) 50%, transparent)"
            }}>
              or email&nbsp; <span style={{ color: "var(--accent)" }}>aki@whitenapp.com.au</span> &nbsp;directly
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FieldGroup({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontFamily: "var(--f-mono)", textTransform: "uppercase", letterSpacing: ".1em", color: "var(--ink-3)", marginBottom: 10 }}>
        {label}
      </div>
      {children}
    </div>
  );
}

function ChipRow({ value, options, onChange }) {
  return (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      {options.map(o => (
        <button key={o} onClick={() => onChange(o)}
          style={{
            padding: "10px 14px", borderRadius: 999,
            border: "1px solid",
            borderColor: value === o ? "var(--ink)" : "var(--line)",
            background: value === o ? "var(--ink)" : "transparent",
            color: value === o ? "var(--bg)" : "var(--ink-2)",
            fontSize: 13, fontWeight: 500, cursor: "pointer",
            transition: "all .15s"
          }}>
          {o}
        </button>
      ))}
    </div>
  );
}

function Input({ placeholder, value, onChange, type = "text" }) {
  return (
    <input
      type={type}
      placeholder={placeholder}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      style={{
        padding: "14px 18px", fontSize: 15,
        border: "1px solid var(--line)", borderRadius: 12,
        background: "var(--bg)", color: "var(--ink)",
        fontFamily: "var(--f-sans)", outline: "none",
        transition: "border-color .15s"
      }}
      onFocus={(e) => e.target.style.borderColor = "var(--ink)"}
      onBlur={(e) => e.target.style.borderColor = "var(--line)"}
    />
  );
}

function CustomSelect({ label, placeholder, value, options, onChange }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, []);
  const chosen = options.find(o => o.id === value);
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: "100%", textAlign: "left",
          padding: "18px 20px",
          background: "var(--bg)", border: "1px solid var(--line)",
          borderRadius: 12, cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          color: chosen ? "var(--ink)" : "var(--ink-4)",
          fontSize: 15, fontFamily: "var(--f-sans)"
        }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
          {chosen && (
            <span style={{
              width: 32, height: 32, borderRadius: 8,
              background: "var(--accent-soft)", color: "var(--accent)",
              display: "grid", placeItems: "center", fontWeight: 600
            }}>{chosen.icon}</span>
          )}
          {chosen ? chosen.label : placeholder}
        </span>
        <span style={{ color: "var(--ink-4)", transform: open ? "rotate(180deg)" : "none", transition: "transform .2s" }}>▾</span>
      </button>
      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 8px)", left: 0, right: 0,
          background: "var(--bg-elev)", border: "1px solid var(--line)",
          borderRadius: 14, padding: 6, zIndex: 10,
          boxShadow: "0 20px 60px rgba(0,0,0,.18)",
          maxHeight: 320, overflowY: "auto",
          animation: "drop-in .18s ease"
        }}>
          {options.map(o => (
            <button key={o.id} onClick={() => { onChange(o.id); setOpen(false); }}
              style={{
                width: "100%", textAlign: "left", padding: "12px 14px",
                background: value === o.id ? "color-mix(in oklab, var(--accent) 8%, transparent)" : "transparent",
                border: 0, borderRadius: 10, cursor: "pointer",
                display: "flex", alignItems: "center", gap: 12,
                color: "var(--ink)", fontSize: 14, fontFamily: "var(--f-sans)"
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = "color-mix(in oklab, var(--ink) 6%, transparent)"}
              onMouseLeave={(e) => e.currentTarget.style.background = value === o.id ? "color-mix(in oklab, var(--accent) 8%, transparent)" : "transparent"}>
              <span style={{
                width: 28, height: 28, borderRadius: 8,
                background: value === o.id ? "var(--accent)" : "var(--bg-deep)",
                color: value === o.id ? "#fff" : "var(--ink-3)",
                display: "grid", placeItems: "center", fontWeight: 600, fontSize: 13
              }}>{o.icon}</span>
              <span>{o.label}</span>
              {value === o.id && <span style={{ marginLeft: "auto", color: "var(--accent)" }}><Arrow /></span>}
            </button>
          ))}
        </div>
      )}
      <style>{`@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }`}</style>
    </div>
  );
}

Object.assign(window, { AssessmentCTA });