// ===== BICYCLES & E-BIKES =====

// ---------- Shared: hand signals data ----------
const bike_signals = [
  { id: 1, label: 'Turn left', desc: 'Left arm straight out', icon: '⬅️' },
  { id: 2, label: 'Turn right', desc: 'Right arm out, or left arm bent up', icon: '➡️' },
  { id: 3, label: 'Slowing / stop', desc: 'Left arm bent down, palm back', icon: '✋' },
  { id: 4, label: 'Hazard ahead', desc: 'Point down at the road hazard', icon: '👇' },
];

const bike_gear = [
  { id: 'helmet', icon: '🪖', label: 'Certified helmet', desc: 'Properly fastened, correct fit' },
  { id: 'lights', icon: '💡', label: 'Front & rear lights', desc: 'White front, red rear — esp. at night' },
  { id: 'reflect', icon: '🦺', label: 'Reflective vest / strips', desc: 'Be visible from all sides' },
  { id: 'bell', icon: '🔔', label: 'Working bell or horn', desc: 'Alert pedestrians & vehicles' },
  { id: 'brakes', icon: '🛑', label: 'Brakes checked', desc: 'Both brakes firm and responsive' },
  { id: 'tires', icon: '🛞', label: 'Tire pressure & tread', desc: 'Inflated, no cracks or bulges' },
];

const bike_rules = [
  { id: 1, cat: 'Use the bike lane', icon: '🛣️', rules: [
    'Ride in designated bike lanes where provided (per local bike-lane ordinances)',
    'Where no lane exists, keep to the rightmost part of the road',
    'Ride in single file on busy roads; max two abreast on quiet ones',
  ]},
  { id: 2, cat: 'Obey traffic rules', icon: '🚦', rules: [
    'Cyclists follow the same signals and signs as motor vehicles',
    'Stop at red lights and pedestrian crossings',
    'Never ride against the flow of traffic (no counterflow)',
  ]},
  { id: 3, cat: 'Be visible & predictable', icon: '👁️', rules: [
    'Use hand signals before turning or stopping',
    'Make eye contact with drivers at intersections',
    'Avoid riding in vehicle blind spots, especially trucks & buses',
  ]},
  { id: 4, cat: 'Your protections', icon: '🛡️', rules: [
    'Many LGUs protect bike lanes — blocking them is finable',
    'Motorists must keep a safe overtaking distance from cyclists',
    'You have equal right to the road as a vulnerable road user',
  ]},
];

const bike_routes = [
  { name: 'EDSA Protected Bike Lane', len: '23 km', type: 'Protected', color: '#00c48c' },
  { name: 'Marikina Bikeways', len: '52 km', type: 'Protected', color: '#00c48c' },
  { name: 'Pasig Greenways', len: '14 km', type: 'Painted', color: '#ffa502' },
  { name: 'BGC Cycle Network', len: '11 km', type: 'Protected', color: '#00c48c' },
];

function BicycleScreen({ t, go }) {
  const [checked, setChecked] = useState({});
  const [open, setOpen] = useState(1);
  const [toast, setToast] = useState('');
  const note = (m) => { setToast(m); setTimeout(() => setToast(''), 2000); };
  const done = Object.values(checked).filter(Boolean).length;

  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {toast && <div style={{ position: 'fixed', left: '50%', bottom: 92, transform: 'translateX(-50%)', background: t.navy, color: '#fff', padding: '11px 18px', borderRadius: 999, fontSize: 13, fontWeight: 600, zIndex: 60 }}>{toast}</div>}

      <div style={{ borderRadius: 24, padding: 20, color: '#fff', position: 'relative', overflow: 'hidden', background: `linear-gradient(135deg, #00c48c, #067a55)`, boxShadow: '0 12px 30px rgba(0,196,140,0.28)' }}>
        <div style={{ position: 'absolute', right: -24, top: -24, width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 34 }}>🚲</div>
          <div style={{ fontSize: 19, fontWeight: 800, marginTop: 6 }}>Cyclist Hub</div>
          <div style={{ fontSize: 12.5, opacity: 0.92, marginTop: 4, lineHeight: 1.45 }}>Ride safe, know your rights, and find protected bike lanes across Metro Manila.</div>
        </div>
      </div>

      {/* Pre-ride gear checklist */}
      <div>
        <SectionTitle t={t} action={<span style={{ fontSize: 12, fontWeight: 700, color: done === bike_gear.length ? t.success : t.subtext }}>{done}/{bike_gear.length}</span>}>Pre-Ride Safety Check</SectionTitle>
        <Card t={t} pad={6}>
          {bike_gear.map((g, i) => {
            const on = !!checked[g.id];
            return (
              <button key={g.id} onClick={() => setChecked(c => ({ ...c, [g.id]: !c[g.id] }))} className="no-select" style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '11px 10px', background: 'transparent', border: 'none', borderTop: i > 0 ? `1px solid ${t.border}` : 'none', minHeight: 52 }}>
                <IconTile icon={g.icon} color={on ? t.success : t.mid} t={t} size={38} radius={11} fontSize={18} />
                <div style={{ flex: 1, textAlign: 'left' }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: on ? t.subtext : t.text, textDecoration: on ? 'line-through' : 'none' }}>{g.label}</div>
                  <div style={{ fontSize: 11.5, color: t.subtext, marginTop: 1 }}>{g.desc}</div>
                </div>
                <span style={{ width: 24, height: 24, minWidth: 24, borderRadius: 8, border: `2px solid ${on ? t.success : t.border}`, background: on ? t.success : 'transparent', display: 'grid', placeItems: 'center' }}>{on && <Icon name="check" size={14} color="#fff" />}</span>
              </button>
            );
          })}
        </Card>
      </div>

      {/* Bike lanes */}
      <div>
        <SectionTitle t={t} action={<button onClick={() => note('Opening bike-lane map…')} className="no-select" style={{ background: 'none', border: 'none', color: t.mid, fontSize: 12.5, fontWeight: 700 }}>View map</button>}>Protected Bike Lanes</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {bike_routes.map(r => (
            <Card key={r.name} t={t} pad={13}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <IconTile icon="🚴" color={r.color} t={t} size={44} fontSize={21} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{r.name}</div>
                  <div style={{ fontSize: 12, color: t.subtext, marginTop: 1 }}>{r.len} · {r.type} lane</div>
                </div>
                <Badge t={t} color={r.color}>{r.type}</Badge>
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* Hand signals */}
      <div>
        <SectionTitle t={t}>Hand Signals</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
          {bike_signals.map(s => (
            <Card key={s.id} t={t} pad={13}>
              <div style={{ fontSize: 26 }}>{s.icon}</div>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text, marginTop: 6 }}>{s.label}</div>
              <div style={{ fontSize: 11.5, color: t.subtext, marginTop: 2, lineHeight: 1.4 }}>{s.desc}</div>
            </Card>
          ))}
        </div>
      </div>

      {/* Rights & rules */}
      <div>
        <SectionTitle t={t}>Cyclist Rights & Rules</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {bike_rules.map(l => {
            const isOpen = open === l.id;
            return (
              <Card key={l.id} t={t} pad={0}>
                <button onClick={() => setOpen(isOpen ? -1 : l.id)} className="no-select" style={{ width: '100%', background: 'transparent', border: 'none', padding: 14, display: 'flex', alignItems: 'center', gap: 12, minHeight: 56 }}>
                  <IconTile icon={l.icon} color={t.success} t={t} size={40} radius={12} fontSize={20} />
                  <span style={{ flex: 1, textAlign: 'left', fontSize: 14, fontWeight: 700, color: t.text }}>{l.cat}</span>
                  <span style={{ color: t.subtext, transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform 0.25s' }}><Icon name="chevron-right" size={18} /></span>
                </button>
                <div style={{ maxHeight: isOpen ? 300 : 0, overflow: 'hidden', transition: 'max-height 0.3s ease' }}>
                  <div style={{ padding: '0 14px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {l.rules.map((r, i) => (
                      <div key={i} style={{ display: 'flex', gap: 9, alignItems: 'flex-start' }}>
                        <span style={{ width: 6, height: 6, borderRadius: 999, background: t.success, marginTop: 7, flexShrink: 0 }} />
                        <span style={{ fontSize: 12.5, color: t.text, lineHeight: 1.45, fontWeight: 500 }}>{r}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      </div>

      {/* Report */}
      <Card t={t} pad={14} style={{ background: t.warn + (t.dark ? '1f' : '12'), border: `1px solid ${t.warn}44` }}>
        <div style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
          <Icon name="alert" size={22} color={t.warn} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text }}>Blocked or unsafe bike lane?</div>
            <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 3, lineHeight: 1.45 }}>Report obstructions, parked vehicles, or hazards in bike lanes to your LGU.</div>
            <button onClick={() => note('Report submitted — thank you!')} className="no-select" style={{ marginTop: 9, background: t.warn, color: '#fff', border: 'none', borderRadius: 10, padding: '9px 14px', fontSize: 12.5, fontWeight: 700, minHeight: 40 }}>Report a hazard</button>
          </div>
        </div>
      </Card>
    </div>
  );
}

// ---------- E-BIKES ----------
const ebike_classes = [
  { id: 1, cls: 'Type A1 · Pedal-assist', speed: '≤ 25 km/h', reg: false, lic: false, where: 'Bike lanes & local roads', color: '#00c48c', icon: '🚲', note: 'Light e-bikes & pedal-assist. No LTO registration or license required.' },
  { id: 2, cls: 'Type A2/B · Throttle e-bike', speed: '26–50 km/h', reg: true, lic: false, where: 'Local roads (not bike lanes)', color: '#ffa502', icon: '🛵', note: 'Must be LTO-registered with a plate. Driver\u2019s license generally not required but helmet is mandatory.' },
  { id: 3, cls: 'Type L · E-motorcycle', speed: '> 50 km/h', reg: true, lic: true, where: 'Roads only (no bike lanes/sidewalks)', color: '#ff4757', icon: '🏍️', note: 'Treated as a motorcycle: LTO registration, plate, and driver\u2019s license all required.' },
];

const ebike_battery = [
  { icon: '🔌', text: 'Use only the manufacturer\u2019s charger and cable' },
  { icon: '🌡️', text: 'Charge in a cool, dry, ventilated area — never on exits or stairs' },
  { icon: '⏰', text: 'Don\u2019t charge overnight or unattended; unplug when full' },
  { icon: '🚫', text: 'Stop using a battery that is swollen, hot, or damaged' },
  { icon: '💧', text: 'Keep batteries away from water and direct heat/sun' },
  { icon: '🧯', text: 'Keep a working smoke alarm where you charge' },
];

const ebike_stations = [
  { name: 'SM Megamall — EV Bay', dist: '1.2 km', slots: '4 free', color: '#00c48c' },
  { name: 'Ayala Triangle Charge Point', dist: '3.4 km', slots: '1 free', color: '#ffa502' },
  { name: 'Robinsons Galleria Hub', dist: '2.1 km', slots: 'Full', color: '#ff4757' },
];

function EbikeScreen({ t, go }) {
  const [sel, setSel] = useState(1);
  const [toast, setToast] = useState('');
  const note = (m) => { setToast(m); setTimeout(() => setToast(''), 2000); };
  const cur = ebike_classes.find(c => c.id === sel);

  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {toast && <div style={{ position: 'fixed', left: '50%', bottom: 92, transform: 'translateX(-50%)', background: t.navy, color: '#fff', padding: '11px 18px', borderRadius: 999, fontSize: 13, fontWeight: 600, zIndex: 60 }}>{toast}</div>}

      <div style={{ borderRadius: 24, padding: 20, color: '#fff', position: 'relative', overflow: 'hidden', background: `linear-gradient(135deg, #7b2d8b, #4f1c5c)`, boxShadow: '0 12px 30px rgba(123,45,139,0.3)' }}>
        <div style={{ position: 'absolute', right: -24, top: -24, width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 34 }}>🛵</div>
          <div style={{ fontSize: 19, fontWeight: 800, marginTop: 6 }}>E-Bike Center</div>
          <div style={{ fontSize: 12.5, opacity: 0.92, marginTop: 4, lineHeight: 1.45 }}>Know your e-bike class, registration rules, where you can ride, and how to charge safely.</div>
        </div>
      </div>

      {/* Classification selector */}
      <div>
        <SectionTitle t={t}>What class is your e-bike?</SectionTitle>
        <div className="scroll-x" style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          {ebike_classes.map(c => (
            <Pill key={c.id} t={t} active={sel === c.id} onClick={() => setSel(c.id)} color={c.color}>{c.icon} {c.speed}</Pill>
          ))}
        </div>
        <Card t={t} pad={0} style={{ borderTop: `4px solid ${cur.color}` }}>
          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
              <IconTile icon={cur.icon} color={cur.color} t={t} size={48} fontSize={24} />
              <div>
                <div style={{ fontSize: 15.5, fontWeight: 800, color: t.text }}>{cur.cls}</div>
                <div style={{ fontSize: 12.5, color: t.subtext }}>Top speed {cur.speed}</div>
              </div>
            </div>
            <p style={{ margin: '0 0 14px', fontSize: 12.5, color: t.text, lineHeight: 1.5, fontWeight: 500 }}>{cur.note}</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
              {[['LTO registration', cur.reg], ["Driver's license", cur.lic]].map(([label, need]) => (
                <div key={label} style={{ background: t.inputBg, borderRadius: 12, padding: '10px', textAlign: 'center' }}>
                  <div style={{ fontSize: 13, fontWeight: 800, color: need ? t.danger : t.success }}>{need ? 'Required' : 'Not needed'}</div>
                  <div style={{ fontSize: 10, color: t.subtext, fontWeight: 600, marginTop: 2 }}>{label}</div>
                </div>
              ))}
              <div style={{ background: t.inputBg, borderRadius: 12, padding: '10px', textAlign: 'center' }}>
                <div style={{ fontSize: 13, fontWeight: 800, color: t.danger }}>Required</div>
                <div style={{ fontSize: 10, color: t.subtext, fontWeight: 600, marginTop: 2 }}>Helmet</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, fontSize: 12, color: t.text, fontWeight: 600 }}>
              <Icon name="location" size={15} color={cur.color} /> Allowed: {cur.where}
            </div>
          </div>
        </Card>
        <div style={{ fontSize: 10.5, color: t.subtext, marginTop: 8, lineHeight: 1.4, textAlign: 'center' }}>Guidance based on LTO rules for light electric vehicles. Always confirm the latest LTO/LGU requirements.</div>
      </div>

      {cur.reg && (
        <Btn t={t} full color={cur.color} icon="shield" onClick={() => note('Opening LTO e-vehicle registration…')}>Register with LTO</Btn>
      )}

      {/* Battery safety */}
      <div>
        <SectionTitle t={t}>🔋 Battery & Charging Safety</SectionTitle>
        <Card t={t} pad={14}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
            {ebike_battery.map((b, i) => (
              <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'center' }}>
                <span style={{ fontSize: 18, width: 24, textAlign: 'center' }}>{b.icon}</span>
                <span style={{ fontSize: 12.5, color: t.text, fontWeight: 500, lineHeight: 1.4 }}>{b.text}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Charging stations */}
      <div>
        <SectionTitle t={t} action={<button onClick={() => note('Opening charging map…')} className="no-select" style={{ background: 'none', border: 'none', color: t.mid, fontSize: 12.5, fontWeight: 700 }}>View map</button>}>Nearby Charging Stations</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {ebike_stations.map(s => (
            <Card key={s.name} t={t} pad={13}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <IconTile icon="⚡" color={s.color} t={t} size={44} fontSize={21} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{s.name}</div>
                  <div style={{ fontSize: 12, color: t.subtext, marginTop: 1 }}>{s.dist} away</div>
                </div>
                <Badge t={t} color={s.color}>{s.slots}</Badge>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BicycleScreen, EbikeScreen });