/* ─── Claim Center — new section ─────────────────────────────────────────────
   All incoming review claims in one queue: filter tiles, search, bulk deliver,
   per-claim detail drawer. Demo data invented. */

const CLAIMS_V2 = [
  { id:1, date:'02/06/2026', campaign:'SPAIN',       customer:'HUSAIN HAVELIWALA', product:'Spain Testing',      order:'11',    mkt:'amazon', country:'ES', promo:'Warranty', promoIcon:'shield', stars:5, delivered:false, review:'Great product, works exactly as described. The warranty registration was quick and easy.' },
  { id:2, date:'02/06/2026', campaign:'SPAIN',       customer:'HUSAIN HAVELIWALA', product:'Spain Testing',      order:'11',    mkt:'amazon', country:'ES', promo:'Warranty', promoIcon:'shield', stars:4, delivered:false, review:'Good quality overall. Shipping took a bit longer than expected but the product is solid.' },
  { id:3, date:'31/05/2026', campaign:'SPAIN',       customer:'swwew',             product:'Spain Testing',      order:'99',    mkt:'amazon', country:'ES', promo:'Warranty', promoIcon:'shield', stars:3, delivered:false, review:'Average experience. Product is okay for the price.' },
  { id:4, date:'30/05/2026', campaign:'SPAIN',       customer:'Screenshot test',   product:'Spain Testing',      order:'123',   mkt:'amazon', country:'ES', promo:'Warranty', promoIcon:'shield', stars:5, delivered:false, hasShot:true, review:'Excellent! Attached my review screenshot. Love the build quality.' },
  { id:5, date:'25/05/2026', campaign:'SPAIN',       customer:'HUSAIN HAVELIWALA', product:'Spain Testing',      order:'87578', mkt:'amazon', country:'ES', promo:'Warranty', promoIcon:'shield', stars:5, delivered:true,  review:'Second purchase, still impressed. Warranty already delivered — thanks!' },
  { id:6, date:'13/12/2025', campaign:'SPAIN',       customer:'Hgv',               product:'Spain Testing',      order:'4377',  mkt:'amazon', country:'ES', promo:'Warranty', promoIcon:'shield', stars:5, delivered:false, review:'Very happy with this purchase.' },
  { id:7, date:'10/11/2025', campaign:'SPAIN',       customer:'767',               product:'Spain Testing',      order:'I6789', mkt:'amazon', country:'ES', promo:'Warranty', promoIcon:'shield', stars:5, delivered:false, review:'Fantastic quality, would recommend to anyone.' },
  { id:8, date:'26/08/2025', campaign:'SPAIN',       customer:'Screenshot test',   product:'Spain Testing',      order:'6477',  mkt:'amazon', country:'ES', promo:'Warranty', promoIcon:'shield', stars:5, delivered:false, hasShot:true, review:'Works perfectly. Screenshot of my review attached.' },
  { id:9, date:'30/06/2025', campaign:'usa testing', customer:'Screenshot test',   product:'USA testing',        order:'1',     mkt:'amazon', country:'US', promo:'Giveaway', promoIcon:'gift',   stars:5, delivered:false, hasShot:true, review:'Amazing giveaway experience, super smooth claim process!' },
];

const StarsRow = ({ n, size='text-[13px]' }) => (
  <span className="inline-flex items-center gap-0.5">{[1,2,3,4,5].map(s=><span key={s} className={size} style={{color:s<=n?'#F59E0B':'#E2E8F0'}}>★</span>)}</span>
);
const DeliveryPill = ({ delivered, rejected }) => rejected
  ? <span className="inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full bg-rose-50 text-rose-700 whitespace-nowrap"><span className="w-1.5 h-1.5 rounded-full bg-rose-500"></span>Rejected</span>
  : delivered
  ? <span className="inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full bg-green-50 text-green-700 whitespace-nowrap"><span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>Delivered</span>
  : <span className="inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 whitespace-nowrap"><span className="w-1.5 h-1.5 rounded-full bg-amber-500"></span>Pending</span>;
const CountryChip = ({ c }) => <span className="inline-flex text-[10px] font-bold px-1.5 py-0.5 rounded bg-surface-input text-ink-muted">{c}</span>;
const CLAIM_COLS = '16px 84px minmax(90px,.8fr) minmax(150px,1.1fr) minmax(130px,1fr) 70px 56px 44px minmax(110px,.9fr) 72px 128px 76px';

const EMAIL_TEMPLATES = {
  'Reward delivered': c => ({ subject:`Your ${c.promo.toLowerCase()} reward is here 🎉 — order #${c.order}`,
    body:`Hi ${c.customer.split(' ')[0]},\n\nGreat news — your claim for order #${c.order} (${c.product}) has been approved and your ${c.promo.toLowerCase()} reward is attached below.\n\nThanks for taking the time to share your feedback — it genuinely helps.\n\n— The ${c.campaign} team` }),
  'Claim received': c => ({ subject:`We've received your claim — order #${c.order}`,
    body:`Hi ${c.customer.split(' ')[0]},\n\nJust confirming we've received your claim for order #${c.order} (${c.product}). We review every claim personally — you'll hear from us within 1 business day.\n\n— The ${c.campaign} team` }),
  'Need more info': c => ({ subject:`Quick question about your claim #${c.order}`,
    body:`Hi ${c.customer.split(' ')[0]},\n\nThanks for your claim for ${c.product}. Before we can send your ${c.promo.toLowerCase()}, could you confirm your order number matches your marketplace receipt?\n\nJust reply to this email — we'll process it right away.\n\n— The ${c.campaign} team` }),
  'Custom': () => ({ subject:'', body:'' })
};

function EmailModal({ claim, onClose, onSent }) {
  const [tpl, setTpl] = React.useState('Reward delivered');
  const init = EMAIL_TEMPLATES[tpl](claim);
  const [subject, setSubject] = React.useState(init.subject);
  const [body, setBody] = React.useState(init.body);
  const email = claim.customer.split(' ')[0].toLowerCase().replace(/[^a-z]/g,'')||'customer';
  const pick = t => { setTpl(t); const v = EMAIL_TEMPLATES[t](claim); setSubject(v.subject); setBody(v.body); };
  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-ink/40 p-4" onClick={onClose}>
      <div className="w-full max-w-lg bg-white rounded-2xl shadow-pop overflow-hidden max-h-[calc(100vh-32px)] flex flex-col" onClick={e=>e.stopPropagation()}>
        <div className="px-6 py-4 border-b border-line flex items-center justify-between shrink-0">
          <div>
            <p className="text-[15px] font-extrabold text-ink">Email customer</p>
            <p className="text-[12px] text-ink-muted mt-0.5">Sent from your brand · replies land in your inbox</p>
          </div>
          <button onClick={onClose} className="w-9 h-9 rounded-full text-ink-soft hover:bg-surface-input hover:text-ink flex items-center justify-center transition-colors">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M6 6l12 12M18 6L6 18" strokeLinecap="round"/></svg>
          </button>
        </div>
        <div className="p-6 space-y-4 overflow-y-auto flex-1">
          <div className="flex items-center gap-2 flex-wrap">
            {Object.keys(EMAIL_TEMPLATES).map(t => (
              <button key={t} onClick={()=>pick(t)}
                className={`h-8 px-3 rounded-full text-[12px] font-bold transition-colors ${tpl===t?'bg-brand text-white':'bg-surface-input text-ink-muted hover:text-ink'}`}>{t}</button>
            ))}
          </div>
          <div className="flex items-center gap-2 text-[13px]">
            <span className="text-[11px] font-bold uppercase tracking-wider text-ink-muted w-14 shrink-0">To</span>
            <span className="inline-flex items-center gap-2 bg-surface-input rounded-full pl-1 pr-3 py-1 font-semibold text-ink">
              <span className="w-6 h-6 rounded-full text-white text-[10px] font-bold flex items-center justify-center" style={{background:'linear-gradient(135deg,var(--accent),var(--accent-dark))'}}>{claim.customer[0]}</span>
              {claim.customer} · {email}•••@gmail.com
            </span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-[11px] font-bold uppercase tracking-wider text-ink-muted w-14 shrink-0">Subject</span>
            <input value={subject} onChange={e=>setSubject(e.target.value)} placeholder="Subject…"
              className="flex-1 h-10 bg-white border border-line rounded-xl px-3 text-[13px] font-semibold text-ink outline-none focus:ring-2 focus:ring-brand-200"/>
          </div>
          <textarea value={body} onChange={e=>setBody(e.target.value)} rows="8" placeholder="Write your message…"
            className="w-full bg-white border border-line rounded-xl px-3.5 py-3 text-[13px] leading-relaxed text-ink outline-none focus:ring-2 focus:ring-brand-200 resize-none"/>
          {tpl==='Reward delivered' && !claim.rejected && (
            <div className="flex items-center gap-2.5 rounded-xl bg-brand-50 border border-brand-100 px-3.5 py-2.5">
              <PromoIcon kind={claim.promoIcon}/>
              <p className="text-[12px] font-semibold text-ink flex-1">The {claim.promo.toLowerCase()} reward block (code / details) is attached automatically.</p>
            </div>
          )}
        </div>
        <div className="px-6 py-4 border-t border-line flex items-center gap-2 shrink-0">
          <BtnPrimary onClick={()=>{onSent(claim); onClose();}}>Send email</BtnPrimary>
          <BtnGhost onClick={onClose}>Cancel</BtnGhost>
          <span className="ml-auto text-[11.5px] text-ink-soft">Preview matches your brand template</span>
        </div>
      </div>
    </div>
  );
}

function ClaimDrawer({ claim, onClose, onDeliver, onReject, onEmail }) {
  return (
    <div className="fixed inset-0 z-50 flex justify-end bg-ink/40" onClick={onClose}>
      <div className="w-full max-w-md h-full bg-white shadow-pop overflow-y-auto" onClick={e=>e.stopPropagation()}>
        <div className="px-6 py-5 border-b border-line flex items-center justify-between sticky top-0 bg-white z-10">
          <div>
            <p className="text-[15px] font-extrabold text-ink">Claim #{claim.order}</p>
            <p className="text-[12px] text-ink-muted mt-0.5">{claim.date} · {claim.campaign}</p>
          </div>
          <button onClick={onClose} className="w-9 h-9 rounded-full text-ink-soft hover:bg-surface-input hover:text-ink flex items-center justify-center transition-colors">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M6 6l12 12M18 6L6 18" strokeLinecap="round"/></svg>
          </button>
        </div>
        <div className="p-6 space-y-5">
          <div className="flex items-center gap-3">
            <span className="w-11 h-11 rounded-full text-white font-bold text-[15px] flex items-center justify-center shrink-0"
                  style={{background:'linear-gradient(135deg,var(--accent),var(--accent-dark))'}}>{claim.customer[0]}</span>
            <div className="min-w-0">
              <p className="font-bold text-[14px] text-ink truncate">{claim.customer}</p>
              <p className="text-[12px] text-ink-muted">{claim.product} · <CountryChip c={claim.country}/></p>
            </div>
          </div>
          <div className="rounded-2xl bg-surface-subtle border border-line/70 p-4">
            <div className="flex items-center justify-between">
              <StarsRow n={claim.stars} size="text-[16px]"/>
              <MarketplaceLogos list={[claim.mkt]}/>
            </div>
            <p className="text-[13px] text-ink leading-relaxed mt-3">"{claim.review}"</p>
          </div>
          {claim.hasShot && (
            <div>
              <p className="text-[11px] font-bold uppercase tracking-wider text-ink-muted mb-2">Review screenshot</p>
              <div className="rounded-xl border border-line h-36 flex items-center justify-center"
                   style={{background:'repeating-linear-gradient(45deg,#FAF9F6,#FAF9F6 10px,#F3F2EE 10px,#F3F2EE 20px)'}}>
                <span className="text-[11px] font-mono text-ink-soft bg-white/80 px-2 py-1 rounded">customer screenshot</span>
              </div>
            </div>
          )}
          <div>
            <p className="text-[11px] font-bold uppercase tracking-wider text-ink-muted mb-2">Promotion to deliver</p>
            <div className="rounded-2xl border border-line p-4 flex items-center gap-3">
              <span className="w-10 h-10 rounded-xl bg-surface-input flex items-center justify-center shrink-0"><PromoIcon kind={claim.promoIcon}/></span>
              <div className="flex-1 min-w-0">
                <p className="font-bold text-[13.5px] text-ink">{claim.promo}</p>
                <p className="text-[12px] text-ink-muted mt-0.5">From campaign "{claim.campaign}"</p>
              </div>
              <DeliveryPill delivered={claim.delivered} rejected={claim.rejected}/>
            </div>
          </div>
        </div>
        <div className="px-6 py-4 border-t border-line sticky bottom-0 bg-white flex gap-2">
          <button onClick={()=>onEmail(claim)} title="Email customer"
            className="h-11 px-4 rounded-full text-[13px] font-bold bg-surface-input text-ink hover:bg-brand-50 hover:text-brand transition-colors whitespace-nowrap inline-flex items-center gap-1.5">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M2 7l10 7L22 7"/></svg>
            Email
          </button>
          {(claim.delivered || claim.rejected)
            ? <BtnGhost onClick={onClose}>Close</BtnGhost>
            : <>
                <BtnPrimary onClick={()=>{onDeliver(claim.id); onClose();}}>Deliver promotion</BtnPrimary>
                <button onClick={()=>{onReject(claim.id); onClose();}}
                  className="h-11 px-4 rounded-full text-[13px] font-bold bg-rose-50 text-rose-600 hover:bg-rose-100 transition-colors whitespace-nowrap">Reject</button>
                <BtnGhost onClick={onClose}>Later</BtnGhost>
              </>}
        </div>
      </div>
    </div>
  );
}

function ClaimCenter({ onNav }) {
  const [deliveredIds, setDelivered] = React.useState(CLAIMS_V2.filter(c=>c.delivered).map(c=>c.id));
  const [rejectedIds, setRejected] = React.useState([]);
  const [filter, setFilter]   = React.useState('pending');   // all | pending | delivered | rejected
  const [query, setQuery]     = React.useState('');
  const [selected, setSelect] = React.useState([]);
  const [open, setOpen]       = React.useState(null);
  const [mailTo, setMailTo]   = React.useState(null);
  const [toast, setToast]     = React.useState('');
  const say = m => { setToast(m); clearTimeout(say._t); say._t = setTimeout(()=>setToast(''), 3200); };
  const [fCamp, setFCamp]   = React.useState('All campaigns');
  const [fPromo, setFPromo] = React.useState('All promotions');
  const [fStars, setFStars] = React.useState('All ratings');
  const [fMkt, setFMkt]     = React.useState('All marketplaces');
  const [fProc, setFProc]   = React.useState('Any status');
  const campaigns = ['All campaigns', ...new Set(CLAIMS_V2.map(c=>c.campaign))];
  const promos    = ['All promotions', ...new Set(CLAIMS_V2.map(c=>c.promo))];
  const markets   = ['All marketplaces', ...new Set(CLAIMS_V2.map(c=>c.mkt))];
  const withState = CLAIMS_V2.map(c => ({...c, delivered: deliveredIds.includes(c.id), rejected: rejectedIds.includes(c.id)}));
  const rows = withState
    .filter(c => (c.customer+' '+c.order+' '+c.campaign).toLowerCase().includes(query.toLowerCase()))
    .filter(c => fCamp==='All campaigns' || c.campaign===fCamp)
    .filter(c => fPromo==='All promotions' || c.promo===fPromo)
    .filter(c => fStars==='All ratings' || c.stars===parseInt(fStars))
    .filter(c => fMkt==='All marketplaces' || c.mkt===fMkt)
    .filter(c => fProc==='Any status' || (fProc==='Pending' ? (!c.delivered && !c.rejected) : fProc==='Delivered' ? (c.delivered && !c.rejected) : c.rejected))
    .filter(c => filter==='all' ? true : filter==='pending' ? (!c.delivered && !c.rejected) : filter==='rejected' ? c.rejected : c.delivered && !c.rejected);
  const pending = withState.filter(c=>!c.delivered && !c.rejected).length;
  const rejectedN = withState.filter(c=>c.rejected).length;
  const avg = (withState.reduce((a,c)=>a+c.stars,0)/withState.length).toFixed(1);
  const deliver = ids => { setDelivered(d => [...new Set([...d, ...ids])]); setSelect([]); say(ids.length>1?`${ids.length} promotions delivered — confirmation emails sent`:'Promotion delivered — confirmation email sent to customer'); };
  const reject = ids => { setRejected(r => [...new Set([...r, ...ids])]); setSelect(s => s.filter(x=>!ids.includes(x))); };
  const toggleSel = id => setSelect(s => s.includes(id) ? s.filter(x=>x!==id) : [...s,id]);
  const pendingRowIds = rows.filter(c=>!c.delivered && !c.rejected).map(c=>c.id);
  return (
    <>
      <PageHeader title="Claim Center" action={
        selected.length > 0
          ? <BtnPrimary onClick={()=>deliver(selected)}>Deliver {selected.length} selected</BtnPrimary>
          : <BtnGhost>Export CSV</BtnGhost>
      }/>
      <div className="px-7 py-6 space-y-5">
        <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
          <StatTileV2 label="All claims" value={withState.length} sub="all time" active={filter==='all'} onClick={()=>setFilter('all')}/>
          <StatTileV2 label="Pending delivery" value={pending} sub="promotions to send" active={filter==='pending'} onClick={()=>setFilter('pending')}/>
          <StatTileV2 label="Delivered" value={withState.length - pending - rejectedN} sub="promotions sent" active={filter==='delivered'} onClick={()=>setFilter('delivered')}/>
          <StatTileV2 label="Rejected" value={rejectedN} sub="claims declined" active={filter==='rejected'} onClick={()=>setFilter('rejected')}/>
          <StatTileV2 label="Avg rating" value={avg + ' ★'} sub="across all claims" onClick={()=>{}}/>
        </div>
        <div className="flex flex-wrap items-center gap-3">
          <SearchInput placeholder="Search by customer, order or campaign" value={query} onChange={e=>setQuery(e.target.value)}/>
          {[[fCamp,setFCamp,campaigns],[fPromo,setFPromo,promos],[fStars,setFStars,['All ratings','5','4','3','2','1']],[fMkt,setFMkt,markets],[fProc,setFProc,['Any status','Pending','Delivered','Rejected']]].map(([val,set,opts],i)=>(
            <select key={i} value={val} onChange={e=>set(e.target.value)}
              className="h-11 bg-white border border-line rounded-xl px-3 text-[12.5px] font-semibold text-ink-muted outline-none focus:ring-2 focus:ring-brand-200 cursor-pointer">
              {opts.map(o=><option key={o} value={o}>{i===2 && o!=='All ratings' ? o+' ★' : i===3 && o!=='All marketplaces' ? o[0].toUpperCase()+o.slice(1) : o}</option>)}
            </select>
          ))}
          {(fCamp!=='All campaigns'||fPromo!=='All promotions'||fStars!=='All ratings'||fMkt!=='All marketplaces'||fProc!=='Any status') && (
            <button onClick={()=>{setFCamp('All campaigns');setFPromo('All promotions');setFStars('All ratings');setFMkt('All marketplaces');setFProc('Any status');}}
              className="text-[12.5px] font-bold text-rose-500 hover:opacity-80">Clear filters</button>
          )}
          {pendingRowIds.length > 1 && (
            <button onClick={()=>setSelect(selected.length===pendingRowIds.length ? [] : pendingRowIds)}
              className="text-[12.5px] font-bold acc-text hover:opacity-80">
              {selected.length===pendingRowIds.length ? 'Clear selection' : `Select all pending (${pendingRowIds.length})`}
            </button>
          )}
        </div>
        {rows.length === 0 ? (
          <div className="bg-white rounded-2xl border border-line shadow-soft py-16 text-center">
            <p className="text-[15px] font-bold text-ink">{filter==='pending' ? 'All caught up!' : 'No claims match'}</p>
            <p className="text-[13px] text-ink-muted mt-1">{filter==='pending' ? 'Every claimed promotion has been delivered.' : 'Try a different search or filter.'}</p>
          </div>
        ) : (
          <Card className="overflow-hidden">
            <div className="overflow-x-auto">
            <div className="min-w-[1100px]">
            <div className="grid items-center gap-3 px-5 py-3 bg-surface-subtle text-[11px] font-semibold uppercase tracking-wider text-ink-muted" style={{gridTemplateColumns:CLAIM_COLS}}>
              <span></span><span>Claim date</span><span>Campaign</span><span>Customer</span><span>Product</span><span>Order no.</span><span>Mkt</span><span>Ctry</span><span>Promotion</span><span>Feedback</span><span>Processed</span><span className="text-right">Action</span>
            </div>
            <div className="divide-y divide-gray-100">
            {rows.map(c => (
              <div key={c.id} className="grid items-center gap-3 px-5 py-3.5 hover:bg-surface-subtle transition-colors" style={{gridTemplateColumns:CLAIM_COLS}}>
                {!c.delivered && !c.rejected
                  ? <input type="checkbox" checked={selected.includes(c.id)} onChange={()=>toggleSel(c.id)}
                      className="w-4 h-4 rounded accent-[var(--accent)] cursor-pointer"/>
                  : <span></span>}
                <span className="text-[12.5px] text-ink-muted whitespace-nowrap">{c.date}</span>
                <span className="text-[12.5px] font-semibold text-ink truncate">{c.campaign}</span>
                <button onClick={()=>setOpen(c.id)} className="text-left min-w-0">
                  <span className="flex items-center gap-2">
                    <span className="w-7 h-7 rounded-full text-white text-[10.5px] font-bold flex items-center justify-center shrink-0"
                          style={{background:`linear-gradient(135deg, hsl(${(c.id*53+40)%360},55%,58%), hsl(${(c.id*53+90)%360},50%,44%))`}}>{c.customer[0]}</span>
                    <span className="min-w-0">
                      <span className="block text-[12.5px] font-bold acc-text hover:underline truncate">{c.customer}</span>
                      {c.hasShot && <span className="block text-[10.5px] text-brand font-bold">📎 screenshot</span>}
                    </span>
                  </span>
                </button>
                <span className="flex items-center gap-2 min-w-0">
                  <span className="w-7 h-7 rounded-lg shrink-0" style={{background:`linear-gradient(135deg, hsl(${(c.id*37+120)%360},70%,74%), hsl(${(c.id*37+160)%360},60%,52%))`}}></span>
                  <span className="text-[12px] text-ink-muted truncate">{c.product}</span>
                </span>
                <span className="text-[12.5px] font-semibold text-ink whitespace-nowrap">{c.order}</span>
                <span><MarketplaceLogos list={[c.mkt]}/></span>
                <span><CountryChip c={c.country}/></span>
                <span className="flex items-center gap-1.5 text-[11.5px] font-semibold text-ink-muted min-w-0"><PromoIcon kind={c.promoIcon}/><span className="truncate">{c.promo}</span></span>
                <span className="inline-flex items-center gap-1 text-[12.5px] font-bold text-ink whitespace-nowrap">{c.stars}.0 <span style={{color:'#F59E0B'}}>★</span></span>
                <span>{(c.delivered || c.rejected)
                  ? <DeliveryPill delivered={c.delivered} rejected={c.rejected}/>
                  : <span className="inline-flex items-center gap-1">
                      <button onClick={()=>deliver([c.id])}
                        className="h-7 rounded-lg px-2.5 text-[11px] font-bold bg-brand-50 text-brand hover:bg-brand hover:text-white transition-colors whitespace-nowrap">Deliver</button>
                      <button onClick={()=>reject([c.id])} title="Reject claim"
                        className="h-7 rounded-lg px-2 text-[11px] font-bold bg-rose-50 text-rose-600 hover:bg-rose-500 hover:text-white transition-colors whitespace-nowrap">Reject</button>
                    </span>}
                </span>
                <span className="flex items-center gap-1 justify-end">
                  <button onClick={()=>setOpen(c.id)} title="View claim"
                    className="w-8 h-8 rounded-lg acc-bg-soft acc-text hover:opacity-80 flex items-center justify-center transition-opacity">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>
                  </button>
                  <button title="Delete"
                    className="w-8 h-8 rounded-lg text-ink-soft hover:bg-rose-50 hover:text-rose-600 flex items-center justify-center transition-colors">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                  </button>
                </span>
              </div>
            ))}
            </div>
            </div>
            </div>
          </Card>
        )}
        {rows.length > 0 && <p className="text-[12px] text-ink-soft">Showing {rows.length} of {withState.length} claims</p>}
        {open !== null && (
          <ClaimDrawer claim={withState.find(c=>c.id===open)} onClose={()=>setOpen(null)} onDeliver={id=>deliver([id])} onReject={id=>reject([id])} onEmail={c=>{setMailTo(c); setOpen(null);}}/>
        )}
        {mailTo !== null && (
          <EmailModal claim={mailTo} onClose={()=>setMailTo(null)} onSent={c=>say(`Email sent to ${c.customer.split(' ')[0]} ✓`)}/>
        )}
        {toast && (
          <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[70] bg-ink text-white text-[13px] font-bold px-5 py-3 rounded-full shadow-pop flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-green-400"></span>{toast}
          </div>
        )}
      </div>
    </>
  );
}

window.ClaimCenter = ClaimCenter;