// ── OUR APPROACH PAGE ────────────────────────────────
function ApproachPage({ navigate, tweaks }) {
  const gold = tweaks.accentColor;
  useReveal();

  const pillars = [
    {
      num: '01',
      title: 'Systems & CRM',
      imgUrl: null,
      body: [
        "A strong sales engine starts with the right foundation — and that foundation is your CRM and the systems built around it. We go beyond simply implementing software; we design a complete sales infrastructure tailored to how your business operates.",
        "From pipeline architecture and automation to reporting and data visibility, every element is structured with intention. The goal is to eliminate inefficiencies, reduce manual work, and create a seamless flow from lead capture to close.",
        "When your systems are properly aligned, your team gains clarity, your processes become repeatable, and your revenue becomes more predictable. The result is a scalable framework that supports growth, improves performance, and allows your business to function at a higher level — consistently and efficiently.",
      ],
    },
    {
      num: '02',
      title: 'Lead Follow-Up',
      imgUrl: null,
      body: [
        "Every warm lead is a valuable opportunity, but without a consistent and strategic follow-up process, many of those opportunities are lost. We build structured follow-up systems that ensure every prospect is engaged at the right time with the right message.",
        "From immediate responses to long-term nurturing workflows, each touchpoint is designed to guide the buyer journey forward. We focus on speed, consistency, and personalization — the key elements that drive higher conversion rates.",
        "The outcome is a more efficient sales process that captures opportunities, builds trust, and converts interest into measurable revenue.",
      ],
    },
    {
      num: '03',
      title: 'Right People, Right Seats',
      imgUrl: null,
      body: [
        "Sustainable growth is driven by people, but only when they are positioned correctly within the organization. We help you evaluate your team structure to ensure that every role is clearly defined and aligned with your business objectives.",
        "We assess strengths, identify gaps, and align responsibilities so each person operates where they create the most value. The result is a team that moves with clarity, ownership, and shared accountability — driving consistent, scalable growth.",
      ],
    },
    {
      num: '04',
      title: 'Accountability',
      imgUrl: null,
      body: [
        "Accountability is the force that turns strategy into results. Without it, even the most advanced systems, skilled teams, and well-designed processes begin to lose effectiveness over time. We focus on building a culture and structure where performance is clearly defined, consistently measured, and actively managed.",
        "Our approach starts with establishing the right metrics — not vanity numbers, but meaningful indicators that directly impact revenue and growth. From lead response times and pipeline movement to conversion rates and closing performance, every stage of your sales process is tracked with precision.",
        "This creates full visibility across your operation, allowing you to understand exactly what is happening at any given moment. We implement structured reporting systems and regular performance reviews to ensure insights are acted upon.",
        "With strong accountability in place, your business shifts from reactive to proactive. Instead of guessing or relying on assumptions, you operate with real data and clear benchmarks — leading to faster decision-making, improved consistency, and a sales environment where performance is continuously optimized.",
      ],
    },
  ];

  return (
    <div>
      <PageHero
        eyebrow="How We Work"
        title="Our Approach"
        subhead="We don't believe in guesswork, generic playbooks, or bloated strategies."
        imgUrl="assets/images/approach/banner.png"
        accentColor={gold}
      />

      {/* Intro */}
      <section style={{ background:'var(--paper)', padding:'clamp(64px,8vw,100px) 0' }}>
        <div style={{ maxWidth:'760px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', textAlign:'center' }} className="reveal">
          <p className="t-pull-quote" style={{ fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(20px,2.5vw,30px)', fontWeight:'300', lineHeight:1.5, color:'var(--ink)' }}>
            "Every engagement starts with understanding. Not assumptions. Not templates. Your business, your team, your gaps."
          </p>
        </div>
      </section>

      {/* Pillars — stacked layout */}
      {pillars.map((p, i) => {
        const isDark = i % 2 !== 0;
        const bg = i === 0 ? 'var(--paper)' : i === 1 ? 'var(--ink)' : i === 2 ? 'var(--paper-warm)' : 'var(--ink)';
        const icons = [
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M9 21V9"/></svg>,
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>,
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>,
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>,
        ];
        return (
          <section key={i} style={{ background: bg, padding:'clamp(72px,9vw,110px) clamp(24px,5vw,80px)', borderTop: i===0 ? 'none' : `1px solid ${isDark ? 'rgba(184,150,46,0.12)' : 'var(--fog)'}`, position:'relative', overflow:'hidden' }}>
            <div style={{ maxWidth:'1280px', margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 2fr', gap:'clamp(48px,7vw,120px)', alignItems:'start' }} className="approach-grid">
              <div>
                <p style={{ fontFamily:'var(--serif)', fontSize:'clamp(100px,14vw,180px)', fontWeight:'300', lineHeight:1, letterSpacing:'-0.03em', color: isDark ? 'rgba(184,150,46,0.06)' : 'rgba(184,150,46,0.07)', marginBottom:'-20px', marginLeft:'-8px' }}>{p.num}</p>
                <p className="t-eyebrow" style={{ color:gold, marginBottom:'14px' }}>Pillar {p.num}</p>
                <h2 className="t-h2" style={{ color: isDark ? 'var(--paper)' : 'var(--ink)', marginBottom:'20px' }}>{p.title}</h2>
                <div style={{ width:'44px', height:'1px', background:gold }} />
              </div>
              <div style={{ paddingTop:'8px' }}>
                <div style={{ width:'56px', height:'56px', border:`1px solid rgba(184,150,46,0.3)`, display:'flex', alignItems:'center', justifyContent:'center', color:gold, marginBottom:'32px' }}>
                  {icons[i]}
                </div>
                {p.body.map((para, j) => (
                  <p key={j} className="t-body" style={{ marginBottom: j < p.body.length-1 ? '18px' : 0, color: isDark ? 'rgba(248,245,239,0.62)' : 'var(--ink-soft)', fontStyle: para.startsWith('[') ? 'italic' : 'normal' }}>{para}</p>
                ))}
              </div>
            </div>
          </section>
        );
      })}

      <CTABand navigate={navigate} accentColor={gold} heading="Ready to build your sales foundation?" sub="Every strong sales engine starts with the right approach. Let's build yours." />
      <style>{`@media(max-width:720px){.two-col{grid-template-columns:1fr!important;} .two-col>*{order:unset!important;} .approach-grid{grid-template-columns:1fr!important;}}`}</style>
    </div>
  );
}

Object.assign(window, { ApproachPage });
