export default function ETACard({ etaData }) {
  const { etaVentana, etaMinutos, status, routeName, horarioOficial, progresoPct } = etaData
  const isNear = status === 'cerca'

  return (
    <div style={styles.card}>
      <div style={styles.label}>⏱ Tiempo estimado de llegada</div>

      <div style={styles.time}>
        {etaVentana.desde} – {etaVentana.hasta}
      </div>

      <div style={styles.window}>
        El camión llega a tu zona en aprox.{' '}
        <strong style={{ color: isNear ? '#f59e0b' : '#e8edf5' }}>
          {etaMinutos} min
        </strong>
      </div>

      <div style={styles.track}>
        <div style={{
          ...styles.trackFill,
          width: `${progresoPct}%`,
          background: isNear
            ? 'linear-gradient(90deg, #f59e0b, #ef4444)'
            : 'linear-gradient(90deg, #3d9aff, #00d4a0)',
        }} />
      </div>
      <div style={styles.trackLabels}>
        <span>Salida · Relleno Sanitario</span>
        <span>{progresoPct}%</span>
        <span>Tu colonia</span>
      </div>

      {isNear ? (
        <div style={{ ...styles.pill, background: 'rgba(245,158,11,0.12)', color: '#f59e0b', border: '1px solid rgba(245,158,11,0.25)' }}>
          <span style={styles.dot} /> ¡Camión cerca! · Prepara tus bolsas
        </div>
      ) : (
        <div style={{ ...styles.pill, background: 'rgba(0,212,160,0.12)', color: '#00d4a0', border: '1px solid rgba(0,212,160,0.25)' }}>
          <span style={{ ...styles.dot, background: '#00d4a0' }} /> En ruta · {routeName}
        </div>
      )}

      <div style={styles.official}>
        Horario oficial: <strong>{horarioOficial}</strong>
      </div>
    </div>
  )
}

const styles = {
  card:        { background: 'linear-gradient(135deg, #0d1f3c 0%, #0a1628 100%)', border: '1px solid rgba(61,154,255,0.2)', borderRadius: 16, padding: '24px 20px', marginBottom: 12 },
  label:       { fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#3d9aff', marginBottom: 8 },
  time:        { fontSize: 28, fontWeight: 600, color: '#e8edf5', lineHeight: 1.1, marginBottom: 6 },
  window:      { fontSize: 13, color: '#6b7f96', marginBottom: 16, lineHeight: 1.5 },
  track:       { background: 'rgba(255,255,255,0.07)', borderRadius: 8, height: 8, marginBottom: 8, overflow: 'hidden' },
  trackFill:   { height: '100%', borderRadius: 8, transition: 'width 1.5s ease' },
  trackLabels: { display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#6b7f96', marginBottom: 14 },
  pill:        { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 20, fontSize: 11, fontWeight: 500, marginBottom: 10 },
  dot:         { width: 6, height: 6, borderRadius: '50%', background: '#f59e0b', flexShrink: 0 },
  official:    { fontSize: 11, color: '#3d5570', marginTop: 4 },
}