// Events page

function EventsFeatured() {
  const featured = {
    name: 'Sacred Retreats · Autumn Gathering',
    date: 'Autumn 2026',
    location: 'Pacific Northwest',
    body: 'A land-based retreat for descendants to reconnect with ancestral foodways, river teachings, and ceremony. Held in small circle to preserve intimacy and protocol. Dates and location shared directly with participants.',
    img: 'https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=1600&q=80',
    href: 'event-autumn-retreat.html',
  };
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '120px 56px', borderTop: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em',
          textTransform: 'uppercase', color: P.accent, marginBottom: 40,
        }}>Featured Gathering</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
          <div style={{ height: 560, borderRadius: 4, overflow: 'hidden', border: `1px solid ${P.rule}` }}>
            <div style={{
              width: '100%', height: '100%',
              backgroundImage: `url(${featured.img})`, backgroundSize: 'cover', backgroundPosition: 'center',
              filter: 'saturate(0.55)',
            }} />
          </div>
          <div>
            <div style={{
              fontFamily: P.mono, fontSize: 10, letterSpacing: '0.3em',
              color: P.accent, marginBottom: 20,
            }}>{featured.date} · {featured.location}</div>
            <h2 style={{
              fontFamily: P.display, fontSize: 64, fontWeight: 500,
              letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 28px',
            }}>{featured.name}</h2>
            <p style={{
              fontFamily: P.serif, fontSize: 17, lineHeight: 1.65,
              color: P.surface, margin: '0 0 40px', textWrap: 'pretty',
            }}>{featured.body}</p>
            <a href={featured.href} style={{
              display: 'inline-block', background: P.accent, color: P.bg, padding: '18px 36px',
              borderRadius: 999, textDecoration: 'none',
              fontFamily: P.mono, fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', fontWeight: 500,
            }}>Read More →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function EventsCalendar() {
  const events = [
    {
      date: 'Summer 2026',
      name: 'Reparative Grant · Black Food Fund',
      type: 'Grant Distribution',
      loc: 'Washington & Oregon',
      status: 'In Motion',
      body: 'Reparative grant funding distributed through the Reparations Accelerator in partnership with the Black Food Fund, supporting Black farmers and food sovereignty work in the Pacific Northwest.',
      href: 'event-black-food-fund-grant.html',
    },
    {
      date: 'Summer 2026',
      name: 'First Foods Market Distribution',
      type: 'Foodways',
      loc: 'West Seattle · Columbia City · University District',
      status: 'Open',
      body: 'Traditionally-caught salmon, wild game, roots, berries, and ancestral medicines distributed through Seattle neighborhood farmers markets — restoring access to First Foods for Indigenous families and neighbors.',
      href: 'event-first-foods-markets.html',
    },
    {
      date: 'Autumn 2026',
      name: 'Sacred Retreats · Autumn Gathering',
      type: 'Descendant Retreat',
      loc: 'Pacific Northwest',
      status: 'Waitlist',
      body: 'Small-circle land-based retreat for descendants. Ceremony, foodways, and ancestral practice. Details shared directly with participants.',
      href: 'event-autumn-retreat.html',
    },
    {
      date: 'Monthly · Starting Autumn 2026',
      name: 'Red Tent · Seattle',
      type: 'Women\'s Circle',
      loc: 'Seattle',
      status: 'Coming Soon',
      body: 'A recurring sacred circle for women — a healing sanctuary to share ancestral wisdom and offer mutual emotional and spiritual support.',
      href: 'event-red-tent-seattle.html',
    },
  ];
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '120px 56px', borderTop: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 56, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div style={{
              fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em',
              textTransform: 'uppercase', color: P.accent, marginBottom: 24,
            }}>Upcoming</div>
            <h2 style={{
              fontFamily: P.display, fontSize: 64, fontWeight: 500,
              letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0,
            }}>What's in motion.</h2>
          </div>
          <p style={{
            maxWidth: 380, fontFamily: P.serif, fontSize: 15,
            lineHeight: 1.65, color: P.mute, margin: 0,
          }}>
            These are the gatherings and distributions underway now. Open invites welcome all; waitlist spaces honor the intimacy of the circle.
          </p>
        </div>
        <div style={{ borderTop: `1px solid ${P.rule}` }}>
          {events.map((e, i) => (
            <a key={i} href={e.href} style={{
              display: 'grid', gridTemplateColumns: '160px 1fr 200px',
              gap: 40, alignItems: 'start', padding: '44px 0',
              borderBottom: `1px solid ${P.rule}`,
              textDecoration: 'none', color: 'inherit',
            }}>
              <div>
                <div style={{
                  fontFamily: P.mono, fontSize: 11, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: P.accent, marginBottom: 10,
                }}>{e.date}</div>
                <div style={{
                  fontFamily: P.mono, fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: P.mute,
                }}>{e.type}</div>
              </div>
              <div>
                <h3 style={{
                  fontFamily: P.display, fontSize: 32, fontWeight: 500,
                  letterSpacing: '-0.01em', lineHeight: 1.15, margin: '0 0 14px',
                }}>{e.name}</h3>
                <div style={{
                  fontFamily: P.serif, fontStyle: 'italic', fontSize: 15, color: P.mute, marginBottom: 16,
                }}>{e.loc}</div>
                <p style={{
                  fontFamily: P.serif, fontSize: 16, lineHeight: 1.65,
                  color: P.surface, margin: 0, textWrap: 'pretty', maxWidth: 640,
                }}>{e.body}</p>
              </div>
              <div style={{ justifySelf: 'end' }}>
                <div style={{
                  fontFamily: P.mono, fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase',
                  color: e.status === 'Open' ? P.accent : P.mute,
                  border: `1px solid ${e.status === 'Open' ? P.accent : P.rule}`,
                  padding: '8px 14px', borderRadius: 999, display: 'inline-block',
                }}>{e.status}</div>
                <div style={{
                  marginTop: 14,
                  fontFamily: P.mono, fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: P.accent,
                }}>Read More →</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function EventsCTA() {
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '140px 56px', borderTop: `1px solid ${P.rule}`, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        color: P.accent, opacity: 0.1,
      }}>
        <FlowerOfLife size={700} rings={4} />
      </div>
      <div style={{ maxWidth: 720, margin: '0 auto', position: 'relative' }}>
        <h2 style={{
          fontFamily: P.display, fontSize: 56, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 24px',
        }}>
          Stay close to <span style={{ fontStyle: 'italic', color: P.accent }}>the circle</span>.
        </h2>
        <p style={{
          fontFamily: P.serif, fontSize: 17, lineHeight: 1.6, color: P.mute, margin: '0 0 40px',
        }}>Subscribe to receive invitations, ceremony dates, and gathering announcements.</p>
        <a href="index.html" style={{
          background: P.accent, color: P.bg, padding: '20px 40px', borderRadius: 999, textDecoration: 'none',
          fontFamily: P.mono, fontSize: 12, letterSpacing: '0.28em', textTransform: 'uppercase', fontWeight: 500,
        }}>Join the Mailing List →</a>
      </div>
    </section>
  );
}

function EventsPage() {
  return (
    <PageShell current="events">
      <PageHero
        eyebrow="Events & Gatherings"
        title={<>Where the work<br/><span style={{ fontStyle: 'italic', color: P.accent }}>becomes embodied.</span></>}
        sub="Retreats, ceremony, community work days, and descendant gatherings — the places where reparative knowledge lives in the body and the land."
        image={SR.heroImages.fire}
      />
      <EventsFeatured />
      <EventsCalendar />
      <EventsCTA />
    </PageShell>
  );
}

window.EventsPage = EventsPage;