// VisiO Tech — Co umíme: 4 service cards
const SERVICES = [
  {
    id: 'docs',
    Icon: FileText,
    title: 'Vytěžování faktur a dokumentů',
    description: 'OCR + LLM přepíše faktury, smlouvy a dodací listy přímo do vašeho ERP. Doplníme i odkazy na legislativu, abyste věděli, podle čeho účtujeme.',
    example: 'Účetní zpracuje fakturu za 3 sekundy s 99 % přesností. Živá reference: vytezovanifaktur.cz',
    prefillTask: 'Přepisuji data z faktur a dokumentů do účetního systému.',
  },
  {
    id: 'eshop',
    Icon: Mail,
    title: 'Triáž e-mailů + koncepty odpovědí',
    description: 'Roztřídíme příchozí maily podle vašich priorit (HIGH / NORMAL / LOW). Pro důležité vám připravíme koncept odpovědi — vy jen zkontrolujete a odešlete.',
    example: '„Píše vám paní, že jste zapomněl zaplatit daň." → priorita HIGH + koncept: „omluva, prověřím a obratem zaplatím."',
    prefillTask: 'Tonu v e-mailech a chtěl bych je třídit podle priority a předpřipravit odpovědi.',
  },
  {
    id: 'material',
    Icon: Grid,
    title: 'Optimalizace řezů materiálu',
    description: 'Dáte nám seznam rozměrů, které chcete nařezat. Spočítáme optimální plán řezů s nejmenšími zbytky — počítáme s tloušťkou pily i odchylkami, ne jen teoreticky.',
    example: 'Truhlář, krejčí, kovo: zbytky materiálu jsou přímá ztráta marže — typicky se dají snížit o desítky procent.',
    prefillTask: 'Mám rozměry, které potřebuji nařezat z desek tak, aby zbylo co nejméně odpadu.',
  },
  {
    id: 'vision',
    Icon: Eye,
    title: 'Kontrola kvality kamerou (CNN)',
    description: 'CNN modely na vašich datech detekují vady, počítají kusy, čtou štítky a sériová čísla. Reálně lepší než lidské oko v opakované práci, bez únavy.',
    example: 'Výroba, logistika, balírny — kamera kontroluje 100 % výstupu místo vzorku.',
    prefillTask: 'Ručně kontroluji kvalitu výrobků na fotkách nebo kamerou.',
  },
];

function Services({ onCardClick }) {
  return (
    <section className="section section--lit fade-in-on-scroll" id="services">
      <div className="container">
        <div className="section-header">
          <span className="section-eyebrow">Co umíme</span>
          <h2>Konkrétní řešení pro konkrétní problémy</h2>
          <p>Bez generických AI frází. Každá služba má jasný výstup a měřitelný přínos.</p>
        </div>
        <div className="services-grid">
          {SERVICES.map((s) => (
            <button
              type="button"
              key={s.id}
              className="service-card"
              onClick={() => onCardClick && onCardClick(s.prefillTask)}
            >
              <div className="service-icon"><s.Icon size={24} /></div>
              <h3>{s.title}</h3>
              <p className="service-description">{s.description}</p>
              <p className="service-example">{s.example}</p>
              <span className="service-cta">Spočítat úsporu pro tento případ →</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, SERVICES });