const IconDesign = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21l4-4M14 6l4 4M6 17l8-8 4 4-8 8-4-4z"/><path d="M14 6l3-3 4 4-3 3"/></svg>
);
const IconPatent = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z"/><path d="M9 12l2 2 4-4"/></svg>
);
const IconFactory = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21V10l6 4V10l6 4V6l6 4v11z"/><path d="M8 21v-4M14 21v-4"/></svg>
);
const IconQC = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="M16 16l5 5"/><path d="M8 11l2 2 4-4"/></svg>
);
const IconShip = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17h18l-2 4H5l-2-4z"/><path d="M5 17V8l3-3h8l3 3v9"/><path d="M9 12h6"/></svg>
);
const IconBrand = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 4L4 20M14 4h6v6"/><circle cx="8" cy="16" r="2"/></svg>
);

const SERVICES = [
  { i: <IconDesign />, t: 'Product design', d: 'CAD, pattern-making, materials sourcing, and construction engineering for soft goods.', items: ['3D + 2D CAD', 'BOM + costing', 'Material libraries'] },
  { i: <IconPatent />, t: 'Patent & IP', d: 'Utility and design patents filed in US, EU, and Vietnam. You own everything.', items: ['Prior art searches', 'Filing & prosecution', 'Trademarks'] },
  { i: <IconFactory />, t: 'Manufacturing', d: 'Vetted factories across HCMC and Bình Dương. Direct relationships, factory-direct rates.', items: ['MOQ from 300', 'Audited suppliers', 'Weekly floor video'] },
  { i: <IconQC />, t: 'Quality control', d: 'In-line inspection every shift. AQL 1.5 final audits. We catch problems before they ship.', items: ['In-line QC', 'Final audits', 'Lab testing'] },
  { i: <IconShip />, t: 'Logistics', d: 'Freight forwarding, customs, and last-mile. One line item on your invoice, not six.', items: ['Sea + air freight', 'HTS classification', 'Amazon FBA-ready'] },
  { i: <IconBrand />, t: 'Branding & launch', d: 'Packaging, photography, and e-commerce-ready assets so you\'re not scrambling at launch.', items: ['Packaging design', 'Product photography', 'Launch assets'] }
];

const Services = () => (
  <section id="services">
    <Container>
      <div className="services__head">
        <span className="eyebrow">Capabilities</span>
        <h2>Six disciplines, one team, one contract.</h2>
        <p className="lead" style={{ marginTop: 16 }}>Pick the services you need. We don't nickel-and-dime between phases. One engagement covers you from napkin sketch to the container on the water.</p>
      </div>
      <div className="services__grid">
        {SERVICES.map((s, i) => (
          <div key={i} className="scard">
            <div className="scard__icon">{s.i}</div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
            <ul>{s.items.map((x, j) => <li key={j}>{x}</li>)}</ul>
          </div>
        ))}
      </div>
    </Container>
  </section>
);

window.Services = Services;
