electrical-review / design / racking-options.jsx

/* ============================================================================
   PRSM SOLAR — PHASE-1 RACKING OPTIONS (compare 3 approaches)
   ========================================================================== */
const { useState: useStateO } = React;

const OPT_DIAGRAM = { fixed: "RackElevation", seasonal: "Opt2Elevation", pivot: "Opt3Elevation" };

function ProsCons({ pros, cons }) {
  return (
    <div className="pc-grid">
      <div className="pc-col">
        <div className="pc-h pc-pro">Pros</div>
        <ul>{pros.map((p, i) => <li key={i}><span className="pc-mk pro">+</span>{p}</li>)}</ul>
      </div>
      <div className="pc-col">
        <div className="pc-h pc-con">Cons / caveats</div>
        <ul>{cons.map((c, i) => <li key={i}><span className="pc-mk con">–</span>{c}</li>)}</ul>
      </div>
    </div>
  );
}

function RackingOptions() {
  const P = window.PRSM_RACK;
  const opts = P.options, cmp = P.optionCompare;
  const [i, setI] = useStateO(0);
  const o = opts[i];
  const Diagram = window[OPT_DIAGRAM[o.diagram]];

  return (
    <div className="sheet pad opt-section">
      <SectionHead n="—" kicker="Phase 1 · compare approaches" title="Racking options"
        sub="Three ways to mount the same Phase-1 array (14 × 575 W bifacial, 2-high × 7-wide). Energy is script-computed; structure & cost are inherited estimates — engineer review before pour." />

      <div className="opt-seg">
        {opts.map((op, idx) => (
          <button key={op.id} className={idx === i ? "on" : ""} onClick={() => setI(idx)}>
            <span className="opt-seg-n">{op.n}</span>
            <span className="opt-seg-name">{op.name}</span>
            {op.owner && <span className="opt-fav">owner-favored</span>}
          </button>
        ))}
      </div>

      <div className="opt-panel">
        <div className="opt-head">
          <div className="opt-id">
            <h3 className="opt-name">{o.name}</h3>
            <span className="opt-tag mono">{o.tag}</span>
            <div className="opt-mode mono">{o.tiltMode}</div>
          </div>
          <div className="opt-energy">
            <div className="opt-kwh mono">{o.energy}</div>
            <div className={"opt-delta mono " + (o.deltaTone === "pine" ? "up" : "base")}>{o.delta === "baseline" ? "baseline" : "Δ " + o.delta + " vs fixed-55"}</div>
            <span className="stamp computed">{o.provEnergy}</span>
          </div>
        </div>

        <p className="opt-summary">{o.summary}</p>

        <Diagram key={o.id} />

        <div className="opt-grid">
          <div>
            <div className="opt-sub mono">Key specs</div>
            <div className="opt-specs">
              {o.specs.map((s, k) => (
                <div className="opt-spec-row" key={k}><span className="osk">{s[0]}</span><span className="osv mono">{s[1]}</span></div>
              ))}
            </div>
            <div className="opt-prov"><span className="stamp warn">inherited</span><span className="opt-prov-t mono">{o.provStruct} · engineer review before pour</span></div>
          </div>
          <div>
            <div className="opt-sub mono">Trade-offs</div>
            <ProsCons pros={o.pros} cons={o.cons} />
            <div className="opt-safety"><span className="mono">SAFETY</span>{o.safety}</div>
          </div>
        </div>
      </div>

      {/* side-by-side comparison */}
      <div className="opt-compare">
        <div className="opt-sub mono" style={{ marginBottom: 10 }}>All three, side by side</div>
        <div className="cmp-scroll">
          <table className="cmp-table">
            <thead>
              <tr>{cmp.cols.map((c, k) => <th key={k} className={k === 0 ? "stick" : ""}>{c}</th>)}</tr>
            </thead>
            <tbody>
              {cmp.rows.map((r) => (
                <tr key={r.n} className={i === (+r.n - 1) ? "active" : ""}>
                  <td className="stick"><span className="cmp-n">{r.n}</span>{r.cells[0]}</td>
                  {r.cells.slice(1).map((c, k) => <td key={k} className="mono">{c}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="fine mono">{cmp.foot}</p>
      </div>
    </div>
  );
}

Object.assign(window, { RackingOptions });