const WHY = [
  {
    title: <>Guaranteed <span className="serif">10% savings</span> to the bottom line.</>,
    body: 'Toro\'s commitment: a minimum 10% reduction to your landed cost, while improving quality across your chain. We consolidate purchasing power across our client portfolio, giving every brand access to pricing, terms, and relationships they couldn\'t secure alone.',
    proof: { val: '≥10', unit: '%', lbl: 'Cost reduction, guaranteed' },
  },
  {
    title: <>Every link, <span className="serif">in-house.</span></>,
    body: 'No brokers, no middlemen. Toro manages every step under one roof: sourcing, manufacturing, freight, warehousing, last-mile. No handoffs, no blind spots, no vendor tag. Your supply chain has one phone number.',
    proof: { val: '1', unit: '', lbl: 'Partner, not dozens' },
  },
  {
    title: <><span className="serif">AI-native,</span> from day one.</>,
    body: 'Toro was built around intelligent decision-making. AI is embedded across forecasting, routing, sourcing, and cost control, surfacing insights and automating the work that used to require a planning team. It\'s how we run leaner than anyone else.',
    proof: { val: '∞', unit: '', lbl: 'Decisions automated daily' },
  },
  {
    title: <>The team has <span className="serif">done this before.</span></>,
    body: 'Forty-five supply chain specialists (former Big 4 consultants, seasoned operators, global procurement veterans) embedded with your business. The software is the leverage; the team is the reason it actually works.',
    proof: { val: '45', unit: '+', lbl: 'Specialists on staff' },
  },
  {
    title: <>Transparent <span className="serif">by design.</span></>,
    body: 'Integrity-first, open-book partnerships. You see the real costs, the real margins, the real routes. Long-term trust beats short-term arbitrage every time, and it\'s why our clients compound with us.',
    proof: { val: '100', unit: '%', lbl: 'Open-book costing' },
  },
];

function WhyToro() {
  return (
    <section className="section" id="why" style={{paddingTop: 50, paddingBottom: 80}}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot"></span>WHY TORO</span>
            <h2>Built different.<br/>Built <span className="serif">for you.</span></h2>
          </div>
          <p className="lede">
            Five structural reasons Toro isn't just another 3PL or sourcing shop. Take one capability or all four. The advantages compound no matter where you start.
          </p>
        </div>

        <div className="why-list">
          {WHY.map((w, i) => (
            <div className="why-row" key={i}>
              <span className="idx">REASON · 0{i + 1}</span>
              <h4>{w.title}</h4>
              <p>{w.body}</p>
              <div className="why-proof">
                <span className="val">{w.proof.val}<span className="unit">{w.proof.unit}</span></span>
                <span className="lbl">{w.proof.lbl}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhyToro = WhyToro;