// Five Pillars — Humanisation | Representation | Legislation | Education | Evolution
const PillarIcon = {
  humanisation: (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.3">
      <circle cx="12" cy="8" r="3.5"/><path d="M5 21c0-3.5 3-6 7-6s7 2.5 7 6"/>
    </svg>
  ),
  representation: (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.3">
      <circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/>
      <path d="M3 20c0-3 2.5-5 6-5s6 2 6 5M14 20c0-2.5 2-4 4-4s3 1.5 3 4"/>
    </svg>
  ),
  legislation: (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M3 21h18M5 21V10l7-5 7 5v11M9 21v-7h6v7M8 10h8"/>
    </svg>
  ),
  education: (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M2 9l10-5 10 5-10 5L2 9z"/><path d="M6 11v5c0 1 3 3 6 3s6-2 6-3v-5"/>
    </svg>
  ),
  evolution: (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M3 17l5-5 4 3 8-9"/><path d="M3 21h18"/>
    </svg>
  ),
};

function Pillars() {
  const pillars = [
    { num: "01", key: "humanisation", title: "Humanisation", href: "foundation-1.html",
      desc: "Designing systems around dignity, reality and outcomes",
      list: ["Dignity Frameworks", "Trauma-Informed Standards", "Voice, Participation & Repair"] },
    { num: "02", key: "representation", title: "Representation", href: "foundation-2.html",
      desc: "Ensuring affected people and communities have standing, voice and power",
      list: ["Legal Representation", "Community Standing", "Participatory Governance"] },
    { num: "03", key: "legislation", title: "Legislation", href: "foundation-3.html",
      desc: "Translating evidence into binding rules and enforceable standards",
      list: ["Model Laws & Standards", "Policy Drafting", "Law & Policy Alignment"] },
    { num: "04", key: "education", title: "Education", href: "foundation-4.html",
      desc: "Building knowledge and capability required to make justice enforceable",
      list: ["Professional Training", "Civic Education", "Leadership Development"] },
    { num: "05", key: "evolution", title: "Evolution", href: "foundation-5.html",
      desc: "Ensuring justice systems remain effective, accountable and fit for purpose",
      list: ["Impact Measurement", "Research & Innovation", "Adaptive Improvement"] },
  ];
  return (
    <section className="gjf-pillars" id="the-pillars">
      <div className="gjf-pillars-inner">
        <div className="gjf-pillars-head">
          <h2 className="gjf-pillars-title">Our Five<br/>Foundational Elements</h2>
          <div className="gjf-pillars-rule" />
          <p className="gjf-pillars-lede">
            A systems-based framework for turning rights into enforceable duties, accountable institutions and measurable outcomes
          </p>
          <a href="foundations.html" className="gjf-pillars-link">Explore all foundational elements →</a>
        </div>
        {pillars.map((p) => (
          <a href={p.href} className="gjf-pillar" key={p.num} style={{textDecoration:"none", color:"inherit", display:"block"}}>
            <div className="gjf-pillar-head">
              <span className="gjf-pillar-num">{p.num}</span>
              <span className="gjf-pillar-icon">{PillarIcon[p.key]}</span>
            </div>
            <h3 className="gjf-pillar-title">{p.title}</h3>
            <p className="gjf-pillar-desc">{p.desc}</p>
            <ul className="gjf-pillar-list">
              {p.list.map((it) => <li key={it}>{it}</li>)}
            </ul>
          </a>
        ))}
      </div>
    </section>
  );
}
window.GJF_Pillars = Pillars;