// StarThink — Business Hub
// Combines: Content Calendar, Business Meeting Notes, Client Record Book,
// Brand Guidelines, Podcast Planner, Competitive Analysis, SEO Strategy,
// Delegation, Revenue Report, Client Onboarding, P&L, Interview Scheduler, Timesheet

function BusinessHub() {
  const today = new Date().toISOString().split('T')[0];
  const [tab, setTab] = React.useState('daily');
  const tabs = [
    { id:'daily', label:'Daily Plan' }, { id:'meetings', label:'Meetings' },
    { id:'content', label:'Content' }, { id:'clients', label:'Clients' },
    { id:'finance', label:'Revenue' }, { id:'brand', label:'Brand' },
    { id:'hr', label:'HR & Team' }
  ];

  const useB = (name, def = {}) => {
    const key = `biz_${name}_${today}`;
    const [d, setD] = React.useState(() => ST.get(key, def));
    const upd = (f, v) => { const n = {...d,[f]:v}; setD(n); ST.set(key, n); };
    return [d, upd];
  };

  const [daily, dUpd] = useB('daily', { schedule:{}, priority:'', products:[], shipping:[], todos:[], marketing:[] });

  const mtgKey = `biz_meetings_${today}`;
  const [mtg, setMtg] = React.useState(() => ST.get(mtgKey, { meetings:[] }));
  const saveMtg = (v) => { setMtg(v); ST.set(mtgKey, v); };

  const contentKey = 'biz_content';
  const [content, setContent] = React.useState(() => ST.get(contentKey, { platform:'', month:'', days:{} }));
  const saveContent = (v) => { setContent(v); ST.set(contentKey, v); };

  const clientsKey = 'biz_clients';
  const [clients, setClients] = React.useState(() => ST.get(clientsKey, { list:[] }));
  const [selectedClient, setSelectedClient] = React.useState(0);

  const brandKey = 'biz_brand';
  const [brand, setBrand] = React.useState(() => ST.get(brandKey, {}));
  const updBrand = (f, v) => { const n = {...brand,[f]:v}; setBrand(n); ST.set(brandKey, n); };

  const finKey = `biz_finance_${today.slice(0,7)}`;
  const [fin, setFin] = React.useState(() => ST.get(finKey, { revenue:[], cogs:[], expenses:[] }));
  const saveFin = (v) => { setFin(v); ST.set(finKey, v); };

  const hrKey = 'biz_hr';
  const [hr, setHr] = React.useState(() => ST.get(hrKey, { interviews:[], timesheets:[], delegation:{} }));
  const saveHr = (v) => { setHr(v); ST.set(hrKey, v); };

  const hours = ['5 AM','6 AM','7 AM','8 AM','9 AM','10 AM','11 AM','12 PM','1 PM','2 PM','3 PM','4 PM','5 PM','6 PM','7 PM','8 PM','9 PM','10 PM','11 PM','12 AM'];
  const platforms = ['YouTube','Facebook','LinkedIn','Instagram','TikTok','Twitter/X','Pinterest','Blog'];

  const TA = ({ value, onChange, placeholder, rows=3 }) => (
    <textarea value={value||''} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
      style={{ width:'100%',minHeight:rows*22+'px',border:'1px solid #e8e8e8',borderRadius:'3px',padding:'6px',fontSize:'12px',fontFamily:'inherit',resize:'none',outline:'none',boxSizing:'border-box',color:'#333' }} />
  );

  const calcTotal = (arr) => arr.reduce((s, r) => s + (parseFloat(r.amount) || 0), 0).toFixed(2);

  const newMeeting = () => ({ date:today, startTime:'', endTime:'', purpose:'', attendees:'', topics:['',''], notes:['',''], actions:[] });
  const newClient = () => ({ name:'', address:'', phone:'', email:'', notes:'', services:[] });

  return (
    <div className="planner-page">
      <div style={{ borderBottom:'2px solid #111', marginBottom:'16px', paddingBottom:'10px' }}>
        <div style={{ fontSize:'22px', fontWeight:'800', letterSpacing:'-0.5px' }}>Business Hub</div>
        <div style={{ fontSize:'11px', color:'#888', letterSpacing:'1px', textTransform:'uppercase', marginTop:'2px' }}>StarThink · {today}</div>
      </div>

      <div style={{ display:'flex', gap:'2px', marginBottom:'20px', borderBottom:'2px solid #111', overflowX:'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            style={{ padding:'6px 14px', fontSize:'12px', fontWeight:tab===t.id?'700':'400', border:'none', cursor:'pointer',
              background:tab===t.id?'#111':'transparent', color:tab===t.id?'#fff':'#666', fontFamily:'inherit', whiteSpace:'nowrap' }}>
            {t.label}
          </button>
        ))}
      </div>

      {tab === 'daily' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'20px' }}>
          <div>
            <STSection title="Appointments">
              {hours.slice(2,19).map(h => (
                <div key={h} style={{ display:'flex', alignItems:'center', borderBottom:'1px solid #f0f0f0', minHeight:'24px' }}>
                  <span style={{ fontSize:'10px', color:'#888', width:'44px', flexShrink:0 }}>{h}</span>
                  <input value={daily.schedule[h]||''} onChange={e=>dUpd('schedule',{...daily.schedule,[h]:e.target.value})}
                    style={{ flex:1,border:'none',outline:'none',fontSize:'12px',color:'#333',background:'transparent',fontFamily:'inherit',padding:'2px 0' }} />
                </div>
              ))}
            </STSection>
          </div>
          <div>
            <STSection title="Top Priority">
              <TA value={daily.priority} onChange={v=>dUpd('priority',v)} placeholder="Most important thing today..." rows={3} />
            </STSection>
            <STSection title="Products to Make">
              <STCheckList items={daily.products} count={6} placeholder="Product..." onToggle={(i,v)=>{ const a=[...(daily.products||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],done:v}; dUpd('products',a); }} onEdit={(i,v)=>{ const a=[...(daily.products||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],text:v}; dUpd('products',a); }} />
            </STSection>
            <STSection title="Shipping & Packaging">
              <STCheckList items={daily.shipping} count={5} placeholder="Order #..." onToggle={(i,v)=>{ const a=[...(daily.shipping||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],done:v}; dUpd('shipping',a); }} onEdit={(i,v)=>{ const a=[...(daily.shipping||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],text:v}; dUpd('shipping',a); }} />
            </STSection>
            <STSection title="Marketing">
              <STCheckList items={daily.marketing} count={4} placeholder="Marketing task..." onToggle={(i,v)=>{ const a=[...(daily.marketing||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],done:v}; dUpd('marketing',a); }} onEdit={(i,v)=>{ const a=[...(daily.marketing||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],text:v}; dUpd('marketing',a); }} />
            </STSection>
            <STSection title="To Do">
              <STCheckList items={daily.todos} count={6} placeholder="Task..." onToggle={(i,v)=>{ const a=[...(daily.todos||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],done:v}; dUpd('todos',a); }} onEdit={(i,v)=>{ const a=[...(daily.todos||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],text:v}; dUpd('todos',a); }} />
            </STSection>
          </div>
        </div>
      )}

      {tab === 'meetings' && (
        <div>
          <button onClick={() => saveMtg({meetings:[...mtg.meetings, newMeeting()]})}
            style={{ marginBottom:'16px',padding:'7px 18px',background:'#111',color:'#fff',border:'none',borderRadius:'3px',fontSize:'12px',cursor:'pointer',fontFamily:'inherit' }}>
            + New Meeting
          </button>
          {(mtg.meetings||[]).map((m, mi) => (
            <div key={mi} style={{ border:'1px solid #e0e0e0',borderRadius:'4px',padding:'16px',marginBottom:'16px' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'12px' }}>
                <div style={{ fontWeight:'700', fontSize:'14px' }}>Meeting {mi+1}</div>
                <button onClick={() => { const ms=[...mtg.meetings]; ms.splice(mi,1); saveMtg({meetings:ms}); }}
                  style={{ background:'none',border:'1px solid #ddd',borderRadius:'3px',padding:'3px 8px',fontSize:'11px',cursor:'pointer',color:'#888',fontFamily:'inherit' }}>Remove</button>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr 1fr', gap:'10px', marginBottom:'12px' }}>
                {[['date','Date','date'],['startTime','Start Time','time'],['endTime','End Time','time'],['purpose','Purpose','text'],['attendees','Attendees','text']].map(([k,l,type]) => (
                  <div key={k}>
                    <div style={{ fontSize:'10px',color:'#888',letterSpacing:'1px',marginBottom:'3px' }}>{l.toUpperCase()}</div>
                    <input type={type} value={m[k]||''} onChange={e=>{ const ms=[...mtg.meetings]; ms[mi]={...ms[mi],[k]:e.target.value}; saveMtg({meetings:ms}); }}
                      style={{ width:'100%',border:'1px solid #e0e0e0',borderRadius:'3px',padding:'5px',fontSize:'12px',fontFamily:'inherit',outline:'none',boxSizing:'border-box' }} />
                  </div>
                ))}
              </div>
              {['Topic 1','Topic 2'].map((topic, ti) => (
                <div key={ti} style={{ marginBottom:'12px' }}>
                  <div style={{ background:'#f5f0e8',padding:'5px 10px',borderRadius:'3px',fontSize:'12px',fontWeight:'600',marginBottom:'6px' }}>{topic}</div>
                  <TA value={(m.topics||[])[ti]||''} onChange={v=>{ const ms=[...mtg.meetings]; const ts=[...(ms[mi].topics||[])]; ts[ti]=v; ms[mi]={...ms[mi],topics:ts}; saveMtg({meetings:ms}); }} placeholder="Meeting notes..." rows={3} />
                </div>
              ))}
              <STSection title="Action Items">
                <STCheckList items={m.actions||[]} count={5} placeholder="Action item..." onToggle={(i,v)=>{ const ms=[...mtg.meetings]; const a=[...(ms[mi].actions||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],done:v}; ms[mi]={...ms[mi],actions:a}; saveMtg({meetings:ms}); }} onEdit={(i,v)=>{ const ms=[...mtg.meetings]; const a=[...(ms[mi].actions||[])]; if(!a[i]) a[i]={text:'',done:false}; a[i]={...a[i],text:v}; ms[mi]={...ms[mi],actions:a}; saveMtg({meetings:ms}); }} />
              </STSection>
            </div>
          ))}
          {!mtg.meetings?.length && <div style={{ color:'#bbb', fontSize:'13px', textAlign:'center', padding:'40px' }}>No meetings yet. Click "+ New Meeting" to add one.</div>}
        </div>
      )}

      {tab === 'content' && (
        <div>
          <div style={{ display:'flex', gap:'16px', marginBottom:'16px', alignItems:'center' }}>
            <div>
              <div style={{ fontSize:'10px',color:'#888',marginBottom:'3px' }}>MONTH</div>
              <input type="month" value={content.month||''} onChange={e=>saveContent({...content,month:e.target.value})}
                style={{ border:'1px solid #ccc',borderRadius:'3px',padding:'4px 8px',fontSize:'12px',fontFamily:'inherit',outline:'none' }} />
            </div>
            <div>
              <div style={{ fontSize:'10px',color:'#888',marginBottom:'3px' }}>FOCUS PLATFORM</div>
              <select value={content.platform||''} onChange={e=>saveContent({...content,platform:e.target.value})}
                style={{ border:'1px solid #ccc',borderRadius:'3px',padding:'5px 8px',fontSize:'12px',fontFamily:'inherit',outline:'none' }}>
                <option value="">All Platforms</option>
                {platforms.map(p => <option key={p}>{p}</option>)}
              </select>
            </div>
          </div>

          {/* Platform rows */}
          {platforms.slice(0,5).map(platform => (
            <div key={platform} style={{ marginBottom:'16px' }}>
              <div style={{ fontSize:'12px',fontWeight:'700',letterSpacing:'1px',color:'#fff',background:'#333',padding:'5px 10px',borderRadius:'3px 3px 0 0' }}>{platform.toUpperCase()}</div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:'2px', border:'1px solid #e0e0e0', borderTop:'none', borderRadius:'0 0 3px 3px', overflow:'hidden' }}>
                {['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map(day => (
                  <div key={day}>
                    <div style={{ fontSize:'10px',fontWeight:'700',color:'#888',padding:'3px 6px',borderBottom:'1px solid #eee',background:'#fafafa' }}>{day}</div>
                    <textarea value={(content.days||{})[`${platform}_${day}`]||''} onChange={e=>saveContent({...content,days:{...(content.days||{}),[`${platform}_${day}`]:e.target.value}})}
                      placeholder="Topic..." style={{ width:'100%',border:'none',outline:'none',resize:'none',fontSize:'11px',fontFamily:'inherit',color:'#333',padding:'4px 6px',minHeight:'50px',boxSizing:'border-box' }} />
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === 'clients' && (
        <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:'20px' }}>
          <div>
            <div style={{ fontSize:'11px',fontWeight:'700',letterSpacing:'1px',color:'#888',marginBottom:'8px' }}>CLIENTS</div>
            {(clients.list||[]).map((c, i) => (
              <div key={i} onClick={() => setSelectedClient(i)}
                style={{ padding:'8px 10px',cursor:'pointer',borderRadius:'3px',marginBottom:'2px',
                  background:selectedClient===i?'#111':'transparent',color:selectedClient===i?'#fff':'#333',fontSize:'13px' }}>
                {c.name||`Client ${i+1}`}
              </div>
            ))}
            <button onClick={() => { const l=[...(clients.list||[]), newClient()]; setClients({list:l}); ST.set(clientsKey,{list:l}); setSelectedClient(l.length-1); }}
              style={{ marginTop:'8px',width:'100%',padding:'7px',background:'transparent',border:'1px dashed #ccc',borderRadius:'3px',fontSize:'12px',cursor:'pointer',fontFamily:'inherit',color:'#888' }}>
              + New Client
            </button>
          </div>
          {(clients.list||[]).length > 0 && (
            <div>
              {[['name','Name'],['address','Address'],['phone','Phone'],['email','Email']].map(([k,l]) => (
                <div key={k} style={{ marginBottom:'10px' }}>
                  <div style={{ fontSize:'10px',color:'#888',letterSpacing:'1px',marginBottom:'3px' }}>{l.toUpperCase()}</div>
                  <input value={(clients.list[selectedClient]||{})[k]||''} onChange={e=>{ const l=[...(clients.list||[])]; l[selectedClient]={...l[selectedClient],[k]:e.target.value}; setClients({list:l}); ST.set(clientsKey,{list:l}); }}
                    style={{ width:'100%',border:'1px solid #e0e0e0',borderRadius:'3px',padding:'6px 8px',fontSize:'13px',fontFamily:'inherit',outline:'none',boxSizing:'border-box' }} />
                </div>
              ))}
              <STSection title="Notes">
                <TA value={(clients.list[selectedClient]||{}).notes||''} onChange={v=>{ const l=[...(clients.list||[])]; l[selectedClient]={...l[selectedClient],notes:v}; setClients({list:l}); ST.set(clientsKey,{list:l}); }} placeholder="Client notes..." rows={3} />
              </STSection>
              <STSection title="Service Log">
                <table style={{ width:'100%',borderCollapse:'collapse' }}>
                  <thead><tr>{['DATE/TIME','SERVICE/WORK','AMOUNT','NOTES'].map(h=><th key={h} style={{ padding:'6px 8px',fontSize:'10px',letterSpacing:'1px',fontWeight:'700',borderBottom:'2px solid #111',textAlign:'left' }}>{h}</th>)}</tr></thead>
                  <tbody>
                    {((clients.list[selectedClient]||{}).services||[{},{},{},{},{}]).map((s,i)=>(
                      <tr key={i} style={{ borderBottom:'1px solid #f0f0f0' }}>
                        {['datetime','service','amount','notes'].map(k=>(
                          <td key={k} style={{ padding:'4px 6px' }}>
                            <input value={s[k]||''} onChange={e=>{ const l=[...(clients.list||[])]; const svs=[...(l[selectedClient].services||[{},{},{},{},{}])]; if(!svs[i]) svs[i]={}; svs[i]={...svs[i],[k]:e.target.value}; l[selectedClient]={...l[selectedClient],services:svs}; setClients({list:l}); ST.set(clientsKey,{list:l}); }}
                              style={{ width:'100%',border:'none',outline:'none',fontSize:'12px',color:'#333',background:'transparent',fontFamily:'inherit',padding:'2px 0' }} />
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </STSection>
            </div>
          )}
          {!(clients.list||[]).length && <div style={{ color:'#bbb',fontSize:'13px',padding:'40px',textAlign:'center' }}>No clients yet. Click "+ New Client" to add one.</div>}
        </div>
      )}

      {tab === 'finance' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'24px' }}>
          {[['revenue','Revenue'],['cogs','Cost of Goods'],['expenses','Expenses']].map(([k,label]) => (
            <div key={k} style={{ gridColumn: k==='expenses'?'span 2':'auto' }}>
              <STSection title={label}>
                <table style={{ width:'100%',borderCollapse:'collapse' }}>
                  <thead><tr>{['DESCRIPTION','AMOUNT'].map(h=><th key={h} style={{ padding:'6px 8px',fontSize:'10px',letterSpacing:'1px',fontWeight:'700',borderBottom:'2px solid #111',textAlign:'left' }}>{h}</th>)}</tr></thead>
                  <tbody>
                    {[...(fin[k]||[]), {}].map((row,i)=>(
                      <tr key={i} style={{ borderBottom:'1px solid #f0f0f0' }}>
                        <td style={{ padding:'4px 6px' }}><input value={row.desc||''} onChange={e=>{ const a=[...(fin[k]||[])]; if(!a[i]) a[i]={}; a[i]={...a[i],desc:e.target.value}; saveFin({...fin,[k]:a}); }} style={{ width:'100%',border:'none',outline:'none',fontSize:'12px',color:'#333',background:'transparent',fontFamily:'inherit' }} /></td>
                        <td style={{ padding:'4px 6px' }}><input value={row.amount||''} onChange={e=>{ const a=[...(fin[k]||[])]; if(!a[i]) a[i]={}; a[i]={...a[i],amount:e.target.value}; saveFin({...fin,[k]:a}); }} placeholder="$0.00" style={{ width:'80px',border:'1px solid #e0e0e0',borderRadius:'3px',padding:'3px 6px',fontSize:'12px',fontFamily:'inherit',outline:'none',textAlign:'right' }} /></td>
                      </tr>
                    ))}
                    <tr style={{ background:'#f5f5f5', fontWeight:'700' }}>
                      <td style={{ padding:'6px 8px',fontSize:'12px' }}>TOTAL</td>
                      <td style={{ padding:'6px 8px',fontSize:'12px',textAlign:'right' }}>${calcTotal(fin[k]||[])}</td>
                    </tr>
                  </tbody>
                </table>
              </STSection>
            </div>
          ))}
          <div style={{ gridColumn:'span 2', background:'#f8f8f8', border:'1px solid #e0e0e0', borderRadius:'4px', padding:'16px' }}>
            <div style={{ display:'flex', gap:'32px' }}>
              {[['Gross Revenue',calcTotal(fin.revenue||[])],['Cost of Goods',calcTotal(fin.cogs||[])],['Total Expenses',calcTotal(fin.expenses||[])],
                ['Gross Profit',(parseFloat(calcTotal(fin.revenue||[]))-parseFloat(calcTotal(fin.cogs||[]))).toFixed(2)],
                ['Net Income',(parseFloat(calcTotal(fin.revenue||[]))-parseFloat(calcTotal(fin.cogs||[]))-parseFloat(calcTotal(fin.expenses||[]))).toFixed(2)]
              ].map(([l,v])=>(
                <div key={l}>
                  <div style={{ fontSize:'10px',color:'#888',letterSpacing:'1px',marginBottom:'4px' }}>{l.toUpperCase()}</div>
                  <div style={{ fontSize:'18px',fontWeight:'800',color:parseFloat(v)<0?'#c00':'#111' }}>${v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'brand' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'24px' }}>
          <div>
            <STSection title="Brand Identity">
              {[['brandName','Brand Name'],['tagline','Tagline'],['mission','Mission Statement'],['coreValues','Core Values']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'8px' }}>
                  <div style={{ fontSize:'11px',color:'#888',marginBottom:'3px' }}>{l}</div>
                  <input value={brand[k]||''} onChange={e=>updBrand(k,e.target.value)}
                    style={{ width:'100%',border:'1px solid #e0e0e0',borderRadius:'3px',padding:'6px 8px',fontSize:'13px',fontFamily:'inherit',outline:'none',boxSizing:'border-box' }} />
                </div>
              ))}
            </STSection>
            <STSection title="Target Audience">
              {[['whoAre','Who Are They?'],['whatNeed','What Do They Need From Your Brand?']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'8px' }}>
                  <div style={{ fontSize:'11px',color:'#888',marginBottom:'3px' }}>{l}</div>
                  <TA value={brand[k]} onChange={v=>updBrand(k,v)} placeholder="..." rows={2} />
                </div>
              ))}
            </STSection>
            <STSection title="Brand Voice & Tone">
              <div style={{ display:'flex', flexWrap:'wrap', gap:'8px' }}>
                {['Professional','Friendly','Inspirational','Playful','Educational','Bold','Warm','Minimal'].map(tone=>(
                  <div key={tone} onClick={()=>{ const t=brand.tones||{}; updBrand('tones',{...t,[tone]:!t[tone]}); }}
                    style={{ padding:'5px 12px',borderRadius:'20px',fontSize:'12px',cursor:'pointer',border:'1.5px solid',
                      borderColor:(brand.tones||{})[tone]?'#111':'#ddd',background:(brand.tones||{})[tone]?'#111':'transparent',
                      color:(brand.tones||{})[tone]?'#fff':'#555' }}>{tone}</div>
                ))}
              </div>
            </STSection>
          </div>
          <div>
            <STSection title="Visual Identity">
              {[['logoRules','Logo Usage Rules'],['brandColors','Brand Colors'],['typography','Typography'],['photoStyle','Photo/Illustration Style'],['iconStyle','Icon Style']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'8px' }}>
                  <div style={{ fontSize:'11px',color:'#888',marginBottom:'3px' }}>{l}</div>
                  <input value={brand[k]||''} onChange={e=>updBrand(k,e.target.value)}
                    style={{ width:'100%',border:'1px solid #e0e0e0',borderRadius:'3px',padding:'6px 8px',fontSize:'13px',fontFamily:'inherit',outline:'none',boxSizing:'border-box' }} />
                </div>
              ))}
            </STSection>
            <STSection title="Marketing & Social Media">
              {[['contentTone','Tone & Style for Content'],['hashtags','Hashtags / Keywords'],['platforms2','Primary Platforms']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'8px' }}>
                  <div style={{ fontSize:'11px',color:'#888',marginBottom:'3px' }}>{l}</div>
                  <TA value={brand[k]} onChange={v=>updBrand(k,v)} placeholder="..." rows={2} />
                </div>
              ))}
            </STSection>
            <STSection title="SEO Strategy">
              {[['seoGoals','SEO Goals'],['keywords','Primary Keywords'],['longTail','Long-Tail Keywords'],['contentPlan','Content Plan']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'8px' }}>
                  <div style={{ fontSize:'11px',color:'#888',marginBottom:'3px' }}>{l}</div>
                  <TA value={brand[k]} onChange={v=>updBrand(k,v)} placeholder="..." rows={2} />
                </div>
              ))}
            </STSection>
          </div>
        </div>
      )}

      {tab === 'hr' && (
        <div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'24px' }}>
            <STSection title="Interview Scheduler">
              <table style={{ width:'100%',borderCollapse:'collapse',marginBottom:'8px' }}>
                <thead><tr>{['INTERVIEWEE','POSITION','DATE & TIME','LOCATION'].map(h=><th key={h} style={{ padding:'5px 6px',fontSize:'10px',letterSpacing:'1px',fontWeight:'700',borderBottom:'2px solid #111',textAlign:'left' }}>{h}</th>)}</tr></thead>
                <tbody>
                  {[...(hr.interviews||[]), {}].map((row,i)=>(
                    <tr key={i} style={{ borderBottom:'1px solid #f0f0f0' }}>
                      {['name','position','datetime','location'].map(k=>(
                        <td key={k} style={{ padding:'4px 5px' }}>
                          <input value={row[k]||''} onChange={e=>{ const a=[...(hr.interviews||[])]; if(!a[i]) a[i]={}; a[i]={...a[i],[k]:e.target.value}; saveHr({...hr,interviews:a}); }}
                            style={{ width:'100%',border:'none',outline:'none',fontSize:'11px',color:'#333',background:'transparent',fontFamily:'inherit',padding:'2px 0',borderBottom:'1px solid #f5f5f5' }} />
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </STSection>

            <STSection title="Timesheet">
              <table style={{ width:'100%',borderCollapse:'collapse',marginBottom:'8px' }}>
                <thead><tr>{['DATE','DESCRIPTION','TIME IN','TIME OUT','TOTAL'].map(h=><th key={h} style={{ padding:'5px 6px',fontSize:'10px',letterSpacing:'1px',fontWeight:'700',borderBottom:'2px solid #111',textAlign:'left' }}>{h}</th>)}</tr></thead>
                <tbody>
                  {[...(hr.timesheets||[]), {}].map((row,i)=>(
                    <tr key={i} style={{ borderBottom:'1px solid #f0f0f0' }}>
                      {['date','desc','in','out','total'].map(k=>(
                        <td key={k} style={{ padding:'4px 5px' }}>
                          <input value={row[k]||''} onChange={e=>{ const a=[...(hr.timesheets||[])]; if(!a[i]) a[i]={}; a[i]={...a[i],[k]:e.target.value}; saveHr({...hr,timesheets:a}); }}
                            style={{ width:'100%',border:'none',outline:'none',fontSize:'11px',color:'#333',background:'transparent',fontFamily:'inherit',borderBottom:'1px solid #f5f5f5' }} />
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </STSection>
          </div>

          <STSection title="Team Delegation">
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'12px' }}>
              {[0,1,2,3,4,5].map(i => (
                <div key={i} style={{ border:'1px solid #e8e8e8',borderRadius:'4px',padding:'10px' }}>
                  <input value={(hr.delegation||{})[`name${i}`]||''} onChange={e=>saveHr({...hr,delegation:{...(hr.delegation||{}),['name'+i]:e.target.value}})}
                    placeholder="Team Member Name" style={{ width:'100%',border:'none',borderBottom:'2px solid #111',outline:'none',fontSize:'12px',fontWeight:'700',color:'#111',background:'transparent',fontFamily:'inherit',padding:'2px 0',marginBottom:'6px',boxSizing:'border-box' }} />
                  {[0,1,2,3,4].map(j => (
                    <input key={j} value={(hr.delegation||{})[`task${i}_${j}`]||''} onChange={e=>saveHr({...hr,delegation:{...(hr.delegation||{}),['task'+i+'_'+j]:e.target.value}})}
                      placeholder="Task..." style={{ width:'100%',border:'none',borderBottom:'1px solid #eee',outline:'none',fontSize:'11px',color:'#555',background:'transparent',fontFamily:'inherit',padding:'3px 0',display:'block',boxSizing:'border-box' }} />
                  ))}
                </div>
              ))}
            </div>
          </STSection>
        </div>
      )}
    </div>
  );
}

window.BusinessHub = BusinessHub;