// Spec page building blocks — comparison table, spec block, fits/doesn't fit,
// checklist, FAQ.

// Two-column spec comparison table (P1 vs P2).
const SpecCompareTable = ({ rows }) => (
  <div className="pyrra-spectable">
    <div className="pyrra-spectable__head">
      <div className="pyrra-spectable__col pyrra-spectable__col--label">Requirement</div>
      <div className="pyrra-spectable__col">
        <span className="pyrra-spectable__sym">P1</span>
        <span className="pyrra-spectable__sub">Everyday demand</span>
      </div>
      <div className="pyrra-spectable__col">
        <span className="pyrra-spectable__sym">P2</span>
        <span className="pyrra-spectable__sub">Training & R&amp;D</span>
      </div>
    </div>
    <div className="pyrra-spectable__body">
      {rows.map((r, i) => (
        <div className="pyrra-spectable__row" key={i}>
          <div className="pyrra-spectable__col pyrra-spectable__col--label">{r.key}</div>
          <div className="pyrra-spectable__col">{r.p1}</div>
          <div className="pyrra-spectable__col">{r.p2}</div>
        </div>
      ))}
    </div>
  </div>
);

// A single spec section: tabular spec rows. The page provides the label above.
const SpecBlock = ({ rows }) => (
  <dl className="pyrra-speclist">
    {rows.map((r, i) => (
      <div key={i}>
        <dt>{r.key}</dt>
        <dd>{r.val}</dd>
      </div>
    ))}
  </dl>
);

// Where Pyrra fits — two columns: fits / does not fit.
const FitsBlock = ({ fits, notFits }) => (
  <div className="pyrra-fits">
    <div className="pyrra-fits__col pyrra-fits__col--yes">
      <div className="pyrra-fits__head">
        <span className="pyrra-fits__mark pyrra-fits__mark--yes">+</span>
        <h3>Fits</h3>
      </div>
      <ul>
        {fits.map((f, i) => <li key={i}>{f}</li>)}
      </ul>
    </div>
    <div className="pyrra-fits__col pyrra-fits__col--no">
      <div className="pyrra-fits__head">
        <span className="pyrra-fits__mark pyrra-fits__mark--no">−</span>
        <h3>Does not fit</h3>
      </div>
      <ul>
        {notFits.map((f, i) => <li key={i}>{f}</li>)}
      </ul>
    </div>
  </div>
);

// Five-question qualification checklist.
const ChecklistBlock = ({ items }) => (
  <ol className="pyrra-checklist">
    {items.map((it, i) => (
      <li key={i} className="pyrra-checklist__item">
        <div className="pyrra-checklist__num">{String(i + 1).padStart(2, "0")}</div>
        <div className="pyrra-checklist__text">
          <h4>{it.title}</h4>
          <p>{it.body}</p>
        </div>
      </li>
    ))}
  </ol>
);

// Simple FAQ with native <details>.
const FaqBlock = ({ items }) => (
  <div className="pyrra-faq">
    {items.map((it, i) => (
      <details key={i} className="pyrra-faq__item">
        <summary>
          <span>{it.q}</span>
          <span className="pyrra-faq__chev" aria-hidden>+</span>
        </summary>
        <div className="pyrra-faq__body">{it.a}</div>
      </details>
    ))}
  </div>
);

// Inline link card surfaced on the Nodes page that points to the full spec page.
const SpecsLinkCard = ({ onClick }) => (
  <a
    className="pyrra-specslink"
    href="#/specs"
    onClick={(e) => { e.preventDefault(); onClick(); }}
  >
    <div className="pyrra-specslink__icon"><IconShield size={26} /></div>
    <div className="pyrra-specslink__text">
      <Eyebrow>Site Specifications</Eyebrow>
      <h3>What a Pyrra-ready building looks like.</h3>
      <p>Review site requirements before placing your deposit and securing your inference zone.</p>
    </div>
    <div className="pyrra-specslink__cta">
      <span>Read the specs</span>
      <IconArrowRight size={18} />
    </div>
  </a>
);

Object.assign(window, {
  SpecCompareTable, SpecBlock, FitsBlock, ChecklistBlock, FaqBlock, SpecsLinkCard,
});