// StarThink — Finance & Travel + Goals & Projects
// Combines: 52-Week Savings, Net Worth, Rent Ledger, Travel Agenda, Vacation Planner,
// Itinerary, Career Development, Relationship Goals, Project Planner, Egg Count

function FinanceTravel() {
  const today = new Date().toISOString().split('T')[0];
  const [tab, setTab] = React.useState('savings');

  // Currency selector — shared across all finance tabs
  const [currency, setCurrency] = React.useState(() => ST.get('ft_currency', 'USD'));
  const currencies = [
    { code:'USD', symbol:'$', name:'US Dollar' },
    { code:'INR', symbol:'₹', name:'Indian Rupee' },
    { code:'EUR', symbol:'€', name:'Euro' },
    { code:'GBP', symbol:'£', name:'British Pound' },
    { code:'CAD', symbol:'CA$', name:'Canadian Dollar' },
    { code:'AUD', symbol:'A$', name:'Australian Dollar' },
    { code:'JPY', symbol:'¥', name:'Japanese Yen' },
    { code:'SGD', symbol:'S$', name:'Singapore Dollar' },
    { code:'AED', symbol:'د.إ', name:'UAE Dirham' },
  ];
  const curr = currencies.find(c => c.code === currency) || currencies[0];
  const saveCurrency = (c) => { setCurrency(c); ST.set('ft_currency', c); };
  const sym = curr.symbol;
  const tabs = [
    { id:'savings', label:'52-Week Savings' }, { id:'networth', label:'Net Worth' },
    { id:'rent', label:'Rent Ledger' }, { id:'travel', label:'Travel Planner' },
    { id:'projects', label:'Projects' }, { id:'career', label:'Career' }
  ];

  const savingsKey = `ft_savings_${today.slice(0,4)}`;
  const [savings, setSavings] = React.useState(() => ST.get(savingsKey, { year: today.slice(0,4), weeks: {} }));
  const saveSavings = (v) => { setSavings(v); ST.set(savingsKey, v); };

  const nwKey = `ft_networth_${today.slice(0,7)}`;
  const [nw, setNw] = React.useState(() => ST.get(nwKey, { assets:[], liabilities:[], notes:'' }));
  const saveNw = (v) => { setNw(v); ST.set(nwKey, v); };

  const rentKey = 'ft_rent';
  const [rent, setRent] = React.useState(() => ST.get(rentKey, { name:'', address:'', phone:'', monthlyRent:'', year: today.slice(0,4), months:{} }));
  const saveRent = (v) => { setRent(v); ST.set(rentKey, v); };

  const travelKey = 'ft_travel';
  const [travel, setTravel] = React.useState(() => ST.get(travelKey, { trips:[] }));
  const saveTravel = (v) => { setTravel(v); ST.set(travelKey, v); };
  const [selTrip, setSelTrip] = React.useState(0);

  const projectsKey = 'ft_projects';
  const [projects, setProjects] = React.useState(() => ST.get(projectsKey, { list:[] }));
  const saveProjects = (v) => { setProjects(v); ST.set(projectsKey, v); };
  const [selProj, setSelProj] = React.useState(0);

  const careerKey = 'ft_career';
  const [career, setCareer] = React.useState(() => ST.get(careerKey, {}));
  const updCareer = (f, v) => { const n={...career,[f]:v}; setCareer(n); ST.set(careerKey, n); };

  const calcNW = () => {
    const ta = (nw.assets||[]).reduce((s,r)=>s+(parseFloat(r.value)||0),0);
    const tl = (nw.liabilities||[]).reduce((s,r)=>s+(parseFloat(r.value)||0),0);
    return { assets: ta.toFixed(2), liabilities: tl.toFixed(2), net: (ta-tl).toFixed(2) };
  };

  const newTrip = () => ({ destination:'', departure:'', arrival:'', duration:'', transport:'', todos:[], notes:'', dayPlans:[], budget:'' });
  const newProject = () => ({ title:'', objective:'', startDate:'', deadline:'', completedOn:'', milestones:['','','',''], tasks:[], progress:0, resources:'' });

  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 months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

  return (
    <div className="planner-page">
      <div style={{ borderBottom:'2px solid #111', marginBottom:'16px', paddingBottom:'10px' }}>
        <div style={{ fontSize:'22px', fontWeight:'800', letterSpacing:'-0.5px' }}>Finance & Travel</div>
        <div style={{ fontSize:'11px', color:'#888', letterSpacing:'1px', textTransform:'uppercase', marginTop:'2px' }}>StarThink · {today}</div>
      </div>
      {/* Currency selector */}
      <div style={{ display:'flex', alignItems:'center', gap:'8px', marginBottom:'16px' }}>
        <span style={{ fontSize:'11px', color:'#888', fontWeight:'700', letterSpacing:'1px' }}>CURRENCY</span>
        <select value={currency} onChange={e => saveCurrency(e.target.value)}
          style={{ border:'1px solid #e0e0e0', borderRadius:'4px', padding:'5px 10px', fontSize:'13px', fontFamily:'inherit', outline:'none', color:'#111', background:'#fafafa' }}>
          {currencies.map(c => <option key={c.code} value={c.code}>{c.symbol} {c.code} — {c.name}</option>)}
        </select>
        <span style={{ fontSize:'13px', fontWeight:'700', color:'#555' }}>{curr.symbol}</span>
      </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 === 'savings' && (
        <div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'16px' }}>
            <div style={{ fontSize:'14px', fontWeight:'700' }}>52-Week Savings Challenge</div>
            <div style={{ display:'flex', alignItems:'center', gap:'8px' }}>
              <span style={{ fontSize:'12px', color:'#888' }}>Year:</span>
              <input value={savings.year||''} onChange={e=>saveSavings({...savings,year:e.target.value})}
                style={{ border:'1px solid #ccc',borderRadius:'3px',padding:'4px 8px',fontSize:'13px',fontFamily:'inherit',outline:'none',width:'80px' }} />
            </div>
          </div>
          <div style={{ marginBottom:'12px', display:'flex', gap:'24px', background:'#f5f5f5', padding:'12px 16px', borderRadius:'4px' }}>
            {[
              ['Completed', Object.values(savings.weeks||{}).filter(w=>w.done).length + ' weeks'],
              ['Total Saved', '$' + Object.values(savings.weeks||{}).reduce((s,w)=>s+(parseFloat(w.deposit)||0),0).toFixed(2)],
              ['Remaining', (52 - Object.values(savings.weeks||{}).filter(w=>w.done).length) + ' weeks']
            ].map(([l,v])=>(
              <div key={l}>
                <div style={{ fontSize:'10px',color:'#888',letterSpacing:'1px' }}>{l.toUpperCase()}</div>
                <div style={{ fontSize:'16px',fontWeight:'800',color:'#111' }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'8px' }}>
            {[0,1,2].map(col => (
              <table key={col} style={{ width:'100%',borderCollapse:'collapse' }}>
                <thead>
                  <tr style={{ background:'#111',color:'#fff' }}>
                    {['WK','DEPOSIT','BALANCE','✓'].map(h=><th key={h} style={{ padding:'6px 8px',fontSize:'10px',letterSpacing:'1px',textAlign:'left' }}>{h}</th>)}
                  </tr>
                </thead>
                <tbody>
                  {Array.from({length:18},(_,i)=>{
                    const wk = col*18 + i + 1;
                    if(wk > 52) return null;
                    const w = (savings.weeks||{})[wk] || { deposit:'', balance:'', done:false };
                    return (
                      <tr key={wk} style={{ background:w.done?'#f0f8f0':i%2===0?'#fafafa':'#fff',borderBottom:'1px solid #eee' }}>
                        <td style={{ padding:'5px 8px',fontSize:'12px',fontWeight:'600',color:'#888' }}>{wk}</td>
                        <td style={{ padding:'3px 4px' }}>
                          <input value={w.deposit||''} onChange={e=>{const ws={...savings.weeks}; ws[wk]={...w,deposit:e.target.value}; saveSavings({...savings,weeks:ws});}}
                            placeholder={`${sym}0`} style={{ width:'100%',border:'1px solid #e8e8e8',borderRadius:'2px',padding:'3px 5px',fontSize:'11px',fontFamily:'inherit',outline:'none' }} />
                        </td>
                        <td style={{ padding:'3px 4px' }}>
                          <input value={w.balance||''} onChange={e=>{const ws={...savings.weeks}; ws[wk]={...w,balance:e.target.value}; saveSavings({...savings,weeks:ws});}}
                            placeholder={`${sym}0`} style={{ width:'100%',border:'1px solid #e8e8e8',borderRadius:'2px',padding:'3px 5px',fontSize:'11px',fontFamily:'inherit',outline:'none' }} />
                        </td>
                        <td style={{ padding:'3px 8px',textAlign:'center' }}>
                          <div onClick={()=>{const ws={...savings.weeks}; ws[wk]={...w,done:!w.done}; saveSavings({...savings,weeks:ws});}}
                            style={{ width:'16px',height:'16px',border:'2px solid',borderRadius:'50%',cursor:'pointer',margin:'0 auto',
                              borderColor:w.done?'#111':'#ccc',background:w.done?'#111':'transparent',display:'flex',alignItems:'center',justifyContent:'center' }}>
                            {w.done&&<span style={{color:'#fff',fontSize:'9px'}}>✓</span>}
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            ))}
          </div>
        </div>
      )}

      {tab === 'networth' && (
        <div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'24px' }}>
            {[['assets','Assets','value'],['liabilities','Liabilities','value']].map(([k,label])=>(
              <STSection key={k} title={label}>
                <table style={{ width:'100%',borderCollapse:'collapse' }}>
                  <thead><tr>{['DESCRIPTION','VALUE AT MONTH END'].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>
                    {[...(nw[k]||[]),{}].map((row,i)=>(
                      <tr key={i} style={{ borderBottom:'1px solid #f0f0f0',background:i%2===0?'#fafafa':'#fff' }}>
                        <td style={{ padding:'4px 6px' }}><input value={row.desc||''} onChange={e=>{const a=[...(nw[k]||[])]; if(!a[i]) a[i]={}; a[i]={...a[i],desc:e.target.value}; saveNw({...nw,[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.value||''} onChange={e=>{const a=[...(nw[k]||[])]; if(!a[i]) a[i]={}; a[i]={...a[i],value:e.target.value}; saveNw({...nw,[k]:a});}} placeholder={`${sym}0`} style={{ width:'90px',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' }}>${(nw[k]||[]).reduce((s,r)=>s+(parseFloat(r.value)||0),0).toFixed(2)}</td>
                    </tr>
                  </tbody>
                </table>
              </STSection>
            ))}
          </div>
          <div style={{ background:'#111',color:'#fff',borderRadius:'4px',padding:'16px 20px',marginTop:'16px',display:'flex',gap:'32px' }}>
            {[['Total Assets',calcNW().assets],['Total Liabilities',calcNW().liabilities],['Net Worth',calcNW().net]].map(([l,v])=>(
              <div key={l}>
                <div style={{ fontSize:'10px',color:'#aaa',letterSpacing:'1px',marginBottom:'4px' }}>{l.toUpperCase()}</div>
                <div style={{ fontSize:'20px',fontWeight:'800',color:l==='Net Worth'&&parseFloat(v)<0?'#ff8888':'#fff' }}>${sym}${v}</div>
              </div>
            ))}
          </div>
          <STSection title="Notes" style={{ marginTop:'16px' }}>
            <TA value={nw.notes} onChange={v=>saveNw({...nw,notes:v})} placeholder="Financial notes, observations..." rows={3} />
          </STSection>
        </div>
      )}

      {tab === 'rent' && (
        <div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'24px', marginBottom:'20px' }}>
            <STSection title="Tenant">
              {[['name','Name'],['phone','Phone'],['monthlyRent','Monthly Rent']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'6px' }}>
                  <span style={{ fontSize:'11px',color:'#888',width:'110px',display:'inline-block' }}>{l}:</span>
                  <input value={rent[k]||''} onChange={e=>saveRent({...rent,[k]:e.target.value})}
                    style={{ border:'none',borderBottom:'1px solid #e0e0e0',outline:'none',fontSize:'12px',color:'#333',background:'transparent',fontFamily:'inherit',padding:'2px 0',width:'calc(100% - 110px)' }} />
                </div>
              ))}
            </STSection>
            <STSection title="Property">
              {[['address','Address'],['property','Property']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'6px' }}>
                  <span style={{ fontSize:'11px',color:'#888',width:'80px',display:'inline-block' }}>{l}:</span>
                  <input value={rent[k]||''} onChange={e=>saveRent({...rent,[k]:e.target.value})}
                    style={{ border:'none',borderBottom:'1px solid #e0e0e0',outline:'none',fontSize:'12px',color:'#333',background:'transparent',fontFamily:'inherit',padding:'2px 0',width:'calc(100% - 80px)' }} />
                </div>
              ))}
              <div>
                <span style={{ fontSize:'11px',color:'#888',width:'80px',display:'inline-block' }}>Year:</span>
                <input value={rent.year||''} onChange={e=>saveRent({...rent,year:e.target.value})}
                  style={{ border:'none',borderBottom:'1px solid #e0e0e0',outline:'none',fontSize:'12px',color:'#333',background:'transparent',fontFamily:'inherit',padding:'2px 0',width:'80px' }} />
              </div>
            </STSection>
          </div>
          <table style={{ width:'100%',borderCollapse:'collapse' }}>
            <thead><tr style={{ background:'#111',color:'#fff' }}>{['MONTH','DUE DATE','RENT AMOUNT','AMOUNT PAID','FEES','COMMENT'].map(h=><th key={h} style={{ padding:'8px 10px',fontSize:'10px',letterSpacing:'1px',textAlign:'left' }}>{h}</th>)}</tr></thead>
            <tbody>
              {months.map((m,i)=>{
                const row=(rent.months||{})[m]||{dueDate:'',rentAmt:'',paid:'',fees:'',comment:''};
                return (
                  <tr key={m} style={{ background:i%2===0?'#fafafa':'#fff',borderBottom:'1px solid #eee' }}>
                    <td style={{ padding:'6px 10px',fontWeight:'700',fontSize:'13px' }}>{m}</td>
                    {[['dueDate',''],['rentAmt','$0'],['paid','$0'],['fees','$0'],['comment','']].map(([k,ph])=>(
                      <td key={k} style={{ padding:'4px 6px' }}>
                        <input value={row[k]||''} onChange={e=>{const ms={...rent.months}; ms[m]={...row,[k]:e.target.value}; saveRent({...rent,months:ms});}}
                          placeholder={ph} style={{ width:'100%',border:'1px solid #e8e8e8',borderRadius:'2px',padding:'4px 6px',fontSize:'12px',fontFamily:'inherit',outline:'none',boxSizing:'border-box' }} />
                      </td>
                    ))}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'travel' && (
        <div style={{ display:'grid', gridTemplateColumns:'180px 1fr', gap:'20px' }}>
          <div>
            <div style={{ fontSize:'11px',fontWeight:'700',letterSpacing:'1px',color:'#888',marginBottom:'8px' }}>TRIPS</div>
            {(travel.trips||[]).map((t,i)=>(
              <div key={i} onClick={()=>setSelTrip(i)}
                style={{ padding:'8px 10px',cursor:'pointer',borderRadius:'3px',marginBottom:'2px',
                  background:selTrip===i?'#111':'transparent',color:selTrip===i?'#fff':'#333',fontSize:'12px' }}>
                {t.destination||`Trip ${i+1}`}
              </div>
            ))}
            <button onClick={()=>{ const l=[...(travel.trips||[]),newTrip()]; saveTravel({trips:l}); setSelTrip(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 Trip
            </button>
          </div>
          {(travel.trips||[]).length > 0 ? (
            <div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px', marginBottom:'16px' }}>
                <div>
                  {[['destination','Destination'],['departure','Departure Date'],['arrival','Arrival Date'],['duration','Duration'],['transport','Transport'],['budget','Budget']].map(([k,l])=>(
                    <div key={k} style={{ marginBottom:'8px' }}>
                      <div style={{ fontSize:'10px',color:'#888',letterSpacing:'1px',marginBottom:'3px' }}>{l.toUpperCase()}</div>
                      <input value={(travel.trips[selTrip]||{})[k]||''} onChange={e=>{const ts=[...travel.trips]; ts[selTrip]={...ts[selTrip],[k]:e.target.value}; saveTravel({trips:ts});}}
                        style={{ width:'100%',border:'1px solid #e0e0e0',borderRadius:'3px',padding:'5px 8px',fontSize:'13px',fontFamily:'inherit',outline:'none',boxSizing:'border-box' }} />
                    </div>
                  ))}
                </div>
                <div>
                  <STSection title="Today's Agenda / Places to Visit">
                    <TA value={(travel.trips[selTrip]||{}).places} onChange={v=>{const ts=[...travel.trips]; ts[selTrip]={...ts[selTrip],places:v}; saveTravel({trips:ts});}} placeholder="Places, activities, sights..." rows={4} />
                  </STSection>
                  <STSection title="Things to Buy">
                    <TA value={(travel.trips[selTrip]||{}).shopping} onChange={v=>{const ts=[...travel.trips]; ts[selTrip]={...ts[selTrip],shopping:v}; saveTravel({trips:ts});}} placeholder="Shopping list..." rows={3} />
                  </STSection>
                  <STSection title="Places to Avoid">
                    <TA value={(travel.trips[selTrip]||{}).avoid} onChange={v=>{const ts=[...travel.trips]; ts[selTrip]={...ts[selTrip],avoid:v}; saveTravel({trips:ts});}} placeholder="..." rows={2} />
                  </STSection>
                </div>
              </div>
              <STSection title="To-Do List">
                <STCheckList items={(travel.trips[selTrip]||{}).todos||[]} count={8} placeholder="Travel task..." onToggle={(i,v)=>{const ts=[...travel.trips]; const t=[...((ts[selTrip].todos)||[])]; if(!t[i]) t[i]={text:'',done:false}; t[i]={...t[i],done:v}; ts[selTrip]={...ts[selTrip],todos:t}; saveTravel({trips:ts});}} onEdit={(i,v)=>{const ts=[...travel.trips]; const t=[...((ts[selTrip].todos)||[])]; if(!t[i]) t[i]={text:'',done:false}; t[i]={...t[i],text:v}; ts[selTrip]={...ts[selTrip],todos:t}; saveTravel({trips:ts});}} />
              </STSection>
              <STSection title="Notes">
                <TA value={(travel.trips[selTrip]||{}).notes} onChange={v=>{const ts=[...travel.trips]; ts[selTrip]={...ts[selTrip],notes:v}; saveTravel({trips:ts});}} placeholder="Trip notes..." rows={3} />
              </STSection>
            </div>
          ) : <div style={{ color:'#bbb',fontSize:'13px',padding:'40px',textAlign:'center' }}>No trips yet. Click "+ New Trip" to add one.</div>}
        </div>
      )}

      {tab === 'projects' && (
        <div style={{ display:'grid', gridTemplateColumns:'180px 1fr', gap:'20px' }}>
          <div>
            <div style={{ fontSize:'11px',fontWeight:'700',letterSpacing:'1px',color:'#888',marginBottom:'8px' }}>PROJECTS</div>
            {(projects.list||[]).map((p,i)=>(
              <div key={i} onClick={()=>setSelProj(i)}
                style={{ padding:'8px 10px',cursor:'pointer',borderRadius:'3px',marginBottom:'2px',
                  background:selProj===i?'#111':'transparent',color:selProj===i?'#fff':'#333',fontSize:'12px' }}>
                {p.title||`Project ${i+1}`}
              </div>
            ))}
            <button onClick={()=>{ const l=[...(projects.list||[]),newProject()]; saveProjects({list:l}); setSelProj(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 Project
            </button>
          </div>
          {(projects.list||[]).length > 0 && (
            <div>
              {[['title','Project Title'],['objective','Objective'],['startDate','Start Date'],['deadline','Deadline'],['completedOn','Completed On']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'8px' }}>
                  <div style={{ fontSize:'10px',color:'#888',letterSpacing:'1px',marginBottom:'3px' }}>{l.toUpperCase()}</div>
                  <input value={(projects.list[selProj]||{})[k]||''} onChange={e=>{const l=[...projects.list]; l[selProj]={...l[selProj],[k]:e.target.value}; saveProjects({list:l});}}
                    style={{ width:'100%',border:'1px solid #e0e0e0',borderRadius:'3px',padding:'6px 8px',fontSize:'13px',fontFamily:'inherit',outline:'none',boxSizing:'border-box' }} />
                </div>
              ))}
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'20px', marginTop:'12px' }}>
                <STSection title="Milestones">
                  <STLineList items={(projects.list[selProj]||{}).milestones||[]} count={4} onChange={v=>{const l=[...projects.list]; l[selProj]={...l[selProj],milestones:v}; saveProjects({list:l});}} placeholder="Milestone..." />
                </STSection>
                <STSection title="Resources & Brainstorm">
                  <TA value={(projects.list[selProj]||{}).resources||''} onChange={v=>{const l=[...projects.list]; l[selProj]={...l[selProj],resources:v}; saveProjects({list:l});}} placeholder="Resources, ideas, links..." rows={4} />
                </STSection>
              </div>
              <STSection title="Action Plan / Tasks">
                <STCheckList items={(projects.list[selProj]||{}).tasks||[]} count={8} placeholder="Task..." onToggle={(i,v)=>{const l=[...projects.list]; const t=[...((l[selProj].tasks)||[])]; if(!t[i]) t[i]={text:'',done:false}; t[i]={...t[i],done:v}; l[selProj]={...l[selProj],tasks:t}; saveProjects({list:l});}} onEdit={(i,v)=>{const l=[...projects.list]; const t=[...((l[selProj].tasks)||[])]; if(!t[i]) t[i]={text:'',done:false}; t[i]={...t[i],text:v}; l[selProj]={...l[selProj],tasks:t}; saveProjects({list:l});}} />
              </STSection>
              <STSection title="Progress">
                <div style={{ display:'flex', gap:'4px', flexWrap:'wrap' }}>
                  {[10,20,30,40,50,60,70,80,90,100].map(p=>(
                    <div key={p} onClick={()=>{const l=[...projects.list]; l[selProj]={...l[selProj],progress:p}; saveProjects({list:l});}}
                      style={{ padding:'4px 8px',borderRadius:'3px',fontSize:'11px',cursor:'pointer',fontWeight:'600',border:'1.5px solid',
                        borderColor:(projects.list[selProj]||{}).progress>=p?'#111':'#e0e0e0',
                        background:(projects.list[selProj]||{}).progress>=p?'#111':'transparent',
                        color:(projects.list[selProj]||{}).progress>=p?'#fff':'#888' }}>{p}%</div>
                  ))}
                </div>
              </STSection>
            </div>
          )}
        </div>
      )}

      {tab === 'career' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'24px' }}>
          <div>
            <STSection title="Career Development">
              <div style={{ marginBottom:'8px' }}>
                <div style={{ fontSize:'10px',color:'#888',marginBottom:'3px' }}>DESIRED POSITION</div>
                <input value={career.position||''} onChange={e=>updCareer('position',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>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'12px' }}>
                {[['skills','Skills to Develop'],['training','Training & Courses'],['requirements','Additional Requirements'],['actions','Action Steps']].map(([k,l])=>(
                  <div key={k}>
                    <div style={{ fontSize:'11px',color:'#888',marginBottom:'4px',letterSpacing:'0.5px' }}>{l}</div>
                    <textarea value={career[k]||''} onChange={e=>updCareer(k,e.target.value)} placeholder="..."
                      style={{ width:'100%',minHeight:'80px',border:'1px solid #e8e8e8',borderRadius:'3px',padding:'6px',fontSize:'12px',fontFamily:'inherit',resize:'vertical',outline:'none',boxSizing:'border-box',color:'#333' }} />
                  </div>
                ))}
              </div>
            </STSection>
            <STSection title="Relationship Goals">
              {[0,1,2,3].map(i=>(
                <div key={i} style={{ marginBottom:'12px',padding:'10px',background:'#fafafa',borderRadius:'3px',border:'1px solid #eee' }}>
                  <div style={{ background:'#ffcdd2',padding:'4px 8px',borderRadius:'2px',fontSize:'11px',fontWeight:'700',marginBottom:'6px' }}>Goal {i+1}</div>
                  <input value={(career[`relGoal${i}`])||''} onChange={e=>updCareer(`relGoal${i}`,e.target.value)}
                    placeholder="Relationship goal..." style={{ width:'100%',border:'none',borderBottom:'1px solid #eee',outline:'none',fontSize:'12px',color:'#333',background:'transparent',fontFamily:'inherit',padding:'2px 0',marginBottom:'6px',boxSizing:'border-box' }} />
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px' }}>
                    <textarea value={(career[`relWhy${i}`])||''} onChange={e=>updCareer(`relWhy${i}`,e.target.value)} placeholder="Why..."
                      style={{ border:'1px solid #eee',borderRadius:'2px',padding:'4px',fontSize:'11px',fontFamily:'inherit',resize:'none',outline:'none',minHeight:'44px',color:'#555' }} />
                    <textarea value={(career[`relSteps${i}`])||''} onChange={e=>updCareer(`relSteps${i}`,e.target.value)} placeholder="Action steps..."
                      style={{ border:'1px solid #eee',borderRadius:'2px',padding:'4px',fontSize:'11px',fontFamily:'inherit',resize:'none',outline:'none',minHeight:'44px',color:'#555' }} />
                  </div>
                </div>
              ))}
            </STSection>
          </div>
          <div>
            <STSection title="Career Goals Timeline">
              {[['shortGoals','Short Term Goals (1 Year)'],['medGoals','Medium Term Goals (2-5 Years)'],['longGoals','Long Term Goals (5+ Years)']].map(([k,l])=>(
                <div key={k} style={{ marginBottom:'16px' }}>
                  <div style={{ fontSize:'12px',fontWeight:'700',color:'#555',marginBottom:'6px' }}>{l}</div>
                  <STLineList items={career[k]||[]} count={4} onChange={v=>updCareer(k,v)} placeholder="Goal..." />
                </div>
              ))}
            </STSection>
            <STSection title="Competitive Analysis">
              <div style={{ overflowX:'auto' }}>
                <table style={{ width:'100%',borderCollapse:'collapse',minWidth:'400px' }}>
                  <thead>
                    <tr style={{ background:'#111',color:'#fff' }}>
                      {['CATEGORY','ME','COMPETITOR 1','COMPETITOR 2'].map(h=><th key={h} style={{ padding:'6px 8px',fontSize:'10px',letterSpacing:'1px',textAlign:'left',whiteSpace:'nowrap' }}>{h}</th>)}
                    </tr>
                  </thead>
                  <tbody>
                    {['Strengths','Weaknesses','Mission','Target Customer','Marketing','Products'].map((row,ri)=>(
                      <tr key={row} style={{ background:ri%2===0?'#fafafa':'#fff',borderBottom:'1px solid #eee' }}>
                        <td style={{ padding:'5px 8px',fontSize:'12px',fontWeight:'500',whiteSpace:'nowrap' }}>{row}</td>
                        {[0,1,2].map(ci=>(
                          <td key={ci} style={{ padding:'3px 5px' }}>
                            <input value={(career[`comp_${row}_${ci}`])||''} onChange={e=>updCareer(`comp_${row}_${ci}`,e.target.value)}
                              style={{ width:'100%',border:'none',outline:'none',fontSize:'11px',color:'#333',background:'transparent',fontFamily:'inherit',borderBottom:'1px solid #f0f0f0',padding:'2px 0' }} />
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </STSection>
          </div>
        </div>
      )}
    </div>
  );
}

window.FinanceTravel = FinanceTravel;