const CircuitBG = ({ area }) => {
  const c = { ai: "#E8A26B", ds: "#5BA8C9", bc: "#9C7BD1", cl: "#6FB48A" }[area] || "#888";
  return (
    <svg className="circuit" viewBox="0 0 400 260" preserveAspectRatio="none" aria-hidden="true">
      <g fill="none" stroke={c} strokeWidth="1.2">
        <path d="M0 60 L60 60 L80 80 L160 80 L180 60 L300 60"/>
        <path d="M40 200 L140 200 L160 220 L260 220 L280 200 L400 200"/>
        <path d="M340 40 L340 110 L360 130 L360 200"/>
        <path d="M20 120 L100 120 L120 140 L200 140"/>
        <circle cx="60" cy="60" r="3" fill={c}/>
        <circle cx="180" cy="60" r="3" fill={c}/>
        <circle cx="340" cy="110" r="3" fill={c}/>
        <circle cx="160" cy="220" r="3" fill={c}/>
        <circle cx="120" cy="140" r="3" fill={c}/>
      </g>
    </svg>
  );
};

const Research = () => (
  <section className="section" id="research">
    <div className="section-head">
      <span className="section-eyebrow">Four Pillars · /pillars</span>
      <Cli path="research" cmd="ls -al" flags=" --pillars=ai,ds,bc,cl"/>
      <h2 className="section-title">Research <em style={{fontStyle:"italic",color:"var(--mint-deep)"}}>signposts</em></h2>
      <p className="section-sub">Each district of the island is led by a dedicated research direction. Follow the wooden signs to see what we build, study, and ship.</p>
    </div>
    <div className="signboard-grid">
      {window.RESEARCH.map((r, i) => (
        <article key={r.id} className="signboard reveal" data-area={r.id}>
          <CircuitBG area={r.id}/>
          <div className="signboard-head">
            <div className="signboard-glyph">{r.glyph}</div>
            <div>
              <div className="signboard-id">pillar_{String(i+1).padStart(2,"0")} · {r.id.toUpperCase()}</div>
              <h3 className="signboard-name">{r.name}</h3>
            </div>
          </div>
          <p className="signboard-desc">{r.desc}</p>
          <div className="signboard-topics">
            {r.topics.map(t => <span key={t} className="topic-chip">{t}</span>)}
          </div>
        </article>
      ))}
    </div>
  </section>
);
window.Research = Research;