// OpsGrid — what the corp actually does
const OPS = [
  { tag: "LOWSEC",   title: "Amamake Home",       body: "We rent an office in an existing citadel. No timers to babysit, no fuel to chase. Free clones, buyback at Jita rates. Frat rental null on the doorstep.", status: "LIVE" },
  { tag: "NEWBRO",   title: "Exploration Hunting",body: "Newbros scan and hack relic/data through lowsec and wormhole chains. Hunters sit cloaked on the connections. Anyone who follows the explorers in dies. You make ISK either way.", status: "DAILY" },
  { tag: "NANO",     title: "Skill Building",     body: "Nano fleets to build the muscle memory for the real shit. No srp, no excuses.", status: "ROAMING" },
  { tag: "BLOPS",    title: "Blackops Drops",     body: "Drops into Frat rental null. The regional gate from Amamake puts you on their doorstep. Cyno alts welcome, T2 BLOPS bonus on kill.", status: "WEEKLY" },
  { tag: "J-SPACE",  title: "Wormhole Daytrips",  body: "Daytrips into C5/C6 chains for the warchest. Capitals when the comp is right. Experienced pilots only. This funds everything else.", status: "WARCHEST" },
  { tag: "LONG PLAY",title: "Alliance Tournament",body: "The long play. Forming a team over time, scrimming when the bracket drops. Win the AT.", status: "FORMING" },
];

function OpsGrid() {
  return (
    <section className="section" id="ops">
      <div className="section-label">// OPERATIONS</div>
      <h2 className="section-title">WHAT WE FLY</h2>
      <div className="ops-grid">
        {OPS.map(op => (
          <div className="op-card" key={op.title}>
            <div className="op-tag">{op.tag}</div>
            <div className="op-title">{op.title}</div>
            <div className="op-body">{op.body}</div>
            <div className="op-status"><span className="op-dot" />{op.status}</div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.OpsGrid = OpsGrid;