// EventsPage.jsx — Cleanup events with tabs and event cards

function EventsPage() {
  const [tab, setTab] = React.useState('Nearby');
  const [joined, setJoined] = React.useState({});

  const events = [
    {
      id: 1, title: 'Vardar River Cleanup',
      place: 'Vardar Trail, Skopje',
      date: 'Sat, Apr 26, 2026 · 10:00 AM',
      organizer: 'Blutr Community',
      participants: 24,
      spots: 50,
      mapTone: '#B8DBE0',
      mapImg: 'uploads/vardar-map.png',
    },
    {
      id: 2, title: 'Mavrovo Lake Cleanup',
      place: 'Church of St. Nicholas, Mavrovo',
      date: 'Sun, May 10, 2026 · 12:00 PM',
      organizer: 'Mavrovo Eco Group',
      participants: 15,
      spots: 30,
      mapTone: '#B8D4C8',
      mapImg: 'uploads/mavrovo-map.png',
    },
    {
      id: 3, title: 'Ohrid Lake Cleanup',
      place: 'Voena Plazha, Ohrid',
      date: 'Mon, May 18, 2026 · 9:30 AM',
      organizer: 'Ohrid Green Initiative',
      participants: 31,
      spots: 60,
      mapTone: '#B8C8E0',
      mapImg: 'uploads/ohrid-map.png',
    },
  ];

  return (
    <div className="events-page">
      <div className="page-title">Cleanup Events</div>
      <div className="chip-row">
        {['Nearby', 'This Week', 'Joined'].map(t => (
          <button key={t}
            className={`chip ${tab === t ? 'is-active' : ''}`}
            onClick={() => setTab(t)}>{t}</button>
        ))}
      </div>
      <div className="events-list">
        {events.map(ev => (
          <article key={ev.id} className="event-card">
            <div className="event-map" style={{ background: ev.mapTone || '#B8DBE0' }}>
              {ev.mapImg
                ? <img src={ev.mapImg} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                : <svg viewBox="0 0 240 80" preserveAspectRatio="none">
                  <rect width="240" height="80" fill={ev.mapTone || '#B8DBE0'} />
                  <path d="M0 40 Q60 25 120 45 T240 35 L240 60 Q120 70 0 55 Z" fill="rgba(255,255,255,0.35)" />
                  <path d="M0 22 Q80 30 160 18 T240 24" stroke="#fff" strokeWidth="2" fill="none" opacity="0.7" />
                </svg>
              }
            </div>
            <div className="event-body">
              <div className="event-title-row">
                <h3>{ev.title}</h3>
                <button
                  className={`join-btn ${joined[ev.id] ? 'is-joined' : ''}`}
                  onClick={() => setJoined({ ...joined, [ev.id]: !joined[ev.id] })}>
                  {joined[ev.id] ? 'Joined ✓' : 'Join Event'}
                </button>
              </div>
              <div className="event-row"><PinIcon size={14} /><span>{ev.place}</span></div>
              <div className="event-row">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3.5" y="5.5" width="17" height="15" rx="2" stroke="#3FA0B0" strokeWidth="1.8" /><line x1="3.5" y1="10" x2="20.5" y2="10" stroke="#3FA0B0" strokeWidth="1.8" /><line x1="8" y1="3" x2="8" y2="7" stroke="#3FA0B0" strokeWidth="1.8" strokeLinecap="round" /><line x1="16" y1="3" x2="16" y2="7" stroke="#3FA0B0" strokeWidth="1.8" strokeLinecap="round" /></svg>
                <span>{ev.date}</span>
              </div>
              <div className="event-row">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="#3FA0B0" strokeWidth="1.8" /><path d="M4 20 C4 16 8 13 12 13 C16 13 20 16 20 20" stroke="#3FA0B0" strokeWidth="1.8" strokeLinecap="round" /></svg>
                <span>{ev.organizer}</span>
              </div>
              {ev.desc && (
                <p style={{ margin: '4px 0 0', fontSize: 13, color: '#374151', lineHeight: 1.5 }}>{ev.desc}</p>
              )}
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

window.EventsPage = EventsPage;