/* global React, Icon, Button, IconBtn, Chip, Badge, Pill, Field, Input, Textarea, Select, Toggle,
   Tabs, Segmented, MOCK, PageHead, Breadcrumb, Banner */

const { useState: useState3 } = React;

/* ============================================================
   AUTH — Login / Signup / Reset (split-screen)
   ============================================================ */

function AuthScreen({ go }) {
  const [mode, setMode] = useState3("login");
  return (
    <div data-screen-label="auth" style={{ height: "100vh", display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.1fr)", background: "var(--bg)" }}>
      {/* Left panel — gradient editorial */}
      <div style={{ position: "relative", background: "var(--brand-grad-band)", color: "white", overflow: "hidden", padding: 56, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div className="row gap-8" style={{ alignItems: "center", color: "white", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          <span style={{ width: 8, height: 8, background: "white", borderRadius: 999 }} />
          <span>BNMR GLVZ — Catalyst</span>
        </div>

        <div className="col gap-24">
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>Intelligence first</span>
          <h1 className="h-display" style={{ fontSize: "clamp(48px, 5vw, 88px)", color: "white", lineHeight: 0.95, letterSpacing: "-0.04em" }}>
            Decisions,<br />
            <em style={{ fontStyle: "italic", fontFamily: "var(--narrow)", fontWeight: 400 }}>not dashboards.</em>
          </h1>
          <p className="lead" style={{ color: "rgba(255,255,255,0.85)", maxWidth: 480, fontSize: 18 }}>
            Custom systems, not off-the-shelf SaaS. Sign in to your firm's Catalyst instance — diagnose, simulate, ship.
          </p>
        </div>

        <div className="row between" style={{ color: "rgba(255,255,255,0.6)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          <span>MIA · NYC · SCL</span>
          <span>v4.1 · {mode}</span>
        </div>

        {/* Decorative grid lines */}
        <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none",
          backgroundImage: "linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px)",
          backgroundSize: "64px 64px"
        }} />
      </div>

      {/* Right panel — form */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "56px 48px", overflowY: "auto" }}>
        <div className="col gap-24" style={{ width: "100%", maxWidth: 420, gap: "30px" }}>
          <div className="row gap-4">
            {[
            { v: "login", l: "Sign in" },
            { v: "signup", l: "Create" },
            { v: "reset", l: "Reset" }].
            map((m) =>
            <button key={m.v} onClick={() => setMode(m.v)} style={{
              background: "transparent", border: 0,
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
              color: mode === m.v ? "var(--ink)" : "var(--ink-3)",
              padding: "8px 0", marginRight: 18, cursor: "pointer",
              borderBottom: mode === m.v ? "2px solid var(--ink)" : "2px solid transparent"
            }}>{m.l}</button>
            )}
          </div>

          {mode === "login" &&
          <div className="col gap-20">
              <div className="col gap-4">
                <span className="eyebrow">Catalyst access</span>
                <h2 className="h-1" style={{ fontSize: 40 }}>Welcome back.</h2>
                <p style={{ color: "var(--ink-2)", fontSize: 14, marginTop: 4, lineHeight: 1.55 }}>
                  Sign in with your Google work account. Catalyst is Google&nbsp;OAuth only — no passwords, no shadow accounts.
                </p>
              </div>

              <div className="card" style={{ background: "var(--bg-2)", border: "1px solid var(--line)", lineHeight: "1.4", padding: "20px", margin: "0px 0px 25px" }}>
                <div className="row gap-12" style={{ alignItems: "center" }}>
                  <span style={{ width: 32, height: 32, borderRadius: 4, background: "var(--bg)", border: "1px solid var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon.Globe size={16} />
                  </span>
                  <div className="col" style={{ flex: 1, minWidth: 0 }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>Workspace domain locked</span>
                    <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>@BNMRGLVZ.COM</span>
                  </div>
                </div>
              </div>

              <Button variant="primary" fullWidth iconRight={<Icon.ArrowRight size={14} />} onClick={() => go("analytics")}>
                <span className="row gap-10" style={{ alignItems: "center" }}>
                  <span style={{ width: 18, height: 18, borderRadius: 999, background: "white", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0px 1px 0px 0px", margin: "0px 9px 0px 0px" }}>
                    <Icon.Globe size={11} />
                  </span>
                  Continue with Google
                </span>
              </Button>

              <p style={{ fontSize: 12, color: "var(--ink-3)", margin: 0, lineHeight: 1.55 }}>
                Trouble signing in?{" "}
                <a href="mailto:hello@bnmrglvz.com" style={{ color: "var(--ink-2)", textDecoration: "underline" }}>hello@bnmrglvz.com</a>{" "}
                · Workspace admins can request access at{" "}
                <button onClick={() => setMode("signup")} style={{ background: "none", border: 0, color: "var(--ink-2)", textDecoration: "underline", cursor: "pointer", padding: 0, font: "inherit" }}>Create</button>.
              </p>
            </div>
          }

          {mode === "signup" &&
          <div className="col gap-16">
              <div className="col gap-4">
                <span className="eyebrow">New workspace</span>
                <h2 className="h-1" style={{ fontSize: 40 }}>Stand up your firm.</h2>
                <p style={{ color: "var(--ink-2)", fontSize: 14, marginTop: 4 }}>Free 14-day audit. No card.</p>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <Field label="First name"><Input value="" placeholder="Inés" onChange={() => {}} /></Field>
                <Field label="Last name"><Input value="" placeholder="Vidal" onChange={() => {}} /></Field>
              </div>
              <Field label="Work email"><Input placeholder="you@firm.com" onChange={() => {}} icon={<Icon.Mail size={14} />} /></Field>
              <Field label="Workspace"><Input placeholder="northbeam" onChange={() => {}} icon={<Icon.Hash size={14} />} /></Field>
              <Field label="Password"><Input type="password" placeholder="At least 12 characters" onChange={() => {}} icon={<Icon.Lock size={14} />} /></Field>
              <Toggle checked={true} onChange={() => {}} label="I agree to the Catalyst Master Services Agreement" />
              <Button variant="primary" fullWidth iconRight={<Icon.ArrowRight size={14} />} onClick={() => go("empty")}>Create workspace</Button>
            </div>
          }

          {mode === "reset" &&
          <div className="col gap-16">
              <div className="col gap-4">
                <span className="eyebrow">Reset</span>
                <h2 className="h-1" style={{ fontSize: 40 }}>Forgot your password.</h2>
                <p style={{ color: "var(--ink-2)", fontSize: 14, marginTop: 4 }}>We'll send a magic link to your work email. It expires in 15 minutes.</p>
              </div>
              <Field label="Work email"><Input placeholder="you@firm.com" onChange={() => {}} icon={<Icon.Mail size={14} />} /></Field>
              <Button variant="primary" fullWidth iconRight={<Icon.Send size={14} />}>Send magic link</Button>
              <Button variant="ghost" fullWidth onClick={() => setMode("login")}>Back to sign in</Button>
            </div>
          }

          <div className="row between" style={{ marginTop: 8, color: "var(--ink-3)", fontSize: 12 }}>
            <span className="mono">© 2026 BENAMOR GALVEZ</span>
            <span className="mono">hello@bnmrglvz.com</span>
          </div>
        </div>
      </div>
    </div>);

}

/* ============================================================
   WORKFLOW — Multi-step audit setup
   ============================================================ */

function WorkflowScreen({ go }) {
  const [step, setStep] = useState3(2);
  const [opt, setOpt] = useState3("media-mix");

  const steps = [
  { n: "01", t: "Engagement", s: "Client + scope" },
  { n: "02", t: "Diagnostic", s: "What we audit" },
  { n: "03", t: "Team", s: "Lead + reviewers" },
  { n: "04", t: "Cadence", s: "Cycle + delivery" },
  { n: "05", t: "Review", s: "Confirm and ship" }];


  return (
    <div className="page-body" data-screen-label="workflow">
      <PageHead
        breadcrumb={<Breadcrumb items={[{ label: "Workspace" }, { label: "New audit" }]} />}
        eyebrow={`Step ${step + 1} of ${steps.length} · audit setup`}
        title="A new audit,"
        gradWord="from zero."
        lead="Two to three weeks. No templates. We diagnose, then you decide what's worth simulating."
        actions={
        <>
            <Button variant="ghost">Save draft</Button>
            <Button variant="secondary" onClick={() => go("empty")}>Cancel</Button>
          </>
        } />
      

      {/* Step rail */}
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="row" style={{ borderBottom: "1px solid var(--line)" }}>
          {steps.map((s, i) => {
            const done = i < step,active = i === step;
            return (
              <button key={s.n} onClick={() => setStep(i)} style={{
                flex: 1, padding: "18px 20px", border: 0, borderRight: i < steps.length - 1 ? "1px solid var(--line)" : "none",
                background: active ? "var(--bg)" : "var(--bg-2)",
                cursor: "pointer", textAlign: "left", display: "flex", flexDirection: "column", gap: 4, position: "relative"
              }}>
                <div className="row gap-8" style={{ alignItems: "center" }}>
                  <span className="mono" style={{ fontSize: 10, color: done ? "var(--pos)" : active ? "var(--ink)" : "var(--ink-3)", letterSpacing: "0.12em" }}>
                    {done ? "✓ DONE" : `STEP ${s.n}`}
                  </span>
                </div>
                <span style={{ fontSize: 14, fontWeight: active ? 600 : 500, color: active ? "var(--ink)" : "var(--ink-2)" }}>{s.t}</span>
                <span style={{ fontSize: 12, color: "var(--ink-3)" }}>{s.s}</span>
                {active && <div style={{ position: "absolute", left: 0, right: 0, bottom: -1, height: 2, background: "var(--brand-grad)" }} />}
              </button>);

          })}
        </div>

        <div style={{ padding: 32 }}>
          {step === 2 ?
          <div className="col gap-24" style={{ maxWidth: 800 }}>
              <div className="col gap-4">
                <span className="eyebrow">Step 03 · diagnostic</span>
                <h2 className="h-2" style={{ fontSize: 32 }}>Pick the diagnostic that fits the question.</h2>
                <p className="lead" style={{ marginTop: 4 }}>Each starts with a paid Audit (2–3 weeks). You can stack two if the brief is layered.</p>
              </div>

              <div className="col gap-12">
                {[
              { v: "media-mix", t: "Media-mix audit", s: "Where spend is leaking, what to reallocate. 2 weeks. Catalyst-S simulator runs forecasts.", price: "$48k", agents: ["Catalyst-S", "Lens-D02"] },
              { v: "brand-diag", t: "Brand diagnostic", s: "Awareness, consideration, equity gaps. 3 weeks. BrandLens runs the eval.", price: "$56k", agents: ["Lens-D02", "Milton-IDX"] },
              { v: "ops-loop", t: "Operations loop", s: "Org-wide creative throughput. 3 weeks. HIVE orchestrates.", price: "$72k", agents: ["HIVE-C04"] },
              { v: "custom", t: "Custom diagnostic", s: "We scope to your question. Talk to a strategist before booking.", price: "Quote", agents: [] }].
              map((o) => {
                const active = opt === o.v;
                return (
                  <button key={o.v} onClick={() => setOpt(o.v)} style={{
                    textAlign: "left", border: active ? "1px solid var(--ink)" : "1px solid var(--line)",
                    background: active ? "var(--bg-2)" : "var(--bg)",
                    padding: 20, borderRadius: 4, cursor: "pointer", position: "relative"
                  }}>
                      <div className="row between gap-16">
                        <div className="row gap-12" style={{ alignItems: "flex-start" }}>
                          <span style={{
                          width: 18, height: 18, borderRadius: 999,
                          border: active ? "5px solid var(--ink)" : "1px solid var(--line-2)",
                          background: active ? "var(--brand-grad)" : "transparent",
                          flexShrink: 0, marginTop: 2
                        }} />
                          <div className="col gap-6">
                            <div className="row gap-8" style={{ alignItems: "center" }}>
                              <span style={{ fontSize: 16, fontWeight: 600 }}>{o.t}</span>
                            </div>
                            <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{o.s}</span>
                            {o.agents.length > 0 &&
                          <div className="row gap-4 wrap" style={{ marginTop: 6 }}>
                                {o.agents.map((a) => <Badge key={a}>{a}</Badge>)}
                              </div>
                          }
                          </div>
                        </div>
                        <div className="col" style={{ alignItems: "flex-end", gap: 4 }}>
                          <span className="mono" style={{ color: "var(--ink-3)" }}>FROM</span>
                          <span style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>{o.price}</span>
                        </div>
                      </div>
                    </button>);

              })}
              </div>

              <div className="col gap-12">
                <Field label="Audit question — what do you want answered?" hint="One sentence. The sharper, the better.">
                  <Textarea
                  value="Why has Northbeam's CAC risen 28% on stable LTV, despite 3 brand campaigns in flight?"
                  onChange={() => {}} rows={3} />
                </Field>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                  <Field label="Timeline"><Select value="2 weeks" onChange={() => {}} options={["2 weeks", "3 weeks", "Custom"]} placeholder="" /></Field>
                  <Field label="Office"><Select value="MIA · Strategy" onChange={() => {}} options={["MIA · Strategy", "NYC · 722", "SCL · 403"]} placeholder="" /></Field>
                  <Field label="Confidentiality"><Select value="NDA on file" onChange={() => {}} options={["NDA on file", "Request NDA", "Public"]} placeholder="" /></Field>
                </div>
              </div>

              <Banner tone="info" title="A real human will read this brief."
            body="Catalyst routes the brief to the office lead before the agents touch it. Expect a confirmation within 1 business day." />
            </div> :

          <div className="col" style={{ alignItems: "center", padding: "64px 24px", textAlign: "center", gap: 12 }}>
              <span className="mono" style={{ color: "var(--ink-3)" }}>STEP {steps[step].n}</span>
              <h3 className="h-2" style={{ fontSize: 28 }}>{steps[step].t}</h3>
              <p style={{ color: "var(--ink-2)", fontSize: 14 }}>This step is wired but mocked for the demo. Use the rail above to jump to step 03.</p>
            </div>
          }
        </div>

        <div className="row between" style={{ padding: "20px 32px", borderTop: "1px solid var(--line)", background: "var(--bg-2)" }}>
          <Button variant="ghost" icon={<Icon.ArrowLeft size={14} />} onClick={() => setStep(Math.max(0, step - 1))}>Back</Button>
          <span className="mono" style={{ color: "var(--ink-3)" }}>Autosaved · 14:02</span>
          <Button variant="primary" iconRight={<Icon.ArrowRight size={14} />} onClick={() => setStep(Math.min(steps.length - 1, step + 1))}>
            {step === steps.length - 1 ? "Confirm & ship" : "Continue"}
          </Button>
        </div>
      </div>
    </div>);

}

Object.assign(window, { AuthScreen, WorkflowScreen });