function ClientInviteOnboarding({ onBack, onComplete }) {
  const [step, setStep] = useState("invite");
  const [fullName, setFullName] = useState("Amelia Hart");
  const [phone, setPhone] = useState("+1 (415) 555-0102");
  const [shipping, setShipping] = useState("2128 Lake St, Austin, TX 78703");
  const [payment, setPayment] = useState("Visa ending 4242");
  const [goals, setGoals] = useState("Energy, sleep, hair shedding");
  const steps = [
    { id: "invite", label: "Invite" },
    { id: "profile", label: "Profile" },
    { id: "ready", label: "Ready" },
  ];
  const stepIndex = Math.max(0, steps.findIndex(item => item.id === step));
  const profileComplete = fullName.trim() && phone.trim() && shipping.trim();
  const readiness = [
    { label: "Better Auth sign-in", detail: "OTP or Google OAuth complete", complete: true },
    { label: "Client onboarding invite", detail: "Functional Practice Clinic", complete: true },
    { label: "Assigned practitioner", detail: "Linn Harper", complete: true },
    { label: "Client profile", detail: profileComplete ? "Required details complete" : "Missing required details", complete: stepIndex >= 1 && profileComplete },
    { label: "Scoped portal", detail: "Own recommendations, orders, messages, profile", complete: step === "ready" },
  ];

  return (
    <div className="auth-stage">
      <button className="btn sm ghost auth-stage-back" onClick={onBack}>
        <I.arrowL size={12}/> Selection
      </button>

      <div className="auth-card onboarding-card client-onboarding-card" data-screen-label="Client Onboarding">
        <section className="auth-panel onboarding-main">
          <div className="auth-brand-lockup compact">
            <span className="auth-brand-mark"></span>
            <span>VYKON · HTMA</span>
          </div>

          <div className="auth-panel-head centered">
            <h2>{step === "invite" ? "Accept client invitation" : step === "profile" ? "Complete client profile" : "Client portal ready"}</h2>
            <p>{step === "invite" ? "The invite is matched to the authenticated email before client access is enabled." : step === "profile" ? "Profile, shipping, and payment details become the client's own editable record." : "The client can now access only their own recommendations, orders, messages, and profile."}</p>
          </div>

          <div className="onboarding-steps" aria-label="Client onboarding progress">
            {steps.map((item, index) => (
              <React.Fragment key={item.id}>
                <span className="onboarding-step-node">
                  <span className={"onboarding-dot" + (index <= stepIndex ? " active" : "")}>
                    {index < stepIndex ? <I.check size={12}/> : index + 1}
                  </span>
                  <small>{item.label}</small>
                </span>
                {index < steps.length - 1 && <span className={"onboarding-line" + (index < stepIndex ? " active" : "")}></span>}
              </React.Fragment>
            ))}
          </div>

          {step === "invite" && (
            <div className="onboarding-step-panel setup-wide">
              <div className="client-invite-card">
                <div className="client-invite-icon"><I.user size={24}/></div>
                <div>
                  <h3>Functional Practice Clinic invited Amelia Hart</h3>
                  <p>Assigned practitioner: Linn Harper. The client onboarding invite unlocks profile completion and client portal access after acceptance.</p>
                </div>
              </div>
              <div className="setup-summary-grid">
                <div><span>Clinic</span><strong>Functional Practice Clinic</strong></div>
                <div><span>Practitioner</span><strong>Linn Harper</strong></div>
                <div><span>Status</span><strong>Pending profile completion</strong></div>
              </div>
              <div className="auth-actions split">
                <button className="btn ghost lg" onClick={onBack}>Back</button>
                <button className="btn primary lg" onClick={() => setStep("profile")}>
                  Accept invitation <I.arrowR size={14}/>
                </button>
              </div>
            </div>
          )}

          {step === "profile" && (
            <div className="onboarding-step-panel setup-wide form">
              <div className="clinic-form-grid">
                <div className="field">
                  <div className="field-label">Full name</div>
                  <input className="input" value={fullName} onChange={event => setFullName(event.target.value)}/>
                </div>
                <div className="field">
                  <div className="field-label">Phone</div>
                  <input className="input" value={phone} onChange={event => setPhone(event.target.value)}/>
                </div>
                <div className="field" style={{gridColumn: "1 / -1"}}>
                  <div className="field-label">Shipping address</div>
                  <input className="input" value={shipping} onChange={event => setShipping(event.target.value)}/>
                </div>
                <div className="field">
                  <div className="field-label">Payment method</div>
                  <input className="input" value={payment} onChange={event => setPayment(event.target.value)}/>
                </div>
                <div className="field">
                  <div className="field-label">Primary goals</div>
                  <input className="input" value={goals} onChange={event => setGoals(event.target.value)}/>
                </div>
              </div>
              <div className="vera-rule-strip">
                <span><I.shield size={13}/> Own-profile access only</span>
                <span><I.receipt size={13}/> Orders visible after placement</span>
                <span><I.msg size={13}/> Clinic messages stay scoped to this client</span>
              </div>
              <div className="auth-actions split">
                <button className="btn ghost lg" onClick={() => setStep("invite")}>Back</button>
                <button className="btn primary lg" disabled={!profileComplete} onClick={() => setStep("ready")}>
                  Save profile <I.arrowR size={14}/>
                </button>
              </div>
            </div>
          )}

          {step === "ready" && (
            <div className="onboarding-step-panel setup-wide">
              <div className="onboarding-ready-icon"><I.checkCircle size={30}/></div>
              <div className="setup-centered-copy">
                <h3>Client profile active</h3>
                <p>Amelia can now review recommendations, view orders, save payment details, edit profile information, and message the clinic.</p>
              </div>
              <div className="setup-summary-grid">
                <div><span>Client</span><strong>{fullName}</strong></div>
                <div><span>Assigned practitioner</span><strong>Linn Harper</strong></div>
                <div><span>Portal scope</span><strong>Own records only</strong></div>
              </div>
              <button className="btn primary lg" onClick={onComplete}>
                Enter client portal <I.arrowR size={14}/>
              </button>
            </div>
          )}
        </section>

        <aside className="auth-side-panel">
          <div className="auth-side-title">Client access</div>
          <div className="auth-readiness-list">
            {readiness.map(item => (
              <div key={item.label} className={"auth-readiness-row" + (item.complete ? " complete" : "")}>
                <span>{item.complete ? <I.check size={12}/> : <I.clock size={12}/>}</span>
                <div>
                  <strong>{item.label}</strong>
                  <small>{item.detail}</small>
                </div>
              </div>
            ))}
          </div>
        </aside>
      </div>
    </div>
  );
}

function ClientPortal({ onBack }) {
  const [tab, setTab] = useState("home");
  const [recommendationStatus, setRecommendationStatus] = useState("Viewed");
  const [messageDraft, setMessageDraft] = useState("Can I take the magnesium with dinner?");
  const navItems = [
    ["home", "Home", <I.dash size={16}/>],
    ["recommendations", "Recommendations", <I.doc size={16}/>],
    ["orders", "Orders", <I.receipt size={16}/>],
    ["messages", "Messages", <I.msg size={16}/>],
    ["profile", "Profile", <I.user size={16}/>],
  ];
  const statusClass = recommendationStatus === "Approved" ? "green" : recommendationStatus === "Declined" ? "red" : recommendationStatus === "Edit" ? "amber" : "blue";

  const RecommendationPanel = () => (
    <div className="client-panel">
      <div className="client-panel-head">
        <div>
          <h2>Recommendation v2</h2>
          <p>Sent by Linn Harper after HTMA review.</p>
        </div>
        <span className={"badge " + statusClass}><span className="dot"></span> {recommendationStatus}</span>
      </div>
      <div className="recommendation-status-track client-track">
        {["Draft", "Sent", "Viewed", "Approved", "Ordered"].map((status, index) => {
          const currentIndex = ["Draft", "Sent", "Viewed", "Approved", "Ordered"].indexOf(recommendationStatus);
          return (
            <div key={status} className={"recommendation-status-step" + (index < currentIndex ? " complete" : status === recommendationStatus ? " next" : "")}>
              <span>{index < currentIndex ? <I.check size={11}/> : index + 1}</span>
              <strong>{status}</strong>
            </div>
          );
        })}
      </div>
      <div className="client-recommendation-body">
        <div>
          <strong>Mineral balancing plan</strong>
          <p>Magnesium glycinate PM, zinc picolinate AM, adrenal cocktail mid-afternoon, and vitamin D3/K2 AM.</p>
        </div>
        <div>
          <strong>Practitioner note</strong>
          <p>Start the first phase for two weeks, then message the clinic if nausea, sleep disruption, or new symptoms appear.</p>
        </div>
      </div>
      <div className="client-action-row">
        <button className="btn primary" onClick={() => setRecommendationStatus("Approved")}><I.check size={14}/> Accept recommendation</button>
        <button className="btn" onClick={() => setRecommendationStatus("Edit")}><I.edit size={14}/> Request edit</button>
        <button className="btn ghost" onClick={() => setRecommendationStatus("Declined")}><I.x size={14}/> Decline</button>
      </div>
    </div>
  );

  return (
    <div className="client-portal-shell" data-screen-label="Client Portal">
      <header className="client-portal-header">
        <button className="settings-brand" onClick={onBack} aria-label="Back to selection">
          <div className="brand-mark"></div>
          <div className="brand-name">VYKON<span> · HTMA</span></div>
        </button>
        <div className="client-header-actions">
          <button className="btn sm" onClick={onBack}><I.arrowL size={12}/> Selection</button>
          <span className="org-chip"><I.bldg size={13}/><span>Functional Practice Clinic</span><small>Client</small></span>
          <Avatar initial="AH" color="oklch(0.62 0.14 240)" size={28}/>
        </div>
      </header>

      <div className="client-portal-layout">
        <aside className="client-portal-nav">
          <div className="client-profile-lockup">
            <Avatar initial="AH" color="oklch(0.62 0.14 240)" size={44}/>
            <div>
              <strong>Amelia Hart</strong>
              <small>Assigned to Linn Harper</small>
            </div>
          </div>
          <div className="nav-group">
            <div className="nav-label">Client Portal</div>
            {navItems.map(([key, label, icon]) => (
              <button key={key} className={"nav-item" + (tab === key ? " active" : "")} onClick={() => setTab(key)}>
                <span className="ico">{icon}</span>
                <span>{label}</span>
              </button>
            ))}
          </div>
          <div className="usage-card">
            <div className="row" style={{gap: 8}}>
              <I.shield size={14}/>
              <div style={{fontWeight: 600}}>Own-profile access</div>
            </div>
            <div className="muted" style={{marginTop: 4}}>Recommendations · orders · messages · profile</div>
          </div>
        </aside>

        <main className="client-portal-main">
          {tab === "home" && (
            <>
              <div className="page-head">
                <div>
                  <div className="page-title">Welcome, Amelia</div>
                  <div className="page-sub">Functional Practice Clinic · assigned practitioner Linn Harper</div>
                </div>
                <span className="badge green"><span className="dot"></span> Active client</span>
              </div>
              <div className="client-home-grid">
                <button className="client-action-card primary" onClick={() => setTab("recommendations")}>
                  <I.doc size={20}/>
                  <span>
                    <strong>Review recommendation</strong>
                    <small>Recommendation v2 is waiting for your response.</small>
                  </span>
                  <I.arrowR size={15}/>
                </button>
                <button className="client-action-card" onClick={() => setTab("messages")}>
                  <I.msg size={20}/>
                  <span>
                    <strong>Message clinic</strong>
                    <small>Ask Linn or the clinic team about the protocol.</small>
                  </span>
                  <I.arrowR size={15}/>
                </button>
                <button className="client-action-card" onClick={() => setTab("orders")}>
                  <I.receipt size={20}/>
                  <span>
                    <strong>View orders</strong>
                    <small>Track prior orders and payment status.</small>
                  </span>
                  <I.arrowR size={15}/>
                </button>
              </div>
              <RecommendationPanel/>
            </>
          )}

          {tab === "recommendations" && <RecommendationPanel/>}

          {tab === "orders" && (
            <div className="client-panel">
              <div className="client-panel-head">
                <div>
                  <h2>Orders</h2>
                  <p>Orders linked to Amelia Hart only.</p>
                </div>
              </div>
              <div className="client-order-list">
                {[
                  ["VC-2025-0847", "Slow Ox Custom Blend", "Shipped", "$142.00"],
                  ["VC-2025-0815", "Slow Ox Custom Blend", "Delivered", "$142.00"],
                ].map(([num, formula, status, total]) => (
                  <div key={num} className="client-order-row">
                    <I.receipt size={16}/>
                    <div>
                      <strong>{num}</strong>
                      <small>{formula}</small>
                    </div>
                    <span className="badge green"><span className="dot"></span> {status}</span>
                    <span className="mono">{total}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === "messages" && (
            <div className="client-panel">
              <div className="client-panel-head">
                <div>
                  <h2>Messages</h2>
                  <p>Conversation with practitioner, assistant, and clinic manager.</p>
                </div>
              </div>
              <div className="client-message-list">
                <div className="client-message staff"><strong>Linn Harper</strong><p>Your recommendation is ready. Please review the phase one instructions before accepting.</p></div>
                <div className="client-message client"><strong>Amelia Hart</strong><p>Thank you. I will review it today.</p></div>
              </div>
              <div className="client-message-composer">
                <input className="input" value={messageDraft} onChange={event => setMessageDraft(event.target.value)}/>
                <button className="btn primary"><I.send size={14}/> Send</button>
              </div>
            </div>
          )}

          {tab === "profile" && (
            <div className="client-panel">
              <div className="client-panel-head">
                <div>
                  <h2>Profile</h2>
                  <p>Client-editable profile, shipping, and payment details.</p>
                </div>
                <button className="btn"><I.edit size={14}/> Edit</button>
              </div>
              <div className="settings-info-grid">
                <div><span>Email</span><strong>amelia.hart@mail.co</strong></div>
                <div><span>Phone</span><strong>+1 (415) 555-0102</strong></div>
                <div><span>Shipping</span><strong>2128 Lake St, Austin, TX</strong></div>
                <div><span>Payment</span><strong>Visa ending 4242</strong></div>
                <div><span>Assigned practitioner</span><strong>Linn Harper</strong></div>
                <div><span>Profile status</span><strong>Complete</strong></div>
              </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { ClientInviteOnboarding, ClientPortal });