import { SectionHeader } from '@/components/terrano/SectionHeader'

export const metadata = { title: 'Mercado de commodities — Portal Minería' }

const PRICES: [string, string, string, string, string, boolean][] = [
  ['Cu', 'Cobre', '4.28', 'USD/lb', '+2.1%', true],
  ['Au', 'Oro', '2,918', 'USD/oz', '+0.4%', true],
  ['Ag', 'Plata', '34.6', 'USD/oz', '+1.2%', true],
  ['Li', 'Litio', '14,200', 'USD/t', '−1.2%', false],
  ['Fe', 'Hierro', '103', 'USD/t', '−0.8%', false],
  ['Mo', 'Molibdeno', '21.4', 'USD/lb', '+0.6%', true],
]

export default function MercadoPage() {
  return (
    <div className="bleed" style={{ paddingTop: 32, paddingBottom: 48 }}>
      <SectionHeader kicker="Mercado de commodities" title="Precios de referencia" />
      <div className="mono" style={{ fontSize: 11, color: 'var(--muted-2)', marginBottom: 20 }}>
        ▣ Valores estáticos de referencia — el panel con precios en vivo y reportes semanales llegará en una próxima fase.
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 14 }}>
        {PRICES.map(([sym, name, price, unit, delta, up]) => (
          <div key={sym} className="card" style={{ padding: 20 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span className="display" style={{ fontSize: 20, fontWeight: 600 }}>{sym}</span>
              <span style={{ fontSize: 12, color: 'var(--muted)' }}>{name}</span>
            </div>
            <div className="display" style={{ fontSize: 34, fontWeight: 600, marginTop: 6, letterSpacing: '-0.02em' }}>{price}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{unit}</div>
            <div className="mono" style={{ marginTop: 10, fontSize: 12, color: up ? 'var(--ok)' : 'var(--warn, #c2410c)' }}>
              {up ? '▲' : '▼'} {delta} · 7d
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}