// Landing page
function Landing({ setPage, state, currentUserName = '' }) {
  const rsvps = (state?.rsvps || []).filter((rsvp) => !rsvp.cancelledAt);
  const guestCount = rsvps.reduce((sum, r) => sum + (parseInt(r.totalGuests, 10) || 0), 0);
  const potluckCount = (state?.potluck || []).filter((entry) => !entry.retiredAt).length;
  const allergyCount = rsvps.filter((r) => (r.allergies || '').trim() || r.dietary !== 'Aucune restriction').length;
  const photoCount = (state?.uploadedMemories || []).length;

  return (
    <div>
      {/* HERO */}
      <div style={{ position: 'relative', padding: '20px', background: 'var(--green-900)' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr 1fr',
          gridTemplateRows: '230px 180px',
          gap: 10,
          height: 420
        }}>
          <Photo src="assets/real/bbq-2025-06.jpg" kind="warm" label="Papa au barbecue" style={{ borderRadius: 8, gridRow: 'span 1' }} />
          <div style={{ gridRow: 'span 2', padding: '20px 12px', display: 'grid', placeItems: 'center' }}>
            <div className="badge-frame" style={{ width: '100%' }}>
              <div className="badge-eyebrow">✦ ENSEMBLE. TOUJOURS. ✦</div>
              <h1 className="badge-title">BBQ na Biso<br />2026</h1>
              <div className="badge-sub">Boyei bolamu na feti ya libota<br />PLUS FORTS ENSEMBLE.</div>
              <div className="badge-pill">{BBQ_EVENT.dateLabel.toUpperCase()}</div>
              <div className="badge-time">{BBQ_EVENT.startTime.toUpperCase()} – {BBQ_EVENT.endTime.toUpperCase()}</div>
              <div className="badge-time" style={{ marginTop: 6, color: 'var(--gold)' }}>{BBQ_EVENT.locationName}<br />{BBQ_EVENT.city}</div>
            </div>
          </div>
          <Photo src="assets/real/bbq-2025-22.jpg" kind="dusk" label="Autour du grill" style={{ borderRadius: 8 }} />
          <Photo src="assets/real/bbq-2025-10.jpg" kind="water" label="Moment BBQ" style={{ borderRadius: 8 }} />
          <Photo src="assets/real/bbq-2025-08.jpg" kind="green" label="Photo de groupe 2025" style={{ borderRadius: 8 }} />
          <Photo src="assets/real/bbq-2025-10.jpg" kind="sun" label="Moment du BBQ" style={{ borderRadius: 8 }} />
        </div>
      </div>

      <CountdownBar currentUserName={currentUserName} />

      {/* Action card grid */}
      <div className="container" style={{ paddingBottom: 32 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 28 }}>
          <ActionCard
            icon={<Icon.Clipboard />}
            title="Inscription au BBQ 2026"
            body={`${rsvps.length} foyers inscrits · ${guestCount} invités. Réponse avant le ${BBQ_EVENT.rsvpDeadline}.`}
            cta={<button className="btn btn-coral" onClick={() => setPage('rsvp')}>S'inscrire</button>} />
          
          <ActionCard
            icon={<Icon.Leaf />}
            title="Restrictions Alimentaires"
            body={`${allergyCount} foyer${allergyCount === 1 ? '' : 's'} avec une restriction signalée. Aidez-nous à bien étiqueter le buffet.`}
            cta={<button className="btn btn-ghost" onClick={() => setPage('food')}>Ajouter info</button>} />
          
          <ActionCard
            icon={<Icon.Pot />}
            title="Auberge espagnole"
            body={`${potluckCount} plat${potluckCount === 1 ? '' : 's'} réservé${potluckCount === 1 ? '' : 's'} pour le moment. Soyez le premier à ajouter une vraie contribution.`}
            cta={<button className="btn btn-green" onClick={() => setPage('food')}>Ajouter un plat</button>} />
          
          <ActionCard
            icon={<Icon.Cloud />}
            title="Météo & Plan Pluie"
            body="Pluie ou soleil, le BBQ aura lieu. Le plan pluie prévoit un grand carport et une solution à l'intérieur."
            cta={<button className="btn btn-ghost" onClick={() => setPage('faq')}>Voir le plan <Icon.ArrowRight /></button>} />
          
          <ActionCard
            icon={<Icon.Music />}
            title="Playlist BBQ 2026"
            body="Ajoutez vos morceaux préférés dans les annonces et gardez l'ambiance vivante toute la journée."
            cta={<button className="btn btn-ghost" onClick={() => setPage('announcements')}>Ajouter une chanson <Icon.ArrowRight /></button>} />
          
          <ActionCard
            icon={<div style={{ color: 'var(--coral)' }}><Icon.Heart fill="currentColor" /></div>}
            title="Contribuer"
            body={`${BBQ_EVENT.contributionPerAdult} € par adulte/ado. Les enfants de ${BBQ_EVENT.freeAgeLimit} ans et moins sont invités.`}
            cta={<button className="btn btn-ghost" onClick={() => setPage('faq')}>Contribution <Icon.ArrowRight /></button>} />
          
        </div>

        {/* Memories */}
        <div style={{ marginTop: 36 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 14 }}>
            <div>
              <h3 className="serif" style={{ margin: 0, fontSize: 26, color: 'var(--green-900)' }}>Souvenirs du BBQ 2025</h3>
              <div style={{ color: 'var(--ink-2)', fontSize: 13 }}>{photoCount} nouveau{photoCount === 1 ? '' : 'x'} souvenir{photoCount === 1 ? '' : 's'} ajouté{photoCount === 1 ? '' : 's'} pour 2026.</div>
            </div>
            <button className="btn btn-white" onClick={() => setPage('photos')}>Voir toute la galerie</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
            {REAL_BBQ_2025.slice(0, 5).map((p) =>
            <Photo key={p.src} src={p.src} kind="warm" label={p.label} style={{ aspectRatio: '1', borderRadius: 8 }} />
            )}
          </div>
        </div>
      </div>

      <Leaves />
    </div>);

}

function ActionCard({ icon, title, body, cta }) {
  return (
    <div className="card" style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
      <div style={{
        width: 48, height: 48, borderRadius: 12,
        background: 'var(--cream-2)', color: 'var(--green-800)',
        display: 'grid', placeItems: 'center', flex: 'none'
      }}>{icon}</div>
      <div style={{ flex: 1 }}>
        <div className="serif" style={{ fontSize: 19, color: 'var(--green-900)', marginBottom: 4 }}>{title}</div>
        <div style={{ color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.45, marginBottom: 12 }}>{body}</div>
        {cta}
      </div>
    </div>);

}

window.Landing = Landing;