// ============================================================
// ABOUT PAGE
// ============================================================

function AboutHero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero__inner">
          <span className="hero__kicker">About inevidence</span>
          <h1 style={{ font: '700 clamp(40px, 5.4vw, 76px)/1.04 var(--font-family-base)', letterSpacing: '-0.04em' }}>
            Customer-powered growth enables you to accelerate acquisition, retention, and expansion.
          </h1>
          <p className="hero__lead">
            By activating the voices, stories, loyalty, and influence of your most strategic customers,
            we help you turn happy customers into your most reliable engine for durable revenue.
          </p>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// Three value cards — the brief
// ------------------------------------------------------------
function AboutValues() {
  const values = [
    {
      n: '01',
      title: 'Accelerate acquisition',
      body: 'Customer stories, advocacy, and human proof help buyers trust you faster. Peer credibility shortens sales cycles, reduces late-stage friction, and gives marketing the most persuasive asset in the funnel — real customers in their own words.',
    },
    {
      n: '02',
      title: 'Maximise retention',
      body: 'Customer insight and loyalty programs improve experience and deepen long-term relationships. When customers feel heard, recognised, and connected to a peer community, the conversation shifts from renewal risk to expansion opportunity.',
    },
    {
      n: '03',
      title: 'Boost Net Revenue Retention',
      body: 'Existing customers become a durable growth engine through advocacy, expansion, loyalty, and influence. NRR compounds, valuation follows, and your best customers do the marketing for you.',
    },
  ];

  return (
    <section className="section section--canvas">
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__marker"></div>
            <span className="label-overline">What we do</span>
            <h2>We operationalise your customers.</h2>
          </div>
          <p className="lead">
            Three commercial outcomes, one connected operating model — measured in retention, expansion, and revenue you can attribute.
          </p>
        </div>
        <div className="value-grid">
          {values.map(v => (
            <article key={v.n} className="value-card">
              <div className="value-card__num">{v.n} · Outcome</div>
              <h3>{v.title}</h3>
              <p>{v.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// Global footprint — Since 1991 / 90 countries / 30+ languages
// ------------------------------------------------------------
function AboutFootprint() {
  const regions = [
    'United Kingdom', 'United States', 'France', 'Germany', 'Spain',
    'Italy', 'Netherlands', 'Sweden', 'Japan', 'Singapore',
    'Australia', 'Brazil', 'Mexico', 'India', 'Canada',
  ];

  return (
    <section className="section section--surface">
      <div className="container">
        <div className="footprint">
          <div>
            <div className="label-overline">Experience proof</div>
            <h3>Since 1991. 90 countries. 30+ languages and counting.</h3>
            <p>
              We've been doing this since 1991 — long before "customer marketing" was a job title.
              With customers in 90 countries and work delivered in over 30 languages, we help global B2B brands
              build a self-reinforcing growth engine that travels.
            </p>
          </div>
          <div className="footprint__grid">
            {regions.map(r => (
              <div key={r} className="footprint__chip">{r}</div>
            ))}
            <div className="footprint__chip" style={{ background: 'var(--color-deep-grape)', color: '#fff', borderColor: 'var(--color-deep-grape)' }}>
              + 75 more
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// NRR call-out — the most important commercial argument
// ------------------------------------------------------------
function AboutNRR() {
  return (
    <section className="section section--canvas">
      <div className="container">
        <div className="nrr">
          <div>
            <div className="label-overline" style={{ color: 'var(--color-deep-grape)' }}>Net Revenue Retention</div>
            <blockquote className="nrr__quote">
              NRR has become the <em>#1 predictor</em> of company valuation. Your existing customers are the gold mine —
              a company's value isn't based on how many new logos you sign, but on how the customers you already have stay and grow.
            </blockquote>
          </div>
          <div className="nrr__side">
            <div className="nrr-stat">
              <span className="num">×12</span>
              <span className="lbl">The valuation multiple top-quartile NRR companies command vs. bottom quartile, on average.</span>
            </div>
            <div className="nrr-stat">
              <span className="num">70%</span>
              <span className="lbl">Of revenue at high-growth SaaS companies now comes from existing customers expanding.</span>
            </div>
            <div className="nrr-stat">
              <span className="num">5×</span>
              <span className="lbl">More expensive to acquire a new customer than to expand a happy one.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// Metrics wall — premium stat blocks
// ------------------------------------------------------------
function AboutMetrics() {
  return (
    <section className="section section--canvas">
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__marker"></div>
            <span className="label-overline">By the numbers</span>
            <h2>Customer-powered growth, measured.</h2>
          </div>
          <p className="lead">
            A snapshot of the experience, scale, and outcomes our customer marketing programmes deliver.
          </p>
        </div>

        <div className="metric-wall">
          <div className="metric-wall__cell">
            <div className="metric-wall__cap">Founded</div>
            <div>
              <div className="metric-wall__num">1991</div>
              <div className="metric-wall__label">Customer marketing before "customer marketing" was a category.</div>
            </div>
          </div>

          <div className="metric-wall__cell accent">
            <div className="metric-wall__cap">Global footprint</div>
            <div>
              <div className="metric-wall__num">90</div>
              <div className="metric-wall__label">Countries where our work has run.</div>
            </div>
          </div>

          <div className="metric-wall__cell">
            <div className="metric-wall__cap">Languages</div>
            <div>
              <div className="metric-wall__num">30+</div>
              <div className="metric-wall__label">Languages our programmes ship in.</div>
            </div>
          </div>

          <div className="metric-wall__cell turq">
            <div className="metric-wall__cap">Net retention lift</div>
            <div>
              <div className="metric-wall__num">+38%</div>
              <div className="metric-wall__label">Median NRR lift across active advocacy programmes.</div>
            </div>
          </div>

          <div className="metric-wall__cell turq">
            <div className="metric-wall__cap">Reference pipeline</div>
            <div>
              <div className="metric-wall__num">2.4×</div>
              <div className="metric-wall__label">Average expansion pipeline sourced from reference customers.</div>
            </div>
          </div>

          <div className="metric-wall__cell">
            <div className="metric-wall__cap">Active advocates</div>
            <div>
              <div className="metric-wall__num">190</div>
              <div className="metric-wall__label">Reference customers active in client programmes this quarter.</div>
            </div>
          </div>

          <div className="metric-wall__cell accent">
            <div className="metric-wall__cap">Hosted communities</div>
            <div>
              <div className="metric-wall__num">12</div>
              <div className="metric-wall__label">Quarterly customer advisory and community sessions we host.</div>
            </div>
          </div>

          <div className="metric-wall__cell">
            <div className="metric-wall__cap">Industries</div>
            <div>
              <div className="metric-wall__num">24</div>
              <div className="metric-wall__label">B2B sectors we've shipped customer-powered programmes inside.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// About CTA
// ------------------------------------------------------------
function AboutCTA({ onNavigate }) {
  return (
    <section className="pull">
      <div className="pull__inner">
        <div className="pull__overline">A partnership, not a project</div>
        <blockquote className="pull__quote">
          We sit between marketing, sales, and customer success — and operationalise the customer as your most reliable growth engine.
        </blockquote>
        <div className="pull__cite" style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
          <button className="btn btn--inverse btn--lg" onClick={() => onNavigate('contact')}>
            Let's Talk
            <Icon name="arrowRight" size={16} color="var(--text-deep-grape)" />
          </button>
          <button className="btn btn--lg" style={{ background: 'transparent', border: '1px solid rgba(255,255,255,0.3)', color: '#fff' }} onClick={() => onNavigate('work')}>
            See the work
          </button>
        </div>
      </div>
    </section>
  );
}

window.AboutHero = AboutHero;
window.AboutValues = AboutValues;
window.AboutFootprint = AboutFootprint;
window.AboutNRR = AboutNRR;
window.AboutMetrics = AboutMetrics;
window.AboutCTA = AboutCTA;