/* Conto Labs website kit · Product (harness, flow, architecture diagram, value strip)
   All copy/images come from content/site.yaml via window.CONTENT. */

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

        <div className="harness reveal" style={{ marginBottom: 46 }}>
          <div className="container">
            <span className="lab">{c.harness.label}</span>
            <h2>{c.harness.heading}</h2>
            <p>{c.harness.text}</p>
          </div>
        </div>

        <div className="sec-head" style={{ marginBottom: 32 }}>
          <h2 style={{ fontSize: 24 }}>{c.flowHeading}</h2>
        </div>
        <div className="flow">
          {c.flow.map((f, i) => (
            <div className="flow-step reveal" key={f.title}>
              <div className={"num n" + (i + 1)}>{i + 1}</div>
              <h4>{f.title}</h4>
              <p>{f.text}</p>
            </div>
          ))}
        </div>

        <div className="diagram-wrap reveal" style={{ marginTop: 44 }}>
          <div className="dh"><h3>{c.diagram.heading}</h3></div>
          <p className="dsub">{c.diagram.caption}</p>
          <Raw as="div" html={c.diagram.image} />
        </div>

        <div className="strip reveal" style={{ marginTop: 30 }}>
          {c.strip.map((s) => (
            <div className="item" key={s.big}>
              <span className="big">{s.big}</span><span className="sm">{s.small}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Product });