// VisiO Tech — Sections: HowItWorks, FAQ

function HowItWorks() {
  const steps = [
    { Icon: MessageCircle, title: 'Konzultace zdarma', desc: 'Krátký hovor, popíšete úkol, zjistíme jestli to dává smysl. Bez závazků.', duration: '30 minut' },
    { Icon: BarChart,      title: 'Návrh + pevná cena', desc: 'Pošleme konkrétní řešení s rozsahem a cenou. Žádné odhady, žádné překvapení.', duration: 'Do 5 dnů' },
    { Icon: Settings,      title: 'Vývoj a testování', desc: 'Stavíme řešení, testujeme na vašich datech, průběžně vás informujeme.', duration: '2–6 týdnů' },
    { Icon: Rocket,        title: 'Nasazení a zaškolení', desc: 'Spustíme v produkci, zaškolíme váš tým, poskytneme support.', duration: '1 týden' },
  ];
  return (
    <section className="section" id="how" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-header">
          <span className="section-eyebrow">Proces</span>
          <h2>Jak to funguje</h2>
          <p>Jednoduchý a transparentní postup od konzultace po nasazení.</p>
        </div>
        <div className="timeline">
          {steps.map(({ Icon, title, desc, duration }, i) => (
            <div className="timeline-step" key={title}>
              <div className="timeline-num">{String(i + 1).padStart(2, '0')}</div>
              <div className="timeline-content">
                <h3><Icon size={18} />{title}</h3>
                <p>{desc}</p>
                <span className="timeline-duration">⏱ {duration}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'Co je AI automatizace a jak funguje?',
      a: 'AI automatizace nahradí opakované rutinní úkoly software, který se učí z příkladů. Používáme tři hlavní technologie: CNN (rozpoznávání obrazu — vady, počítání kusů, čtení štítků), LLM (zpracování textu — e-maily, dokumenty, chatboti), a optimalizační algoritmy (řezy materiálu, plánování). Žádné kouzlo, jen statistika v rychlém kabátku.' },
    { q: 'Kolik to opravdu stojí?',
      a: 'Jednoduchá řešení (chatbot, OCR jednoho typu dokumentu) typicky pod 100 000 Kč, komplexnější projekty (vícestupňová automatizace s integrací do ERP) 200 000–500 000 Kč jednorázový setup + měsíční paušál podle náročnosti. Přesnou cenu vám řekneme po konzultaci, ale orientační odhad za 30 sekund dá AI kalkulačka výše — analyzuje to náš lokální AI model.' },
    { q: 'Jak dlouho do spuštění?',
      a: 'Od první konzultace po nasazení typicky 4–8 týdnů. Konzultace 30 min, návrh do 5 dnů, vývoj 2–6 týdnů (dle složitosti), nasazení 1 týden. Viz proces výše.' },
    { q: 'Jaká je návratnost investice?',
      a: 'Typicky 4–8 měsíců. Záleží na frekvenci úkolu a sazbě zaměstnance. Kalkulačka v této sekci spočítá konkrétní návratnost pro váš případ — bez vymyšlených procent.' },
    { q: 'Co když to nezafunguje?',
      a: 'Před zahájením podepíšeme pevnou cenu s konkrétními akceptačními kritérii. Když výsledek nesplní dohodnuté parametry, doděláme bez doplatku. Pokud projekt opustíte vy, fakturujeme jen odpracované hodiny do té chvíle.' },
    { q: 'Kam ukládáte naše data?',
      a: 'Záleží na vás. Nabízíme dva modely: (1) všechno běží na našem serveru v ČR, data k vám nikam neodcházejí, (2) instalace přímo k vám (on-prem) — data nikdy neopustí vaši infrastrukturu. Vždy splňujeme GDPR.' },
    { q: 'Jaké procesy lze automatizovat?',
      a: 'Nejlepší kandidáti: opakované úkoly s jasným vstupem a výstupem, kde dnes ztrácíte čas přepisováním, kontrolou, odpovídáním na podobné dotazy, nebo počítáním. Nevhodné: úkoly vyžadující kreativní rozhodování nebo emocionální inteligenci.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-header">
          <span className="section-eyebrow">Časté dotazy</span>
          <h2>Co se nás klienti ptají</h2>
          <p>Stručné odpovědi na otázky, které dostáváme nejčastěji.</p>
        </div>
        <div className="faq-list">
          {items.map((it, i) => {
            const answerId = `faq-answer-${i}`;
            const isOpen = open === i;
            return (
              <div className={`faq-item ${isOpen ? 'open' : ''}`} key={it.q}>
                <button
                  type="button"
                  className="faq-question"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  aria-controls={answerId}
                >
                  {it.q}
                  <Plus size={20} aria-hidden="true" />
                </button>
                {isOpen && <div id={answerId} className="faq-answer">{it.a}</div>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ContactBand() {
  return (
    <section className="section" id="contact" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div style={{
          background: 'linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-900) 60%, var(--bg-2) 100%)',
          border: '1px solid var(--color-primary-600)',
          borderRadius: 16, padding: 48, textAlign: 'center',
          maxWidth: 800, margin: '0 auto', position: 'relative', overflow: 'hidden',
          boxShadow: '0 0 60px -10px rgba(99,102,241,0.4)',
        }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0)', backgroundSize: '24px 24px', opacity: 0.5, pointerEvents: 'none' }}></div>
          <div style={{ position: 'relative' }}>
            <span className="section-eyebrow" style={{ color: 'var(--color-signal-400)' }}>• Začněte ještě dnes</span>
            <h2 style={{ marginBottom: 16 }}>Mluvte s námi, ne s formulářem.</h2>
            <p style={{ fontSize: 18, color: 'var(--color-primary-200)', maxWidth: 580, margin: '0 auto 28px' }}>
              30 minut zdarma. Telefon nebo Teams. Řekneme rovnou, jestli to u vás dává smysl — i kdyby to znamenalo, že vás odmítneme.
            </p>
            <div className="hero-cta" style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
              <a href="#calculator" className="btn btn-primary btn-large">
                Otevřít kalkulátor <ArrowRight size={18} />
              </a>
              <a href="tel:+420725634153" className="btn btn-secondary btn-large" style={{ color: 'var(--fg-1)', borderColor: 'rgba(255,255,255,0.2)' }}>
                <Phone size={16} /> +420 725 634 153
              </a>
              <a href="mailto:info@visiotech.cz" className="btn btn-secondary btn-large" style={{ color: 'var(--fg-1)', borderColor: 'rgba(255,255,255,0.2)' }}>
                <Mail size={16} /> info@visiotech.cz
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, FAQ, ContactBand });