const CAPS = [
  {
    num: '01',
    name: 'Manufacturing',
    href: 'manufacturing-v2.html',
    kicker: 'Quality · Innovation · Speed-to-market',
    body: 'Toro owns and operates production across China, Vietnam, Cambodia, Colombia, and the US, giving brands direct factory access with full QC at every stage. Where our facilities don\'t fit, we source from a vetted partner network, never a broker.',
    tags: ['Own facilities', 'Vetted network', 'Certified QC'],
    stat: <><b>90M+</b> units / year across <b>5</b> countries</>,
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M4 20V9l5 3V9l5 3V9l6 4v7H4Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
        <path d="M8 20v-3M13 20v-3M18 20v-3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
      </svg>
    ),
  },
  {
    num: '02',
    name: 'Logistics',
    href: 'logistics-v2.html',
    kicker: 'Cost-efficiency · Speed · Performance',
    body: 'Factory floor to front door, managed in-house: ocean freight, customs, line-haul, fulfillment, last-mile. We power 1M+ home deliveries across the US every month, with the infrastructure to grow with you.',
    tags: ['Freight', 'Customs', 'Fulfillment', 'Last-mile'],
    stat: <><b>1M+</b> monthly US home deliveries</>,
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M2 8h10v9H2V8Z" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M12 11h6l3 3v3h-9v-6Z" stroke="currentColor" strokeWidth="1.4"/>
        <circle cx="7" cy="18.5" r="1.5" stroke="currentColor" strokeWidth="1.2"/>
        <circle cx="17" cy="18.5" r="1.5" stroke="currentColor" strokeWidth="1.2"/>
      </svg>
    ),
  },
  {
    num: '03',
    name: 'Consultancy',
    href: 'consultancy-v2.html',
    kicker: 'Insight · Leverage · Savings',
    body: 'Locked in with current suppliers? Our consultancy operates independently of our own services: supply chain audits, network design, sourcing strategy, procurement. We find speed, visibility, and savings in whatever setup you have.',
    tags: ['Audits', 'Network design', 'Sourcing', 'Procurement'],
    stat: <>Specialists · ex-Big 4, ex-operators</>,
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M4 5h16v12H4V5Z" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M7 11l3 2 4-5 3 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M9 20h6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
      </svg>
    ),
  },
  {
    num: '04',
    name: 'AI & Technology',
    href: 'ai-and-technology-v2.html',
    kicker: 'Automation · Visibility · Intelligence',
    body: 'Toro is AI-native. Our in-house tech team has embedded AI across every layer: network design, real-time control, cost analytics, demand forecasting. AI isn\'t a feature here. It\'s the infrastructure that makes every other service cheaper and better.',
    tags: ['Forecasting', 'Routing', 'Cost models', 'Control plane'],
    stat: <><b>Infrastructure</b>, not a feature bolt-on</>,
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <rect x="5" y="5" width="14" height="14" rx="2" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M9 9h6v6H9V9Z" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
      </svg>
    ),
  },
];

function Capabilities() {
  return (
    <section className="section" id="capabilities" style={{paddingBottom: 50}}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot"></span>CAPABILITIES</span>
            <h2>Four capabilities.<br/>One <span className="serif">seamless</span> experience.</h2>
          </div>
          <p className="lede">
            Toro is the only platform that owns the full stack (factory to front door) and orchestrates it with AI. Take one capability or the entire chain; the leverage compounds either way.
          </p>
        </div>

        <div className="caps">
          {CAPS.map((c) => (
            <div className="cap" key={c.num}>
              <div className="cap-head">
                <div>
                  <div className="cap-num">CAP.{c.num}</div>
                  <h4 style={{marginTop: 14}}>{c.name}</h4>
                  <div className="kicker" style={{marginTop: 8, fontSize: 10}}>{c.kicker}</div>
                </div>
                <div className="cap-icon">{c.icon}</div>
              </div>
              <p>{c.body}</p>
              <div className="cap-tags">
                {c.tags.map(t => <span className="cap-tag" key={t}>{t}</span>)}
              </div>
              <div className="cap-foot">
                <span className="cap-stat">{c.stat}</span>
                <a href={c.href} className="link">
                  Explore
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5h6m0 0L5.5 2.5M8 5 5.5 7.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Capabilities = Capabilities;