/* trust.jsx
   - TrustedStrip: slim band of client logos, sits just below the hero.
   - TrustSection: enlarged customer-trust section (reference stats card +
     supporting trust points). Recoloured to the Macnitech palette. */

const TRUSTED = ['Northwind', 'Veloce', 'Harbour & Co', 'Aksu Health', 'Brightside', 'Lumen'];

function TrustedStrip() {
  return (
    <section className="trusted-strip" data-screen-label="Trusted by">
      <div className="mt-container trusted-strip__inner">
        <span className="trusted-strip__label">Trusted by growth-focused teams</span>
        <div className="trusted-strip__row">
          {TRUSTED.map((t) => <span key={t} className="trusted-strip__logo">{t}</span>)}
        </div>
      </div>
    </section>
  );
}

const TRUST_POINTS = [
  { icon: 'award', h: 'Senior specialists only', p: 'No juniors learning on your account — every engagement is run by people who have done it before.' },
  { icon: 'trendingUp', h: 'Reported in outcomes', p: 'Rankings, traffic, conversions and ROI — transparent numbers every month, with context.' },
  { icon: 'shield', h: 'No long lock-ins', p: 'We earn the relationship monthly. Stay because it works, not because you are trapped.' },
  { icon: 'zap', h: 'Built to compound', p: 'SEO, web and automation reinforce each other, so results accelerate over time.' },
];

/* The stats card from the reference video (enlarged) */
function TrustStatsCard() {
  return (
    <div className="tcard reveal">
      <div className="tcard__head">
        <div className="tcard__mark"><Icon name="target" size={30} /></div>
        <div>
          <div className="tcard__bignum">150+</div>
          <div className="tcard__bigcap">Projects delivered</div>
        </div>
      </div>

      <div className="tcard__bar-row"><span className="k">Client satisfaction</span><span className="v">98%</span></div>
      <div className="tcard__bar"><i style={{ width: '98%' }} /></div>

      <div className="tcard__bar-row"><span className="k">On-time delivery</span><span className="v">94%</span></div>
      <div className="tcard__bar"><i style={{ width: '94%' }} /></div>

      <div className="tcard__divider" />

      <div className="tcard__grid">
        <div className="tcard__cell"><div className="n">12+</div><div className="l">Years</div></div>
        <div className="tcard__cell"><div className="n">24/7</div><div className="l">Support</div></div>
        <div className="tcard__cell"><div className="n">100%</div><div className="l">Quality</div></div>
      </div>

      <div className="tcard__tags">
        <span className="tcard-tag tcard-tag--active"><span className="dot" /> Active</span>
        <span className="tcard-tag"><Icon name="crown" size={13} fill="currentColor" stroke={0} /> Premium</span>
      </div>
    </div>
  );
}

function TrustSection() {
  const { Button } = window.MacnitechDesignSystem_13fddf;
  return (
    <section className="section trust-sec" id="trust" data-screen-label="Customer trust">
      <div className="trust-sec__glow" />
      <div className="mt-container trust-sec__inner">
        <div className="trust-sec__copy">
          <span className="eyebrow eyebrow--tick reveal" style={{ color: 'var(--bloodstone)' }}>Why teams choose us</span>
          <h2 className="reveal">Trusted to deliver — and to prove it.</h2>
          <p className="trust-sec__lead reveal">
            We measure success the way you do: in outcomes. Every engagement is backed by data,
            run by senior specialists, and reported with total transparency.
          </p>

          <div className="trust-points">
            {TRUST_POINTS.map((tp) => (
              <div className="trust-point reveal" key={tp.h}>
                <span className="trust-point__icon"><Icon name={tp.icon} size={20} /></span>
                <div>
                  <h4>{tp.h}</h4>
                  <p>{tp.p}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="trust-sec__btn reveal">
            <Button variant="primary" size="lg" onClick={navGoContact} iconRight={<Icon name="arrowUpRight" size={18} />}>
              Start free audit
            </Button>
          </div>
        </div>

        <div className="trust-sec__cardwrap"><TrustStatsCard /></div>
      </div>
    </section>
  );
}

Object.assign(window, { TrustedStrip, TrustSection });