// Dashboard Mockup for Hero
const { useState: useStateD, useEffect: useEffectD } = React;

const DashboardMockup = () => {
  const [progress, setProgress] = useStateD(0);
  useEffectD(() => {
    const t = setTimeout(() => setProgress(78), 600);
    return () => clearTimeout(t);
  }, []);

  return (
    <div className="dash-mockup">
      {/* Main card */}
      <div className="dash-main">
        <div className="dash-header">
          <div className="dash-tabs">
            <span className="dash-tab active">Visão geral</span>
            <span className="dash-tab">Transações</span>
            <span className="dash-tab">Metas</span>
          </div>
          <div className="dash-avatar">JM</div>
        </div>

        <div className="dash-balance">
          <div className="dash-balance-label">Saldo do mês</div>
          <div className="dash-balance-value">
            <span className="currency">R$</span>
            <span className="amount">8.247<span className="cents">,30</span></span>
          </div>
          <div className="dash-balance-trend">
            <span className="trend-chip up">↑ 12,4%</span>
            <span className="trend-text">vs mês anterior</span>
          </div>
        </div>

        <div className="dash-chart">
          <svg viewBox="0 0 400 120" preserveAspectRatio="none">
            <defs>
              <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25"/>
                <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0,90 C40,80 60,60 100,65 C140,70 160,40 200,35 C240,30 260,50 300,40 C340,30 360,20 400,15 L400,120 L0,120 Z" fill="url(#chartGrad)"/>
            <path d="M0,90 C40,80 60,60 100,65 C140,70 160,40 200,35 C240,30 260,50 300,40 C340,30 360,20 400,15" fill="none" stroke="var(--accent)" strokeWidth="2"/>
            <circle cx="300" cy="40" r="4" fill="var(--accent)"/>
            <circle cx="300" cy="40" r="8" fill="var(--accent)" opacity="0.2"/>
          </svg>
          <div className="chart-months">
            <span>Jan</span><span>Fev</span><span>Mar</span><span>Abr</span><span>Mai</span><span>Jun</span>
          </div>
        </div>

        <div className="dash-categories">
          <div className="cat-row">
            <div className="cat-icon" style={{background:'#fef3e8',color:'#c07518'}}>🍽</div>
            <div className="cat-info">
              <div className="cat-name">Alimentação</div>
              <div className="cat-bar"><div className="cat-bar-fill" style={{width:'62%',background:'#f0a050'}}/></div>
            </div>
            <div className="cat-value">R$ 1.240</div>
          </div>
          <div className="cat-row">
            <div className="cat-icon" style={{background:'#e8f4ed',color:'var(--accent)'}}>🏠</div>
            <div className="cat-info">
              <div className="cat-name">Moradia</div>
              <div className="cat-bar"><div className="cat-bar-fill" style={{width:'85%',background:'var(--accent)'}}/></div>
            </div>
            <div className="cat-value">R$ 2.800</div>
          </div>
          <div className="cat-row">
            <div className="cat-icon" style={{background:'#eee8fc',color:'#6d4fc4'}}>🚗</div>
            <div className="cat-info">
              <div className="cat-name">Transporte</div>
              <div className="cat-bar"><div className="cat-bar-fill" style={{width:'35%',background:'#8b6fd8'}}/></div>
            </div>
            <div className="cat-value">R$ 480</div>
          </div>
          <div className="cat-row">
            <div className="cat-icon" style={{background:'#ffe5e0',color:'#d14b2e'}}>🍔</div>
            <div className="cat-info">
              <div className="cat-name">iFood</div>
              <div className="cat-bar"><div className="cat-bar-fill" style={{width:'48%',background:'#e8614a'}}/></div>
            </div>
            <div className="cat-value">R$ 680</div>
          </div>
          <div className="cat-row">
            <div className="cat-icon" style={{background:'#e0f0ff',color:'#2c6fc9'}}>🎬</div>
            <div className="cat-info">
              <div className="cat-name">Lazer</div>
              <div className="cat-bar"><div className="cat-bar-fill" style={{width:'28%',background:'#4a8bd8'}}/></div>
            </div>
            <div className="cat-value">R$ 320</div>
          </div>
          <div className="cat-row">
            <div className="cat-icon" style={{background:'#fef5d6',color:'#a07818'}}>📚</div>
            <div className="cat-info">
              <div className="cat-name">Assinaturas</div>
              <div className="cat-bar"><div className="cat-bar-fill" style={{width:'22%',background:'#d4a82a'}}/></div>
            </div>
            <div className="cat-value">R$ 189</div>
          </div>
        </div>
      </div>

      {/* Floating card - entrada */}
      <div className="float-card float-entry">
        <div className="float-icon entry">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </div>
        <div>
          <div className="float-label">Entrada recebida</div>
          <div className="float-title">Salário</div>
        </div>
        <div className="float-value up">+ R$ 3.500</div>
      </div>

      {/* Floating card - meta */}
      <div className="float-card float-goal">
        <div className="goal-header">
          <span className="goal-label">Meta · Viagem Japão</span>
          <span className="goal-percent">{progress}%</span>
        </div>
        <div className="goal-bar"><div className="goal-fill" style={{width:`${progress}%`}}/></div>
        <div className="goal-values"><span>R$ 5.460</span><span className="dim">R$ 7.000</span></div>
      </div>

      {/* Floating card - fatura */}
      <div className="float-card float-invoice">
        <div className="invoice-brand">
          <div className="invoice-logo"/>
          <div>
            <div className="invoice-bank">Fatura Nubank</div>
            <div className="invoice-due">Vence em 3 dias</div>
          </div>
        </div>
        <div className="invoice-value">R$ 892,50</div>
      </div>
    </div>
  );
};

window.DashboardMockup = DashboardMockup;