/* ─── Seller Panel — list-style screens
   Dashboard, Products list, Promotions list, Campaigns list, Customers list. */

/* ── DASHBOARD ─────────────────────────────────────────────────────────────── */
function Dashboard({ onNav }) {
  const stats = [
    { label:'Today',     date:'30 May 2026',      grad:['#0E9AD6','#0A78AE'], soft:'#ECF8FE', customers:0, reviews:0, active:27 },
    { label:'Yesterday', date:'29 May 2026',      grad:['#6C57E0','#5340C4'], soft:'#F2EFFD', customers:0, reviews:0, active:27 },
    { label:'This Week', date:'24–30 May 2026',   grad:['#15B5AE','#0E7E79'], soft:'#E9FBF9', customers:0, reviews:1, active:27 },
    { label:'This Month',date:'01–30 May 2026',   grad:['#27B079','#1B7E56'], soft:'#EBFAF2', customers:0, reviews:1, active:27 },
  ];
  const claims = [];
  const exportBtn = (
    <BtnPrimary icon={
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    }>Export</BtnPrimary>
  );
  return (
    <>
      <PageHeader title="Dashboard" action={exportBtn}/>
      <div className="px-7 py-6 space-y-6">
        {/* Free plan banner */}
        <div className="rounded-2xl bg-white border border-line shadow-card px-5 py-4 flex items-center justify-between gap-6 flex-wrap">
          <div className="flex items-center gap-4 min-w-0">
            <span className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 acc-bg-soft acc-text">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2l2.4 7.4H22l-6 4.4 2.3 7.2L12 16.7 5.7 21l2.3-7.2-6-4.4h7.6z"/></svg>
            </span>
            <div className="min-w-0">
              <p className="text-[14px] font-bold text-ink">You're on the <span className="acc-text">Free</span> plan</p>
              <div className="flex items-center gap-2.5 mt-1.5">
                <div className="w-40 h-1.5 rounded-full bg-surface-input overflow-hidden">
                  <div className="h-full rounded-full" style={{width:'3.3%',background:'linear-gradient(90deg,var(--accent),var(--accent-dark))'}}></div>
                </div>
                <span className="text-[12px] text-ink-muted font-medium">1 / 30 reviews used</span>
              </div>
            </div>
          </div>
          <button onClick={() => onNav('settings','billing')}
            className="text-[13px] font-bold acc-text hover:opacity-80 inline-flex items-center gap-1">
            Upgrade plan
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>

        {/* Stat tiles */}
        <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
          {stats.map(s => (
            <Card key={s.label} className="p-5 relative overflow-hidden">
              <div className="absolute top-0 left-0 right-0 h-1" style={{background:`linear-gradient(90deg, ${s.grad[0]}, ${s.grad[1]})`}}></div>
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-[14px] font-bold text-ink leading-none">{s.label}</div>
                  <div className="text-[11.5px] text-ink-muted mt-1.5">{s.date}</div>
                </div>
                <span className="w-8 h-8 rounded-lg flex items-center justify-center" style={{background:s.soft,color:s.grad[0]}}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M3 18l5-5 4 4 8-9" strokeLinecap="round" strokeLinejoin="round"/><path d="M16 8h4v4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
              </div>
              <div className="mt-4 pt-4 border-t border-line grid grid-cols-3 gap-2">
                <MiniMetric label="Customers" value={s.customers} color={s.grad[0]}/>
                <MiniMetric label="Reviews"   value={s.reviews}   color={s.grad[0]}/>
                <MiniMetric label="Campaigns" value={s.active}    color={s.grad[0]}/>
              </div>
            </Card>
          ))}
        </div>

        {/* Recent reviews table */}
        <Card>
          <div className="p-5 flex items-center justify-between flex-wrap gap-3">
            <div>
              <h3 className="text-[15px] font-bold text-ink">Recent Reviews</h3>
              <p className="text-[12.5px] text-ink-muted mt-0.5">Submissions appear here in real time.</p>
            </div>
            <div className="flex items-center gap-3">
              <Select defaultValue="10" className="!py-2 !text-[13px] w-20">
                <option>10</option><option>25</option><option>50</option>
              </Select>
              <SearchInput placeholder="Search by Customer name or Order No"/>
            </div>
          </div>
          <table className="w-full text-[13px]">
            <thead>
              <tr className="border-t border-line bg-surface-subtle text-[11.5px] uppercase tracking-wider text-ink-muted">
                {['Claim Date','Campaign','Customer','Product','Order No.','Marketplace','Country','Promotion','Feedback','Processed','Action'].map(h => (
                  <th key={h} className="text-left font-semibold px-4 py-3 whitespace-nowrap">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {claims.length === 0 ? (
                <tr><td colSpan={11} className="px-4">
                  <div className="flex flex-col items-center justify-center py-14 text-center">
                    <span className="w-12 h-12 rounded-2xl acc-bg-soft acc-text flex items-center justify-center mb-3">
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2l2.4 7.4H22l-6 4.4 2.3 7.2L12 16.7 5.7 21l2.3-7.2-6-4.4h7.6z"/></svg>
                    </span>
                    <p className="text-[13.5px] font-semibold text-ink">No reviews yet</p>
                    <p className="text-[12.5px] text-ink-muted mt-1 max-w-xs">Once customers submit through your campaigns, they'll show up here.</p>
                  </div>
                </td></tr>
              ) : claims.map((c,i) => <tr key={i}></tr>)}
            </tbody>
          </table>
        </Card>
      </div>
    </>
  );
}
const MiniMetric = ({ label, value, color }) => (
  <div>
    <div className="text-[20px] font-extrabold text-ink leading-none" style={{color}}>{value}</div>
    <div className="text-[10.5px] text-ink-muted mt-1 font-medium">{label}</div>
  </div>
);

/* ── PRODUCTS LIST ─────────────────────────────────────────────────────────── */
const SAMPLE_PRODUCTS = [
  { name:'FRANCE',            mkt:['amazon','shopify','ebay','etsy','gmb'], camp:'No Campaign' },
  { name:'ITALY PRODUCT',     mkt:['amazon','shopify','temu','ebay','etsy','gmb'], camp:'No Campaign' },
  { name:'Spain Testing',     mkt:['amazon','shopify','temu','ebay','etsy','gmb'], camp:'1' },
  { name:'Australia Product Testing', mkt:['shopify','temu','ebay','etsy','amazon','gmb'], camp:'1' },
  { name:'USA testing',       mkt:['amazon','shopify','walmart','target','airbnb','trustpilot','yelp'], camp:'1' },
  { name:'UK testing',        mkt:['amazon','temu','ebay','shopify','google'], camp:'1' },
  { name:'Brontix Wifi Router',mkt:['amazon','shopify','google','etsy','myntra','flipkart','tatacliq','ajio'], camp:'9' },
  { name:'Breast Pump First Cry',mkt:['nykaa','firstcry','ebay','etsy'], camp:'1' },
  { name:'Apartment',         mkt:['airbnb'], camp:'1' },
  { name:'Bedsure Queen Comforter',mkt:['amazon'], camp:'2' },
];

function MarketplaceLogos({ list }) {
  const map = {
    amazon:    { bg:'bg-amber-50',  text:'text-amber-700', label:'amazon' },
    shopify:   { bg:'bg-green-50',  text:'text-green-700', label:'shopify' },
    ebay:      { bg:'bg-rose-50',   text:'text-rose-600',  label:'eBay' },
    etsy:      { bg:'bg-orange-50', text:'text-orange-700',label:'Etsy' },
    gmb:       { bg:'bg-orange-100',text:'text-orange-700',label:'GMB' },
    temu:      { bg:'bg-orange-50', text:'text-orange-700',label:'TEMU' },
    walmart:   { bg:'bg-sky-50',    text:'text-sky-700',   label:'Walmart' },
    target:    { bg:'bg-rose-50',   text:'text-rose-700',  label:'TARGET' },
    airbnb:    { bg:'bg-rose-50',   text:'text-rose-600',  label:'airbnb' },
    trustpilot:{ bg:'bg-green-50',  text:'text-green-700', label:'Trustpilot' },
    yelp:      { bg:'bg-rose-50',   text:'text-rose-700',  label:'yelp' },
    google:    { bg:'bg-blue-50',   text:'text-blue-700',  label:'Google' },
    myntra:    { bg:'bg-rose-50',   text:'text-rose-600',  label:'Myntra' },
    flipkart:  { bg:'bg-amber-50',  text:'text-amber-700', label:'Flipkart' },
    tatacliq:  { bg:'bg-rose-50',   text:'text-rose-700',  label:'TATA CLiQ' },
    ajio:      { bg:'bg-slate-100', text:'text-slate-700', label:'AJIO' },
    nykaa:     { bg:'bg-rose-50',   text:'text-rose-700',  label:'NYKAA' },
    firstcry:  { bg:'bg-orange-50', text:'text-orange-700',label:'firstcry' },
  };
  return (
    <div className="flex flex-wrap items-center gap-1.5 max-w-[420px]">
      {list.map((k,i) => {
        const m = map[k] || { bg:'bg-slate-100', text:'text-slate-600', label:k };
        return (
          <span key={i} className={"text-[10px] font-bold px-1.5 py-1 rounded "+m.bg+" "+m.text}>{m.label}</span>
        );
      })}
    </div>
  );
}

function Products({ onNav }) {
  const [query, setQuery] = React.useState('');
  const rows = SAMPLE_PRODUCTS.filter(p => p.name.toLowerCase().includes(query.toLowerCase()));
  return (
    <>
      <PageHeader title="Products" action={
        <BtnPrimary icon={<PlusIcon/>} onClick={() => onNav('product-add')}>Add New Product</BtnPrimary>
      }/>
      <div className="px-7 py-6 space-y-5">
        <h2 className="text-[16px] font-bold text-ink">All Products</h2>
        <SearchInput placeholder="Search by Products" value={query} onChange={e=>setQuery(e.target.value)}/>
        <Card>
          <table className="w-full text-[13.5px]">
            <thead>
              <tr className="bg-surface-subtle text-[11.5px] uppercase tracking-wider text-ink-muted">
                <th className="text-left font-semibold px-5 py-3.5">Product Name</th>
                <th className="text-left font-semibold px-3 py-3.5 w-20">Image</th>
                <th className="text-left font-semibold px-3 py-3.5">Marketplace</th>
                <th className="text-left font-semibold px-3 py-3.5 w-28">Campaign</th>
                <th className="text-right font-semibold px-5 py-3.5 w-28">Action</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((p,i) => (
                <tr key={i} className="border-t border-gray-100 hover:bg-surface-subtle">
                  <td className="px-5 py-3.5 font-semibold text-ink">{p.name}</td>
                  <td className="px-3 py-3.5"><ProductThumb hue={(i*37)%360}/></td>
                  <td className="px-3 py-3.5"><MarketplaceLogos list={p.mkt}/></td>
                  <td className="px-3 py-3.5 text-ink-muted">{p.camp}</td>
                  <td className="px-5 py-3.5 text-right"><RowActions/></td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="flex items-center justify-end gap-1 px-5 py-3.5 border-t border-gray-100 text-[12px] text-ink-muted">
            <button className="px-2 py-1 hover:text-ink">← Prev</button>
            <button className="w-7 h-7 rounded bg-brand text-white font-semibold text-[12px]">1</button>
            <button className="w-7 h-7 rounded text-ink-muted hover:bg-gray-100">2</button>
            <button className="px-2 py-1 hover:text-ink">Next →</button>
          </div>
        </Card>
      </div>
    </>
  );
}
const PlusIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6"><path d="M12 5v14M5 12h14" strokeLinecap="round"/></svg>
);
const ProductThumb = ({ hue=200 }) => (
  <span className="block w-9 h-9 rounded-md"
        style={{background:`linear-gradient(135deg, hsl(${hue},75%,75%), hsl(${(hue+40)%360},65%,55%))`}}></span>
);

/* ── PROMOTIONS LIST ───────────────────────────────────────────────────────── */
const PROMO_ROWS = [
  { name:'SPAIN', type:'Warranty', tone:'brand', icon:'shield', campaigns:1, status:true },
  { name:'Australia Promotion', type:'Warranty', tone:'brand', icon:'shield', campaigns:1, status:true },
  { name:'cashback image test 2', type:'Cashback', tone:'amber', icon:'cash', campaigns:1, status:true },
  { name:'Product Information Test - Husain', type:'Product Information', tone:'sky', icon:'info', campaigns:1, status:true },
  { name:'Digital Download Test - Husain', type:'Digital Download', tone:'teal', icon:'cloud', campaigns:1, status:true },
  { name:'Gift card Test - Husain', type:'Gift Card', tone:'rose', icon:'gift', campaigns:1, status:true },
  { name:'Cashback Test - Husain', type:'Cashback', tone:'amber', icon:'cash', campaigns:1, status:true },
  { name:'Coupon code Test - Husain', type:'Coupon code', tone:'orange', icon:'coupon', campaigns:1, status:true },
  { name:'Product Giveaway Test - Husain', type:'Product Giveaway', tone:'sky', icon:'box', campaigns:1, status:true },
  { name:'Extended Warranty Test - Husain', type:'Extended Warranty', tone:'green', icon:'shield-ext', campaigns:1, status:true },
];

const PromoIcon = ({ kind }) => {
  const map = {
    shield: ['#0096DB', <path d="M12 2 L20 6 V12 C20 17 16 20 12 22 C8 20 4 17 4 12 V6 Z M9 12 L11 14 L15 10" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>],
    cash:    ['#F59E0B', <g><rect x="3" y="6" width="18" height="12" rx="2" fill="currentColor" opacity=".25"/><rect x="3" y="6" width="18" height="3" fill="currentColor"/><text x="12" y="16" fontSize="6" fontWeight="800" fill="currentColor" textAnchor="middle">CASH</text></g>],
    info:    ['#0EA5E9', <g><circle cx="12" cy="12" r="9" fill="currentColor" opacity=".15"/><circle cx="12" cy="8" r="1.6" fill="currentColor"/><rect x="10.7" y="11" width="2.6" height="7" rx="1.3" fill="currentColor"/></g>],
    cloud:   ['#0EA5E9', <path d="M7 14a4 4 0 0 1 .5-8A6 6 0 0 1 19 7a4 4 0 0 1-1 8H7zM12 11v6m-3-3l3 3 3-3" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>],
    gift:    ['#3B82F6', <g><rect x="3" y="8" width="18" height="13" rx="1.5" fill="currentColor" opacity=".25"/><rect x="3" y="8" width="18" height="3" fill="currentColor"/><rect x="11" y="11" width="2" height="10" fill="currentColor"/></g>],
    coupon:  ['#F59E0B', <path d="M3 8 H21 V11 a2 2 0 0 0 0 4 V18 H3 V15 a2 2 0 0 0 0 -4 Z" fill="currentColor" opacity=".25" stroke="currentColor" strokeWidth="1.5"/>],
    box:     ['#06B6D4', <g><path d="M3 7L12 3l9 4-9 4z" fill="currentColor" opacity=".4"/><path d="M3 7v10l9 4V11z" fill="currentColor" opacity=".6"/><path d="M21 7v10l-9 4V11z" fill="currentColor"/></g>],
    'shield-ext':['#16A34A', <g><path d="M12 2 L20 6 V12 C20 17 16 20 12 22 C8 20 4 17 4 12 V6 Z" fill="currentColor" opacity=".3"/><path d="M9 12l3 3 5-6" stroke="currentColor" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></g>],
  };
  const [color, body] = map[kind] || map.shield;
  return (
    <span className="w-8 h-8 rounded-md inline-flex items-center justify-center" style={{color}}>
      <svg width="22" height="22" viewBox="0 0 24 24">{body}</svg>
    </span>
  );
};

function Promotions({ onNav }) {
  return (
    <>
      <PageHeader title="Promotions" action={
        <BtnPrimary icon={<PlusIcon/>} onClick={() => onNav('promotion-create')}>
          Create Promotion
        </BtnPrimary>
      }/>
      <div className="px-7 py-6 space-y-5">
        <SearchInput placeholder="Search by Promotions"/>
        <Card>
          <table className="w-full text-[13.5px]">
            <thead>
              <tr className="bg-surface-subtle text-[11.5px] uppercase tracking-wider text-ink-muted">
                <th className="text-left font-semibold px-5 py-3.5">Promotion Name</th>
                <th className="text-left font-semibold px-3 py-3.5 w-20">Image</th>
                <th className="text-left font-semibold px-3 py-3.5">Type</th>
                <th className="text-left font-semibold px-3 py-3.5 w-28">Status</th>
                <th className="text-left font-semibold px-3 py-3.5 w-28">Campaigns</th>
                <th className="text-right font-semibold px-5 py-3.5 w-28">Action</th>
              </tr>
            </thead>
            <tbody>
              {PROMO_ROWS.map((p,i) => (
                <tr key={i} className="border-t border-gray-100 hover:bg-surface-subtle">
                  <td className="px-5 py-3.5 font-medium text-ink">{p.name}</td>
                  <td className="px-3 py-3.5"><PromoIcon kind={p.icon}/></td>
                  <td className="px-3 py-3.5 text-ink-muted">{p.type}</td>
                  <td className="px-3 py-3.5"><StatusToggle checked={p.status}/></td>
                  <td className="px-3 py-3.5"><a className="text-brand font-semibold cursor-pointer">{p.campaigns}</a></td>
                  <td className="px-5 py-3.5 text-right"><RowActions/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </div>
    </>
  );
}

/* ── CAMPAIGNS LIST ────────────────────────────────────────────────────────── */
const CAMP_ROWS = [
  { name:'SPAIN', promo:'SPAIN', promoIcon:'shield', claims:'Review & Rating required', status:true },
  { name:'Australia Campaign', promo:'Australia Promotion', promoIcon:'shield', claims:'Review & Rating required', status:true },
  { name:'Cashback testing', promo:'cashback image test 2', promoIcon:'cash', claims:'Review & Rating required with screenshot', status:true },
  { name:'Canada testing', promo:'Warranty check', promoIcon:'shield', claims:'Review & Rating required', status:true },
  { name:'usa testing', promo:'Giveaway', promoIcon:'gift', claims:'Review & Rating required', status:true },
  { name:'UK campaign', promo:'Warranty check', promoIcon:'shield', claims:'Review & Rating required', status:true },
  { name:'Digital Download Test - Husain', promo:'Digital Download Test - Husain', promoIcon:'cloud', claims:'Review & Rating required with screenshot', status:true },
  { name:'Gift card Test - Husain', promo:'Gift card Test - Husain', promoIcon:'gift', claims:'Only Rating required', status:true },
];

function Campaigns({ onNav }) {
  return (
    <>
      <PageHeader title="Campaigns" action={
        <BtnPrimary icon={<PlusIcon/>} onClick={() => onNav('campaign-add')}>Add Campaign</BtnPrimary>
      }/>
      <div className="px-7 py-6 space-y-5">
        <div className="grid sm:grid-cols-3 gap-4 max-w-3xl">
          <CampStat label="Total Campaign" value={27} tone="brand"/>
          <CampStat label="Total Inactive" value={0}  tone="brand"/>
          <CampStat label="Total Active"   value={27} tone="brand"/>
        </div>
        <SearchInput placeholder="Search by Campaign"/>
        <Card>
          <table className="w-full text-[13px]">
            <thead>
              <tr className="bg-surface-subtle text-[11.5px] uppercase tracking-wider text-ink-muted">
                <th className="text-left font-semibold px-5 py-3.5">Campaign</th>
                <th className="text-left font-semibold px-3 py-3.5">Promotion</th>
                <th className="text-left font-semibold px-3 py-3.5 w-20">Products</th>
                <th className="text-left font-semibold px-3 py-3.5">Claims</th>
                <th className="text-left font-semibold px-3 py-3.5 w-20">Status</th>
                <th className="text-left font-semibold px-3 py-3.5 w-28">URL</th>
                <th className="text-left font-semibold px-3 py-3.5 w-20">QR</th>
                <th className="text-right font-semibold px-5 py-3.5 w-28">Action</th>
              </tr>
            </thead>
            <tbody>
              {CAMP_ROWS.map((c,i) => (
                <tr key={i} className="border-t border-gray-100 hover:bg-surface-subtle">
                  <td className="px-5 py-3.5 font-medium text-ink">{c.name}</td>
                  <td className="px-3 py-3.5"><div className="inline-flex items-center gap-2"><PromoIcon kind={c.promoIcon}/><span className="text-ink-muted">{c.promo}</span></div></td>
                  <td className="px-3 py-3.5"><ProductThumb hue={(i*47)%360}/></td>
                  <td className="px-3 py-3.5 text-ink-muted">{c.claims}</td>
                  <td className="px-3 py-3.5"><StatusToggle checked={c.status}/></td>
                  <td className="px-3 py-3.5"><a className="text-brand text-[12.5px] cursor-pointer">www.link.co.in...</a></td>
                  <td className="px-3 py-3.5"><QRThumb/></td>
                  <td className="px-5 py-3.5 text-right"><RowActions/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </div>
    </>
  );
}
const CampStat = ({ label, value }) => (
  <Card className="p-4">
    <div className="text-[13px] font-semibold text-ink">{label}</div>
    <div className="text-[24px] font-bold text-brand leading-none mt-1">{value}</div>
  </Card>
);
const QRThumb = () => (
  <div className="w-7 h-7 grid grid-cols-3 gap-px bg-ink p-0.5 rounded-sm">
    {Array.from({length:9}).map((_,i)=><div key={i} className={Math.random()>.4?'bg-white':'bg-ink'}></div>)}
  </div>
);

/* ── CUSTOMERS LIST ────────────────────────────────────────────────────────── */
const CUST_ROWS = [
  { cid:'#2108', name:'Hgv',           email:'abdulhusain14s@gmail.com', phone:'+61449978693', reviews:1, addr:'--' },
  { cid:'#4569', name:'767',           email:'husain@gmail.com',         phone:'+918888888880', reviews:1, addr:'--' },
  { cid:'#5824', name:'Screenshot test',email:'hh@gmail.com',            phone:'-',             reviews:3, addr:'--' },
  { cid:'#0649', name:'Test',          email:'test@gmail.com',           phone:'+919999999999', reviews:1, addr:'--' },
  { cid:'#2007', name:'zahabiya',      email:'zasdfgh@gmail.com',        phone:'-',             reviews:1, addr:'--' },
  { cid:'#5117', name:'ZAhabiya',      email:'zasdfds@gmail.com',        phone:'+17890098789',  reviews:1, addr:'--' },
  { cid:'#0082', name:'Huu',           email:'gg@gmail.com',             phone:'-',             reviews:1, addr:'--' },
  { cid:'#6949', name:'Zahabiya test 1',email:'zahabiay78657@gmail.com', phone:'+16789009876',  reviews:1, addr:'--' },
  { cid:'#0652', name:'zasddsadas',    email:'sdfghgfd@gmail.com',       phone:'+917845893495', reviews:1, addr:'--' },
  { cid:'#1065', name:'zahashbiuytfgh',email:'gfgbnnb@gmail.com',        phone:'+918525285205', reviews:1, addr:'--' },
];

function Customers() {
  const exportBtn = (
    <BtnPrimary icon={
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
        <path d="M14 3v4a1 1 0 0 0 1 1h4M5 8V21a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5H7a2 2 0 0 0-2 2v3z" strokeLinejoin="round"/>
      </svg>
    }>Export</BtnPrimary>
  );
  return (
    <>
      <PageHeader title="Customers" action={exportBtn}/>
      <div className="px-7 py-6 space-y-5">
        <div className="grid sm:grid-cols-2 gap-4 max-w-2xl">
          <CampStat label="Total Customers" value={13}/>
          <CampStat label="Total Reviews"   value={18}/>
        </div>
        <h2 className="text-[16px] font-bold text-ink">All Customers</h2>
        <SearchInput placeholder="Search by Customers"/>
        <Card>
          <table className="w-full text-[13.5px]">
            <thead>
              <tr className="bg-surface-subtle text-[11.5px] uppercase tracking-wider text-ink-muted">
                <th className="text-left font-semibold px-5 py-3.5 w-20">CID</th>
                <th className="text-left font-semibold px-3 py-3.5">Customer</th>
                <th className="text-left font-semibold px-3 py-3.5">Email</th>
                <th className="text-left font-semibold px-3 py-3.5">Address</th>
                <th className="text-left font-semibold px-3 py-3.5">Phone</th>
                <th className="text-left font-semibold px-3 py-3.5 w-20">Reviews</th>
                <th className="text-right font-semibold px-5 py-3.5 w-28">Action</th>
              </tr>
            </thead>
            <tbody>
              {CUST_ROWS.map((c,i) => (
                <tr key={i} className="border-t border-gray-100 hover:bg-surface-subtle">
                  <td className="px-5 py-3.5 text-ink-muted">{c.cid}</td>
                  <td className="px-3 py-3.5 font-semibold text-ink">{c.name}</td>
                  <td className="px-3 py-3.5 text-ink-muted">{c.email}</td>
                  <td className="px-3 py-3.5 text-ink-muted">{c.addr}</td>
                  <td className="px-3 py-3.5 text-ink-muted">{c.phone}</td>
                  <td className="px-3 py-3.5 text-ink">{c.reviews}</td>
                  <td className="px-5 py-3.5 text-right">
                    <div className="inline-flex items-center gap-2">
                      <button className="w-8 h-8 rounded-md bg-brand text-white flex items-center justify-center hover:bg-brand-dark"
                        title="View">
                        <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 className="w-8 h-8 rounded-md bg-gray-100 text-ink-muted hover:bg-rose-50 hover:text-rose-600 flex items-center justify-center">
                        <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>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </div>
    </>
  );
}

Object.assign(window, { Dashboard, Products, Promotions, Campaigns, Customers, PromoIcon, MarketplaceLogos, ProductThumb });