// Architecture band — Soft Ivory two-column: copy + blueprint diagram
// Right side renders an inline SVG "blueprint" of a courthouse with orbital circles,
// matching the Website Guide v1.00 illustration style.

function ArchitectureBlueprint() {
  // Pure SVG — courthouse line drawing inside concentric orbital circles,
  // with gold registration marks. Drawn at 600x500 viewBox; scales fluidly.
  return (
    <svg className="gjf-arch-blueprint" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Architectural blueprint of an institution within concentric orbits">
      <defs>
        <linearGradient id="gjf-bp-paper" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#F5EDE0" />
          <stop offset="100%" stopColor="#EFE4D2" />
        </linearGradient>
      </defs>

      {/* paper background */}
      <rect x="0" y="0" width="600" height="500" fill="url(#gjf-bp-paper)" />

      {/* faint grid */}
      <g stroke="#1B2A4E" strokeOpacity="0.06" strokeWidth="0.5">
        {Array.from({length: 12}).map((_, i) => (
          <line key={"v"+i} x1={i*50} y1="0" x2={i*50} y2="500" />
        ))}
        {Array.from({length: 10}).map((_, i) => (
          <line key={"h"+i} x1="0" y1={i*50} x2="600" y2={i*50} />
        ))}
      </g>

      {/* Outer orbital — broken / dashed */}
      <g fill="none" strokeLinecap="round">
        <circle cx="350" cy="260" r="220" stroke="#C6A45A" strokeWidth="0.8" strokeDasharray="2 5" opacity="0.7" />
        <circle cx="350" cy="260" r="180" stroke="#1B2A4E" strokeWidth="0.6" opacity="0.45" />
        <circle cx="350" cy="260" r="140" stroke="#C6A45A" strokeWidth="0.6" opacity="0.55" />
        {/* small registration circles on orbits */}
        <circle cx="570" cy="260" r="6" stroke="#C6A45A" strokeWidth="1" />
        <circle cx="570" cy="260" r="2" fill="#C6A45A" stroke="none" />
        <circle cx="130" cy="260" r="4" stroke="#1B2A4E" strokeWidth="0.8" opacity="0.6" />
        <circle cx="350" cy="40" r="5" stroke="#C6A45A" strokeWidth="1" />
        <circle cx="350" cy="40" r="1.6" fill="#C6A45A" stroke="none" />
        <circle cx="350" cy="480" r="3" fill="#1B2A4E" opacity="0.5" />
      </g>

      {/* axis crosshairs */}
      <g stroke="#1B2A4E" strokeWidth="0.5" opacity="0.35">
        <line x1="0" y1="260" x2="600" y2="260" strokeDasharray="3 6" />
        <line x1="350" y1="0" x2="350" y2="500" strokeDasharray="3 6" />
      </g>

      {/* base / steps */}
      <g stroke="#1B2A4E" strokeWidth="1.1" fill="none" strokeLinecap="square">
        <line x1="180" y1="395" x2="520" y2="395" />
        <line x1="190" y1="405" x2="510" y2="405" />
        <line x1="200" y1="415" x2="500" y2="415" />
        <line x1="210" y1="425" x2="490" y2="425" />
        {/* base shadow line */}
        <line x1="160" y1="440" x2="540" y2="440" strokeWidth="0.7" opacity="0.5" />
      </g>

      {/* pediment (triangle roof) */}
      <g stroke="#1B2A4E" strokeWidth="1.2" fill="none" strokeLinejoin="miter">
        <polygon points="220,200 480,200 350,140" />
        <polygon points="225,205 475,205 350,148" strokeWidth="0.7" opacity="0.55" />
        {/* pediment ornament */}
        <circle cx="350" cy="180" r="6" strokeWidth="0.8" />
        <circle cx="350" cy="180" r="2" fill="#C6A45A" stroke="none" />
      </g>

      {/* entablature */}
      <g stroke="#1B2A4E" strokeWidth="1.1" fill="none">
        <line x1="215" y1="200" x2="485" y2="200" />
        <line x1="215" y1="210" x2="485" y2="210" />
        <line x1="215" y1="220" x2="485" y2="220" strokeWidth="0.7" opacity="0.6" />
      </g>

      {/* columns — 6 doric */}
      {[235, 280, 325, 370, 415, 460].map((x) => (
        <g key={x} stroke="#1B2A4E" strokeWidth="1" fill="none" strokeLinecap="square">
          {/* capital */}
          <line x1={x-8} y1="222" x2={x+8} y2="222" />
          <line x1={x-7} y1="226" x2={x+7} y2="226" strokeWidth="0.7" />
          {/* shaft */}
          <line x1={x-6} y1="228" x2={x-6} y2="390" />
          <line x1={x+6} y1="228" x2={x+6} y2="390" />
          {/* fluting hint */}
          <line x1={x-2} y1="232" x2={x-2} y2="386" strokeWidth="0.4" opacity="0.4" />
          <line x1={x+2} y1="232" x2={x+2} y2="386" strokeWidth="0.4" opacity="0.4" />
          <line x1={x} y1="232" x2={x} y2="386" strokeWidth="0.4" opacity="0.4" />
          {/* base */}
          <line x1={x-9} y1="390" x2={x+9} y2="390" />
          <line x1={x-8} y1="394" x2={x+8} y2="394" strokeWidth="0.7" />
        </g>
      ))}

      {/* construction / projection lines */}
      <g stroke="#C6A45A" strokeWidth="0.5" strokeDasharray="3 4" opacity="0.7" fill="none">
        <line x1="350" y1="40" x2="350" y2="140" />
        <line x1="220" y1="200" x2="100" y2="80" />
        <line x1="480" y1="200" x2="600" y2="80" />
        <line x1="350" y1="140" x2="350" y2="80" />
        <line x1="160" y1="440" x2="60" y2="440" />
        <line x1="540" y1="440" x2="640" y2="440" />
      </g>

      {/* dimension ticks at base */}
      <g stroke="#1B2A4E" strokeWidth="0.7" opacity="0.7">
        <line x1="160" y1="455" x2="540" y2="455" />
        <line x1="160" y1="450" x2="160" y2="460" />
        <line x1="540" y1="450" x2="540" y2="460" />
        <line x1="350" y1="450" x2="350" y2="460" />
      </g>

      {/* corner registration marks */}
      <g stroke="#C6A45A" strokeWidth="1" fill="none">
        <path d="M 16 16 H 40 M 16 16 V 40" />
        <path d="M 584 16 H 560 M 584 16 V 40" />
        <path d="M 16 484 H 40 M 16 484 V 460" />
        <path d="M 584 484 H 560 M 584 484 V 460" />
      </g>

      {/* small annotation — corner labels */}
      <g fill="#1B2A4E" opacity="0.55" fontFamily="ui-monospace, Menlo, Consolas, monospace" fontSize="8" letterSpacing="1">
        <text x="50" y="22">GJF · ARCH</text>
        <text x="510" y="22">v 1.01</text>
        <text x="50" y="478">SHEET 01</text>
        <text x="498" y="478">SCALE · NTS</text>
      </g>

      {/* annotation arrows pointing in to architecture */}
      <g fill="#1B2A4E" opacity="0.7" fontFamily="ui-monospace, Menlo, Consolas, monospace" fontSize="9" letterSpacing="0.5">
        <text x="100" y="170" textAnchor="end">STANDARDS</text>
        <line x1="105" y1="170" x2="220" y2="195" stroke="#1B2A4E" strokeWidth="0.6" />
        <text x="500" y="445" textAnchor="start">FOUNDATION</text>
        <line x1="495" y1="442" x2="380" y2="430" stroke="#1B2A4E" strokeWidth="0.6" />
      </g>
    </svg>
  );
}

// The actual Method Strip — Humanisation → Evolution, deep-harm-red on warm stone.
// Same chrome as inner pages so the homepage anchors readers to the method spine.
function MethodStrip() {
  const steps = [
    { name: "Humanisation",    href: "foundation-1.html" },
    { name: "Representation",  href: "foundation-2.html" },
    { name: "Legislation",     href: "foundation-3.html" },
    { name: "Education",       href: "foundation-4.html" },
    { name: "Evolution",       href: "foundation-5.html" },
  ];
  return (
    <div className="gjf-method-strip">
      <div className="gjf-method-strip-inner">
        <span className="gjf-method-label">The Method</span>
        {steps.map((s, i) => (
          <React.Fragment key={s.name}>
            <a className="gjf-method-step" href={s.href}>{s.name}</a>
            {i < steps.length - 1 && <span className="gjf-method-arrow" aria-hidden="true">→</span>}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}
window.GJF_MethodStrip = MethodStrip;

function Architecture() {
  const steps = [
    { label: "Standards", icon: <path d="M12 3v18M5 8h14M4 8l3 8h-6zM17 8l3 8h-6z"/> },
    { label: "Institutions", icon: <path d="M3 21h18M5 21V10l7-5 7 5v11M9 21v-7h6v7"/> },
    { label: "Enforcement", icon: <><path d="M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z"/><path d="M9 12l2 2 4-4"/></> },
    { label: "Accountability", icon: <><rect x="4" y="6" width="16" height="14" rx="1"/><path d="M8 11h8M8 15h5"/><path d="M8 3v3M16 3v3"/></> },
    { label: "Outcomes", icon: <><path d="M3 17l5-5 4 3 8-9"/><path d="M3 21h18"/></> },
  ];
  return (
    <section className="gjf-architecture" id="our-work">
      <div className="gjf-architecture-inner">
        <div className="gjf-architecture-copy">
          <span className="gjf-eyebrow">Our Architecture</span>
          <h2 className="gjf-architecture-title">From symbolic aspiration to <em>enforceable</em> reality</h2>
          <div className="gjf-architecture-rule" />
          <p className="gjf-architecture-lede">
            Global Justice Foundations turns rights into enforceable reality by building the standards, institutions, enforcement pathways, accountability systems, and outcome measures justice requires.
          </p>
          <div className="gjf-architecture-row">
            {steps.map((s) => (
              <div className="gjf-arch-step" key={s.label}>
                <div className="gjf-arch-icon">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.3">{s.icon}</svg>
                </div>
                <div className="gjf-arch-label">{s.label}</div>
              </div>
            ))}
          </div>
          <div className="gjf-architecture-ctas">
            <a href="our-work.html" className="gjf-btn gjf-btn-primary">Explore the Architecture</a>
            <a href="pillars.html" className="gjf-btn gjf-btn-secondary">View the Five Pillars</a>
          </div>
        </div>
        <div className="gjf-architecture-image" aria-hidden="true">
          <img src="assets/photo-architecture.jpg" alt="" />
        </div>
      </div>
    </section>
  );
}
window.GJF_Architecture = Architecture;