/* Clear Mint — V6 Estate & Legacy Vault. window.PageEstateVault */
(function(){
const I = window.CMIcon;
const { CMC, tintFor, Ring, Chip, PageHead, V6Tabs } = window;
const { G, PU, AM, BL, SL, RD, TEAL, PINK } = CMC;

function Ava({ name, c }){
  const ini=name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase();
  return <span style={{width:36,height:36,flex:'0 0 36px',borderRadius:999,background:c,color:'#fff',fontWeight:800,fontSize:13,display:'inline-flex',alignItems:'center',justifyContent:'center'}}>{ini}</span>;
}

function DocCard({ ic, c, name, desc, updated }){
  return (
    <div className="v6-doc">
      <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between',marginBottom:12}}>
        <Chip ic={ic} color={c} size={44} radius={12}/>
        <span style={{width:22,height:22,borderRadius:999,background:'var(--mint-100)',color:G,display:'inline-flex',alignItems:'center',justifyContent:'center'}}><I.Check size={13}/></span>
      </div>
      <div style={{fontWeight:800,fontSize:14.5,color:'var(--ink-900)',marginBottom:5}}>{name}</div>
      <div style={{fontSize:12.5,color:'var(--ink-500)',lineHeight:1.5}}>{desc}</div>
      <div className="v6-doc-foot">Updated {updated}</div>
    </div>
  );
}

function PageEstateVault(){
  const [tab,setTab]=React.useState('Overview');
  const docs=[
    { ic:<I.File size={20}/>, c:G, name:'Last Will & Testament', desc:'My last will and testament outlining asset distribution and guardianship wishes.', updated:'May 12, 2024' },
    { ic:<I.Shield size={20}/>, c:BL, name:'Power of Attorney', desc:'Grants trusted person authority to act on my behalf for financial and legal matters.', updated:'Apr 28, 2024' },
    { ic:<I.Heart size={20}/>, c:PU, name:'Personal Directive', desc:"My wishes for medical care and treatment if I'm unable to make decisions.", updated:'Apr 15, 2024' },
    { ic:<I.Insurance size={20}/>, c:AM, name:'Insurance Policies', desc:'Life, health, and disability insurance policy information and beneficiaries.', updated:'May 5, 2024' },
    { ic:<I.House size={20}/>, c:RD, name:'Property Deeds', desc:'Real estate ownership documents and property information.', updated:'Apr 30, 2024' },
    { ic:<I.Bank size={20}/>, c:TEAL, name:'Investment Accounts', desc:'Investment account details and financial institution information.', updated:'May 1, 2024' },
  ];
  const contacts=[
    { name:'Sarah Thompson', role:'Spouse', tag:'Primary Contact', tc:G, phone:'(416) 555-0123', c:G },
    { name:'Michael Brown', role:'Brother', tag:'Backup Contact', tc:BL, phone:'(416) 555-0456', c:BL },
    { name:'Jennifer Wilson', role:'Lawyer', tag:'Legal Advisor', tc:PU, phone:null, c:PU },
    { name:'David Chen', role:'Financial Advisor', tag:'Financial Advisor', tc:AM, phone:'(416) 555-0321', c:AM },
  ];
  const reminders=[
    { ic:<I.File size={15}/>, c:G, t:'Review Will & Testament', d:'Due in 6 months', date:'Nov 18, 2024' },
    { ic:<I.User size={15}/>, c:BL, t:'Update Beneficiaries', d:'Due in 8 months', date:'Jan 18, 2025' },
    { ic:<I.Insurance size={15}/>, c:TEAL, t:'Review Insurance Policies', d:'Due in 10 months', date:'Mar 18, 2025' },
    { ic:<I.Shield size={15}/>, c:AM, t:'Update Power of Attorney', d:'Due in 1 year', date:'May 18, 2025' },
  ];
  const activity=[
    { t:'Document uploaded: Insurance Policies', when:'May 18, 2024 \u00b7 2:45 PM', c:G, ic:<I.File size={14}/> },
    { t:'Trusted contact added: David Chen', when:'May 16, 2024 \u00b7 10:30 AM', c:BL, ic:<I.User size={14}/> },
    { t:'Document updated: Power of Attorney', when:'May 15, 2024 \u00b7 3:20 PM', c:PU, ic:<I.Shield size={14}/> },
    { t:'Beneficiary updated: Investment Accounts', when:'May 14, 2024 \u00b7 11:15 AM', c:AM, ic:<I.Heart size={14}/> },
  ];
  const summary=[
    { ic:<I.User size={18}/>, c:G, l:'Executor', v:'Sarah Thompson', s:'Spouse' },
    { ic:<I.User size={18}/>, c:PU, l:'Guardians', v:'Sarah Thompson & Michael Brown', s:"Children's Guardians" },
    { ic:<I.Heart size={18}/>, c:BL, l:'Primary Beneficiary', v:'Sarah Thompson', s:'Spouse' },
    { ic:<I.User size={18}/>, c:AM, l:'Contingent Beneficiaries', v:'2 Beneficiaries', s:'Family Members' },
    { ic:<I.Pie size={18}/>, c:G, l:'Estate Distribution', v:'70% / 30%', s:'Spouse / Children' },
  ];
  return (
    <div>
      <PageHead title="Estate & Legacy Vault" sub="Protect what matters most. Plan today, secure tomorrow."
        badge={<span className="v6-pillbadge"><I.Shield size={14}/>Your vault is 82% complete</span>}
        actions={<>
          <button className="v6-btn v6-btn-primary" style={{background:'var(--emerald)'}}><I.Plus size={15}/>Add Document</button>
          <button className="v6-btn v6-btn-icon"><I.Dots size={16}/></button>
        </>}/>
      <V6Tabs tabs={['Overview','Documents','Trusted Contacts','Beneficiaries','Wishes & Instructions','Digital Assets','Permissions']} value={tab} onChange={setTab}/>

      <div className="v6-main-side" style={{gridTemplateColumns:'1fr 320px'}}>
        {/* LEFT */}
        <div style={{display:'flex',flexDirection:'column',gap:20}}>
          {/* KPIs */}
          <div className="cm-grid-4">
            <div className="cm-card cm-card-pad">
              <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:10}}>
                <Ring pct={82} size={66} stroke={8} color={G}/>
                <div><div style={{fontSize:12.5,fontWeight:700,color:'var(--ink-900)'}}>Vault Completion</div>
                  <div style={{fontSize:12,color:'var(--ink-500)',marginTop:3,lineHeight:1.4}}>Great progress! Keep completing your vault to protect your legacy.</div></div>
              </div>
              <div className="v6-link">View checklist <I.ChevR size={13}/></div>
            </div>
            {[
              { ic:<I.File size={18}/>, c:G, l:'Documents Stored', v:'24', f:'Important documents securely stored', link:'View all documents' },
              { ic:<I.User size={18}/>, c:PU, l:'Trusted Contacts', v:'4', f:'People you trust can help your family', link:'View contacts' },
              { ic:<I.Calendar size={18}/>, c:BL, l:'Last Updated', v:'May 18, 2024', vsmall:true, f:'2 days ago', link:'View activity' },
            ].map((k,i)=>(
              <div className="cm-card cm-card-pad" key={i} style={{display:'flex',flexDirection:'column'}}>
                <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
                  <Chip ic={k.ic} color={k.c} size={40} radius={11}/>
                  <span style={{fontSize:12.5,fontWeight:700,color:'var(--ink-500)'}}>{k.l}</span></div>
                <div className="num" style={{fontSize:k.vsmall?19:26,fontWeight:800,color:'var(--ink-900)',marginBottom:4}}>{k.v}</div>
                <div style={{fontSize:12,color:k.vsmall?AM:'var(--ink-400)',fontWeight:k.vsmall?700:500,marginBottom:10,flex:1,lineHeight:1.4}}>{k.f}</div>
                <div className="v6-link">{k.link} <I.ChevR size={13}/></div>
              </div>
            ))}
          </div>

          {/* documents */}
          <div className="cm-card cm-card-pad">
            <div className="v6-cardhead"><div className="v6-cardtitle">Important Documents</div>
              <span className="v6-link">View all documents <I.ChevR size={13}/></span></div>
            <div className="v6-grid-3">{docs.map((d,i)=><DocCard key={i} {...d}/>)}</div>
          </div>

          {/* estate plan summary */}
          <div className="cm-card cm-card-pad">
            <div className="v6-cardhead"><div className="v6-cardtitle">Estate Plan Summary</div>
              <span className="v6-link">Review full plan <I.ChevR size={13}/></span></div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:14}}>
              {summary.map((s,i)=>(
                <div key={i} style={{display:'flex',gap:10,alignItems:'flex-start',paddingRight:14,borderRight:i<4?'1px solid var(--line)':'none'}}>
                  <Chip ic={s.ic} color={s.c} size={36} radius={10}/>
                  <div style={{minWidth:0}}><div style={{fontSize:11.5,fontWeight:700,color:'var(--ink-500)'}}>{s.l}</div>
                    <div style={{fontSize:13,fontWeight:700,color:'var(--ink-900)',margin:'3px 0 1px',lineHeight:1.3}}>{s.v}</div>
                    <div style={{fontSize:11.5,color:'var(--ink-400)'}}>{s.s}</div></div>
                </div>
              ))}
            </div>
          </div>

          <div className="v6-banner" style={{justifyContent:'space-between'}}>
            <div style={{display:'flex',alignItems:'center',gap:14}}>
              <Chip ic={<I.Shield size={18}/>} color={G} size={42} radius={12}/>
              <div><div style={{fontWeight:800,fontSize:14.5,color:'var(--ink-900)'}}>Your family's future is protected</div>
                <div style={{fontSize:13,color:'var(--ink-500)',marginTop:2}}>Take time to review your documents and keep them up to date.</div></div>
            </div>
            <button className="v6-btn v6-btn-primary" style={{background:'var(--emerald)'}}>Review Checklist <I.ChevR size={15}/></button>
          </div>

          <div style={{textAlign:'center',fontSize:12,color:'var(--ink-400)',fontWeight:600,display:'flex',gap:8,justifyContent:'center',alignItems:'center'}}>
            <I.Lock size={13}/> Bank-level security &nbsp;·&nbsp; Your data is encrypted and never shared
          </div>
        </div>

        {/* RIGHT */}
        <div style={{display:'flex',flexDirection:'column',gap:20}}>
          <div className="cm-card cm-card-pad">
            <div className="v6-cardhead"><div className="v6-cardtitle">Important Contacts</div>
              <span className="v6-link">Manage all <I.ChevR size={13}/></span></div>
            {contacts.map((p,i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap:11,padding:'11px 0',borderBottom:i<3?'1px solid var(--line)':'none'}}>
                <Ava name={p.name} c={p.c}/>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:'flex',alignItems:'center',gap:7,flexWrap:'wrap'}}>
                    <span style={{fontWeight:700,fontSize:13,color:'var(--ink-900)'}}>{p.name}</span>
                    <span className="cm-pill" style={{background:tintFor(p.tc),color:p.tc,fontSize:10}}>{p.tag}</span></div>
                  <div style={{fontSize:11.5,color:'var(--ink-400)',marginTop:1}}>{p.role}{p.phone?' \u00b7 '+p.phone:''}</div>
                </div>
                <button className="v6-btn v6-btn-icon" style={{width:32,height:32}}><I.Bell size={14}/></button>
              </div>
            ))}
          </div>

          <div className="cm-card cm-card-pad">
            <div className="v6-cardhead"><div className="v6-cardtitle">Upcoming Reminders</div>
              <span className="v6-link">View calendar <I.ChevR size={13}/></span></div>
            {reminders.map((r,i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap:11,padding:'10px 0',borderBottom:i<3?'1px solid var(--line)':'none'}}>
                <Chip ic={r.ic} color={r.c} size={30} radius={9}/>
                <div style={{flex:1,minWidth:0}}><div style={{fontWeight:700,fontSize:12.5,color:'var(--ink-900)'}}>{r.t}</div>
                  <div style={{fontSize:11.5,color:'var(--ink-400)',marginTop:1}}>{r.d}</div></div>
                <span className="num" style={{fontSize:11.5,color:'var(--ink-500)',fontWeight:600}}>{r.date}</span>
              </div>
            ))}
          </div>

          <div className="cm-card cm-card-pad">
            <div className="v6-cardhead"><div className="v6-cardtitle">Recent Activity</div>
              <span className="v6-link">View all activity <I.ChevR size={13}/></span></div>
            {activity.map((a,i)=>(
              <div key={i} style={{display:'flex',alignItems:'flex-start',gap:11,padding:'10px 0',borderBottom:i<3?'1px solid var(--line)':'none'}}>
                <Chip ic={a.ic} color={a.c} size={30} radius={9}/>
                <div style={{minWidth:0}}><div style={{fontWeight:600,fontSize:12.5,color:'var(--ink-900)',lineHeight:1.4}}>{a.t}</div>
                  <div className="num" style={{fontSize:11.5,color:'var(--ink-400)',marginTop:2}}>{a.when}</div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
window.PageEstateVault = PageEstateVault;
})();