/* global React */
// Who we build for — Tristan's version: three text-only cards on the dark
// panel. No illustrations, no corner brackets. Each card: a short accent
// tick above the label, label, body. Hover stays subtle: faint background
// lift, tick extends and brightens, label catches the accent.
// Styles live in site.css under "Who we build for".

function WhoWeBuildFor() {
  const cards = [
    {
      label: 'Wealth & Asset Managers',
      body:
        'Portfolio compliance, mandate monitoring, and regulatory reporting, governed and auditable.',
    },
    {
      label: 'Independent Financial Advisors',
      body:
        'Records of advice, KYC and AML checks, and CPD tracking, handled automatically inside your practice',
    },
    {
      label: 'Other Regulated Industries',
      body:
        'Any firm where compliance is non-negotiable, data is sensitive, and governance failures have personal consequences.',
    },
  ];

  return (
    <section className="section" id="who-we-build-for" style={{ paddingTop: 'var(--space-5)' }}>
      <div className="wbf-panel">
        <div className="page">
          <div className="section__head">
            <h2 className="h2 section__title">Built for regulated businesses.</h2>
          </div>

          <div className="wbf-grid">
            {cards.map(({ label, body }) => (
              <article key={label} className="wbf-card" tabIndex={0}>
                <span className="wbf-tick" />
                <h3 className="wbf-card__label">{label}</h3>
                <p className="p wbf-card__body">{body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.WhoWeBuildFor = WhoWeBuildFor;