import { useState } from 'react'

// Datos de cada categoría — funciona sin internet
const CATEGORIES = [
  {
    id: 'organic',
    emoji: '🌿',
    name: 'Orgánico',
    color: '#22c55e',
    bg: 'rgba(34,197,94,0.1)',
    border: 'rgba(34,197,94,0.2)',
    examples: 'Restos de comida, cáscaras, pasto',
    items: [
      'Restos de frutas y verduras',
      'Cáscaras de huevo y café usado',
      'Residuos de jardín (pasto, hojas secas)',
      'Restos de comida no procesada',
      'Pan, tortillas y cereales en mal estado',
      'Usar bolsa biodegradable o recipiente con tapa',
    ],
    tip: 'Puedes hacer composta en casa con estos residuos. Reduce hasta 30% tu basura.',
  },
  {
    id: 'recycle',
    emoji: '♻️',
    name: 'Reciclable',
    color: '#3b82f6',
    bg: 'rgba(59,130,246,0.1)',
    border: 'rgba(59,130,246,0.2)',
    examples: 'Plástico, papel, vidrio, metal',
    items: [
      'Botellas PET limpias y aplastadas',
      'Cartón y papel secos (sin grasa)',
      'Latas de aluminio y hojalata',
      'Vidrio sin tapa ni residuos de comida',
      'Envases Tetra Pak limpios y abiertos',
      'NO mezclar con residuos orgánicos',
    ],
    tip: 'Enjuaga los envases antes de desecharlos. El reciclaje sucio no se puede procesar.',
  },
  {
    id: 'sanitary',
    emoji: '🚫',
    name: 'Sanitario',
    color: '#a855f7',
    bg: 'rgba(168,85,247,0.1)',
    border: 'rgba(168,85,247,0.2)',
    examples: 'Pañales, gasas, toallas húmedas',
    items: [
      'Pañales desechables',
      'Toallas sanitarias y tampones',
      'Gasas y vendajes usados',
      'Toallas húmedas (no biodegradables)',
      'Papel sanitario y kleenex',
      'Embolsar bien y anudar antes de desechar',
    ],
    tip: 'Este residuo va al relleno sanitario. No se puede reciclar ni compostar.',
  },
  {
    id: 'special',
    emoji: '⚠️',
    name: 'Especial / RAEE',
    color: '#f97316',
    bg: 'rgba(249,115,22,0.1)',
    border: 'rgba(249,115,22,0.2)',
    examples: 'Pilas, electrónicos, aceite, medicamentos',
    items: [
      'Pilas y baterías (llevar a punto de acopio)',
      'Electrónicos y cables en desuso',
      'Aceite de cocina usado (en botella cerrada)',
      'Medicamentos vencidos (farmacias participantes)',
      'Pintura, thinner y químicos del hogar',
      'Focos ahorradores y tubos fluorescentes',
    ],
    tip: 'NUNCA tires estos al camión normal. Busca el punto de acopio más cercano en tu municipio.',
  },
]

export default function SeparationGuide() {
  const [selected, setSelected] = useState(CATEGORIES[0])

  return (
    <div style={styles.page}>
      <div style={styles.header}>
        <div style={styles.headerTitle}>Guía de Separación</div>
        <div style={styles.headerSub}>Disponible sin internet</div>
      </div>

      {/* Grid de categorías */}
      <div style={styles.grid}>
        {CATEGORIES.map((cat) => (
          <div
            key={cat.id}
            onClick={() => setSelected(cat)}
            style={{
              ...styles.card,
              background: cat.bg,
              border: `1px solid ${selected.id === cat.id ? cat.color : cat.border}`,
              boxShadow: selected.id === cat.id ? `0 0 0 2px ${cat.color}33` : 'none',
            }}
          >
            <div style={styles.cardEmoji}>{cat.emoji}</div>
            <div style={{ ...styles.cardName, color: cat.color }}>{cat.name}</div>
            <div style={styles.cardExamples}>{cat.examples}</div>
          </div>
        ))}
      </div>

      {/* Detalle de la categoría seleccionada */}
      <div style={styles.detail}>
        <div style={styles.detailHeader}>
          <span style={{ fontSize: 20 }}>{selected.emoji}</span>
          <span style={{ ...styles.detailTitle, color: selected.color }}>
            {selected.name}
          </span>
        </div>

        <ul style={styles.list}>
          {selected.items.map((item, i) => (
            <li key={i} style={styles.listItem}>
              <span style={{ ...styles.dot, background: selected.color }} />
              {item}
            </li>
          ))}
        </ul>

        {/* Tip adicional */}
        <div style={{
          ...styles.tip,
          background: selected.bg,
          border: `1px solid ${selected.border}`,
        }}>
          <span style={{ color: selected.color, fontWeight: 600 }}>💡 Tip: </span>
          <span style={{ color: '#a0b4c8' }}>{selected.tip}</span>
        </div>
      </div>
    </div>
  )
}

const styles = {
  page: {
    padding: 16,
    paddingBottom: 32,
  },
  header: {
    marginBottom: 16,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 600,
    color: '#e8edf5',
    marginBottom: 2,
  },
  headerSub: {
    fontSize: 12,
    color: '#6b7f96',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 10,
    marginBottom: 14,
  },
  card: {
    borderRadius: 14,
    padding: '16px 14px',
    cursor: 'pointer',
    transition: 'all 0.15s',
  },
  cardEmoji: {
    fontSize: 28,
    marginBottom: 8,
  },
  cardName: {
    fontSize: 13,
    fontWeight: 600,
    marginBottom: 4,
  },
  cardExamples: {
    fontSize: 11,
    color: '#6b7f96',
    lineHeight: 1.5,
  },
  detail: {
    background: '#131820',
    border: '1px solid rgba(255,255,255,0.08)',
    borderRadius: 12,
    padding: 16,
  },
  detailHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    marginBottom: 12,
  },
  detailTitle: {
    fontSize: 15,
    fontWeight: 600,
  },
  list: {
    listStyle: 'none',
    marginBottom: 12,
  },
  listItem: {
    fontSize: 12,
    color: '#8a9db5',
    padding: '6px 0',
    borderBottom: '1px solid rgba(255,255,255,0.05)',
    display: 'flex',
    alignItems: 'flex-start',
    gap: 8,
    lineHeight: 1.4,
  },
  dot: {
    width: 5,
    height: 5,
    borderRadius: '50%',
    flexShrink: 0,
    marginTop: 5,
  },
  tip: {
    borderRadius: 8,
    padding: '10px 12px',
    fontSize: 12,
    lineHeight: 1.6,
  },
}
