function Settings() {
  const [name, setName]       = React.useState("Jordan");
  const [email, setEmail]     = React.useState("jordan@agencycrm.io");
  const [slug, setSlug]       = React.useState("muaadhzaheem130-5046s-projects");
  const [mrr, setMrr]         = React.useState("$150");
  const [saved, setSaved]     = React.useState(false);
  const [tab, setTab]         = React.useState("profile");

  function save() {
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  }

  const tabs = [
    { key: "profile",      label: "Profile",        icon: "user" },
    { key: "workspace",    label: "Workspace",       icon: "building-2" },
    { key: "integrations", label: "Integrations",   icon: "plug" },
    { key: "billing",      label: "Billing",        icon: "credit-card" },
    { key: "notifications",label: "Notifications",  icon: "bell" },
  ];

  return (
    <div className="cm-page">
      <div className="cm-bar">
        <div className="cm-bar__l">
          <span className="cm-bar__crumb">Settings <span className="cm-bar__crumbSep">/</span> <span className="cm-bar__crumbMuted">{tabs.find(t => t.key === tab)?.label}</span></span>
        </div>
      </div>

      <div style={{ display:"flex", height:"calc(100% - 48px)", overflow:"hidden" }}>
        {/* Left nav */}
        <div style={{ width:200, borderRight:"1px solid var(--color-hairline)", padding:"12px 0", flexShrink:0, overflowY:"auto" }}>
          {tabs.map(t => (
            <div key={t.key}
              onClick={() => setTab(t.key)}
              style={{
                display:"flex", alignItems:"center", gap:8, padding:"7px 16px",
                fontSize:13, cursor:"pointer", borderRadius:6, margin:"1px 8px",
                background: tab === t.key ? "var(--color-surface-2)" : "transparent",
                color: tab === t.key ? "var(--color-ink)" : "var(--color-ink-muted)",
              }}>
              <i data-lucide={t.icon} className="cm-icon-sm"></i>
              {t.label}
            </div>
          ))}
        </div>

        {/* Content */}
        <div style={{ flex:1, overflowY:"auto", padding:24 }}>
          {tab === "profile" && (
            <div style={{ maxWidth:520 }}>
              <h3 style={{ fontSize:15, fontWeight:600, margin:"0 0 4px", color:"var(--color-ink)" }}>Profile</h3>
              <p style={{ fontSize:12.5, color:"var(--color-ink-subtle)", margin:"0 0 20px" }}>Your personal account details.</p>

              <div style={{ display:"flex", alignItems:"center", gap:16, marginBottom:24 }}>
                <div style={{ width:56, height:56, borderRadius:"50%", background:"var(--color-primary)", display:"flex", alignItems:"center", justifyContent:"center", fontSize:22, color:"#fff", fontWeight:600 }}>
                  {name[0]}
                </div>
                <div>
                  <div style={{ fontSize:13, fontWeight:500, color:"var(--color-ink)", marginBottom:4 }}>{name}</div>
                  <div style={{ fontSize:12, color:"var(--color-ink-subtle)" }}>{email}</div>
                </div>
              </div>

              <SettingsField label="Full name" value={name} onChange={setName} />
              <SettingsField label="Email address" value={email} onChange={setEmail} type="email" />
              <SettingsField label="Default pricing floor" value={mrr} onChange={setMrr} hint="Used as starting offer in pitch scripts." />

              <button className="cm-btn cm-btn--primary" onClick={save} style={{ marginTop:8 }}>
                {saved ? <><i data-lucide="check" className="cm-icon-xs"></i>Saved</> : "Save changes"}
              </button>
            </div>
          )}

          {tab === "workspace" && (
            <div style={{ maxWidth:520 }}>
              <h3 style={{ fontSize:15, fontWeight:600, margin:"0 0 4px", color:"var(--color-ink)" }}>Workspace</h3>
              <p style={{ fontSize:12.5, color:"var(--color-ink-subtle)", margin:"0 0 20px" }}>Settings for your agency workspace.</p>
              <SettingsField label="Workspace name" value="Solo workspace" onChange={() => {}} />
              <SettingsField label="Vercel scope / team" value={slug} onChange={setSlug} hint="Used for deploy commands." />
              <SettingsField label="Default deploy region" value="iad1 (Washington DC)" onChange={() => {}} />
              <button className="cm-btn cm-btn--primary" onClick={save} style={{ marginTop:8 }}>
                {saved ? <><i data-lucide="check" className="cm-icon-xs"></i>Saved</> : "Save changes"}
              </button>
            </div>
          )}

          {tab === "integrations" && (
            <div style={{ maxWidth:560 }}>
              <h3 style={{ fontSize:15, fontWeight:600, margin:"0 0 4px", color:"var(--color-ink)" }}>Integrations</h3>
              <p style={{ fontSize:12.5, color:"var(--color-ink-subtle)", margin:"0 0 20px" }}>Connect external tools to your CRM.</p>
              {[
                { name:"Vercel",  desc:"Deploy and monitor sites",    icon:"triangle",      status:"connected", color:"#000" },
                { name:"Stripe",  desc:"Payments and subscriptions",  icon:"credit-card",   status:"connected", color:"#635bff" },
                { name:"Google Places", desc:"Scrape business data",  icon:"map-pin",       status:"connected", color:"#4285f4" },
                { name:"Apify",   desc:"Competitor scraping",         icon:"bot",           status:"connected", color:"#ff9012" },
                { name:"Twilio",  desc:"SMS & call tracking",         icon:"phone",         status:"not connected", color:"#f22f46" },
                { name:"Slack",   desc:"Deal notifications",          icon:"message-square",status:"not connected", color:"#4a154b" },
              ].map(intg => (
                <div key={intg.name} style={{ display:"flex", alignItems:"center", gap:12, padding:"12px 0", borderBottom:"1px solid var(--color-hairline)" }}>
                  <div style={{ width:36, height:36, borderRadius:8, background:"var(--color-surface-2)", border:"1px solid var(--color-hairline)", display:"flex", alignItems:"center", justifyContent:"center" }}>
                    <i data-lucide={intg.icon} className="cm-icon-sm" style={{ color: intg.color }}></i>
                  </div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13, fontWeight:500, color:"var(--color-ink)" }}>{intg.name}</div>
                    <div style={{ fontSize:12, color:"var(--color-ink-subtle)" }}>{intg.desc}</div>
                  </div>
                  <span style={{ fontSize:11, padding:"3px 8px", borderRadius:4,
                    background: intg.status === "connected" ? "rgba(39,166,68,0.12)" : "var(--color-surface-2)",
                    color: intg.status === "connected" ? "#6dd28a" : "var(--color-ink-subtle)",
                    border: "1px solid " + (intg.status === "connected" ? "rgba(39,166,68,0.28)" : "var(--color-hairline)")
                  }}>{intg.status}</span>
                </div>
              ))}
            </div>
          )}

          {tab === "billing" && (
            <div style={{ maxWidth:520 }}>
              <h3 style={{ fontSize:15, fontWeight:600, margin:"0 0 4px", color:"var(--color-ink)" }}>Billing</h3>
              <p style={{ fontSize:12.5, color:"var(--color-ink-subtle)", margin:"0 0 20px" }}>This CRM is free — costs only your Vercel + API usage.</p>
              <div style={{ background:"var(--color-surface-1)", border:"1px solid var(--color-hairline)", borderRadius:8, padding:16, marginBottom:16 }}>
                <div style={{ fontSize:12, color:"var(--color-ink-subtle)", marginBottom:4 }}>ACTIVE PLAN</div>
                <div style={{ fontSize:20, fontWeight:700, color:"var(--color-ink)" }}>Solo — Free</div>
                <div style={{ fontSize:12.5, color:"var(--color-ink-muted)", marginTop:4 }}>Unlimited clients · Self-hosted · No monthly fee</div>
              </div>
              <div style={{ fontSize:13, color:"var(--color-ink-muted)" }}>
                External costs: Vercel Hobby (free), Apify pay-per-run, Google Places API ($0.017/req).
              </div>
            </div>
          )}

          {tab === "notifications" && (
            <div style={{ maxWidth:520 }}>
              <h3 style={{ fontSize:15, fontWeight:600, margin:"0 0 4px", color:"var(--color-ink)" }}>Notifications</h3>
              <p style={{ fontSize:12.5, color:"var(--color-ink-subtle)", margin:"0 0 20px" }}>Choose when to be alerted.</p>
              {[
                { label:"Overdue calls",          sub:"When a follow-up date passes",    on:true },
                { label:"Payment received",        sub:"Stripe charge succeeds",         on:true },
                { label:"Payment failed",          sub:"Stripe charge fails",            on:true },
                { label:"Site down alert",         sub:"Vercel deploy goes offline",     on:false },
                { label:"New deal closed",         sub:"Stage moves to Closed",          on:true },
                { label:"Weekly digest",           sub:"Summary every Monday morning",  on:false },
              ].map((n, i) => (
                <NotifRow key={i} {...n} />
              ))}
              <button className="cm-btn cm-btn--primary" onClick={save} style={{ marginTop:16 }}>
                {saved ? <><i data-lucide="check" className="cm-icon-xs"></i>Saved</> : "Save preferences"}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function SettingsField({ label, value, onChange, type="text", hint }) {
  return (
    <div style={{ marginBottom:16 }}>
      <label style={{ display:"block", fontSize:12, fontWeight:500, color:"var(--color-ink-muted)", marginBottom:6 }}>{label}</label>
      <input type={type} className="cm-input" value={value} onChange={e => onChange(e.target.value)} />
      {hint && <div style={{ fontSize:11.5, color:"var(--color-ink-subtle)", marginTop:4 }}>{hint}</div>}
    </div>
  );
}

function NotifRow({ label, sub, on: defaultOn }) {
  const [on, setOn] = React.useState(defaultOn);
  return (
    <div style={{ display:"flex", alignItems:"center", gap:12, padding:"10px 0", borderBottom:"1px solid var(--color-hairline)" }}>
      <div style={{ flex:1 }}>
        <div style={{ fontSize:13, color:"var(--color-ink)" }}>{label}</div>
        <div style={{ fontSize:12, color:"var(--color-ink-subtle)" }}>{sub}</div>
      </div>
      <div onClick={() => setOn(v => !v)} style={{
        width:36, height:20, borderRadius:10, cursor:"pointer", flexShrink:0, position:"relative",
        background: on ? "var(--color-primary)" : "var(--color-surface-3)",
        transition:"background 0.15s",
      }}>
        <div style={{
          position:"absolute", top:2, left: on ? 18 : 2, width:16, height:16, borderRadius:"50%",
          background:"#fff", transition:"left 0.15s",
        }} />
      </div>
    </div>
  );
}

window.Settings = Settings;