// Neal Communities — shell: icons, sidebar, topbar, AI co-pilot drawer

const NI = {
  search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" width="14" height="14"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>,
  chevron: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" width="14" height="14"><path d="m9 18 6-6-6-6"/></svg>,
  chevronDown: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" width="12" height="12"><path d="m6 9 6 6 6-6"/></svg>,
  bell: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" width="17" height="17"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>,
  settings: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" width="16" height="16"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1"/></svg>,
  plus: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="14" height="14"><path d="M12 5v14M5 12h14"/></svg>,
  sparkle: <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M12 2 13.5 8.5 20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5z"/></svg>,
  up: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="12" height="12"><path d="M12 19V5M5 12l7-7 7 7"/></svg>,
  down: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="12" height="12"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>,
  pin: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="12" height="12"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  send: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="14" height="14"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/></svg>,
  paperclip: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" width="14" height="14"><path d="m21.4 11.6-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7L9.4 18a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg>,
};

const NEAL_NAV = [
  { section: 'OVERVIEW', items: [
    { id: 'dashboard', label: 'Dashboard', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg> },
    { id: 'pipeline', label: 'Sales Pipeline', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><rect x="3" y="4" width="4" height="16"/><rect x="10" y="4" width="4" height="11"/><rect x="17" y="4" width="4" height="7"/></svg>, count: '47' },
  ]},
  { section: 'PEOPLE', items: [
    { id: 'people', label: 'Contacts', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><circle cx="17.5" cy="9" r="2.6"/><path d="M16 20a4.8 4.8 0 0 1 5.5-4.5"/></svg>, count: '2.4k' },
    { id: 'leads', label: 'Buyer Leads', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>, count: '486' },
    { id: 'tours', label: 'Tours & Appts', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>, count: '12' },
  ]},
  { section: 'INVENTORY', items: [
    { id: 'homes', label: 'Homes', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>, count: '103' },
    { id: 'communities', label: 'Communities', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><path d="M3 21h18M5 21V8l5-4v17M14 21V11l5-3v13M9 9v0M9 13v0M9 17v0"/></svg>, count: '4' },
  ]},
  { section: 'MARKETING', items: [
    { id: 'journeys', label: 'Journeys', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M7 6h6a4 4 0 0 1 4 4v.5M12 8v8"/></svg>, count: '5' },
    { id: 'forms', label: 'Lead Forms', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 9h8M8 13h6M8 17h4"/></svg>, count: '6' },
    { id: 'website', label: 'Website', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> },
    { id: 'integrations', label: 'Integrations', icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="16" height="16"><path d="M12 22v-5M9 8V2M15 8V2M6 8h12v5a6 6 0 0 1-12 0V8z"/></svg>, count: '14' },
  ]},
];

function NealSidebar({ current, onNav }) {
  const d = window.NealData;
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-logo">NEAL<span className="light"> COMMUNITIES</span></div>
        <div className="brand-tag">AI Sales Dashboard</div>
      </div>
      <nav className="nav">
        {NEAL_NAV.map(group => (
          <div className="nav-section" key={group.section}>
            <div className="eyebrow">{group.section}</div>
            {group.items.map(it => (
              <div key={it.id} className={'nav-item' + (current === it.id ? ' active' : '')} onClick={() => onNav(it.id)}>
                <span className="icon">{it.icon}</span>
                <span>{it.label}</span>
                {it.count && <span className="count">{it.count}</span>}
              </div>
            ))}
          </div>
        ))}
      </nav>
      <div className="sidebar-foot">
        <div className="user-avatar">{d.user.initials}</div>
        <div className="who">
          <div className="who-name">{d.user.name}</div>
          <div className="who-role">{d.user.role}</div>
        </div>
        <span className="icon-btn" style={{width: 26, height: 26, color: 'rgba(220,230,240,0.6)'}}>{NI.settings}</span>
      </div>
    </aside>
  );
}

function NealTopBar({ crumbs, onOpenCopilot }) {
  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span>{NI.chevron}</span>}
            <span className={i === crumbs.length - 1 ? 'here' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="search">
        <span style={{color: 'var(--subtle)'}}>{NI.search}</span>
        <input placeholder="Search buyers, homes, communities…"/>
        <span className="kbd">⌘ K</span>
      </div>
      <button className="copilot-btn" onClick={onOpenCopilot}>
        <span className="ai-bug">{NI.sparkle}</span>
        Neal Assistant
        <span className="kbd">⌘ J</span>
      </button>
      <div className="icon-btn">{NI.bell}<span className="dot"></span></div>
    </div>
  );
}

// ─── AI Co-pilot drawer ───────────────────────────────────
function NealCopilot({ context, open, onClose }) {
  const d = window.NealData;
  return (
    <>
      <div className={'copilot-scrim' + (open ? ' open' : '')} onClick={onClose}/>
      <aside className={'copilot' + (open ? ' open' : '')}>
        <div className="copilot-head">
          <div className="ai-bug">{NI.sparkle}</div>
          <div style={{flex: 1, minWidth: 0}}>
            <div className="copilot-title">Neal Assistant</div>
            <div className="copilot-sub">Buyer matching · AI</div>
          </div>
          <div className="copilot-close" onClick={onClose}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" width="14" height="14"><path d="M18 6 6 18M6 6l12 12"/></svg>
          </div>
        </div>

        <div className="copilot-context">
          <span className="dot"></span>
          Context · {context}
        </div>

        <div className="copilot-stream">
          <div className="msg-block">
            <div className="msg-meta"><span className="role">Assistant</span><span>· now</span></div>
            <div className="msg-body">
              David &amp; Karen are pre-approved at $320k and have opened the <strong>Avery</strong> floor plan 4× this week. Here are the 3 available homes that best fit their criteria:
            </div>
            <div className="ai-card">
              <div className="ai-card-head"><span>Best matches · B-2048</span><span style={{color: 'var(--good)'}}>Pre-approved</span></div>
              <div className="ai-card-body" style={{padding: 10}}>
                {[
                  { name: 'Avery', meta: 'Palm Grove · $299,990 · 3/2.5', score: 96 },
                  { name: 'Morgan', meta: 'Palm Grove · $327,990 · 3/2.5', score: 91 },
                  { name: 'Winslow', meta: 'SkySail · $345,995 · 3/2.5', score: 84 },
                ].map(m => (
                  <div className="match-home" key={m.name}>
                    <div className="match-thumb"/>
                    <div className="match-info">
                      <div className="match-name">{m.name}</div>
                      <div className="match-meta">{m.meta}</div>
                    </div>
                    <div className="match-score">{m.score}%</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="ai-suggest">
              <div className="chip">{NI.sparkle} Draft a Saturday tour invite for the Avery</div>
              <div className="chip">{NI.sparkle} Compare Avery vs. Morgan side-by-side</div>
              <div className="chip">{NI.sparkle} Check homesites backing the preserve</div>
              <div className="chip">{NI.sparkle} Send the Palm Grove incentive sheet</div>
            </div>
          </div>

          <div className="msg-block">
            <div className="msg-meta"><span className="role">You</span><span>· 9:48</span></div>
            <div className="msg-body user">Which buyers should I prioritize calling today?</div>
          </div>

          <div className="msg-block">
            <div className="msg-meta"><span className="role">Assistant</span><span>· 9:48</span></div>
            <div className="msg-body">
              <strong style={{color: 'var(--ink)'}}>Top 3 by intent today:</strong>
              <ul style={{margin: '8px 0 0', paddingLeft: 18, lineHeight: 1.7}}>
                <li><strong>David &amp; Karen Lin</strong> — 4 floor-plan views, pre-approved, 60-day timeline.</li>
                <li><strong>Marcus Bell</strong> — reserved the Bouchard, closing in 30 days, needs lender update.</li>
                <li><strong>Sophia Marchetti</strong> — toured twice, not yet pre-approved — offer to connect lender.</li>
              </ul>
            </div>
          </div>
        </div>

        <div className="copilot-foot">
          <div className="copilot-input">
            <span style={{color: 'var(--subtle)'}}>{NI.paperclip}</span>
            <input placeholder="Ask about a buyer or home…"/>
            <div className="send">{NI.send}</div>
          </div>
          <div className="hint"><span>⌘ + J to summon</span><span style={{marginLeft: 'auto'}}>Trained on Neal inventory</span></div>
        </div>
      </aside>
    </>
  );
}

function NealLauncher({ onOpen }) {
  return (
    <button className="copilot-launcher" onClick={onOpen}>
      <span className="ai-bug">{NI.sparkle}</span>
      Neal Assistant
      <span className="badge">3</span>
    </button>
  );
}

Object.assign(window, { NI, NealSidebar, NealTopBar, NealCopilot, NealLauncher });