// About page content for Sacred Roux

function AboutStory() {
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '140px 56px', borderTop: `1px solid ${P.rule}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: -200, top: 80, color: P.accent, opacity: 0.08 }}>
        <FlowerOfLife size={620} rings={4} />
      </div>
      <div style={{ maxWidth: 900, margin: '0 auto', position: 'relative' }}>
        <div style={{
          fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em',
          textTransform: 'uppercase', color: P.accent, marginBottom: 40,
        }}>01 — Our Origin</div>
        <h2 style={{
          fontFamily: P.display, fontSize: 72, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 56px',
        }}>
          <span style={{ fontStyle: 'italic', color: P.accent }}>Marie Thérèse dite CoinCoin</span> —<br/>
          the matriarch who showed us the way.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32 }}>
          {[
            `Born into slavery in 1742 in Natchitoches, Louisiana, Marie Thérèse — known in her community as CoinCoin — became one of the most remarkable Creole women in North American history. After gaining her freedom, she turned every resource she could touch into liberation for her kin.`,
            `She bought the freedom of her children and grandchildren. She cultivated land, built enterprises, and held space for a community of free people of color on her own terms. CoinCoin understood that freedom for one is not freedom at all — true liberation is collective, generational, and material.`,
            `Sacred Roux is her descendant-led inheritance. We pick up where she left off — channeling reparative resources, cultural knowledge, and land access back to the communities owed repair. We are not a business reinterpreting social good. We are a nonprofit returning what was taken, guided by the wisdom of those who came before.`,
          ].map((t, i) => (
            <p key={i} style={{
              fontFamily: P.serif, fontSize: 20, lineHeight: 1.65,
              color: P.surface, margin: 0, textWrap: 'pretty',
            }}>{t}</p>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutMission() {
  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.6fr', gap: 80, alignItems: 'flex-start' }}>
          <div>
            <div style={{
              fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em',
              textTransform: 'uppercase', color: P.accent, marginBottom: 24,
            }}>02 — Mission</div>
            <h2 style={{
              fontFamily: P.display, fontSize: 56, fontWeight: 500,
              letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0,
            }}>What we are<br/>here to do.</h2>
          </div>
          <div>
            <p style={{
              fontFamily: P.display, fontSize: 34, fontStyle: 'italic', fontWeight: 500,
              lineHeight: 1.35, color: P.surface, margin: 0, textWrap: 'pretty',
            }}>
              To <span style={{ color: P.accent }}>repair</span> historical harm,
              <span style={{ color: P.accent }}> restore</span> access to cultural lifeways,
              and <span style={{ color: P.accent }}>reconnect</span> community with ancestral traditions and practices.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutValues() {
  const values = [
    { k: 'Descendant-Led', v: 'Every decision is made by and with the communities we serve. Authority flows from lineage, not credential.' },
    { k: 'Cultural Sovereignty', v: 'We return cultural resources — foodways, language, ceremony, land — to their rightful keepers on their own terms.' },
    { k: 'Radical Transparency', v: 'Every dollar, every outcome, every partnership is documented and accountable to those owed repair.' },
    { k: 'Intergenerational', v: 'We plan in generations, not fiscal years. The work is slow, sacred, and built to outlast us.' },
  ];
  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={{
          fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em',
          textTransform: 'uppercase', color: P.accent, marginBottom: 40,
        }}>03 — Values</div>
        <h2 style={{
          fontFamily: P.display, fontSize: 64, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 72px',
        }}>
          The principles<br/>that hold us.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: `1px solid ${P.rule}` }}>
          {values.map((v, i) => (
            <div key={v.k} style={{
              padding: '48px 48px 48px 0',
              borderBottom: `1px solid ${P.rule}`,
              borderLeft: i % 2 === 1 ? `1px solid ${P.rule}` : 'none',
              paddingLeft: i % 2 === 1 ? 48 : 0,
            }}>
              <div style={{
                fontFamily: P.mono, fontSize: 10, letterSpacing: '0.24em',
                color: P.accent, opacity: 0.7, marginBottom: 20,
              }}>0{i + 1} / 04</div>
              <div style={{
                fontFamily: P.display, fontSize: 34, fontWeight: 500,
                marginBottom: 16, letterSpacing: '-0.005em',
              }}>{v.k}</div>
              <p style={{
                fontFamily: P.serif, fontSize: 16, lineHeight: 1.65,
                color: P.mute, margin: 0, textWrap: 'pretty',
              }}>{v.v}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutTeam() {
  const team = [
    {
      name: 'Christopher Rachal',
      role: 'Co-Founder · Director of Repair',
      body: 'A direct descendant of Marie Thérèse dite CoinCoin, Christopher leads the work of reparations — the return of land, capital, and access to the communities owed repair. He will serve as Co-Executive Director alongside his co-founders.',
    },
    {
      name: 'Christina White',
      role: 'Co-Founder · Director of Restore',
      body: 'Christina stewards the work of rematriation — cultural restoration, foodways, language, and ancestral practice. As Co-Founder and Co-Executive Director, she holds the restore pillar as a living inheritance.',
    },
    {
      name: 'Jacquelyne White',
      role: 'Co-Founder · Director of Reconnect',
      body: 'Jacquelyne leads the work of repatriation — retreats, ceremony, and gatherings that reconnect descendants with ancestral places and with one another. Co-Founder and Co-Executive Director of Sacred Roux.',
    },
  ];
  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={{
          fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em',
          textTransform: 'uppercase', color: P.accent, marginBottom: 40,
        }}>04 — Who Holds the Work</div>
        <h2 style={{
          fontFamily: P.display, fontSize: 64, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 32px',
        }}>
          Three descendants.<br/><span style={{ fontStyle: 'italic', color: P.accent }}>One lineage.</span>
        </h2>
        <p style={{
          fontFamily: P.serif, fontSize: 18, lineHeight: 1.65, color: P.mute,
          maxWidth: 720, margin: '0 0 72px', textWrap: 'pretty',
        }}>
          Sacred Roux is co-founded by three descendants of Marie Thérèse dite CoinCoin — Christopher Rachal, Christina White, and Jacquelyne White. Each leads one of the organization's three core pillars: Repair, Restore, and Reconnect.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${P.rule}` }}>
          {team.map((m, i) => (
            <div key={m.name} style={{
              padding: '48px 40px 48px 0',
              borderLeft: i > 0 ? `1px solid ${P.rule}` : 'none',
              paddingLeft: i > 0 ? 40 : 0,
            }}>
              <div style={{
                width: 72, height: 72, borderRadius: '50%', border: `1px solid ${P.accent}`,
                color: P.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28,
              }}>
                <Trefoil size={36} />
              </div>
              <div style={{
                fontFamily: P.display, fontSize: 28, fontWeight: 500,
                marginBottom: 8, letterSpacing: '-0.005em',
              }}>{m.name}</div>
              <div style={{
                fontFamily: P.mono, fontSize: 10, letterSpacing: '0.24em',
                textTransform: 'uppercase', color: P.accent, marginBottom: 20,
              }}>{m.role}</div>
              <p style={{
                fontFamily: P.serif, fontSize: 15, lineHeight: 1.7,
                color: P.mute, margin: 0, textWrap: 'pretty',
              }}>{m.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutCouncil() {
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '140px 56px', borderTop: `1px solid ${P.rule}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', left: -180, bottom: -120, color: P.accent, opacity: 0.08,
      }}>
        <FlowerOfLife size={560} rings={4} />
      </div>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{
          fontFamily: P.mono, fontSize: 10, letterSpacing: '0.36em',
          textTransform: 'uppercase', color: P.accent, marginBottom: 40,
        }}>05 — The Elder Council</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 72, alignItems: 'flex-start' }}>
          <h2 style={{
            fontFamily: P.display, fontSize: 56, fontWeight: 500,
            letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0,
          }}>
            Guided by those<br/><span style={{ fontStyle: 'italic', color: P.accent }}>who came before.</span>
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {[
              `Alongside the three co-founders, Sacred Roux is held by an Elder Council — knowledge keepers, cultural practitioners, and lineage holders who sit on the board and steward the organization's deeper commitments.`,
              `Our governance is built to evolve. As Christopher, Christina, and Jacquelyne step fully into their roles as Co-Executive Directors and Program Directors, the Elder Council will take on its role as the board of Sacred Roux — ensuring the organization remains accountable to lineage, not to trend.`,
              `This is intentional. A nonprofit rooted in repair cannot be governed by the same logic that created the harm. The Elder Council is how we keep the work honest across generations.`,
            ].map((t, i) => (
              <p key={i} style={{
                fontFamily: P.serif, fontSize: 18, lineHeight: 1.7,
                color: P.surface, margin: 0, textWrap: 'pretty',
              }}>{t}</p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutCTA() {
  return (
    <section style={{ background: P.bg, color: P.surface, padding: '160px 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, pointerEvents: 'none',
      }}>
        <FlowerOfLife size={700} rings={4} />
      </div>
      <div style={{ maxWidth: 800, margin: '0 auto', position: 'relative' }}>
        <h2 style={{
          fontFamily: P.display, fontSize: 72, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 32px',
        }}>
          Walk with us.
        </h2>
        <p style={{
          fontFamily: P.serif, fontSize: 19, lineHeight: 1.6,
          color: P.mute, margin: '0 0 48px',
        }}>
          The work of repair is intergenerational. Your giving, your partnership, your presence — all of it becomes part of what we leave for those who come next.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 20 }}>
          <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>
          <a href="projects.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,
          }}>See the Projects</a>
        </div>
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <PageShell current="about">
      <PageHero
        eyebrow="About Sacred Roux"
        title={<>Rooted in lineage.<br/><span style={{ fontStyle: 'italic', color: P.accent }}>Led by descendants.</span></>}
        sub="A descendant-led nonprofit repairing, restoring, and reconnecting the communities owed repair — inheritors of Marie Thérèse dite CoinCoin's legacy of collective liberation."
        image={SR.heroImages.water}
      />
      <AboutStory />
      <AboutMission />
      <AboutValues />
      <AboutTeam />
      <AboutCouncil />
      <AboutCTA />
    </PageShell>
  );
}

window.AboutPage = AboutPage;