// Impact page — transparent reporting aligned with Projects + Donate

function ImpactHeadlineStats() {
  const activeProjects = SR.projects.filter(p => p.status === 'Active').length;
  const pillars = new Set(SR.projects.map(p => p.pillar)).size;
  const stats = [
    { n: '$47.3K',         l: 'Raised to Date',       s: 'Flowing to descendants' },
    { n: String(activeProjects),  l: 'Active Projects',      s: `Across ${pillars} pillars` },
    { n: String(SR.partners.length), l: 'Partner Organizations', s: 'In reparative distribution' },
    { n: '∞',              l: 'Generations',          s: 'We plan across' },
  ];
  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: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: `1px solid ${P.rule}`, borderBottom: `1px solid ${P.rule}` }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: '56px 40px',
              borderLeft: i > 0 ? `1px solid ${P.rule}` : 'none',
            }}>
              <div style={{ fontFamily: P.display, fontSize: 72, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: P.accent, marginBottom: 20 }}>{s.n}</div>
              <div style={{ fontFamily: P.display, fontSize: 22, fontWeight: 500, marginBottom: 6 }}>{s.l}</div>
              <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: P.mute }}>{s.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Impact3R() {
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '140px 56px', borderTop: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 80, marginBottom: 72, alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em', textTransform: 'uppercase', color: P.accent, marginBottom: 24 }}>Reparative Outcomes</div>
            <h2 style={{ fontFamily: P.display, fontSize: 64, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0 }}>Repair · Restore ·<br/>Reconnect.</h2>
          </div>
          <p style={{ fontFamily: P.serif, fontSize: 17, lineHeight: 1.7, color: P.mute, margin: 0 }}>Every dollar, every partnership, every gathering rolls up to one of three pathways — each measurable, each accountable to the communities we serve.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${P.rule}` }}>
          {SR.threeRs.map((r, i) => (
            <div key={r.word} style={{
              padding: '56px 40px 0 0',
              borderLeft: i > 0 ? `1px solid ${P.rule}` : 'none',
              paddingLeft: i > 0 ? 40 : 0,
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: '50%', border: `1px solid ${P.accent}`, color: P.accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24,
                fontFamily: P.display, fontSize: 26, fontStyle: 'italic', fontWeight: 500,
              }}>{r.letter}</div>
              <div style={{ fontFamily: P.display, fontSize: 34, fontWeight: 500, marginBottom: 6, lineHeight: 1 }}>{r.word}</div>
              <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: P.accent, marginBottom: 20 }}>{r.sub}</div>
              <p style={{ fontFamily: P.serif, fontSize: 15, lineHeight: 1.7, color: P.mute, margin: 0, textWrap: 'pretty' }}>{r.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Every active project, the pillar it's rooted in, and the pathway it delivers.
// Pulled from the same SR.projects source of truth used by the Projects page.
function ImpactProjects() {
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '140px 56px', borderTop: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 80, marginBottom: 72, alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em', textTransform: 'uppercase', color: P.accent, marginBottom: 24 }}>What Your Giving Funds</div>
            <h2 style={{ fontFamily: P.display, fontSize: 64, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0 }}>The projects<br/>in motion.</h2>
          </div>
          <p style={{ fontFamily: P.serif, fontSize: 17, lineHeight: 1.7, color: P.mute, margin: 0 }}>
            Each initiative is rooted in a pillar of our work and delivers a pathway of outcome. Gifts to the Reparations Accelerator flow into these projects.
          </p>
        </div>

        <div style={{ borderTop: `1px solid ${P.rule}` }}>
          {SR.projects.map((p, i) => (
            <a key={p.slug} href={`project-${p.slug}.html`} style={{
              display: 'grid', gridTemplateColumns: '80px 1.2fr 1fr 160px 40px',
              gap: 32, alignItems: 'center', padding: '32px 0',
              borderBottom: `1px solid ${P.rule}`, textDecoration: 'none', color: 'inherit',
            }}>
              <div style={{ fontFamily: P.mono, fontSize: 12, letterSpacing: '0.2em', color: P.accent, opacity: 0.7 }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <div>
                <div style={{ fontFamily: P.display, fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em' }}>{p.title}</div>
                <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: P.accent, marginTop: 8 }}>
                  {p.pillar} · {p.pathway}
                </div>
              </div>
              <p style={{ fontFamily: P.serif, fontSize: 14, lineHeight: 1.55, color: P.mute, margin: 0 }}>
                {p.short.slice(0, 130)}…
              </p>
              <div style={{
                fontFamily: P.mono, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: p.status === 'Active' ? P.accent : P.mute,
                border: `1px solid ${p.status === 'Active' ? P.accent : P.rule}`,
                padding: '6px 12px', borderRadius: 999, textAlign: 'center', justifySelf: 'start',
              }}>{p.status}</div>
              <div style={{ fontFamily: P.mono, fontSize: 14, color: P.accent, textAlign: 'right' }}>→</div>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 48, display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <a href="projects.html" style={{
            fontFamily: P.mono, fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
            color: P.accent, textDecoration: 'none', borderBottom: `1px solid ${P.accent}`, paddingBottom: 6,
          }}>Explore the Projects →</a>
          <a href="events.html" style={{
            fontFamily: P.mono, fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
            color: P.accent, textDecoration: 'none', borderBottom: `1px solid ${P.accent}`, paddingBottom: 6,
          }}>See Upcoming Events →</a>
        </div>
      </div>
    </section>
  );
}

function ImpactAllocation() {
  const allocation = [
    { pillar: 'Reparations',  pct: 40, note: 'Direct reparative funding to descendants' },
    { pillar: 'Landback',     pct: 25, note: 'Acquisition and return of ancestral land' },
    { pillar: 'Rematriation', pct: 20, note: 'First Foods and cultural restoration' },
    { pillar: 'Repatriation', pct: 15, note: 'Retreats and ceremonial reconnection' },
  ];
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '140px 56px', borderTop: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em', textTransform: 'uppercase', color: P.accent, marginBottom: 24 }}>Where Your Giving Flows</div>
        <h2 style={{ fontFamily: P.display, fontSize: 56, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 24px' }}>Transparent allocation,<br/>across four pillars.</h2>
        <p style={{ fontFamily: P.serif, fontSize: 16, lineHeight: 1.65, color: P.mute, margin: '0 0 48px', maxWidth: 720 }}>
          Gifts pool into the <span style={{ color: P.surface, fontStyle: 'italic' }}>Reparations Accelerator</span> and flow through our four pillars of work. Donors don't earmark — we pool and report back, so the work isn't slowed by administrative burden.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {allocation.map((a, i) => (
            <div key={a.pillar} style={{
              display: 'grid', gridTemplateColumns: '180px 1fr 80px 1fr',
              gap: 32, alignItems: 'center', padding: '28px 0',
              borderTop: `1px solid ${P.rule}`,
              borderBottom: i === allocation.length - 1 ? `1px solid ${P.rule}` : 'none',
            }}>
              <div style={{ fontFamily: P.display, fontSize: 26, fontWeight: 500 }}>{a.pillar}</div>
              <div style={{ height: 2, background: P.rule, position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: `${a.pct}%`, background: P.accent }} />
              </div>
              <div style={{ fontFamily: P.mono, fontSize: 18, letterSpacing: '0.04em', color: P.accent, textAlign: 'right' }}>{a.pct}%</div>
              <div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 15, color: P.mute }}>{a.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ImpactReport() {
  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' }}>
        <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em', textTransform: 'uppercase', color: P.accent, marginBottom: 24 }}>Accountability</div>
        <h2 style={{ fontFamily: P.display, fontSize: 56, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 24px' }}>
          Read our <span style={{ fontStyle: 'italic', color: P.accent }}>annual report</span>.
        </h2>
        <p style={{ fontFamily: P.serif, fontSize: 17, lineHeight: 1.6, color: P.mute, margin: '0 0 40px' }}>
          Every dollar tracked, every outcome documented, every partnership accountable to the communities owed repair.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 20, flexWrap: 'wrap' }}>
          <a href="#" 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,
          }}>2026 Report →</a>
          <a href="donate.html" style={{
            border: `1px solid ${P.surface}`, color: P.surface, padding: '20px 40px', borderRadius: 999, textDecoration: 'none',
            fontFamily: P.mono, fontSize: 12, letterSpacing: '0.28em', textTransform: 'uppercase', fontWeight: 500,
          }}>Give Now</a>
        </div>
      </div>
    </section>
  );
}

function ImpactPage() {
  return (
    <PageShell current="impact">
      <PageHero
        eyebrow="Reparative Impact"
        title={<>Every dollar<br/><span style={{ fontStyle: 'italic', color: P.accent }}>becomes repair.</span></>}
        sub="Transparent reporting on how Sacred Roux channels reparative resources back to the communities owed repair — measured across three pathways of outcome."
        image={SR.heroImages.hands}
      />
      <ImpactHeadlineStats />
      <Impact3R />
      <ImpactProjects />
      <ImpactAllocation />
      <ImpactReport />
    </PageShell>
  );
}

window.ImpactPage = ImpactPage;