// Node spec cards (P1 / P2) and the dark bottom CTA strip.

const NodeSpecCard = ({ symbol, name, kind, coverage, body, image, specs, bestFor }) => (
  <div className="pyrra-nodecard">
    <div className="pyrra-nodecard__head">
      <span className="pyrra-nodecard__symbol">{symbol}</span>
      <span className="pyrra-nodecard__name">{name}</span>
      <span className="pyrra-nodecard__tag">{coverage}</span>
    </div>
    <p className="pyrra-nodecard__intro">{body}</p>
    <div className="pyrra-nodecard__image" style={{ backgroundImage: `url(${image})` }} />
    <table className="pyrra-nodecard__specs">
      <tbody>
        {specs.map((s, i) => (
          <tr key={i}>
            <td className="pyrra-nodecard__icon">{s.icon}</td>
            <td className="pyrra-nodecard__key">{s.key}</td>
            <td className="pyrra-nodecard__val">{s.val}</td>
          </tr>
        ))}
        <tr>
          <td className="pyrra-nodecard__icon"><IconShield size={18} /></td>
          <td className="pyrra-nodecard__key">Best for</td>
          <td className="pyrra-nodecard__val">
            <ul>
              {bestFor.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
);

// Dark bottom CTA strip — full-bleed cityscape with text + button.
const CtaStrip = ({ title, body, ctaLabel, onCta }) => (
  <section className="pyrra-cta">
    <div className="pyrra-cta__bg" />
    <div className="pyrra-cta__inner">
      <div className="pyrra-cta__text">
        <h2>{title}</h2>
        {body ? <p>{body}</p> : null}
      </div>
      <Button size="lg" onClick={onCta}>{ctaLabel}</Button>
    </div>
  </section>
);

Object.assign(window, { NodeSpecCard, CtaStrip });