// Company dashboard
function CompanyDashboard() {
  const { t, lang } = useT();
  const [tab, setTab] = useState('overview');

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">{t('co_title')}</h1>
          <div className="page-sub">Fenix Energías Renovables · {t('co_sub')}</div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-ghost"><Icon name="doc" size={14} />{lang === 'es' ? 'Informe' : 'Report'}</button>
          <button className="btn btn-primary"><Icon name="plus" size={14} />{t('co_new_offer')}</button>
        </div>
      </div>

      <div className="co-kpis">
        <div className="card card-pad co-kpi-hero">
          <div>
            <div className="stat-label">{t('co_kpi_raised')}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 38, letterSpacing: '-0.025em', marginTop: 6, color: 'var(--emerald-2)' }}>{fmtEUR(696000)}</div>
            <div className="num" style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 4 }}>58% {t('of')} {fmtEUR(1200000)}</div>
            <div className="progress" style={{ marginTop: 12 }}><div className="progress-fill" style={{ width: '58%' }} /></div>
          </div>
        </div>
        <div className="card card-pad">
          <div className="stat-label">{t('co_kpi_investors')}</div>
          <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 32, marginTop: 6 }}>143</div>
          <div className="stat-sub"><span className="stat-delta-up">↑ +12</span> {lang === 'es' ? 'esta semana' : 'this week'}</div>
        </div>
        <div className="card card-pad">
          <div className="stat-label">{t('co_kpi_avg')}</div>
          <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 32, marginTop: 6 }}>{fmtEUR(4867)}</div>
          <div className="stat-sub">+18% vs. {lang === 'es' ? 'media plataforma' : 'platform avg.'}</div>
        </div>
        <div className="card card-pad">
          <div className="stat-label">{t('co_kpi_remaining')}</div>
          <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 32, marginTop: 6, color: 'var(--amber)' }}>21</div>
          <div className="stat-sub">{lang === 'es' ? 'Cierre' : 'Closes'} 28 jun 2025</div>
        </div>
      </div>

      <div className="co-grid">
        {/* Timeline */}
        <div className="card card-pad-lg">
          <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 18 }}>{t('co_timeline')}</div>
          <div className="timeline">
            {[
              { state: 'done', title: lang === 'es' ? 'Solicitud enviada' : 'Application submitted', date: '14 abr 2025' },
              { state: 'done', title: lang === 'es' ? 'Documentación legal' : 'Legal documentation', date: '18 abr 2025' },
              { state: 'done', title: lang === 'es' ? 'Due diligence' : 'Due diligence', date: '02 may 2025' },
              { state: 'done', title: lang === 'es' ? 'Aprobación comité' : 'Committee approval', date: '08 may 2025' },
              { state: 'active', title: lang === 'es' ? 'Captación abierta' : 'Fundraise open', date: lang === 'es' ? 'En curso' : 'In progress' },
              { state: 'pending', title: lang === 'es' ? 'Cierre de ronda' : 'Round close', date: '28 jun 2025' },
              { state: 'pending', title: lang === 'es' ? 'Transferencia de fondos' : 'Funds transfer', date: '02 jul 2025' },
            ].map((s, i) => (
              <div key={i} className={`tl-item tl-${s.state}`}>
                <div className="tl-marker">
                  {s.state === 'done' ? <Icon name="check" size={11} color="#062817" />
                    : s.state === 'active' ? <span className="tl-pulse"></span>
                    : null}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{s.title}</div>
                  <div className="num" style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>{s.date}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Active offers + Q&A */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card card-pad-lg">
            <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 16 }}>{t('co_offers')}</div>
            <div className="off-row">
              <TypeBadge type="equity" />
              <div style={{ flex: 1, marginLeft: 4 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>Serie A · Ampliación €1.2M</div>
                <div className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>{lang === 'es' ? 'Cierra' : 'Closes'} 28 jun</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="num" style={{ fontSize: 14, fontWeight: 500 }}>€696k</div>
                <div className="num" style={{ fontSize: 11, color: 'var(--emerald-2)' }}>58%</div>
              </div>
            </div>
            <div className="off-row">
              <TypeBadge type="invoice" />
              <div style={{ flex: 1, marginLeft: 4 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{lang === 'es' ? 'Factura proveedor equipos' : 'Equipment supplier invoice'}</div>
                <div className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>{lang === 'es' ? 'Cerrada · abr 2025' : 'Closed · Apr 2025'}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="num" style={{ fontSize: 14, fontWeight: 500 }}>€80k</div>
                <div className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>100%</div>
              </div>
            </div>
          </div>

          <div className="card card-pad-lg">
            <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
              <span>{t('co_qa')}</span>
              <span className="tag tag-active">2 {lang === 'es' ? 'sin responder' : 'unanswered'}</span>
            </div>
            <div className="qa-msg">
              <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Investor #38 · 2h</div>
              <div style={{ fontSize: 13, marginTop: 6 }}>
                {lang === 'es' ? '¿Cuál es la proyección de EBITDA del segundo parque solar?' : 'What is the EBITDA projection for the second solar farm?'}
              </div>
            </div>
            <div className="qa-msg">
              <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Iberian Partners · 5h</div>
              <div style={{ fontSize: 13, marginTop: 6 }}>
                {lang === 'es' ? '¿Co-liderazgo posible para ticket €200k?' : 'Co-lead possible for €200k ticket?'}
              </div>
            </div>
          </div>
        </div>

        {/* Documents */}
        <div className="card card-pad-lg" style={{ gridColumn: 'span 2' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{t('co_docs')}</div>
            <button className="btn btn-quiet" style={{ padding: '6px 14px', fontSize: 12 }}>
              <Icon name="plus" size={12} /> {lang === 'es' ? 'Subir' : 'Upload'}
            </button>
          </div>
          <div className="doc-grid">
            {[
              { name: lang === 'es' ? 'Memoria financiera 2024' : '2024 financials', status: 'done' },
              { name: lang === 'es' ? 'Estatutos sociales' : 'Articles of association', status: 'done' },
              { name: lang === 'es' ? 'Due diligence' : 'Due diligence report', status: 'done' },
              { name: lang === 'es' ? 'Plan de negocio 2025-28' : 'Business plan 2025-28', status: 'review' },
              { name: lang === 'es' ? 'Garantías y avales' : 'Guarantees & sureties', status: 'pending' },
              { name: lang === 'es' ? 'KIID inversor' : 'Investor KIID', status: 'done' },
            ].map(d => (
              <div key={d.name} className="doc-card">
                <Icon name="pdf" size={16} color="var(--text-2)" />
                <div style={{ flex: 1, fontSize: 13 }}>{d.name}</div>
                {d.status === 'done' && <Icon name="check" size={14} color="var(--emerald-2)" />}
                {d.status === 'review' && <span className="tag tag-pending">{lang === 'es' ? 'Revisión' : 'Review'}</span>}
                {d.status === 'pending' && <span className="tag tag-closed">{lang === 'es' ? 'Pendiente' : 'Pending'}</span>}
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .co-kpis { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
        .co-kpi-hero { background: linear-gradient(135deg, var(--surface), rgba(45,190,126,0.04)); border-color: var(--emerald-line); }
        .co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .timeline { display: flex; flex-direction: column; gap: 4px; position: relative; }
        .tl-item { display: flex; gap: 14px; align-items: center; padding: 10px 0; position: relative; }
        .tl-item:not(:last-child)::after {
          content: ''; position: absolute;
          left: 9px; top: 28px; bottom: -10px;
          width: 1px;
          background: var(--line-2);
        }
        .tl-item.tl-done:not(:last-child)::after { background: var(--emerald); }
        .tl-marker {
          width: 18px; height: 18px;
          border-radius: 50%;
          border: 1px solid var(--line-3);
          background: var(--bg-1);
          flex-shrink: 0;
          display: flex; align-items: center; justify-content: center;
          z-index: 1;
        }
        .tl-done .tl-marker { background: var(--emerald); border-color: var(--emerald); }
        .tl-active .tl-marker { background: var(--emerald-glow); border-color: var(--emerald); }
        .tl-pulse { width: 6px; height: 6px; background: var(--emerald); border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }

        .off-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
        .off-row:last-child { border-bottom: none; }
        .qa-msg { padding: 12px 14px; background: var(--bg-1); border-radius: 8px; margin-bottom: 8px; }
        .doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .doc-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; }
      `}</style>
    </div>
  );
}

window.CompanyDashboard = CompanyDashboard;