import { useNavigate } from 'react-router-dom'
import { ChevronRight } from 'lucide-react'

const ENTRIES = [
  {
    icon: '⚖️',
    label: 'Gewicht',
    sub: 'Tägliche Gewichtseingabe',
    to: '/weight',
    color: '#378ADD',
  },
  {
    icon: '🪄',
    label: 'Assistent',
    sub: 'Schritt-für-Schritt Messung (Umfänge & Caliper)',
    to: '/wizard',
    color: '#7F77DD',
    highlight: true,
  },
  {
    icon: '📏',
    label: 'Umfänge',
    sub: 'Hals, Brust, Taille, Bauch, Hüfte, Oberschenkel, Wade, Arm',
    to: '/circum',
    color: '#1D9E75',
  },
  {
    icon: '📐',
    label: 'Caliper',
    sub: 'Körperfett per Hautfaltenmessung',
    to: '/caliper',
    color: '#D85A30',
  },
  {
    icon: '🍽️',
    label: 'Ernährung',
    sub: 'FDDB CSV importieren',
    to: '/nutrition',
    color: '#EF9F27',
  },
  {
    icon: '🏋️',
    label: 'Aktivität',
    sub: 'Training manuell oder Apple Health importieren',
    to: '/activity',
    color: '#D4537E',
  },
  {
    icon: '🌙',
    label: 'Schlaf',
    sub: 'Schlafdaten erfassen oder Apple Health importieren',
    to: '/sleep',
    color: '#7B68EE',
  },
  {
    icon: '📖',
    label: 'Messanleitung',
    sub: 'Wie und wo genau messen?',
    to: '/guide',
    color: '#888780',
  },
]

export default function CaptureHub() {
  const nav = useNavigate()
  return (
    <div>
      <h1 className="page-title">Erfassen</h1>
      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {ENTRIES.map(e => (
          <button key={e.to} onClick={()=>nav(e.to)}
            style={{
              display:'flex', alignItems:'center', gap:14,
              padding:'14px 16px', borderRadius:14,
              border: e.highlight ? `2px solid ${e.color}` : '1.5px solid var(--border)',
              background: e.highlight ? e.color+'14' : 'var(--surface)',
              cursor:'pointer', fontFamily:'var(--font)', textAlign:'left',
              transition:'all 0.15s',
            }}>
            <div style={{
              width:44, height:44, borderRadius:12,
              background: e.color+'22',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:22, flexShrink:0,
            }}>
              {e.icon}
            </div>
            <div style={{flex:1}}>
              <div style={{
                fontSize:15, fontWeight:600,
                color: e.highlight ? e.color : 'var(--text1)',
              }}>
                {e.label}
              </div>
              <div style={{fontSize:12, color:'var(--text3)', marginTop:2}}>
                {e.sub}
              </div>
            </div>
            <ChevronRight size={18} style={{color:'var(--text3)',flexShrink:0}}/>
          </button>
        ))}
      </div>
    </div>
  )
}