/* ============================================================
   principles.jsx, Part 2: the five principles (accordion).
   ============================================================ */
function Principle({ p, open, onToggle }) {
  return (
    <div className={"principle" + (open ? " open" : "")}>
      <div className="p-head" onClick={onToggle}>
        <span className="p-num">{p.n}</span>
        <span className="p-title">{p.title}</span>
        <span className="p-toggle"><Icon name="plus" /></span>
      </div>
      <div className="p-body">
        <div className="p-body-inner">
          <div className="pb-col problem">
            <div className="lab"><Icon name="info" style={{ width: 14, height: 14 }} /> The principle</div>
            <p>{p.problem}</p>
          </div>
          <div className="pb-col solution">
            <div className="lab"><Icon name="sparkles" style={{ width: 14, height: 14 }} /> How PSEO Builder applies it</div>
            <p>{p.solution}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function PrinciplesSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section tint" id="principles">
      <div className="wrap">
        <div className="reveal">
          <SectionHead part="Part 02" label="Why it works"
            title='Five principles that ship real articles, <span class="gr">not filler.</span>'
            intro="Ryan and Tim were clear: the choice of model matters less than the choice of architecture. These five principles separate a pipeline that ships from one that produces slop." />
        </div>
        <div className="principles reveal" style={{ marginTop: "var(--space-12)" }}>
          {PRINCIPLES.map((p, i) => (
            <Principle key={p.n} p={p} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PrinciplesSection });