// Product UI mockups — reusable across sections

// Mini dashboard mockup (used in hero)
function DashboardMockup() {
  const t = useT();
  return (
    <div className="mockup">
      <div className="mockup-chrome">
        <span className="chrome-dot r"></span>
        <span className="chrome-dot y"></span>
        <span className="chrome-dot g"></span>
        <span className="chrome-url">app.auditcash.com.br/dashboard</span>
      </div>
      <div className="mockup-dashboard">
        <div className="mockup-sidebar">
          <div className="mockup-side-brand">
            <span className="logo-mark"><Icon.Spark size={12}/></span>
            Auditcash
          </div>
          <div className="mockup-side-link active"><span className="icon"><Icon.Home/></span>{t('mock.side.overview')}</div>
          <div className="mockup-side-link"><span className="icon"><Icon.AlertCircle size={14}/></span>{t('mock.side.divergences')} <span style={{marginLeft:'auto',background:'var(--danger-50)',color:'var(--danger-700)',padding:'1px 6px',borderRadius:6,fontSize:10,fontWeight:600}}>23</span></div>
          <div className="mockup-side-link"><span className="icon"><Icon.Inbox/></span>{t('mock.side.contests')}</div>
          <div className="mockup-side-link"><span className="icon"><Icon.Chart/></span>{t('mock.side.recon')}</div>
          <div className="mockup-side-link"><span className="icon"><Icon.Layers/></span>{t('mock.side.mp')}</div>
          <div className="mockup-side-link"><span className="icon"><Icon.Bank/></span>{t('mock.side.banks')}</div>
          <div className="mockup-side-divider"></div>
          <div className="mockup-side-label">{t('mock.side.config')}</div>
          <div className="mockup-side-link"><span className="icon"><Icon.Settings/></span>{t('mock.side.integ')}</div>
        </div>
        <div className="mockup-main">
          <div className="mockup-main-head">
            <div>
              <div className="mockup-main-title">{t('mock.main.title')}</div>
              <div className="mockup-main-subtitle">{t('mock.main.sub')}</div>
            </div>
            <div className="mockup-period-tabs">
              <div className="mockup-period-tab">7d</div>
              <div className="mockup-period-tab active">30d</div>
              <div className="mockup-period-tab">90d</div>
            </div>
          </div>
          <div className="mockup-kpis">
            <div className="mockup-kpi">
              <div className="lab">{t('mock.kpi.gmv')}</div>
              <div className="val">R$ 1.842k</div>
              <div className="delta">↑ 12,4%</div>
            </div>
            <div className="mockup-kpi">
              <div className="lab">{t('mock.kpi.recovered')}</div>
              <div className="val" style={{color:'var(--success-700)'}}>R$ 38.420</div>
              <div className="delta">↑ R$ 8.2k</div>
            </div>
            <div className="mockup-kpi">
              <div className="lab">{t('mock.kpi.open')}</div>
              <div className="val" style={{color:'var(--danger-700)'}}>R$ 12.108</div>
              <div className="delta down">{t('mock.kpi.open.delta')}</div>
            </div>
          </div>
          <div className="mockup-chart">
            <svg viewBox="0 0 400 88" preserveAspectRatio="none">
              <defs>
                <linearGradient id="dashGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#2E5BDB" stopOpacity="0.18"/>
                  <stop offset="100%" stopColor="#2E5BDB" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0,68 L20,62 L40,58 L60,50 L80,54 L100,46 L120,42 L140,38 L160,44 L180,36 L200,30 L220,34 L240,28 L260,22 L280,30 L300,24 L320,18 L340,22 L360,14 L380,18 L400,10 L400,88 L0,88 Z" fill="url(#dashGrad)"/>
              <path d="M0,68 L20,62 L40,58 L60,50 L80,54 L100,46 L120,42 L140,38 L160,44 L180,36 L200,30 L220,34 L240,28 L260,22 L280,30 L300,24 L320,18 L340,22 L360,14 L380,18 L400,10" fill="none" stroke="#2E5BDB" strokeWidth="1.8"/>
              <circle cx="400" cy="10" r="3" fill="#2E5BDB"/>
              <circle cx="400" cy="10" r="6" fill="#2E5BDB" opacity="0.18"/>
            </svg>
          </div>
          <div className="mockup-table">
            <div className="mockup-row">
              <div>{t('mock.table.order')}</div><div>{t('mock.table.channel')}</div><div>{t('mock.table.divergence')}</div><div></div>
            </div>
            <div className="mockup-row">
              <div className="order">iPhone 15 256GB<span className="protocol">#ML-8842371</span></div>
              <div className="mono" style={{fontSize:11,color:'var(--text-tertiary)'}}>ML</div>
              <div className="value danger">−R$ 412,80</div>
              <div className="chevron"><Icon.ChevronRight/></div>
            </div>
            <div className="mockup-row">
              <div className="order">Tênis Nike Air Max<span className="protocol">#SH-2210958</span></div>
              <div className="mono" style={{fontSize:11,color:'var(--text-tertiary)'}}>Shopee</div>
              <div className="value danger">−R$ 89,40</div>
              <div className="chevron"><Icon.ChevronRight/></div>
            </div>
            <div className="mockup-row">
              <div className="order">Cafeteira Oster<span className="protocol">#AM-5523910</span></div>
              <div className="mono" style={{fontSize:11,color:'var(--text-tertiary)'}}>Amazon</div>
              <div className="value success">+R$ 124,30</div>
              <div className="chevron"><Icon.ChevronRight/></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Floating cards used in hero composition
function FloatCardAlert() {
  const t = useT();
  return (
    <div className="hero-comp-card-float tl">
      <div className="float-card-head">
        <div className="icon-box" style={{background:'var(--danger-50)',color:'var(--danger-700)'}}>
          <Icon.AlertCircle size={14}/>
        </div>
        <div>
          <div className="ttl">{t('float.alert.ttl')}</div>
          <div className="sub">{t('float.alert.sub')}</div>
        </div>
      </div>
      <div className="float-card-row"><span className="l">{t('float.alert.expected')}</span><span className="v">R$ 1.247,00</span></div>
      <div className="float-card-row"><span className="l">{t('float.alert.charged')}</span><span className="v danger">R$ 1.659,80</span></div>
      <div className="float-card-row"><span className="l">{t('float.alert.diff')}</span><span className="v delta">−R$ 412,80</span></div>
    </div>
  );
}

function FloatCardRecovered() {
  const t = useT();
  return (
    <div className="hero-comp-card-float br">
      <div className="float-card-head">
        <div className="icon-box" style={{background:'var(--success-50)',color:'var(--success-700)'}}>
          <Icon.Check size={14}/>
        </div>
        <div>
          <div className="ttl">{t('float.recovered.ttl')}</div>
          <div className="sub">{t('float.recovered.sub')}</div>
        </div>
      </div>
      <div className="float-total">
        <div className="lab">{t('float.recovered.lab')}</div>
        <div className="val">R$ 23.140</div>
      </div>
    </div>
  );
}

window.DashboardMockup = DashboardMockup;
window.FloatCardAlert = FloatCardAlert;
window.FloatCardRecovered = FloatCardRecovered;