// Partners — Pillar 05

const Partners = () => {
  return (
    <>
      <section className="band band-paper pillar-anchor" id="partners">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="swatch" style={{background: "var(--blue-500)"}}></span>Pillar 05 · Partner Ecosystem</div>
            <h1 className="headline">
              No operator transitions alone.
              <br/>
              <span className="em-cyan">19 organisations</span> on the path with us.
            </h1>
            <p className="lede">SF₆-free switchgear is a commercial product today because OEMs, regulators, standards bodies and research institutions moved in concert. The portal links our programme to each of them — with the technologies, regulations and people we depend on.</p>
          </div>
          <div className="meta">
            <b>Last review</b>
            14 May 2026
            <div className="pill-meta">Active engagement</div>
          </div>
        </div>

        {/* OEMs */}
        <div className="partner-section-h">
          <h3>Technology partners — OEMs</h3>
          <span className="count">{String(PARTNERS_OEM.length).padStart(2, "0")} active</span>
        </div>
        <div className="row-3" style={{marginTop: 14}}>
          {PARTNERS_OEM.map((p, i) => (
            <div className="partner-card" key={i}>
              <div className="pc-logo">{p.logo}</div>
              <div className="pc-role">{p.role}</div>
              <h4>{p.title}</h4>
              <p className="pc-tech" dangerouslySetInnerHTML={{__html: p.tech}}></p>
              <div className="pc-foot">
                <span><b>{p.coverage}</b></span>
                <span>{p.since}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="band band-paper-2">
        <div className="partner-section-h" style={{marginTop: 0}}>
          <h3>Regulators &amp; reporting bodies</h3>
          <span className="count">{String(PARTNERS_REG.length).padStart(2, "0")} engaged</span>
        </div>
        <div className="row-2" style={{marginTop: 14}}>
          {PARTNERS_REG.map((p, i) => (
            <div className="partner-card" key={i}>
              <div className="pc-role">{p.role}</div>
              <h4>{p.name}</h4>
              <p className="pc-tech">{p.desc}</p>
              <span className="pc-tag">{p.tag}</span>
            </div>
          ))}
        </div>

        <div className="partner-section-h">
          <h3>Standards &amp; industry bodies</h3>
          <span className="count">{String(PARTNERS_STD.length).padStart(2, "0")} contributing</span>
        </div>
        <div className="row-3" style={{marginTop: 14}}>
          {PARTNERS_STD.map((p, i) => (
            <div className="partner-card" key={i}>
              <div className="pc-role">{p.role}</div>
              <h4>{p.name}</h4>
              <p className="pc-tech">{p.desc}</p>
              <span className="pc-tag">{p.tag}</span>
            </div>
          ))}
        </div>

        <div className="partner-section-h">
          <h3>Research &amp; advisory</h3>
          <span className="count">{String(PARTNERS_RESEARCH.length).padStart(2, "0")} contributing</span>
        </div>
        <div className="row-4" style={{marginTop: 14}}>
          {PARTNERS_RESEARCH.map((p, i) => (
            <div className="partner-card" key={i}>
              <div className="pc-role">{p.role}</div>
              <h4>{p.name}</h4>
              <p className="pc-tech">{p.desc}</p>
              <span className="pc-tag">{p.tag}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="band band-dark">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="swatch" style={{background: "var(--heat-green)"}}></span>Get involved</div>
            <h2 className="section-h">
              Operator, vendor, or researcher? We're keeping the ecosystem open.
            </h2>
            <p className="lede">If you operate gas-insulated assets, supply SF₆-free technology, or research alternative gases — the portal is your single integration point with the German transition programme.</p>
          </div>
        </div>

        <div className="row-3" style={{marginTop: 36}}>
          <div style={{padding: "26px 28px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)", borderRadius: 14}}>
            <div style={{fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--heat-green)", fontWeight: 700, letterSpacing: "0.1em"}}>FOR OPERATORS</div>
            <h4 style={{color: "#fff", fontSize: 19, marginTop: 8, marginBottom: 10, fontWeight: 700, letterSpacing: "-0.005em"}}>Onboard your inventory</h4>
            <p style={{fontSize: 14, color: "rgba(255,255,255,0.72)", lineHeight: 1.55, margin: 0}}>Submit station-level SF₆ mass and leak data via the operator API or quarterly CSV upload. Audit-grade dashboard back automatically.</p>
            <div style={{marginTop: 16, fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--heat-green)"}}>onboard@gridshift.heat-international.de →</div>
          </div>
          <div style={{padding: "26px 28px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)", borderRadius: 14}}>
            <div style={{fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--cyan)", fontWeight: 700, letterSpacing: "0.1em"}}>FOR VENDORS</div>
            <h4 style={{color: "#fff", fontSize: 19, marginTop: 8, marginBottom: 10, fontWeight: 700, letterSpacing: "-0.005em"}}>Reference your portfolio</h4>
            <p style={{fontSize: 14, color: "rgba(255,255,255,0.72)", lineHeight: 1.55, margin: 0}}>List qualified SF₆-free products against the operator framework specification. Pre-qualified vendors enter the operator long-list.</p>
            <div style={{marginTop: 16, fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--cyan)"}}>vendors@gridshift.heat-international.de →</div>
          </div>
          <div style={{padding: "26px 28px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)", borderRadius: 14}}>
            <div style={{fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--orange-100)", fontWeight: 700, letterSpacing: "0.1em"}}>FOR RESEARCHERS</div>
            <h4 style={{color: "#fff", fontSize: 19, marginTop: 8, marginBottom: 10, fontWeight: 700, letterSpacing: "-0.005em"}}>Access anonymised data</h4>
            <p style={{fontSize: 14, color: "rgba(255,255,255,0.72)", lineHeight: 1.55, margin: 0}}>Field experience datasets — leakage histograms, conversion ROI, ageing curves — available under a data-use agreement for non-commercial research.</p>
            <div style={{marginTop: 16, fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--orange-100)"}}>research@gridshift.heat-international.de →</div>
          </div>
        </div>
      </section>

      <section className="band band-dark">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{color: "var(--heat-green)"}}><span className="swatch" style={{background: "var(--heat-green)"}}></span>Knowledge Report · in development</div>
            <h2 className="section-h" style={{color: "#fff"}}>{KNOWLEDGE_REPORT.title}</h2>
            <p className="lede" style={{color: "rgba(255,255,255,0.78)"}}>
              {KNOWLEDGE_REPORT.status} · authored by {KNOWLEDGE_REPORT.authors} · target length {KNOWLEDGE_REPORT.pages} pages.
              {" "}Action-oriented guidance for regulators and utilities in developing countries — combining global best practices, real-world case studies, and a step-by-step pathway to manage and phase down SF₆.
            </p>
            <p style={{marginTop: 12}}>
              <a className="row-link" style={{color: "var(--heat-green)", fontFamily: "JetBrains Mono, monospace", fontSize: 13}}
                 href={KNOWLEDGE_REPORT.hub_url} target="_blank" rel="noreferrer">
                ↗ ctc-n.org/sf6-knowledge-hub
              </a>
            </p>
          </div>
          <div className="meta" style={{color: "rgba(255,255,255,0.7)"}}>
            <b style={{color: "#fff"}}>Tracked</b>
            CTCN · NDE Germany · IEA
            <div className="pill-meta" style={{background: "rgba(0,175,215,0.18)", color: "#fff", border: "1px solid rgba(255,255,255,0.2)"}}>v0.3 draft</div>
          </div>
        </div>

        <div className="row-3" style={{marginTop: 32, gridTemplateColumns: "repeat(4, 1fr)", gap: 16}}>
          {KNOWLEDGE_REPORT.outline.map((sec, i) => (
            <div key={i} style={{padding: "20px 22px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 12}}>
              <div style={{fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--heat-green)", fontWeight: 700, letterSpacing: "0.1em"}}>
                §{sec.num} · {sec.pages} p
              </div>
              <h4 style={{color: "#fff", fontSize: 15, marginTop: 8, marginBottom: 10, fontWeight: 700, letterSpacing: "-0.005em", lineHeight: 1.25}}>{sec.title}</h4>
              <ul style={{margin: 0, paddingLeft: 16, fontSize: 12, color: "rgba(255,255,255,0.72)", lineHeight: 1.5}}>
                {sec.bullets.map((b, j) => <li key={j} style={{marginBottom: 4}}>{b}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </section>

      <section className="band band-paper-2">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="swatch"></span>SF₆-free technology matrix</div>
            <h2 className="section-h">Six commercial alternatives — one cuts the gas out entirely.</h2>
            <p className="lede">Compiled from Foxtrot Squad <code>sf6-switchgear-alternative</code> agent. Voltage applicability for 245 kV transmission shown explicitly; PFAS / supply-chain risks flagged.</p>
          </div>
          <div className="meta">
            <b>Source</b>
            Foxtrot squad · KB
            <div className="pill-meta">v · 2026-05</div>
          </div>
        </div>

        <div className="table-card" style={{marginTop: 24}}>
          <div style={{overflowX: "auto"}}>
            <table className="inv">
              <thead>
                <tr>
                  <th>Technology</th>
                  <th>Dielectric medium</th>
                  <th>Arc quench</th>
                  <th style={{textAlign: "right"}}>GWP</th>
                  <th>245 kV status</th>
                  <th>Notes &amp; field reference</th>
                </tr>
              </thead>
              <tbody>
                {ALT_TECH.map((t, i) => (
                  <tr key={i}>
                    <td className="name"><b>{t.tech}</b></td>
                    <td className="mono">{t.medium}</td>
                    <td>{t.quench}</td>
                    <td className="num" style={{textAlign: "right"}}>{t.gwp}</td>
                    <td>{t.v245}</td>
                    <td style={{maxWidth: 380}}>{t.notes}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

    </>
  );
};

window.Partners = Partners;