// Direction 2 v3 — Ceremonial
// - Real logo PNG as mark
// - Flower-of-life + pot-spiral motifs from the logo as ambient decoration
// - No gumbo/recipe section, no plant labels
// - Who We Serve and Impact as separate full-width sections
// - EB Garamond + Work Sans (D1 typography)

const A2v3 = {
  bg: 'var(--d2-bg)',
  surface: 'var(--d2-surface)',
  ink: 'var(--d2-ink)',
  mute: 'var(--d2-mute)',
  accent: 'var(--d2-accent)',
  rule: 'var(--d2-rule)',
};

function D2v3Ring({ size = 200, stroke = 1, style, dashed }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={style}>
      <circle cx="50" cy="50" r="49" fill="none" stroke="currentColor" strokeWidth={stroke}
        strokeDasharray={dashed ? '1 2' : undefined} />
    </svg>
  );
}

function D2v3Nav() {
  const items = [
    { label: 'About', href: 'about.html' },
    { label: 'Projects', href: 'projects.html' },
    { label: 'Events', href: 'events.html' },
    { label: 'Impact', href: 'impact.html' },
  ];
  return (
    <header style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
      padding: '28px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      color: A2v3.surface,
    }}>
      <SRLogoLockup />
      <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        {items.map(i => (
          <a key={i.label} href={i.href} style={{
            fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.2em',
            textTransform: 'uppercase', color: 'inherit', textDecoration: 'none',
          }}>{i.label}</a>
        ))}
        <a href="donate.html" style={{
          fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.2em',
          textTransform: 'uppercase', color: 'inherit', textDecoration: 'none',
          border: '1px solid currentColor', padding: '12px 22px', borderRadius: 999,
        }}>Support</a>
      </nav>
    </header>
  );
}

function D2v3Hero({ headline }) {
  return (
    <section style={{
      position: 'relative', minHeight: 980, overflow: 'hidden',
      background: A2v3.bg, color: A2v3.surface,
    }}>
      <D2v3Nav />

      {/* flower of life background — large, faint */}
      <div style={{
        position: 'absolute', top: '52%', left: '50%', transform: 'translate(-50%, -50%)',
        color: A2v3.accent, opacity: 0.12, pointerEvents: 'none',
      }}>
        <FlowerOfLife size={1100} rings={5} stroke={0.5} />
      </div>

      {/* outer rings */}
      <div style={{
        position: 'absolute', top: '52%', left: '50%', transform: 'translate(-50%, -50%)',
        color: A2v3.accent, opacity: 0.3, pointerEvents: 'none',
      }}>
        <D2v3Ring size={1180} stroke={0.4} dashed />
      </div>

      {/* central image in circle */}
      <div style={{
        position: 'absolute', top: '52%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 560, height: 560, borderRadius: '50%', overflow: 'hidden',
        border: `1px solid ${A2v3.accent}`,
      }}>
        <div style={{
          width: '100%', height: '100%',
          backgroundImage: `url(${SR.heroImages.water})`, backgroundSize: 'cover',
          backgroundPosition: 'center', filter: 'saturate(0.35) contrast(1.15) brightness(0.55)',
        }} />
      </div>

      {/* pot spiral motif subtly overlaid at bottom-center */}
      <div style={{
        position: 'absolute', top: '52%', left: '50%', transform: 'translate(-50%, -50%)',
        color: A2v3.accent, opacity: 0.35, pointerEvents: 'none', mixBlendMode: 'screen',
      }}>
        <PotSpiral size={320} />
      </div>

      <div style={{ position: 'relative', padding: '180px 56px 80px', maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', alignItems: 'start', gap: 40 }}>
          <div style={{ paddingTop: 60 }}>
            <div style={{
              fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
              textTransform: 'uppercase', color: A2v3.accent, marginBottom: 16,
            }}>01 — The Work</div>
            <h1 style={{
              fontFamily: 'var(--d2-display)', fontSize: 68, lineHeight: 1.05,
              fontWeight: 500, letterSpacing: '-0.015em', margin: 0,
            }}>
              {headline}
            </h1>
          </div>
          <div />
          <div style={{ paddingTop: 340 }}>
            <p style={{
              fontFamily: 'var(--d2-serif)', fontSize: 16, lineHeight: 1.7,
              color: A2v3.mute, margin: '0 0 32px',
            }}>
              {SR.mission}
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {[
                { label: 'Give Now', href: 'donate.html', primary: true },
                { label: 'See the Projects', href: 'projects.html' },
                { label: 'See the Vision', href: 'about.html' },
              ].map((a) => (
                <a key={a.label} href={a.href} style={{
                  fontFamily: 'var(--d2-display)', fontSize: 22, fontStyle: 'italic',
                  color: a.primary ? A2v3.accent : A2v3.surface, textDecoration: 'none',
                  padding: '14px 0', borderBottom: `1px solid ${A2v3.rule}`,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <span>{a.label}</span>
                  <span style={{ fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.2em', opacity: 0.6 }}>
                    →
                  </span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
        fontFamily: 'var(--d2-display)', fontSize: 22, fontStyle: 'italic',
        color: A2v3.accent, letterSpacing: '0.02em',
      }}>
        Lakay — Returning Home
      </div>
    </section>
  );
}

function D2v3Pillars() {
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '140px 56px', borderTop: `1px solid ${A2v3.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
          textTransform: 'uppercase', color: A2v3.accent, marginBottom: 48,
        }}>02 — Four Pillars</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {SR.pillars.map((p, i) => (
            <div key={p.name} style={{
              padding: '40px 32px 40px 0',
              borderLeft: i > 0 ? `1px solid ${A2v3.rule}` : 'none',
              paddingLeft: i > 0 ? 32 : 0,
            }}>
              <div style={{
                color: A2v3.accent, marginBottom: 28,
                width: 80, height: 80, borderRadius: '50%',
                border: `1px solid ${A2v3.accent}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                opacity: 0.9,
              }}>
                <Trefoil size={40} />
              </div>
              <div style={{
                fontFamily: 'var(--d2-display)', fontSize: 36,
                lineHeight: 1.05, fontWeight: 500, marginBottom: 10,
              }}>
                {p.name}
              </div>
              <div style={{
                fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: A2v3.accent,
              }}>
                {p.kreyol}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function D2v3About() {
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '160px 56px', position: 'relative', overflow: 'hidden' }}>
      {/* flower of life margin ornaments */}
      <div style={{ position: 'absolute', left: -120, top: 80, color: A2v3.accent, opacity: 0.1 }}>
        <FlowerOfLife size={380} rings={3} />
      </div>
      <div style={{ position: 'absolute', right: -120, bottom: 60, color: A2v3.accent, opacity: 0.1 }}>
        <FlowerOfLife size={380} rings={3} />
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{
          fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
          textTransform: 'uppercase', color: A2v3.accent, marginBottom: 64, textAlign: 'center',
        }}>03 — Who We Are</div>
        <p style={{
          fontFamily: 'var(--d2-display)', fontSize: 40, lineHeight: 1.4,
          fontWeight: 500, letterSpacing: '-0.01em',
          margin: 0, textAlign: 'center',
        }}>
          Sacred Roux is a descendant-led nonprofit.
          Inspired by the legacy of <span style={{ color: A2v3.accent, fontStyle: 'italic' }}>Marie Thérèse dite CoinCoin</span> — a matriarch who turned her own freedom into liberation for her community — <span style={{ color: A2v3.accent, fontStyle: 'italic' }}>we pick up where she left off</span>, channeling reparative resources back to the descendants and communities owed repair.
        </p>
        <div style={{ textAlign: 'center', marginTop: 64 }}>
          <a href="about.html" style={{
            fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: A2v3.accent, textDecoration: 'none',
            borderBottom: `1px solid ${A2v3.accent}`, paddingBottom: 6,
          }}>Read the Full Story</a>
        </div>
      </div>
    </section>
  );
}

function D2v3Projects() {
  const [hover, setHover] = React.useState(null);
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '140px 56px', borderTop: `1px solid ${A2v3.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72 }}>
          <div>
            <div style={{
              fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
              textTransform: 'uppercase', color: A2v3.accent, marginBottom: 24,
            }}>04 — Projects in Motion</div>
            <h2 style={{
              fontFamily: 'var(--d2-display)', fontSize: 72,
              fontWeight: 500, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.05,
            }}>
              Each initiative<br/>is rooted in a pillar.
            </h2>
          </div>
          <div style={{ maxWidth: 360 }}>
            <p style={{
              fontFamily: 'var(--d2-serif)', fontSize: 15, lineHeight: 1.65,
              color: A2v3.mute, margin: 0,
            }}>
              Working together to build a comprehensive ecosystem of repair and restoration across the communities we serve.
            </p>
          </div>
        </div>

        <div style={{ borderTop: `1px solid ${A2v3.rule}` }}>
          {SR.projects.map((p, i) => (
            <a key={p.slug} href={`projects.html#${p.slug}`}
              onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
              style={{
                display: 'grid', gridTemplateColumns: '80px 1.4fr 1fr 240px 40px',
                gap: 32, alignItems: 'center', padding: '32px 0',
                borderBottom: `1px solid ${A2v3.rule}`, textDecoration: 'none', color: 'inherit',
                background: hover === i ? `${A2v3.accent}08` : 'transparent',
                transition: 'background .3s',
              }}>
              <div style={{
                fontFamily: 'var(--d2-mono)', fontSize: 12, letterSpacing: '0.2em',
                color: A2v3.accent, opacity: 0.7,
              }}>{String(i + 1).padStart(2, '0')}</div>
              <div>
                <div style={{
                  fontFamily: 'var(--d2-display)', fontSize: 32,
                  fontWeight: 500, letterSpacing: '-0.01em',
                }}>{p.title}</div>
                <div style={{
                  fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.24em',
                  textTransform: 'uppercase', color: A2v3.accent, marginTop: 8,
                }}>
                  {p.pillar} · {p.pathway}
                </div>
              </div>
              <p style={{
                fontFamily: 'var(--d2-serif)', fontSize: 14, lineHeight: 1.55,
                color: A2v3.mute, margin: 0,
              }}>{p.short.slice(0, 130)}…</p>
              <div style={{
                width: 180, height: 120, borderRadius: 4, overflow: 'hidden',
                backgroundImage: `url(${p.img})`, backgroundSize: 'cover',
                backgroundPosition: 'center',
                filter: 'saturate(0.4) brightness(0.85)',
                transform: hover === i ? 'scale(1.03)' : 'scale(1)', transition: 'transform .4s',
              }} />
              <div style={{
                fontFamily: 'var(--d2-mono)', fontSize: 14, color: A2v3.accent,
                transform: hover === i ? 'translateX(4px)' : 'translateX(0)',
                transition: 'transform .3s',
              }}>→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// WHO WE SERVE — full width, its own section
function D2v3Serve() {
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '160px 56px', borderTop: `1px solid ${A2v3.rule}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: -200, top: '50%', transform: 'translateY(-50%)', color: A2v3.accent, opacity: 0.08 }}>
        <FlowerOfLife size={720} rings={4} />
      </div>

      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 80, marginBottom: 80, alignItems: 'flex-end' }}>
          <div>
            <div style={{
              fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
              textTransform: 'uppercase', color: A2v3.accent, marginBottom: 32,
            }}>05 — Who We Serve</div>
            <h2 style={{
              fontFamily: 'var(--d2-display)', fontSize: 72,
              fontWeight: 500, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.05,
            }}>
              Communities<br/>experiencing<br/>colonial harm.
            </h2>
          </div>
          <div>
            <p style={{
              fontFamily: 'var(--d2-serif)', fontSize: 17, lineHeight: 1.7,
              color: A2v3.mute, margin: 0,
            }}>
              Our reparative work flows to three distinct but interwoven communities — each owed repair, restoration, and reconnection on their own terms.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${A2v3.rule}` }}>
          {SR.audiences.map((a, i) => (
            <div key={a.name} style={{
              padding: '56px 40px 0 0',
              borderLeft: i > 0 ? `1px solid ${A2v3.rule}` : 'none',
              paddingLeft: i > 0 ? 40 : 0,
            }}>
              <div style={{
                fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.24em',
                color: A2v3.accent, opacity: 0.7, marginBottom: 20,
              }}>0{i + 1} / 03</div>
              <div style={{
                fontFamily: 'var(--d2-display)', fontSize: 26,
                fontWeight: 500, marginBottom: 20, lineHeight: 1.15,
                letterSpacing: '-0.005em',
              }}>{a.name}</div>
              <p style={{
                fontFamily: 'var(--d2-serif)', fontSize: 15, lineHeight: 1.7,
                color: A2v3.mute, margin: 0,
              }}>{a.body}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, textAlign: 'center' }}>
          <a href="impact.html" style={{
            fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.28em',
            textTransform: 'uppercase', color: A2v3.accent, textDecoration: 'none',
            borderBottom: `1px solid ${A2v3.accent}`, paddingBottom: 8,
          }}>See How Your Giving Returns to Community →</a>
        </div>
      </div>
    </section>
  );
}

// REPARATIVE IMPACT — full width, its own section
function D2v3Impact() {
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '160px 56px', borderTop: `1px solid ${A2v3.rule}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: -200, top: '50%', transform: 'translateY(-50%)', color: A2v3.accent, opacity: 0.08 }}>
        <FlowerOfLife size={720} rings={4} />
      </div>

      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 80, marginBottom: 80, alignItems: 'flex-end' }}>
          <div>
            <div style={{
              fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
              textTransform: 'uppercase', color: A2v3.accent, marginBottom: 32,
            }}>07 — Reparative Impact</div>
            <h2 style={{
              fontFamily: 'var(--d2-display)', fontSize: 72,
              fontWeight: 500, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.05,
            }}>
              Repair · Restore ·<br/>Reconnect.
            </h2>
          </div>
          <div>
            <p style={{
              fontFamily: 'var(--d2-serif)', fontSize: 17, lineHeight: 1.7,
              color: A2v3.mute, margin: 0,
            }}>
              Three pathways of outcome — each one measurable, each one accountable to the communities we serve.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${A2v3.rule}` }}>
          {SR.threeRs.map((r, i) => (
            <div key={r.word} style={{
              padding: '56px 40px 0 0',
              borderLeft: i > 0 ? `1px solid ${A2v3.rule}` : 'none',
              paddingLeft: i > 0 ? 40 : 0,
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: '50%',
                border: `1px solid ${A2v3.accent}`, color: A2v3.accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 24,
                fontFamily: 'var(--d2-display)', fontSize: 26, fontStyle: 'italic', fontWeight: 500,
              }}>{r.letter}</div>
              <div style={{
                fontFamily: 'var(--d2-display)', fontSize: 32,
                fontWeight: 500, marginBottom: 6, lineHeight: 1,
              }}>{r.word}</div>
              <div style={{
                fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.24em',
                textTransform: 'uppercase', color: A2v3.accent, marginBottom: 20,
              }}>{r.sub}</div>
              <p style={{
                fontFamily: 'var(--d2-serif)', fontSize: 15, lineHeight: 1.7,
                color: A2v3.mute, margin: 0,
              }}>{r.body}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, textAlign: 'center' }}>
          <a href="impact.html" style={{
            fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.28em',
            textTransform: 'uppercase', color: A2v3.accent, textDecoration: 'none',
            borderBottom: `1px solid ${A2v3.accent}`, paddingBottom: 8,
          }}>See the Full Impact Report →</a>
        </div>
      </div>
    </section>
  );
}

function D2v3GiveNow() {
  const raised = 47300;
  const total = SR.fundPhases.reduce((a, p) => a + p.goal, 0);
  const pct = (raised / total) * 100;
  const size = 340;
  const r = (size - 40) / 2;
  const c = 2 * Math.PI * r;
  // Mirrors the "Where Your Gift Goes" framing on the donate page:
  // gifts pool into the Reparations Accelerator and flow through the four pillars.
  const steps = [
    { n: '01', t: 'Your gift enters the Reparations Accelerator — one pooled fund so donors never have to earmark or navigate red tape.' },
    { n: '02', t: 'The Accelerator flows to the four pillars — Reparations, Landback, Rematriation, and Repatriation — through descendant-led projects.' },
    { n: '03', t: 'We report back transparently — measurable repair, restoration, and reconnection returned to the communities we serve.' },
  ];
  return (
    <section id="donate" style={{
      background: A2v3.bg, color: A2v3.surface, padding: '180px 56px',
      borderTop: `1px solid ${A2v3.rule}`, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        color: A2v3.accent, opacity: 0.08, pointerEvents: 'none',
      }}>
        <FlowerOfLife size={1000} rings={5} />
      </div>

      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative' }}>
        {/* Section header */}
        <div style={{ textAlign: 'center', marginBottom: 96 }}>
          <div style={{
            fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
            textTransform: 'uppercase', color: A2v3.accent, marginBottom: 24,
          }}>08 — The Reparative Model · Give Now</div>
          <h2 style={{
            fontFamily: 'var(--d2-display)', fontSize: 128,
            fontWeight: 500, margin: '0 0 4px', letterSpacing: '-0.04em', lineHeight: 1,
          }}>
            FUBU.
          </h2>
          <div style={{
            fontFamily: 'var(--d2-display)', fontSize: 24, fontStyle: 'italic',
            color: A2v3.accent,
          }}>
            For Us · By Us — where your giving becomes repair.
          </div>
        </div>

        {/* Two-column: model steps + give CTA with progress */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'center' }}>
          {/* LEFT — model steps */}
          <div>
            <div style={{
              fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.3em',
              textTransform: 'uppercase', color: A2v3.accent, marginBottom: 32,
            }}>How Your Giving Flows</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {steps.map((s, i) => (
                <div key={s.n} style={{
                  display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24,
                  padding: '28px 0', alignItems: 'flex-start',
                  borderTop: `1px solid ${A2v3.rule}`,
                  borderBottom: i === steps.length - 1 ? `1px solid ${A2v3.rule}` : 'none',
                }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: '50%',
                    border: `1px solid ${A2v3.accent}`, color: A2v3.accent,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--d2-display)', fontSize: 18, fontStyle: 'italic', fontWeight: 500,
                  }}>{s.n}</div>
                  <p style={{
                    fontFamily: 'var(--d2-serif)', fontSize: 17, lineHeight: 1.6,
                    color: A2v3.surface, margin: 0, paddingTop: 14,
                  }}>{s.t}</p>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — progress ring + CTA */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ position: 'relative', width: size, height: size, marginBottom: 40 }}>
              <div style={{
                position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: A2v3.accent, opacity: 0.2,
              }}>
                <FlowerOfLife size={size - 40} rings={3} />
              </div>
              <svg width={size} height={size} style={{ transform: 'rotate(-90deg)', position: 'relative' }}>
                <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={A2v3.rule} strokeWidth="0.5" />
                <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={A2v3.accent} strokeWidth="1"
                  strokeDasharray={c} strokeDashoffset={c * (1 - pct/100)} />
              </svg>
              <div style={{
                position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center',
              }}>
                <div style={{
                  fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.3em',
                  textTransform: 'uppercase', color: A2v3.accent, marginBottom: 10,
                }}>Reparations Accelerator</div>
                <div style={{ fontFamily: 'var(--d2-display)', fontSize: 48, fontWeight: 500, color: A2v3.surface, lineHeight: 1 }}>
                  ${raised.toLocaleString()}
                </div>
                <div style={{
                  fontFamily: 'var(--d2-serif)', fontSize: 13, color: A2v3.mute, marginTop: 8,
                }}>of ${total.toLocaleString()} goal</div>
              </div>
            </div>

            {/* Phase rails */}
            <div style={{ width: '100%', maxWidth: 440, display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 40 }}>
              {SR.fundPhases.map((p, i) => {
                const cumul = SR.fundPhases.slice(0, i + 1).reduce((a, x) => a + x.goal, 0);
                const reached = raised >= cumul;
                return (
                  <div key={p.name} style={{
                    display: 'grid', gridTemplateColumns: '100px 1fr 60px', gap: 12, alignItems: 'center',
                    opacity: reached ? 1 : 0.55,
                  }}>
                    <div style={{ fontFamily: 'var(--d2-display)', fontSize: 14 }}>{p.name}</div>
                    <div style={{ height: 1, background: A2v3.rule, position: 'relative' }}>
                      <div style={{
                        position: 'absolute', left: 0, top: 0, height: '100%',
                        width: reached ? '100%' : '0%', background: A2v3.accent,
                      }} />
                    </div>
                    <div style={{
                      fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.18em',
                      color: A2v3.accent, textAlign: 'right',
                    }}>${(p.goal / 1000).toFixed(0)}K</div>
                  </div>
                );
              })}
            </div>

            {/* CTA */}
            <a href="donate.html" style={{
              display: 'inline-flex', alignItems: 'center', gap: 16,
              background: A2v3.accent, color: A2v3.bg,
              padding: '20px 40px', borderRadius: 999, textDecoration: 'none',
              fontFamily: 'var(--d2-mono)', fontSize: 12, letterSpacing: '0.28em',
              textTransform: 'uppercase', fontWeight: 500,
            }}>
              <span>Give Now</span>
              <span style={{ fontFamily: 'var(--d2-display)', fontStyle: 'italic', fontSize: 16, letterSpacing: '0.04em', textTransform: 'none' }}>→</span>
            </a>
            <div style={{
              marginTop: 16, fontFamily: 'var(--d2-serif)', fontSize: 13,
              color: A2v3.mute, fontStyle: 'italic',
            }}>
              Tax-deductible · 501(c)(3) nonprofit
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function D2v3Partners() {
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '140px 56px', borderTop: `1px solid ${A2v3.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72 }}>
          <div>
            <div style={{
              fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
              textTransform: 'uppercase', color: A2v3.accent, marginBottom: 24,
            }}>09 — Building Together</div>
            <h2 style={{
              fontFamily: 'var(--d2-display)', fontSize: 64,
              fontWeight: 500, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.05,
            }}>
              Partner Organizations
            </h2>
          </div>
          <p style={{
            maxWidth: 380, fontFamily: 'var(--d2-serif)', fontSize: 15,
            lineHeight: 1.65, color: A2v3.mute, margin: 0,
          }}>
            Sister organizations that have embedded the work of repair into their core business models.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {SR.partners.map((p) => (
            <div key={p.name} style={{
              padding: 40, border: `1px solid ${A2v3.rule}`, borderRadius: 8,
              display: 'flex', flexDirection: 'column', minHeight: 340, position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', right: -40, top: -40, color: A2v3.accent, opacity: 0.15,
              }}>
                <FlowerOfLife size={180} rings={2} />
              </div>
              <div style={{
                color: A2v3.accent, marginBottom: 28, opacity: 0.9,
                width: 48, height: 48, borderRadius: '50%',
                border: `1px solid ${A2v3.accent}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Trefoil size={26} />
              </div>
              <div style={{
                fontFamily: 'var(--d2-display)', fontSize: 32,
                fontWeight: 500, marginBottom: 10, position: 'relative',
              }}>{p.name}</div>
              <div style={{
                fontFamily: 'var(--d2-mono)', fontSize: 9, letterSpacing: '0.24em',
                textTransform: 'uppercase', color: A2v3.accent, marginBottom: 20,
              }}>{p.tag}</div>
              <p style={{
                fontFamily: 'var(--d2-serif)', fontSize: 13.5, lineHeight: 1.65,
                color: A2v3.mute, margin: 0, position: 'relative',
              }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function D2v3Progress_unused() {
  const raised = 47300;
  const total = SR.fundPhases.reduce((a, p) => a + p.goal, 0);
  const pct = (raised / total) * 100;
  const size = 400;
  const r = (size - 40) / 2;
  const c = 2 * Math.PI * r;
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '140px 56px', borderTop: `1px solid ${A2v3.rule}` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div style={{
            fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
            textTransform: 'uppercase', color: A2v3.accent, marginBottom: 24,
          }}>09 — Sacred Journey</div>
          <h2 style={{
            fontFamily: 'var(--d2-display)', fontSize: 56,
            fontWeight: 500, margin: '0 0 24px', letterSpacing: '-0.02em', lineHeight: 1.05,
          }}>
            Collective Healing Fund
          </h2>
          <p style={{
            fontFamily: 'var(--d2-serif)', fontSize: 16, lineHeight: 1.65,
            color: A2v3.mute, margin: 0,
          }}>
            Aggregate progress across our four pillars, sourced transparently from CoinCoin as the platform comes online.
          </p>
          <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {SR.fundPhases.map((p, i) => {
              const cumul = SR.fundPhases.slice(0, i + 1).reduce((a, x) => a + x.goal, 0);
              const reached = raised >= cumul;
              return (
                <div key={p.name} style={{
                  display: 'grid', gridTemplateColumns: '24px 120px 1fr 80px', gap: 16, alignItems: 'center',
                  opacity: reached ? 1 : 0.6,
                }}>
                  <div style={{ color: A2v3.accent }}>
                    <D2v3Ring size={14} stroke={1.5} />
                  </div>
                  <div style={{ fontFamily: 'var(--d2-display)', fontSize: 18 }}>{p.name}</div>
                  <div style={{ height: 1, background: A2v3.rule, position: 'relative' }}>
                    <div style={{
                      position: 'absolute', left: 0, top: 0, height: '100%',
                      width: reached ? '100%' : '0%', background: A2v3.accent,
                    }} />
                  </div>
                  <div style={{
                    fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.2em',
                    color: A2v3.accent, textAlign: 'right',
                  }}>${(p.goal / 1000).toFixed(0)}K</div>
                </div>
              );
            })}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div style={{ position: 'relative', width: size, height: size }}>
            <div style={{
              position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: A2v3.accent, opacity: 0.2,
            }}>
              <FlowerOfLife size={size - 40} rings={3} />
            </div>
            <svg width={size} height={size} style={{ transform: 'rotate(-90deg)', position: 'relative' }}>
              <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={A2v3.rule} strokeWidth="0.5" />
              <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={A2v3.accent} strokeWidth="1"
                strokeDasharray={c} strokeDashoffset={c * (1 - pct/100)} />
            </svg>
            <div style={{
              position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{
                fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.3em',
                textTransform: 'uppercase', color: A2v3.accent, marginBottom: 14,
              }}>Raised</div>
              <div style={{ fontFamily: 'var(--d2-display)', fontSize: 56, fontWeight: 500, color: A2v3.surface }}>
                ${raised.toLocaleString()}
              </div>
              <div style={{
                fontFamily: 'var(--d2-serif)', fontSize: 14, color: A2v3.mute, marginTop: 8,
              }}>of ${total.toLocaleString()} collective goal</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function D2v3Newsletter() {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  async function onSubmit(e) {
    e.preventDefault();
    if (!email || loading) return;
    setLoading(true);
    setError('');
    try {
      const resp = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, source: 'home-newsletter' }),
      });
      const data = await resp.json().catch(() => ({}));
      if (!resp.ok) {
        setError(data.error || 'Something went wrong. Please try again.');
        setLoading(false);
        return;
      }
      setSent(true);
    } catch (err) {
      setError('Network error. Please try again.');
    } finally {
      setLoading(false);
    }
  }
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '180px 56px', borderTop: `1px solid ${A2v3.rule}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        color: A2v3.accent, opacity: 0.12, pointerEvents: 'none',
      }}>
        <FlowerOfLife size={700} rings={4} />
      </div>
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        color: A2v3.accent, opacity: 0.3, pointerEvents: 'none',
      }}>
        <D2v3Ring size={560} stroke={0.5} />
      </div>

      <div style={{ maxWidth: 720, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'var(--d2-display)', fontSize: 26, fontStyle: 'italic',
          color: A2v3.accent, marginBottom: 16,
        }}>Kè — From the Heart</div>
        <h2 style={{
          fontFamily: 'var(--d2-display)', fontSize: 64,
          fontWeight: 500, margin: '0 0 24px', letterSpacing: '-0.02em', lineHeight: 1.05,
        }}>
          Join our healing journey.
        </h2>
        <p style={{
          fontFamily: 'var(--d2-serif)', fontSize: 16, lineHeight: 1.6,
          color: A2v3.mute, margin: '0 0 48px',
        }}>
          Receive updates on our progress and invitations to this sacred work of restoration.
        </p>
        {sent ? (
          <div>
            <div style={{ fontFamily: 'var(--d2-display)', fontSize: 32, fontStyle: 'italic', color: A2v3.accent }}>
              Bénédiksyon — Blessings
            </div>
            <p style={{ marginTop: 12, fontFamily: 'var(--d2-serif)', fontSize: 14, color: A2v3.mute }}>
              You've joined our healing journey. Watch for updates in your inbox.
            </p>
          </div>
        ) : (
          <>
            <form onSubmit={onSubmit} style={{
              display: 'flex', gap: 0, border: `1px solid ${A2v3.rule}`, borderRadius: 999, padding: 6,
              background: `${A2v3.ink}50`,
            }}>
              <input value={email} onChange={e => setEmail(e.target.value)} type="email" placeholder="your email"
                required
                disabled={loading}
                style={{
                  flex: 1, background: 'transparent', border: 'none', outline: 'none',
                  color: A2v3.surface, fontFamily: 'var(--d2-serif)', fontSize: 15, padding: '12px 20px',
                }} />
              <button type="submit" disabled={loading} style={{
                background: A2v3.accent, color: A2v3.bg, border: 'none',
                cursor: loading ? 'wait' : 'pointer',
                opacity: loading ? 0.7 : 1,
                fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.22em',
                textTransform: 'uppercase', fontWeight: 500, padding: '12px 28px', borderRadius: 999,
              }}>{loading ? 'Subscribing…' : 'Subscribe'}</button>
            </form>
            {error && (
              <p style={{
                marginTop: 16, fontFamily: 'var(--d2-serif)', fontSize: 13,
                color: A2v3.accent, fontStyle: 'italic',
              }}>{error}</p>
            )}
          </>
        )}
      </div>
    </section>
  );
}

function D2v3Footer() {
  return (
    <footer style={{ background: A2v3.bg, color: A2v3.surface, padding: '80px 56px 40px', borderTop: `1px solid ${A2v3.rule}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 80 }}>
          <div>
            <div style={{ marginBottom: 20 }}>
              <SRLogoLockup />
            </div>
            <p style={{
              fontFamily: 'var(--d2-serif)', fontSize: 15, lineHeight: 1.6,
              color: A2v3.mute, margin: '0 0 20px', maxWidth: 380,
            }}>
              A descendant-led nonprofit repairing, restoring, and reconnecting communities owed repair.
            </p>
            <div style={{ fontFamily: 'var(--d2-display)', fontSize: 20, fontStyle: 'italic', color: A2v3.accent, marginBottom: 20 }}>
              Lakay — Returning Home
            </div>
            <div style={{
              fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.24em',
              textTransform: 'uppercase', opacity: 0.6,
            }}>A 501(c)(3) nonprofit · Seattle, Washington</div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: A2v3.accent, marginBottom: 20 }}>Navigate</div>
            {[
              { label: 'About', href: 'about.html' },
              { label: 'Projects', href: 'projects.html' },
              { label: 'Events', href: 'events.html' },
              { label: 'Support', href: 'donate.html' },
            ].map(i => (
              <a key={i.label} href={i.href} style={{ display: 'block', fontFamily: 'var(--d2-display)', fontSize: 18, color: A2v3.surface, textDecoration: 'none', marginBottom: 10 }}>{i.label}</a>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: A2v3.accent, marginBottom: 20 }}>Connect</div>
            <a href="mailto:christopher@sacredroux.org" style={{ display: 'block', fontFamily: 'var(--d2-serif)', fontSize: 14, color: A2v3.surface, textDecoration: 'none', marginBottom: 10 }}>christopher@sacredroux.org</a>
            <div style={{ fontFamily: 'var(--d2-serif)', fontSize: 14, opacity: 0.7 }}>Seattle, Washington</div>
          </div>
          <div style={{ textAlign: 'right', color: A2v3.accent, opacity: 0.9 }}>
            <SRLogoMark size={110} />
          </div>
        </div>
        <div style={{
          borderTop: `1px solid ${A2v3.rule}`, paddingTop: 32, display: 'flex',
          justifyContent: 'space-between', fontFamily: 'var(--d2-mono)', fontSize: 10,
          letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5,
        }}>
          <div>© 2026 Sacred Roux. All rights reserved.</div>
          <div style={{ fontStyle: 'italic', fontFamily: 'var(--d2-display)', fontSize: 13, textTransform: 'none', letterSpacing: '0.04em' }}>
            Descendants of Marie Thérèse dite Coincoin
          </div>
        </div>
      </div>
    </footer>
  );
}

function D2v3Events() {
  const events = [
    {
      date: 'Summer 2026',
      name: 'Reparative Grant · Black Food Fund',
      type: 'Grant Distribution',
      loc: 'Washington & Oregon',
    },
    {
      date: 'Summer 2026',
      name: 'First Foods Market Distribution',
      type: 'Foodways',
      loc: 'Seattle · Pacific Northwest',
    },
    {
      date: 'Autumn 2026',
      name: 'Sacred Retreats · Autumn Gathering',
      type: 'Descendant Retreat',
      loc: 'Pacific Northwest',
    },
  ];
  return (
    <section style={{ background: A2v3.bg, color: A2v3.surface, padding: '160px 56px', borderTop: `1px solid ${A2v3.rule}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: -200, top: '50%', transform: 'translateY(-50%)', color: A2v3.accent, opacity: 0.08 }}>
        <FlowerOfLife size={720} rings={4} />
      </div>

      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 80, marginBottom: 72, alignItems: 'flex-end' }}>
          <div>
            <div style={{
              fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.36em',
              textTransform: 'uppercase', color: A2v3.accent, marginBottom: 32,
            }}>06 — Events & Gatherings</div>
            <h2 style={{
              fontFamily: 'var(--d2-display)', fontSize: 72,
              fontWeight: 500, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.05,
            }}>
              Where the work<br/>becomes embodied.
            </h2>
          </div>
          <div>
            <p style={{
              fontFamily: 'var(--d2-serif)', fontSize: 17, lineHeight: 1.7,
              color: A2v3.mute, margin: 0,
            }}>
              Retreats, ceremony, community work days, and descendant gatherings — the places where reparative knowledge lives in the body and the land.
            </p>
          </div>
        </div>

        <div style={{ borderTop: `1px solid ${A2v3.rule}` }}>
          {events.map((e, i) => (
            <a key={i} href="events.html" style={{
              display: 'grid', gridTemplateColumns: '160px 1fr 260px 40px',
              gap: 32, alignItems: 'center', padding: '32px 0',
              borderBottom: `1px solid ${A2v3.rule}`, textDecoration: 'none', color: 'inherit',
            }}>
              <div style={{
                fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: A2v3.accent,
              }}>{e.date}</div>
              <div>
                <div style={{
                  fontFamily: 'var(--d2-mono)', fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: A2v3.accent, opacity: 0.7, marginBottom: 8,
                }}>{e.type}</div>
                <div style={{
                  fontFamily: 'var(--d2-display)', fontSize: 28, fontWeight: 500,
                  letterSpacing: '-0.01em', lineHeight: 1.15,
                }}>{e.name}</div>
              </div>
              <div style={{
                fontFamily: 'var(--d2-serif)', fontSize: 14, fontStyle: 'italic',
                color: A2v3.mute,
              }}>{e.loc}</div>
              <div style={{ fontFamily: 'var(--d2-mono)', fontSize: 14, color: A2v3.accent, textAlign: 'right' }}>→</div>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 56, textAlign: 'center' }}>
          <a href="events.html" style={{
            fontFamily: 'var(--d2-mono)', fontSize: 11, letterSpacing: '0.28em',
            textTransform: 'uppercase', color: A2v3.accent, textDecoration: 'none',
            borderBottom: `1px solid ${A2v3.accent}`, paddingBottom: 8,
          }}>See All Events & Gatherings →</a>
        </div>
      </div>
    </section>
  );
}

function Direction2v3({ headline = 'Where giving becomes a sacred act of repair.' }) {
  return (
    <div style={{ background: A2v3.bg, width: '100%' }}>
      <D2v3Hero headline={headline} />
      <D2v3Pillars />
      <D2v3About />
      <D2v3Projects />
      <D2v3Serve />
      <D2v3Events />
      <D2v3Impact />
      <D2v3GiveNow />
      <D2v3Partners />
      <D2v3Newsletter />
      <D2v3Footer />
    </div>
  );
}

window.Direction2v3 = Direction2v3;