// ChairShare — onboarding wizard (14)
// Six-step full-screen wizard.

const OnboardingWizard = ({ step = 1 }) => {
  const steps = ["Pick chair", "Sign lease", "Set hours", "Add services", "Connect payouts", "Publish"];
  const Frame = ({ children, ctaPrimary, ctaSecondary, hint }) => (
    <div className="cs" style={{ width: 1440, minHeight: 900, background: "var(--cs-cream)", display: "grid", gridTemplateRows: "auto 1fr auto" }}>
      {/* Top bar */}
      <header style={{ padding: "20px 36px", borderBottom: "1px solid var(--cs-line)", display: "flex", alignItems: "center", justifyContent: "space-between", background: "var(--cs-bone)" }}>
        <Wordmark size={16} />
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          {steps.map((s, i) => {
            const n = i + 1;
            const done = n < step;
            const cur = n === step;
            return (
              <div key={s} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{
                  width: 24, height: 24, borderRadius: 999, fontSize: 11,
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  background: done ? "var(--cs-gold)" : cur ? "var(--cs-ink)" : "transparent",
                  color: done || cur ? "var(--cs-bone)" : "var(--cs-ink-3)",
                  border: !done && !cur ? "1px solid var(--cs-line-2)" : "none",
                  fontFamily: "var(--cs-mono)", fontWeight: 500,
                }}>{done ? <Icon name="check" size={12} /> : n}</span>
                <span style={{ fontSize: 12, color: cur ? "var(--cs-ink)" : "var(--cs-ink-3)", fontWeight: cur ? 500 : 400 }}>{s}</span>
                {i < 5 && <span style={{ width: 24, height: 1, background: "var(--cs-line-2)", marginLeft: 8 }} />}
              </div>
            );
          })}
        </div>
        <button className="btn btn-link" style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>Save & exit</button>
      </header>

      {/* Body */}
      <div style={{ padding: "40px 56px 30px", maxWidth: 1280, width: "100%", margin: "0 auto" }}>{children}</div>

      {/* Footer CTA */}
      <footer style={{ padding: "20px 56px", borderTop: "1px solid var(--cs-line)", background: "var(--cs-bone)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>{hint}</div>
        <div style={{ display: "flex", gap: 12 }}>
          {step > 1 && <button className="btn btn-ghost">← Back</button>}
          {ctaSecondary}
          {ctaPrimary || <button className="btn btn-primary">Continue <Icon name="arrow_right" size={14} /></button>}
        </div>
      </footer>
    </div>
  );

  // ── Step 1: Pick chair ──
  if (step === 1) {
    const chairs = [
      { name: "Chair 02 · Atelier Yarraville", img: "yarraville chair 02 · brass mirror", rate: "$285/wk", days: "Tue/Wed/Thu", picked: true },
      { name: "Chair 03 · Atelier Yarraville", img: "yarraville chair 03 · arched window", rate: "$320/wk", days: "Mon–Fri", picked: false },
      { name: "Chair 01 · House of Lune", img: "brunswick chair 01 · backwash", rate: "$245/wk", days: "Wed/Thu/Sat", picked: false },
      { name: "Chair 04 · Studio West", img: "footscray chair 04 · light wood", rate: "$210/wk", days: "Any 3 days", picked: false },
    ];
    return (
      <Frame hint="Step 1 of 6 · You can change your selection any time before signing.">
        <div style={{ marginBottom: 28, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Welcome, Amelia</div>
          <h1 className="serif" style={{ fontSize: 56, margin: "0 0 12px", lineHeight: 1.05, fontWeight: 400 }}>
            Pick the chair that <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>feels right.</span>
          </h1>
          <p style={{ fontSize: 16, color: "var(--cs-ink-2)", margin: 0, lineHeight: 1.5 }}>Four are open right now. You can tour any space before committing — just message us. Minimum lease is three months, then rolling.</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {chairs.map(c => (
            <div key={c.name} className="card" style={{ overflow: "hidden", border: c.picked ? "2px solid var(--cs-gold-deep)" : "1px solid var(--cs-line)", padding: 0, position: "relative" }}>
              {c.picked && <span className="pill pill-gold" style={{ position: "absolute", top: 10, right: 10, zIndex: 2 }}><Icon name="check" size={12} /> selected</span>}
              <Placeholder label={c.img} tone={c.picked ? "rose" : "default"} style={{ height: 180, borderRadius: 0, border: "none" }} />
              <div style={{ padding: 18 }}>
                <div className="serif" style={{ fontSize: 17, margin: "0 0 4px", fontWeight: 400 }}>{c.name}</div>
                <div style={{ fontSize: 12, color: "var(--cs-ink-3)", marginBottom: 14 }}>{c.days}</div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span className="serif" style={{ fontSize: 22 }}>{c.rate}</span>
                  <a className="u" style={{ fontSize: 12, color: "var(--cs-ink-2)" }}>Tour →</a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Frame>
    );
  }

  // ── Step 2: Sign lease ──
  if (step === 2) {
    return (
      <Frame
        hint="Step 2 of 6 · A signed copy will be emailed to you immediately."
        ctaPrimary={<button className="btn btn-primary">Sign & continue <Icon name="arrow_right" size={14} /></button>}>
        <div style={{ marginBottom: 28 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Step 2 · Lease</div>
          <h1 className="serif" style={{ fontSize: 48, margin: "0 0 8px", lineHeight: 1.05, fontWeight: 400 }}>
            Sign your <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>chair lease.</span>
          </h1>
          <p style={{ fontSize: 15, color: "var(--cs-ink-2)", margin: 0 }}>Plain English. No five-year commitments. Have a friend read it if you like.</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 28 }}>
          <div className="card" style={{ padding: 0, overflow: "hidden", height: 580 }}>
            <div style={{ padding: "12px 22px", background: "var(--cs-bone)", borderBottom: "1px solid var(--cs-line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 12, color: "var(--cs-ink-3)" }} className="mono">CHAIRSHARE_LEASE_V3.pdf</span>
              <span style={{ fontSize: 11, color: "var(--cs-ink-3)" }}>Page 1 of 4</span>
            </div>
            <div style={{ padding: 32, fontFamily: "var(--cs-serif)", fontSize: 13, lineHeight: 1.7, color: "var(--cs-ink-2)", height: "calc(100% - 41px)", overflow: "auto" }}>
              <div style={{ textAlign: "center", marginBottom: 22 }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Chair Rental Agreement</div>
                <div className="serif" style={{ fontSize: 22, color: "var(--cs-ink)" }}>Atelier Yarraville · Chair 02</div>
              </div>
              <p><strong>Between:</strong> ChairShare Pty Ltd (ABN 12 345 678 901), the Lessor, and Amelia Marcheva, the Practitioner.</p>
              <p><strong>1. The chair.</strong> The Practitioner shall have exclusive use of Chair 02 at 21 Anderson St, Yarraville, on Tuesdays, Wednesdays, and Thursdays for the duration of this lease.</p>
              <p><strong>2. Rent.</strong> $285 per week, payable weekly in advance via direct debit.</p>
              <p><strong>3. Term.</strong> Three (3) calendar months minimum, rolling monthly thereafter. Either party may terminate with thirty (30) days written notice after the minimum term.</p>
              <p><strong>4. Included.</strong> Chair, station, mirror, shared backwash, towels, utilities, wifi, cleaning, booking platform, payment processing tools, customer list export. The Practitioner retains all rights to their customer data.</p>
              <p><strong>5. Excluded.</strong> Stock, tools, products, and personal insurance are the responsibility of the Practitioner…</p>
            </div>
          </div>
          <div>
            <div className="card" style={{ padding: 22, marginBottom: 16 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Summary terms</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {[["Chair", "Atelier Yarraville · 02"], ["Days", "Tue / Wed / Thu"], ["Rent", "$285 / week"], ["Term", "3 months, then monthly"], ["Notice", "30 days after minimum"]].map(([l, v]) => (
                  <div key={l} style={{ display: "flex", justifyContent: "space-between", fontSize: 13, paddingBottom: 8, borderBottom: "1px dashed var(--cs-line)" }}>
                    <span style={{ color: "var(--cs-ink-3)" }}>{l}</span>
                    <span className="serif">{v}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="card" style={{ padding: 22 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Sign here</div>
              <div className="field" style={{ marginBottom: 14 }}>
                <label>Type your full legal name</label>
                <input defaultValue="Amelia Marcheva" style={{ fontFamily: "var(--cs-serif)", fontSize: 22, fontStyle: "italic", color: "var(--cs-ink)" }} />
              </div>
              <label style={{ display: "flex", gap: 10, fontSize: 12, color: "var(--cs-ink-2)", lineHeight: 1.5, cursor: "pointer", alignItems: "flex-start" }}>
                <span style={{ width: 16, height: 16, border: "1.5px solid var(--cs-gold-deep)", borderRadius: 3, background: "var(--cs-gold-deep)", display: "flex", alignItems: "center", justifyContent: "center", marginTop: 1, flexShrink: 0 }}>
                  <Icon name="check" size={11} color="var(--cs-bone)" />
                </span>
                <span>I have read the agreement and agree to be bound by it. I understand my customer list remains mine.</span>
              </label>
            </div>
          </div>
        </div>
      </Frame>
    );
  }

  // ── Step 5: Connect Stripe (KYC pending state) ──
  if (step === 5) {
    return (
      <Frame
        hint="Step 5 of 6 · You can finish onboarding while Stripe verifies — we'll email you when ready."
        ctaPrimary={<button className="btn btn-primary">Continue without payouts <Icon name="arrow_right" size={14} /></button>}
        ctaSecondary={<button className="btn btn-gold">Connect with Stripe →</button>}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Step 5 · Payouts</div>
            <h1 className="serif" style={{ fontSize: 56, margin: "0 0 18px", lineHeight: 1.05, fontWeight: 400 }}>
              Get paid <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>directly.</span>
            </h1>
            <p style={{ fontSize: 17, color: "var(--cs-ink-2)", lineHeight: 1.55, marginBottom: 24 }}>
              ChairShare uses Stripe to move money. Customers pay your booking page → funds land in your bank in two business days.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 28 }}>
              {["We never touch your money. Stripe holds funds and pays you directly.",
                "Stripe needs a few details (ID, ABN, bank) to comply with Australian regs.",
                "You can publish your booking page before this is approved — payouts release once Stripe confirms."].map((t, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14, color: "var(--cs-ink-2)" }}>
                  <Icon name="check" size={16} color="var(--cs-gold-deep)" />
                  <span>{t}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{ padding: 32, background: "var(--cs-bone)", textAlign: "center" }}>
            <div style={{ width: 80, height: 80, margin: "0 auto 22px", borderRadius: 999, background: "var(--cs-cream-2)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="card" size={36} color="var(--cs-gold-deep)" />
            </div>
            <div className="serif" style={{ fontSize: 24, marginBottom: 8 }}>Connect to Stripe</div>
            <p style={{ fontSize: 13, color: "var(--cs-ink-3)", lineHeight: 1.55, margin: "0 0 24px" }}>You'll be redirected to Stripe to provide ID and bank details. Five minutes, on average.</p>
            <button className="btn btn-gold btn-block btn-lg">Connect with Stripe →</button>
            <div style={{ marginTop: 16, fontSize: 11, color: "var(--cs-ink-3)" }}><Icon name="lock" size={11} /> Encrypted · Stripe Verified Partner</div>
          </div>
        </div>
      </Frame>
    );
  }

  // ── Step 6: Publish ──
  if (step === 6) {
    return (
      <Frame
        hint="You're a click away from launch."
        ctaPrimary={<button className="btn btn-gold btn-lg" style={{ padding: "16px 36px" }}>Publish my page <Icon name="sparkle" size={16} /></button>}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Step 6 · Final preview</div>
            <h1 className="serif" style={{ fontSize: 64, margin: "0 0 18px", lineHeight: 1.02, fontWeight: 400 }}>
              You're <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>ready.</span>
            </h1>
            <p style={{ fontSize: 17, color: "var(--cs-ink-2)", lineHeight: 1.55, marginBottom: 22 }}>
              This is what customers will see at <span className="mono" style={{ background: "var(--cs-cream-2)", padding: "3px 8px", borderRadius: 4 }}>amelia.cuts.voxink.com.au</span> from the moment you publish.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 22 }}>
              {[["Chair leased", "Atelier Yarraville · Chair 02"], ["Hours set", "5 working days · 40 hours/week"], ["Services", "5 added"], ["Stripe", "KYC pending — we'll release payouts once approved"]].map(([l, v]) => (
                <div key={l} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <Icon name="check" size={16} color="var(--cs-ok)" style={{ marginTop: 3 }} />
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{l}</div>
                    <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>{v}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              <button className="btn btn-ghost btn-sm">← Back to edit</button>
              <a className="btn btn-ghost btn-sm"><Icon name="instagram" size={13} /> Share on Instagram</a>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "9/19", maxHeight: 620, margin: "0 auto" }}>
            <div style={{ background: "#1a140f", borderRadius: 30, padding: 8, height: "100%", boxShadow: "var(--cs-shadow-lg)" }}>
              <div style={{ background: "var(--cs-cream)", borderRadius: 24, height: "100%", overflow: "hidden", position: "relative", padding: 18 }}>
                <Placeholder label="amelia.cuts.voxink.com.au" tone="rose" style={{ height: 180, marginBottom: 14 }} />
                <div style={{ marginTop: -36, marginLeft: 4 }}>
                  <Avatar name="Amelia M" size={64} tone="rose" />
                </div>
                <div className="serif" style={{ fontSize: 22, margin: "10px 0 4px" }}>Amelia Marcheva</div>
                <div style={{ fontSize: 11, color: "var(--cs-ink-3)", marginBottom: 16 }}>Lived-in colour, soft modern cuts.</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  {SERVICES.slice(0, 3).map(s => (
                    <div key={s.id} style={{ padding: 10, border: "1px solid var(--cs-line)", borderRadius: 8, fontSize: 11, display: "flex", justifyContent: "space-between" }}>
                      <span>{s.name}</span><span>${s.price}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </Frame>
    );
  }

  // ── Step 3 / 4 (compact placeholders sharing layout) ──
  return (
    <Frame hint={`Step ${step} of 6 · saved automatically`}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>Step {step} · {steps[step - 1]}</div>
      <h1 className="serif" style={{ fontSize: 48, margin: "0 0 24px", lineHeight: 1.05, fontWeight: 400 }}>
        {step === 3 ? <>Set your <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>working hours.</span></>
          : <>Add at least <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>one service.</span></>}
      </h1>
      {step === 3 && <div className="card" style={{ padding: 0 }}>
        {[["Mon", false], ["Tue", true], ["Wed", true], ["Thu", true], ["Fri", true], ["Sat", true], ["Sun", false]].map(([d, on], i) => (
          <div key={d} style={{ display: "grid", gridTemplateColumns: "60px 100px 1fr 30px", padding: "16px 22px", alignItems: "center", gap: 16, borderBottom: i < 6 ? "1px solid var(--cs-line)" : "none" }}>
            <span className="serif" style={{ fontSize: 17 }}>{d}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: on ? "var(--cs-ok)" : "var(--cs-ink-3)" }}><span className={"dot " + (on ? "dot-ok" : "")} style={!on ? { background: "var(--cs-ink-4)" } : {}}/>{on ? "Open" : "Closed"}</span>
            {on ? <div style={{ display: "flex", gap: 8 }}>
              <input defaultValue="10:00" style={{ width: 110 }} />
              <span style={{ alignSelf: "center", color: "var(--cs-ink-3)" }}>→</span>
              <input defaultValue="18:00" style={{ width: 110 }} />
              <button className="btn btn-ghost btn-sm" style={{ padding: "8px 10px" }}><Icon name="plus" size={12} /></button>
            </div> : <span style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>—</span>}
            <Icon name="edit" size={14} color="var(--cs-ink-3)" />
          </div>
        ))}
      </div>}
      {step === 4 && <div>
        <div className="card" style={{ padding: 0, marginBottom: 16 }}>
          {SERVICES.slice(0, 3).map((s, i) => (
            <div key={s.id} style={{ display: "grid", gridTemplateColumns: "1fr 100px 80px 30px", padding: "16px 22px", alignItems: "center", gap: 14, borderBottom: i < 2 ? "1px solid var(--cs-line)" : "none" }}>
              <div>
                <div className="serif" style={{ fontSize: 17 }}>{s.name}</div>
                <div style={{ fontSize: 11, color: "var(--cs-ink-3)" }}>{s.desc}</div>
              </div>
              <span className="mono" style={{ fontSize: 12, color: "var(--cs-ink-2)" }}>{s.duration} min</span>
              <span className="serif" style={{ fontSize: 18 }}>${s.price}</span>
              <Icon name="edit" size={14} color="var(--cs-ink-3)" />
            </div>
          ))}
        </div>
        <button className="btn btn-ghost btn-block">+ Add another service</button>
      </div>}
    </Frame>
  );
};

window.OnboardingWizard = OnboardingWizard;