/* Conto Labs website kit · Solutions (cards + brownfield & greenfield diagrams)
   All copy/images come from content/site.yaml via window.CONTENT. */

// Card accent classes, in order (brownfield, greenfield).
const SOL_CARD = ["sol-brown", "sol-green"];

function Solutions() {
  const c = window.CONTENT.solutions;
  return (
    <section id="solutions">
      <div className="container">
        <div className="sec-head">
          <span className="kicker">{c.kicker}</span>
          <h2>{c.heading}</h2>
          <p>{c.intro}</p>
        </div>

        <div className="sol">
          {c.cards.map((card, i) => (
            <div className={"sol-card " + (SOL_CARD[i] || "") + " reveal"} key={card.badge}>
              <span className="badge">{card.badge}</span>
              <h3>{card.heading}</h3>
              <div className="aud">{card.audience}</div>
              <p>{card.text}</p>
              <ul>
                {card.points.map((pt) => (<li key={pt}>{pt}</li>))}
              </ul>
            </div>
          ))}
        </div>

        {c.diagrams.map((d) => (
          <div className="diagram-wrap reveal" key={d.tag}>
            <div className="dh"><span className={"dtag " + d.tagClass}>{d.tag}</span><h3>{d.heading}</h3></div>
            <p className="dsub">{d.caption}</p>
            <Raw as="div" html={d.image} />
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Solutions });