/* global React, CCButton */
// Centered headline + three feature cards, each showing one of the
// official app demo screenshots (`assets/demos/*.png`) on top.
function FeatureTriptych({
  headline,
  sub,
  features,        // [{ title, body, demo }]  demo: filename in assets/demos/
  ctaLabel,
  onCta,
}) {
  return (
    <section className="cc-triptych">
      <header className="cc-triptych-head">
        <h2 className="cc-section-h">{headline}</h2>
        <p className="cc-section-p cc-center">{sub}</p>
      </header>
      <div className="cc-triptych-grid">
        {features.map((f, i) => (
          <article key={i} className="cc-feature-card">
            <div className="cc-feature-screen">
              <img
                className="cc-feature-screen-img"
                src={`assets/demos/${f.demo}`}
                alt=""
              />
            </div>
            <h3 className="cc-feature-title">{f.title}</h3>
            <p className="cc-feature-body">{f.body}</p>
          </article>
        ))}
      </div>
      {ctaLabel && (
        <div className="cc-triptych-cta">
          <CCButton variant="outline" size="sm" onClick={onCta}>{ctaLabel}</CCButton>
        </div>
      )}
    </section>
  );
}

window.FeatureTriptych = FeatureTriptych;