// Projects index page

function ProjectsList() {
  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', flexDirection: 'column', gap: 80 }}>
          {SR.projects.map((p, i) => (
            <article key={p.slug} id={p.slug} style={{
              display: 'grid',
              gridTemplateColumns: i % 2 === 0 ? '1.1fr 1fr' : '1fr 1.1fr',
              gap: 64, alignItems: 'center',
              paddingBottom: 80, borderBottom: `1px solid ${P.rule}`,
            }}>
              <div style={{
                gridColumn: i % 2 === 0 ? 1 : 2,
                gridRow: 1,
                height: 480, borderRadius: 4, overflow: 'hidden', position: 'relative',
                border: `1px solid ${P.rule}`,
              }}>
                <div style={{
                  width: '100%', height: '100%',
                  backgroundImage: `url(${p.img})`, backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  filter: 'saturate(0.55) contrast(1.05)',
                }} />
                <div style={{
                  position: 'absolute', top: 24, left: 24,
                  fontFamily: P.mono, fontSize: 10, letterSpacing: '0.24em',
                  textTransform: 'uppercase', color: P.surface,
                  background: 'rgba(13,20,18,0.85)', padding: '8px 14px', borderRadius: 999,
                  border: `1px solid ${p.status === 'Active' ? P.accent : 'rgba(244,237,224,0.4)'}`,
                  color: p.status === 'Active' ? P.accent : P.surface,
                }}>{p.status}</div>
              </div>
              <div style={{ gridColumn: i % 2 === 0 ? 2 : 1, gridRow: 1 }}>
                <div style={{
                  fontFamily: P.mono, fontSize: 10, letterSpacing: '0.3em',
                  color: P.accent, opacity: 0.7, marginBottom: 20,
                }}>{String(i + 1).padStart(2, '0')} · {p.pillar} · {p.pathway}</div>
                <h2 style={{
                  fontFamily: P.display, fontSize: 56, fontWeight: 500,
                  letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 8px',
                }}>{p.title}</h2>
                <div style={{
                  fontFamily: P.display, fontStyle: 'italic', fontSize: 22,
                  color: P.accent, marginBottom: 28,
                }}>{p.kreyol}</div>
                <p style={{
                  fontFamily: P.serif, fontSize: 17, lineHeight: 1.7,
                  color: P.surface, margin: '0 0 32px', textWrap: 'pretty',
                }}>{p.short}</p>
                <div style={{ display: 'flex', gap: 28, alignItems: 'center', flexWrap: 'wrap' }}>
                  <a href={`project-${p.slug}.html`} style={{
                    fontFamily: P.mono, fontSize: 11, letterSpacing: '0.24em',
                    textTransform: 'uppercase', color: P.accent, textDecoration: 'none',
                    borderBottom: `1px solid ${P.accent}`, paddingBottom: 6,
                  }}>Read More →</a>
                  <a href={`donate.html?cause=${p.slug}`} style={{
                    fontFamily: P.mono, fontSize: 11, letterSpacing: '0.24em',
                    textTransform: 'uppercase', color: P.surface, textDecoration: 'none',
                    opacity: 0.7, borderBottom: `1px solid rgba(244,237,224,0.3)`, paddingBottom: 6,
                  }}>Give →</a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProjectsCTA() {
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '140px 56px', borderTop: `1px solid ${P.rule}`, position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        color: P.accent, opacity: 0.12,
      }}>
        <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',
        }}>
          Each project is funded by <span style={{ fontStyle: 'italic', color: P.accent }}>collective giving</span>.
        </h2>
        <p style={{
          fontFamily: P.serif, fontSize: 17, lineHeight: 1.6, color: P.mute, margin: '0 0 40px',
        }}>Your support flows directly to descendants, elders, and communities carrying out the work of repair.</p>
        <a href="donate.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,
        }}>Give Now</a>
      </div>
    </section>
  );
}

function ProjectsPage() {
  return (
    <PageShell current="projects">
      <PageHero
        eyebrow="Projects in Motion"
        title={<>Four initiatives.<br/><span style={{ fontStyle: 'italic', color: P.accent }}>Four pillars.</span></>}
        sub="Each project is rooted in a pillar of our work — Reparations, Landback, Rematriation, or Repatriation — and accountable to the communities it serves."
        image={SR.heroImages.land}
      />
      <ProjectsList />
      <ProjectsCTA />
    </PageShell>
  );
}

window.ProjectsPage = ProjectsPage;