/* Hero workspace mock — client overview with AI co-pilot + tools grid */

const ToolIcon = ({ tone, name }) => {
  const tones = {
    indigo:   { bg: '#EEF2FF', fg: '#4F46E5' },
    rose:     { bg: '#FFF1F2', fg: '#E11D48' },
    amber:    { bg: '#FFF7ED', fg: '#D97706' },
    emerald:  { bg: '#ECFDF5', fg: '#059669' },
    sky:      { bg: '#EFF6FF', fg: '#2563EB' },
    violet:   { bg: '#F5F3FF', fg: '#7C3AED' },
  };
  const t = tones[tone] || tones.indigo;
  return (
    <span style={{width:32, height:32, borderRadius:8, background:t.bg, color:t.fg, display:'grid', placeItems:'center', flexShrink:0}}>
      <Icon name={name} size={16} />
    </span>
  );
};

const MockHeroWorkspace = () => {
  const TOOLS = [
    { name: "Quote Comparisons",       desc: "Compare carrier quotes side-by-side, with deltas surfaced.", tone: "indigo",  icon: "scale" },
    { name: "COI Issuance",             desc: "Generate ACORD-compliant certificates from master drafts.", tone: "rose",    icon: "shield" },
    { name: "Policy Checks",            desc: "Binder-vs-quote and YoY policy change verification.",       tone: "amber",   icon: "doc" },
    { name: "Contract Review",          desc: "Extract insurance obligations from leases & MSAs.",         tone: "emerald", icon: "flag" },
    { name: "Renewal Proposal",         desc: "AI-drafted client proposals from comparison data.",         tone: "sky",     icon: "spark" },
    { name: "Endorsement Tracker",      desc: "Reconcile endorsements against in-force policies.",         tone: "violet",  icon: "layers" },
  ];
  return (
    <AppShell active="dash">
      {/* Client header */}
      <div style={{borderBottom:'1px solid var(--line)', paddingBottom:18, marginBottom:18}}>
        <div className="crumbs" style={{marginBottom:12, display:'flex', alignItems:'center', gap:6}}>
          <Icon name="arrow" size={11} style={{transform:'rotate(180deg)'}}/> <span>Back to Clients</span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <div style={{width:48, height:48, borderRadius:10, background:'linear-gradient(140deg, var(--ink) 0%, var(--accent) 100%)', color:'var(--bg)', display:'grid', placeItems:'center', fontFamily:'var(--ff-mono)', fontWeight:600, fontSize:15, letterSpacing:'-0.02em'}}>HW</div>
          <div style={{flex:1}}>
            <h3 style={{margin:0, fontSize:24, letterSpacing:'-0.02em'}}>Hartwell Manufacturing</h3>
            <div style={{display:'flex', gap:14, alignItems:'center', marginTop:4, fontSize:12, color:'var(--muted)', fontFamily:'var(--ff-mono)'}}>
              <span>Manufacturing · Commercial P&amp;C</span>
              <span style={{opacity:0.4}}>·</span>
              <span>Renewal 01/01/27</span>
              <span style={{opacity:0.4}}>·</span>
              <span>Producer: A. Purdew</span>
            </div>
          </div>
          <button className="btn" style={{height:32, padding:'0 14px', fontSize:12}}>Edit client</button>
        </div>
        <div style={{display:'flex', gap:8, marginTop:14, flexWrap:'wrap'}}>
          <Pill variant="muted">12 Quote Comparisons</Pill>
          <Pill variant="muted">5 Proposals</Pill>
          <Pill variant="muted">8 Policy Checks</Pill>
          <Pill variant="muted">3 Loss Runs</Pill>
          <Pill variant="ok"><Icon name="check" size={10}/> All COIs current</Pill>
        </div>
      </div>

      {/* AI Co-pilot bar */}
      <div style={{border:'1px solid var(--accent)', borderRadius:12, padding:'14px 16px', background:'color-mix(in oklab, var(--accent) 8%, var(--card))', marginBottom:18}}>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:10}}>
          <Icon name="sparkle" size={14} style={{color:'var(--accent)'}}/>
          <span style={{fontSize:13, fontWeight:600}}>What can I help you with on Hartwell today?</span>
          <span style={{flex:1}}/>
          <Pill variant="accent" style={{fontSize:9.5}}>Co-pilot</Pill>
        </div>
        <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
          {[
            { i: "scale",  l: "Compare 2027 quotes" },
            { i: "doc",    l: "Diff vs expiring policy" },
            { i: "shield", l: "Issue COI for Port Authority" },
            { i: "flag",   l: "Review lease §7" },
            { i: "spark",  l: "Draft renewal proposal" },
          ].map((c,i) => (
            <button key={i} style={{
              display:'inline-flex', alignItems:'center', gap:6,
              padding:'6px 12px', borderRadius:999,
              border:'1px solid var(--line-strong)', background:'var(--card)',
              fontSize:12, color:'var(--ink)', cursor:'pointer'
            }}>
              <Icon name={c.i} size={12}/> {c.l}
            </button>
          ))}
        </div>
      </div>

      {/* Tools grid */}
      <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:12}}>
        <h4 style={{margin:0, fontSize:15, letterSpacing:'-0.01em'}}>Tools</h4>
        <span className="mono caps" style={{color:'var(--muted)', fontSize:10}}>Comparisons · Verification · Drafting</span>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:10}}>
        {TOOLS.map((t,i) => (
          <div key={i} style={{
            border:'1px solid var(--line)', borderRadius:10, padding:'14px 14px',
            background:'var(--card)', display:'flex', flexDirection:'column', gap:8,
            cursor:'pointer', transition:'border-color .15s ease'
          }}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <ToolIcon tone={t.tone} name={t.icon}/>
              <Icon name="arrow" size={13} style={{color:'var(--muted)'}}/>
            </div>
            <div style={{fontSize:13, fontWeight:600, letterSpacing:'-0.01em'}}>{t.name}</div>
            <div style={{fontSize:11.5, color:'var(--muted)', lineHeight:1.45}}>{t.desc}</div>
          </div>
        ))}
      </div>
    </AppShell>
  );
};

Object.assign(window, { MockHeroWorkspace });