// ============================================================
// HOME PAGE
// Hero (centered, text-only) → Pillars → Clients → Stat band →
// Pull quote → CTA strip (handled by App)
// ============================================================

function HomeHero() {
  return (
    <section className="hero hero--home">
      <div className="container">
        <div className="hero__inner">
          <h1>Customer&#8209;Powered Growth</h1>
          <p className="hero__lead">
            We turn your happiest customers into your best sales tools.
            Proof&#8209;driven marketing that does two things: uses peer credibility to win new business faster,
            and deepens loyalty so your existing customers stay longer and buy more.
          </p>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// Strategic pillars — 4 editorial feature blocks on ONE row
// ------------------------------------------------------------
function HomePillars({ onNavigate }) {
  const pillars = [
    {
      n: '01',
      kicker: 'Listen',
      title: 'Voice of the Customer',
      body: 'Listen to your customers at scale, and turn their feedback into clear business action. We build continuous listening loops that capture what your customers really mean.',
      accent: 'var(--color-bright-turquoise)',
    },
    {
      n: '02',
      kicker: 'Mobilise',
      title: 'Customer Advocacy',
      body: 'Find your most successful users and empower them to talk about you. We turn happy customers into a natural extension of your sales and marketing teams.',
      accent: 'var(--color-purple)',
    },
    {
      n: '03',
      kicker: 'Story',
      title: 'Strategic High-Fidelity Storytelling',
      body: 'Create content that uses emotional hooks, journalistic discipline, and high-end production to tell stories that people trust and engage with.',
      accent: 'var(--color-hot-pink)',
    },
    {
      n: '04',
      kicker: 'Belong',
      title: 'Loyalty & Communities',
      body: 'Build spaces where your customers can connect, learn, and grow together. We shift your customer relationship from transactional to indispensable.',
      accent: 'var(--color-blue)',
    },
  ];

  return (
    <section className="section section--canvas">
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__marker"></div>
            <span className="label-overline">A growth philosophy</span>
            <h2>More than a program; a strategic growth philosophy.</h2>
          </div>
          <p className="lead">
            Four interconnected pillars that turn customer success into commercial momentum —
            acquisition, retention, and expansion compounding off one operating model.
          </p>
        </div>
        <div className="pillars">
          {pillars.map(p => (
            <article
              key={p.n}
              className="pillar"
              style={{ '--accent': p.accent }}
              onClick={() => onNavigate('services')}>
              <div className="pillar__num">
                <span>{p.n}</span> · {p.kicker}
              </div>
              <div className="pillar__rule"></div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <div className="pillar__foot">
                Read the service <Icon name="arrowUpRight" size={14} color="var(--text-deep-grape)" />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// Client logo ticker — BELOW pillars per brief
// ------------------------------------------------------------
function ClientTicker() {
  const names = [
    'GLOBEX', 'INITECH', 'HOOLI', 'MASSIVE DYNAMIC', 'SOYLENT', 'WONKA',
    'PIED PIPER', 'STARK INDUSTRIES', 'ACME LABS', 'CYBERDYNE',
    'WAYNE ENTERPRISES', 'UMBRELLA', 'DUNDER MIFFLIN', 'LACUNA',
  ];
  // duplicate for seamless loop
  const loop = [...names, ...names];

  return (
    <section className="clients">
      <div className="container">
        <div className="clients__label">Trusted by ambitious B2B brands worldwide</div>
        <div className="ticker">
          <div className="ticker__track">
            {loop.map((n, i) => (
              <span key={i} className="ticker__item">
                {n}
                <span className="dot" aria-hidden="true"></span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// Stat band — quick proof above the pull quote
// ------------------------------------------------------------
function HomeStatBand() {
  const stats = [
    { num: '1991',  label: 'Founded' },
    { num: '90',    label: 'Countries served' },
    { num: '30+',   label: 'Languages' },
    { num: '#1',    label: 'NRR is the top predictor of valuation' },
  ];
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="statband">
          {stats.map(s => (
            <div key={s.label} className="statband__item">
              <div className="statband__num">{s.num}</div>
              <div className="statband__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// Pull quote — editorial dark band
// ------------------------------------------------------------
function HomePull({ onNavigate }) {
  return (
    <section className="pull">
      <div className="pull__inner">
        <div className="pull__overline">Why customer-powered growth</div>
        <blockquote className="pull__quote">
          Your existing customers are your gold mine. A company's value isn't
          how many new logos you sign — it's how the customers you already have
          stay, expand, and tell the story for you.
        </blockquote>
        <div className="pull__cite">
          <button className="btn btn--inverse btn--lg" onClick={() => onNavigate('about')}>
            See the philosophy
            <Icon name="arrowRight" size={16} color="var(--text-deep-grape)" />
          </button>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------------
// CTA strip — primary action AFTER the hero (lives at end of home)
// ------------------------------------------------------------
function HomeCTA({ onNavigate }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{
          background: '#fff',
          border: '1px solid var(--border-subtle)',
          borderRadius: 'var(--radius-xl)',
          padding: '64px 64px',
          display: 'grid',
          gridTemplateColumns: '1.4fr auto',
          gap: 48,
          alignItems: 'center',
        }} className="home-cta">
          <div>
            <div className="label-overline" style={{ color: 'var(--color-bright-turquoise)' }}>Let's Talk</div>
            <h2 style={{
              font: '700 clamp(28px, 3.4vw, 44px)/1.1 var(--font-family-base)',
              letterSpacing: '-0.03em',
              color: 'var(--text-deep-grape)',
              textWrap: 'balance',
              maxWidth: 720,
            }}>
              Ready to turn your best customers into your strongest growth lever?
            </h2>
            <p style={{
              font: 'var(--type-body-md)',
              color: 'var(--text-secondary)',
              marginTop: 16,
              maxWidth: 560,
            }}>
              We'll listen first — your goals, your customers, your gaps — and come back with a clear, costed point of view.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <button className="btn btn--primary btn--lg" onClick={() => onNavigate('contact')}>
              Let's Talk
              <Icon name="arrowRight" size={18} color="#fff" />
            </button>
            <button className="btn btn--secondary btn--lg" onClick={() => onNavigate('work')}>
              See selected work
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomeHero = HomeHero;
window.HomePillars = HomePillars;
window.ClientTicker = ClientTicker;
window.HomeStatBand = HomeStatBand;
window.HomePull = HomePull;
window.HomeCTA = HomeCTA;