// Home page
function PageHome({ setPage, lang }) {
  const t = window.CONTENT[lang].home;
  const trails = useFetch(db.fetchTrails);
  const events = useFetch(db.fetchEvents);
  const today = new Date().toISOString().slice(0, 10);
  const upcoming = (events.data || []).filter(ev => !ev.event_date || ev.event_date >= today);

  return (
    <div>
      {/* HERO — text left, rider photo right */}
      <section style={{ position: 'relative', minHeight: 'calc(100vh - 84px)', overflow: 'hidden', background: '#080808' }}>
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', minHeight: 'calc(100vh - 84px)' }}>
          <div style={{ padding: '70px 60px 50px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
            <div className="eyebrow" style={{ marginBottom: 36 }}>{t.eyebrow}</div>
            <h1 className="display" style={{ marginBottom: 36 }}>
              {t.hero_lines.map((l, i) => (
                <div key={i} style={{ marginBottom: 10 }}>
                  <span style={{ fontSize: 'clamp(52px, 7.5vw, 110px)', color: i === 2 ? 'var(--accent)' : 'var(--fg)', display: 'block', lineHeight: 0.95 }}>{l.big}</span>
                  <span style={{ fontSize: 'clamp(17px, 2vw, 26px)', color: 'var(--fg-dim)', display: 'block', letterSpacing: '0.02em' }}>
                    {l.sub.split(/(LIMITĂ\.|OBSTACOL\.|COMPETIȚIA\.|LIMIT\.|OBSTACLE\.|COMPETITION\.)/).map((part, j) =>
                      j % 2 === 1 ? <span key={j} style={{ color: 'var(--accent)' }}>{part}</span> : part
                    )}
                  </span>
                </div>
              ))}
            </h1>
            <p style={{ fontSize: 19, maxWidth: 520, color: 'var(--fg-dim)', lineHeight: 1.55, marginBottom: 38 }}>{t.subtitle}</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setPage('membership')}>{t.cta_primary} <span className="arrow">→</span></button>
              <button className="btn btn-ghost" onClick={() => setPage('tours')}>{t.cta_secondary}</button>
            </div>
          </div>

          <div className="hero-photo" style={{ position: 'relative', overflow: 'hidden', clipPath: 'polygon(40px 0, 100% 0, 100% 100%, 0 100%)' }}>
            <img src="/assets/hero-rider.jpg" alt="Carpat Enduro rider"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, #080808 0%, transparent 22%)' }}></div>
            <div style={{ position: 'absolute', top: 24, right: 24, width: 40, height: 40, borderTop: '2px solid var(--accent)', borderRight: '2px solid var(--accent)' }}></div>
            <div style={{ position: 'absolute', bottom: 24, left: 60, width: 40, height: 40, borderBottom: '2px solid var(--accent)', borderLeft: '2px solid var(--accent)' }}></div>
          </div>
        </div>
      </section>

      <Ticker items={[
        'CARPAT ENDURO LUPENI',
        'DIN PASIUNE — PENTRU HARD ENDURO',
        'VALEA JIULUI · STRAJA · LUPENI',
        '@CARPATENDUROLUPENI',
        'EST · 2025',
      ]} />

      {/* ABOUT */}
      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 900 }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>/ despre club</div>
            <h2 className="display display-xl">
              <div>{t.about_title_1}</div>
              <div style={{ color: 'var(--accent)' }}>{t.about_title_2}</div>
            </h2>
            <p style={{ marginTop: 32, fontSize: 19, color: 'var(--fg-dim)', maxWidth: 780, lineHeight: 1.65 }}>{t.about_body}</p>
            <button className="btn btn-primary" style={{ marginTop: 36 }} onClick={() => setPage('about')}>{t.about_link}</button>
          </div>
        </div>
      </section>

      {/* TRAILS — "TRASEELE NOASTRE" */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="/ trasee"
            titleLines={[t.tours_title_1, t.tours_title_2]}
            right={<button className="btn btn-ghost" onClick={() => setPage('tours')}>{t.tours_link} <span className="arrow">→</span></button>}
          />
          <p style={{ color: 'var(--fg-dim)', fontSize: 18, maxWidth: 720, marginBottom: 48 }}>{t.tours_sub}</p>
          {trails.loading ? null : (trails.data || []).length === 0 ? (
            <ComingSoon note={window.CONTENT[lang].tours.coming_note} label="GARMIN · GPX · VALEA JIULUI" />
          ) : (
            <div className="cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
              {trails.data.slice(0, 3).map((tr, i) => (
                <div key={tr.id} style={{
                  background: 'var(--bg-2)', border: '1px solid var(--border)',
                  position: 'relative', overflow: 'hidden', transition: 'all 200ms ease', cursor: 'pointer',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.transform = 'translateY(-4px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = 'translateY(0)'; }}
                onClick={() => setPage('tours')}>
                  <div style={{ padding: '24px 24px 28px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>#{String(i + 1).padStart(2, '0')}{tr.zone ? ' · ' + tr.zone.toUpperCase() : ''}</div>
                      {tr.difficulty && <DiffBadge d={tr.difficulty} />}
                    </div>
                    <h3 className="display display-md" style={{ fontSize: 28, marginBottom: 18 }}>{tr.name}</h3>
                    <div style={{ display: 'flex', gap: 24, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--fg-dim)', flexWrap: 'wrap' }}>
                      {tr.distance_km && <span><span style={{ color: 'var(--fg)' }}>{tr.distance_km}</span> KM</span>}
                      {tr.elevation_m && <span><span style={{ color: 'var(--fg)' }}>{tr.elevation_m}</span> M↑</span>}
                      {tr.duration && <span><span style={{ color: 'var(--fg)' }}>{tr.duration}</span></span>}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* EVENTS */}
      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <SectionHead
            eyebrow="/ evenimente"
            titleLines={[t.events_title_1, t.events_title_2]}
            right={<button className="btn btn-ghost" onClick={() => setPage('events')}>{t.events_link} <span className="arrow">→</span></button>}
          />
          <p style={{ color: 'var(--fg-dim)', fontSize: 18, maxWidth: 720, marginBottom: 48 }}>{t.events_sub}</p>
          {events.loading ? null : upcoming.length === 0 ? (
            <ComingSoon note={window.CONTENT[lang].events.coming_note} label="TURURI · COMPETIȚII · VALEA JIULUI" />
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--border)' }}>
              {upcoming.slice(0, 4).map(ev => (
                <EventRow key={ev.id} ev={ev} lang={lang} onClick={() => setPage('events')} />
              ))}
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

// Compact event row used on home + events list
function EventRow({ ev, lang, onClick }) {
  const t = window.CONTENT[lang].events;
  const d = ev.event_date ? new Date(ev.event_date + 'T00:00:00') : null;
  const months = lang === 'ro'
    ? ['IAN', 'FEB', 'MAR', 'APR', 'MAI', 'IUN', 'IUL', 'AUG', 'SEP', 'OCT', 'NOI', 'DEC']
    : ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
  return (
    <div className="event-row" style={{
      display: 'grid', gridTemplateColumns: '140px 1fr auto', gap: 32,
      alignItems: 'center', padding: '28px 32px',
      background: 'var(--bg)', transition: 'all 200ms', cursor: 'pointer',
    }}
    onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-3)'; }}
    onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg)'; }}
    onClick={onClick}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        {d ? (
          <>
            <span className="display display-md" style={{ fontSize: 48, color: 'var(--accent)' }}>{String(d.getDate()).padStart(2, '0')}</span>
            <div>
              <div className="mono" style={{ fontSize: 14, fontWeight: 700, color: 'var(--fg)' }}>{months[d.getMonth()]}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)' }}>{d.getFullYear()}</div>
            </div>
          </>
        ) : (
          <span className="mono" style={{ fontSize: 12, color: 'var(--fg-dim)' }}>TBA</span>
        )}
      </div>
      <div>
        <h3 style={{ fontFamily: 'Barlow Condensed', fontStyle: 'italic', fontWeight: 800, textTransform: 'uppercase', fontSize: 24, marginBottom: 4 }}>{ev.title}</h3>
        <div className="mono" style={{ fontSize: 12, color: 'var(--fg-dim)', letterSpacing: '0.08em' }}>
          {[ev.location, ev.distance].filter(Boolean).join(' · ')}
        </div>
      </div>
      <div>
        <span style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700,
          padding: '6px 10px', letterSpacing: '0.12em',
          color: ev.event_type === 'COMP' ? '#fff' : ev.event_type === 'OPEN' ? 'var(--accent)' : 'var(--fg-dim)',
          background: ev.event_type === 'COMP' ? 'var(--accent)' : 'transparent',
          border: '1px solid ' + (ev.event_type === 'COMP' ? 'var(--accent)' : 'var(--border-bright)'),
        }}>{ev.event_type === 'COMP' ? t.comp : ev.event_type === 'MEMBERS' ? t.members : t.open}</span>
      </div>
    </div>
  );
}

window.PageHome = PageHome;
window.EventRow = EventRow;