AI Assistant online

Napíšte, čo potrebujete

Webstránka, aplikácia, AI agent, automatizácia alebo integrácia? Stručne opíšte svoju potrebu a my sa ňou začneme zaoberať.

{typed}

{!sent ? ( <>

setText(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submit(); }}
              rows={2}
            />
            <div className="ai-input-foot">
              <span className="mono ai-hint">⌘ + ↵ odoslať</span>
              <button className="ai-send" onClick={submit} disabled={!text.trim()}>
                Začať zadanie <span className="arr">→</span>
              </button>
            </div>
          </div>

<div className="ai-chips">
            {chips.map((c, i) => (
              <button key={i} className="ai-chip" onClick={() => setText(c + ' — ')}>
                <span className="ai-chip-plus">+</span>{c}
              </button>
            ))}
          </div>
        </>
      ) : (
        <div className="ai-sent">
          <div className="ai-sent-ico">✓</div>
          <div className="ai-sent-title">Ďakujeme — zadanie máme.</div>
          <div className="ai-sent-msg">Pozrieme sa naň a ozveme sa s návrhom ďalšieho postupu — zvyčajne do 24 hodín pracovných dní.</div>
        </div>
      )}

<div className="ai-intake-foot mono">
        <span>// Ozveme sa s návrhom ďalšieho postupu.</span>
      </div>
    </div>
  );
};

// ====== Hero ======
const Hero = ({ variant }) => {
  const v = HERO[variant];
  const renderH1 = () => {
    return v.h1.map((line, i) => {
      if (line.includes(v.hl)) {
        const parts = line.split(v.hl);
        return (
          <span key={i} style={{ display: 'block' }}>
            {parts[0]}<span className="hl">{v.hl}</span>{parts[1]}
          </span>
        );
      }
      return <span key={i} style={{ display: 'block' }}>{line}</span>;
    });
  };
  return (
    <section className="hero" id="top">
      <div className="hero-canvas-wrap"><HeroCanvas /></div>
      <div className="container hero-content">
        <div className="hero-grid">
          <div className="hero-left">
            <div className="hero-tag reveal">
              <span className="pill">85runtimewebsk</span>
              <span>Štúdio pre AI, softvér a automatizáciu — Bratislava / remote</span>
            </div>
            <h1 className="display reveal delay-1">{renderH1()}</h1>
            <p className="lead reveal delay-2">{v.sub}</p>
            <div className="hero-cta reveal delay-3">
              <a href="#kontakt" className="btn btn-primary">Dohodnúť konzultáciu <span className="arr">→</span></a>
              <a href="#sluzby" className="btn btn-ghost">Pozrieť služby</a>
            </div>
          </div>
          <div className="hero-right">
            <AiIntake />
          </div>
        </div>
        <div className="hero-stats reveal delay-4">
          <div className="hero-stat">
            <div className="num">3–7<span className="u"> dní</span></div>
            <div className="lbl">// web od briefu po launch</div>
          </div>
          <div className="hero-stat">
            <div className="num">2–6<span className="u"> týždňov</span></div>
            <div className="lbl">// AI agenti & automatizácie</div>
          </div>
          <div className="hero-stat">
            <div className="num">~70<span className="u">%</span></div>
            <div className="lbl">// nižšie náklady vs. agentúra</div>
          </div>
          <div className="hero-stat">
            <div className="num">2 / 2</div>
            <div className="lbl">// vlastné showcase systémy</div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ====== Marquee strip ======
const Marquee = () => {
  const items = [
    'Web v priebehu dní',
    'AI agenti v priebehu týždňov',
    'Bez ústupkov v kvalite',
    'Generácia, ktorá zažila IT',
    'Praktické AI riešenia',
    'Web v priebehu dní',
    'AI agenti v priebehu týždňov',
    'Bez ústupkov v kvalite',
    'Generácia, ktorá zažila IT',
    'Praktické AI riešenia',
  ];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {items.concat(items).map((t, i) => (
          <span key={i} className="marquee-item">{t}<span className="dot"></span></span>
        ))}
      </div>
    </div>
  );
};

// ====== Section: Kto sme ======
const Who = () => (
  <section className="section" id="o-nas">
    <div className="container">
      <div className="split">
        <div className="split-left reveal">
          <div className="eyebrow">01 — Kto sme</div>
          <h2 className="section-title" style={{ marginTop: 24 }}>Štúdio pre dobu AI. Postavené generáciou, ktorá zažila IT pred ňou.</h2>
        </div>
        <div className="split-right reveal delay-1">
          <p>85runtime stavia digitálne riešenia v priesečníku webu, softvéru a umelej inteligencie. Pomáhame firmám zefektívniť to, čo už robia, a navrhnúť to, čo by ešte mohli robiť — keď k tomu majú správny nástroj.</p>
          <p>AI pre nás nie je nálepka. Je to ďalší krok v profesii, ktorú robíme dlhé roky. Vieme, čo IT umelo komplikuje a čo AI dokáže reálne zjednodušiť. Keď AI dáva zmysel, nasadíme ju, prepojíme s vašimi systémami a nastavíme tak, aby fungovala v každodennej prevádzke. Keď nedáva zmysel, povieme to.</p>
          <p>Spájame analytické myslenie, návrh produktu, vývoj a implementáciu. Výsledkom je riešenie, ktoré nielen vyzerá dobre na demo, ale obstojí aj v reálnom používaní.</p>
        </div>
      </div>
    </div>
  </section>
);

// ====== Section: Príbeh názvu ======
const Story = () => (
  <section className="section">
    <div className="container">
      <div className="section-header">
        <div className="reveal">
          <div className="eyebrow">02 — Príbeh názvu</div>
          <h2 className="section-title" style={{ marginTop: 24 }}>Prečo 85runtime</h2>
        </div>
        <p className="reveal delay-1">Sme generácia, ktorá zažila príchod internetu, prerod softvéru aj nástup AI. Tí z nás, ktorí sa v týchto vlnách udržali ako experti, dnes prinášajú niečo, čo dvadsiatnik s ChatGPT-om nemá: roky reálneho IT remesla.</p>
      </div>
      <div className="story">
        <div className="story-card reveal">
          <span className="big-num">85</span>
          <div className="tagline">// Rok narodenia zakladateľa</div>
          <p>A zároveň generačná pečiatka. Sme generácia, ktorá zažila príchod internetu, prerod softvéru aj nástup AI. Roky reálneho IT remesla, na ktorých teraz staviame s AI nástrojmi.</p>
        </div>
        <div className="story-card right reveal delay-1">
          <span className="big-num">/runtime</span>
          <div className="tagline">// Engine, ktorý drží všetko v chode</div>
          <p>Runtime je v programovaní prostredie, v ktorom aplikácia beží. My sme runtime tejto generácie: platforma, ktorá spája IT skúsenosti s tempom AI.</p>
        </div>
      </div>
    </div>
  </section>
);

// ====== Section: Speed (sticky) ======
const Speed = () => {
  const [active, setActive] = useState(0);
  const itemRefs = useRef([]);
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const idx = itemRefs.current.indexOf(e.target);
          if (idx >= 0) setActive(idx);
        }
      });
    }, { rootMargin: '-40% 0px -40% 0px', threshold: 0 });
    itemRefs.current.forEach(el => el && io.observe(el));
    return () => io.disconnect();
  }, []);
  const items = [
    { time: 'V priebehu dní', title: 'Webstránky', body: 'Od jednoduchých prezentačných webov po komplexnejšie firemné a produktové stránky.' },
    { time: 'V priebehu týždňov', title: 'AI agenti, automatizácie a integrácie', body: 'Vrátane napojenia na vaše existujúce systémy a dáta.' },
    { time: 'Podľa komplexnosti', title: 'Aplikácie a interné systémy', body: 'Stále výrazne rýchlejšie a lacnejšie ako klasický development.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-soft)' }}>
      <div className="container speed-wrap">
        <div className="speed-grid">
          <div className="speed-sticky reveal">
            <div className="eyebrow">03 — Rýchlejšie. Lacnejšie. Použiteľnejšie.</div>
            <h2 className="section-title" style={{ marginTop: 24, marginBottom: 24 }}>Čo predtým trvalo mesiace, dnes dodávame v dňoch a týždňoch.</h2>
            <p style={{ fontSize: 17, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: '40ch', marginBottom: 16 }}>Klasický web alebo aplikácia trvali pred AI érou týždne až mesiace. Vďaka kombinácii AI nástrojov, automatizovaných workflowov a rokmi overených postupov vieme dnes dodať to isté — často v lepšej kvalite — v rádoch dní a týždňov.</p>
            <p style={{ fontSize: 14, color: 'var(--muted)', maxWidth: '40ch', fontStyle: 'italic', borderLeft: '2px solid var(--accent)', paddingLeft: 14 }}>Nie sme rýchlejší preto, že robíme menej. Sme rýchlejší preto, že máme za sebou skúsenosti aj nástroje, ktoré ostatní ešte len objavujú.</p>
          </div>
          <div className="speed-items">
            {items.map((it, i) => (
              <div
                key={i}
                ref={el => itemRefs.current[i] = el}
                className={`speed-item ${active === i ? 'active' : ''} reveal delay-${i + 1}`}
              >
                <div className="speed-item-head">
                  <h3>{it.title}</h3>
                  <span className="speed-item-time">{it.time}</span>
                </div>
                <p>{it.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ====== Services ======
const Services = () => {
  const items = [
    { num: '01', title: 'Webstránky', body: 'Rýchle, prehľadné a dobre postavené weby. Zameriavame sa na čistú architektúru, kvalitný obsah, jasné CTA a technické spracovanie.', time: 'v priebehu dní' },
    { num: '02', title: 'Aplikácie a softvér', body: 'Webové aplikácie, klientske portály, interné nástroje a digitálne produkty na mieru. Od produktového zadania po nasadenú verziu.', time: 'podľa IT prostredia' },
    { num: '03', title: 'AI školenia', body: 'Workshopy a tréningy, ktoré ľudí naučia používať AI prakticky a bezpečne. Bez teoretickej omáčky — pracujeme s vašimi reálnymi prípadmi.', time: 'fixný formát' },
    { num: '04', title: 'AI agenti', body: 'Agentické systémy, ktoré nielen odpovedajú, ale aj konajú. Pracujú s obsahom, výskumom, dokumentmi alebo špecifickou agendou tímu.', time: 'v priebehu týždňov' },
    { num: '05', title: 'Automatizácia procesov', body: 'Zmapujeme rutinné činnosti, ktoré dnes spomaľujú tím, a navrhneme automatizácie, ktoré ich vyriešia na pozadí.', time: 'v priebehu týždňov' },
    { num: '06', title: 'Integrácie a connectory', body: 'Prepájame AI a automatizácie s nástrojmi, dátami a systémami, ktoré už používate. Aby riešenie nebolo izolovaný experiment.', time: 'v priebehu týždňov' },
    { num: '07', title: 'Analýza a návrh riešení', body: 'Pomáhame zorientovať sa v tom, kde má AI zmysel a kde nie. Navrhujeme správny rozsah, postup a architektúru.', time: 'workshop / audit' },
    { num: '08', title: 'AI infraštruktúra', body: 'Architektúra, hosting, prístupy, monitoring a workflow okolo AI riešení. Postavíme to tak, aby bolo riešenie spravovateľné.', time: 'priebežne' },
    { num: '09', title: 'Stratégia a roadmap', body: 'Najprv pochopiť, potom stavať. Mapujeme procesy, identifikujeme slabé miesta a navrhujeme, kde má AI najväčší zmysel.', time: 'fáza 0' },
  ];
  return (
    <section className="section" id="sluzby">
      <div className="container">
        <div className="section-header">
          <div className="reveal">
            <div className="eyebrow">04 — Čo robíme</div>
            <h2 className="section-title" style={{ marginTop: 24 }}>Od jednoduchého webu po agentické systémy.</h2>
          </div>
          <p className="reveal delay-1">Vstupujeme do projektu od strategickej úrovne — analýza, scope, návrh — až po vývoj, nasadenie a ďalší rozvoj. Spájame klasický web a softvérový development s modernými AI nástrojmi a automatizáciami.</p>
        </div>
        <div className="services-grid">
          {items.map((s, i) => (
            <div key={i} className="service-card reveal" style={{ transitionDelay: `${(i % 3) * 0.06}s` }}>
              <div className="num">{s.num} / 09</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="time-tag">{s.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Why ======
const Why = () => {
  const items = [
    { title: 'Generácia s reálnymi IT skúsenosťami.', body: 'Nie sme tím, ktorý objavil technológie cez ChatGPT. Máme za sebou roky vývoja, integrácií a digitálnych projektov. AI je pre nás len ďalší — výrazne silnejší — nástroj v rukách ľudí, ktorí vedia, čo robia.' },
    { title: 'Rýchlejší a lacnejší — vďaka skúsenostiam, nie napriek kvalite.', body: 'Vieme, čo robí AI dobre, čo zatiaľ nie a kde sa oplatí škálovať klasický vývoj. Vďaka tomu dodávame výsledky v zlomku času oproti tradičným agentúram.' },
    { title: 'Spájame stratégiu, dizajn a kód.', body: 'Nestaviame riešenia v silách. Premýšľame nad tým, ako budú vyzerať, ako sa budú používať a ako sa zaradia do firmy.' },
    { title: 'Vieme, čo má a čo nemá zmysel automatizovať.', body: 'AI je užitočná, ale nie všade. Vyberáme tie miesta, kde má merateľný dopad — a obchádzame tie, kde by len pridala náklady.' },
    { title: 'Prepájame, neizolujeme.', body: 'Web, aplikácia, AI workflow, dáta a externé nástroje sú súčasti jedného systému. Tak k nim aj pristupujeme.' },
    { title: 'Stavíme aj vlastné produkty.', body: 'Naše schopnosti dokazujeme aj na vlastných showcase projektoch — agentické publikačné systémy, AI športový tréner a ďalšie.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <div className="section-header">
          <div className="reveal">
            <div className="eyebrow">05 — Prečo s nami</div>
            <h2 className="section-title" style={{ marginTop: 24 }}>Šesť dôvodov, prečo s nami firmy spolupracujú.</h2>
          </div>
        </div>
        <div className="why-grid">
          {items.map((it, i) => (
            <div key={i} className="why-item reveal">
              <span className="num">/ {String(i + 1).padStart(2, '0')}</span>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Showcases ======
const Showcases = () => (
  <section className="section" id="showcases">
    <div className="container">
      <div className="section-header">
        <div className="reveal">
          <div className="eyebrow">06 — Čo už staviame</div>
          <h2 className="section-title" style={{ marginTop: 24 }}>Showcases</h2>
        </div>
        <p className="reveal delay-1">Showcases sú konkrétne aplikácie nášho prístupu — nie obrázky a wireframy, ale fungujúce architektúry, ktoré vieme adaptovať na vaše prostredie, produkt alebo službu.</p>
      </div>

<div className="showcase">
        <div className="showcase-text reveal">
          <div className="showcase-num">SHOWCASE / 01</div>
          <h3 className="showcase-title">AIwrites.news</h3>
          <div className="showcase-sub">Agentický publikačný systém pre obsahové projekty.</div>
          <p>AIwrites.news je systém viacerých prepojených agentov — od vyhľadávania tém, cez prácu so zdrojmi, prípravu obsahu, kontrolu výstupov, až po publikačný workflow.</p>
          <p>Architektúra sa dá adaptovať na firemný blog engine, odborný portál, obsahový newsroom alebo interný knowledge workflow.</p>
          <ul className="showcase-list">
            <li>firemné blogy a obsahové centrá</li>
            <li>odborné portály a publikačné platformy</li>
            <li>interné AI-asistované content operations</li>
            <li>obsah pre konkrétne produkty alebo služby</li>
          </ul>
          <a href="https://aiwrites.news" target="_blank" rel="noopener" className="btn btn-primary" style={{ marginTop: 24 }}>
            Pozrieť showcase <span className="arr">→</span>
          </a>
        </div>
        <div className="showcase-visual reveal delay-1">
          <a href="https://aiwrites.news" target="_blank" rel="noopener" style={{ display: 'block' }}>
            <BrowserChrome url="aiwrites.news"><AiwritesPreview /></BrowserChrome>
          </a>
        </div>
      </div>

<div className="showcase flip">
        <div className="showcase-visual reveal">
          <a href="https://www.monasportcoach.com" target="_blank" rel="noopener" style={{ display: 'block' }}>
            <BrowserChrome url="monasportcoach.com"><MonaPreview /></BrowserChrome>
          </a>
        </div>
        <div className="showcase-text reveal delay-1">
          <div className="showcase-num">SHOWCASE / 02</div>
          <h3 className="showcase-title">Mona Sport Coach</h3>
          <div className="showcase-sub">Osobný AI tréner, ktorý rozumie vašim dátam.</div>
          <p>Mona Sport Coach prepája tréningové, regeneračné a zdravotné dáta z viacerých zdrojov do jedného coaching systému. Namiesto izolovaných čísel z aplikácií dostávate kontextovú spätnú väzbu.</p>
          <p>Showcase ukazuje, ako vyzerá produkt, kde je AI postavená nad osobnými dátami, dlhodobým kontextom a personalizovanou logikou.</p>
          <ul className="showcase-list">
            <li>fitness a wellness produkty</li>
            <li>osobné AI asistenty</li>
            <li>data-driven coaching riešenia</li>
            <li>health-tech a personalizované digitálne nástroje</li>
          </ul>
          <a href="https://www.monasportcoach.com" target="_blank" rel="noopener" className="btn btn-primary" style={{ marginTop: 24 }}>
            Pozrieť showcase <span className="arr">→</span>
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ====== Process ======
const Process = () => {
  const steps = [
    { n: '01', title: 'Pochopenie cieľa', body: 'Začíname tam, kde končí marketing. Zaujíma nás kontext, proces, problém a očakávaný výsledok — nie technológia ako prvý krok.' },
    { n: '02', title: 'Analýza a návrh smeru', body: 'Definujeme rozsah, architektúru, riziká a postup realizácie. Hľadáme rovnováhu medzi ambíciou, časom a rozpočtom.' },
    { n: '03', title: 'Návrh a realizácia', body: 'Pripravíme štruktúru, obsah, UX, dizajn aj technickú implementáciu. Riešenie staviame iteratívne a v dohodnutých míľnikoch.' },
    { n: '04', title: 'Testovanie a doladenie', body: 'Overujeme funkčnosť, použiteľnosť a celkový dojem. Doladíme detaily a pripravíme systém na odovzdanie a nasadenie.' },
    { n: '05', title: 'Rozvoj a ďalšie kroky', body: 'Nasadenie nie je koniec. Po spustení vieme pokračovať v optimalizácii, nových automatizáciách a rozširovaní funkcionality.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-header">
          <div className="reveal">
            <div className="eyebrow">07 — Ako pracujeme</div>
            <h2 className="section-title" style={{ marginTop: 24 }}>Päť krokov od briefu k prevádzke.</h2>
          </div>
        </div>
        <div className="process">
          {steps.map((s, i) => (
            <div key={i} className="process-step reveal">
              <div className="step-n">/ {s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Audience ======
const Audience = () => {
  const items = [
    'postaviť nový web alebo digitálny produkt — bez čakania mesiace na výsledok',
    'zefektívniť procesy pomocou automatizácie',
    'zorientovať sa v tom, kde má AI prínos',
    'vytvoriť interný nástroj alebo pracovný workflow',
    'prepojiť AI a automatizácie s existujúcimi systémami',
    'rozvíjať obsahový alebo produktový engine',
    'zavádzať AI prakticky, nie len ako PR cvičenie',
    'pochopiť, čo má v ich prípade reálny zmysel',
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <div className="section-header">
          <div className="reveal">
            <div className="eyebrow">08 — Pre koho</div>
            <h2 className="section-title" style={{ marginTop: 24 }}>Pre firmy, ktoré chcú technológie používať s rozmyslom.</h2>
          </div>
          <p className="reveal delay-1">Spolupráca s 85runtime dáva zmysel firmám, tímom a zakladateľom, ktorí chcú:</p>
        </div>
        <div className="audience-grid">
          {items.map((it, i) => (
            <div key={i} className="audience-item reveal">
              <span className="a-num">/ {String(i + 1).padStart(2, '0')}</span>
              <span>{it}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Blog ======
const Blog = () => {
  const posts = [
    { cat: 'Praktické', title: 'Ako firmy zavádzajú AI do reálnej prevádzky', body: 'Tri vzorce, ktoré v slovenských a českých firmách fungujú — a tri, ktoré takmer vždy zlyhajú.', meta: 'APR 22 · 8 min' },
    { cat: 'Stratégia', title: 'Kedy má zmysel automatizovať a kedy nie', body: 'Rozhodovací rámec na 15 minút: ako identifikovať procesy, kde má automatizácia merateľný dopad.', meta: 'APR 18 · 6 min' },
    { cat: 'Koncepty', title: 'Rozdiel medzi AI asistentom, workflowom a agentom', body: 'Tri pojmy, ktoré sa v marketingu zlievajú — ale technicky znamenajú úplne odlišné riešenia.', meta: 'APR 14 · 7 min' },
    { cat: 'Architektúra', title: 'Ako navrhnúť obsahový engine pre produkt alebo službu', body: 'Skúsenosti zo stavby AIwrites.news — ako vyzerá modulárny content workflow s AI v jadre.', meta: 'APR 10 · 11 min' },
    { cat: 'Use case', title: 'Praktické use cases pre AI v marketingu', body: 'Šesť úloh, kde AI nahrádza prácu na hodiny denne — bez toho, aby produkovala generický obsah.', meta: 'APR 06 · 9 min' },
    { cat: 'Anti-patterns', title: 'Najčastejšie chyby pri zavádzaní AI vo firmách', body: 'Spätná väzba z prvých dvoch rokov nasadzovaní — kde firmy strácajú čas a peniaze.', meta: 'APR 02 · 7 min' },
  ];
  return (
    <section className="section" id="blog">
      <div className="container">
        <div className="section-header">
          <div className="reveal">
            <div className="eyebrow">09 — Blog & poznatky z praxe</div>
            <h2 className="section-title" style={{ marginTop: 24 }}>Blog</h2>
          </div>
          <p className="reveal delay-1">Píšeme o tom, ako sa AI, softvér a automatizácia premietajú do firemnej praxe. Žiadne genericky prerozprávané AI hype články — zameriavame sa na to, čo má hodnotu pre ľudí, ktorí chcú technológie používať s rozmyslom.</p>
        </div>
        <div className="blog-grid">
          {posts.map((p, i) => (
            <a href="#blog" key={i} className="blog-card reveal" style={{ transitionDelay: `${(i % 3) * 0.06}s` }}>
              <span className="cat">{p.cat}</span>
              <h4>{p.title}</h4>
              <p>{p.body}</p>
              <span className="meta">{p.meta}</span>
            </a>
          ))}
        </div>
        <div style={{ paddingTop: 48, borderTop: '1px solid var(--line)', marginTop: 64, fontSize: 14, color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <span>// Web 85runtime beží na vlastnom obsahovom engine s AI workflowmi.</span>
          <span>Architektúra je rovnaká, akú vieme navrhnúť pre váš produkt.</span>
        </div>
      </div>
    </section>
  );
};

// ====== FAQ ======
const FAQ = () => {
  const [open, setOpen] = useState(0);
  const items = [
    { q: 'Ako rýchlo viete dodať web alebo aplikáciu?', a: 'Webstránky typicky v priebehu dní, AI agentov a automatizácie v priebehu týždňov. Aplikácie a komplexnejšie systémy závisia od zložitosti vášho IT prostredia, ale aj tam dokážeme byť výrazne rýchlejší než klasický agentúrny vývoj. Pri prvej konzultácii vieme dať konkrétny odhad pre váš projekt.' },
    { q: 'Ako je možné, že ste rýchlejší a lacnejší ako iné agentúry?', a: 'Nerobíme menej, robíme inak. Spájame roky IT skúseností s AI nástrojmi, ktoré výrazne urýchľujú časť vývoja, návrhu, obsahu aj testovania. Vieme, čo sa oplatí automatizovať, kde má AI naozaj zmysel a kde naopak treba klasické remeslo.' },
    { q: 'Robíte len AI riešenia?', a: 'Nie. AI je jedna z našich oblastí, ale rovnako tvoríme weby, aplikácie a interné systémy, kde AI nemusí byť hlavnou súčasťou. Často je to klasický web alebo workflow, kde je AI len malý, ale dobre nasadený doplnok.' },
    { q: 'Viete pomôcť aj s návrhom, ak ešte nemáme presné zadanie?', a: 'Áno. Mnohé projekty začíname workshopom, analýzou alebo definovaním rozsahu. Pomôžeme vám pomenovať, čo je vhodné riešenie, ešte predtým, než sa rozhoduje o implementácii.' },
    { q: 'Je možné postaviť len menší pilot alebo MVP?', a: 'Áno, často to dáva najväčší zmysel. Začať menším funkčným riešením, overiť ho v reálnom použití a potom sa rozhodnúť o ďalších krokoch je zvyčajne lacnejšie aj efektívnejšie ako veľký jednorazový projekt.' },
    { q: 'Viete AI riešenia napojiť na existujúce nástroje?', a: 'Vo väčšine prípadov áno — záleží na tom, aké systémy firma používa, aké dáta a workflowy treba prepojiť a aké rozhrania (API, exporty, webhooky) sú dostupné. Túto otázku zvyčajne odpovedáme po krátkom technickom audite.' },
    { q: 'Robíte aj AI školenia?', a: 'Áno. Workshopy a tréningy pripravujeme pre firmy, tímy aj menšie skupiny — vo formáte od jednodňového úvodu po dlhšie programy s prácou na konkrétnych use case-och.' },
    { q: 'Dá sa váš agentický alebo obsahový systém prispôsobiť aj pre iný projekt?', a: 'Áno. Architektúra showcase riešení je navrhnutá tak, aby sa dala adaptovať na iné produkty, služby alebo firemné workflowy. Konkrétny rozsah úprav závisí od cieľa.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-header">
          <div className="reveal">
            <div className="eyebrow">10 — FAQ</div>
            <h2 className="section-title" style={{ marginTop: 24 }}>Najčastejšie otázky</h2>
          </div>
          <p className="reveal delay-1">Ak vaša otázka nižšie nie je, napíšte nám priamo. Odpovedáme v ten istý alebo nasledujúci pracovný deň.</p>
        </div>
        <div className="faq reveal">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="ico">+</span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Contact CTA ======
const Contact = () => (
  <section className="section" id="kontakt">
    <div className="container">
      <div className="cta-block reveal">
        <div className="cta-bg-num">85</div>
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 24 }}>11 — Začnime</div>
        <h2>Máte projekt, proces alebo nápad, ktorý chcete posunúť ďalej?</h2>
        <p>Či už potrebujete nový web v priebehu dní, AI agenta v priebehu týždňov alebo automatizáciu konkrétneho procesu — pozrieme sa na to s vami a pomenujeme, čo má v praxi zmysel.</p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href="mailto:info@85runtime.sk" className="btn btn-primary">Dohodnúť úvodný rozhovor <span className="arr">→</span></a>
          <a href="mailto:info@85runtime.sk" className="btn btn-ghost">Napísať nám</a>
        </div>
        <div className="cta-mail">
          <span><strong>Email</strong> · info@85runtime.sk</span>
          <span><strong>Lokalita</strong> · Bratislava / remote</span>
          <span><strong>Odpoveď</strong> · do 24h pracovných dní</span>
        </div>
      </div>
    </div>
  </section>
);

// ====== Footer ======
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo size="lg" />
          <p style={{ marginTop: 16, fontSize: 14, color: 'var(--muted)', maxWidth: 36 + 'ch' }}>
            Štúdio pre AI, softvér a automatizáciu. Web v priebehu dní. AI agenti v priebehu týždňov.
          </p>
        </div>
        <div className="footer-col">
          <h5>Štúdio</h5>
          <a href="#o-nas">O nás</a>
          <a href="#sluzby">Služby</a>
          <a href="#showcases">Showcases</a>
          <a href="#blog">Blog</a>
        </div>
        <div className="footer-col">
          <h5>Služby</h5>
          <a href="#sluzby">Webstránky</a>
          <a href="#sluzby">AI agenti</a>
          <a href="#sluzby">Automatizácia</a>
          <a href="#sluzby">Integrácie</a>
          <a href="#sluzby">AI školenia</a>
        </div>
        <div className="footer-col">
          <h5>Kontakt</h5>
          <a href="mailto:info@85runtime.sk">info@85runtime.sk</a>
          <a href="#kontakt">Konzultácia</a>
          <a href="#">LinkedIn</a>
          <a href="#">GitHub</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 85runtime · runtime/85 :: 85runtimewebsk</span>
        <span>Web v priebehu dní. AI agenti v priebehu týždňov.</span>
      </div>
    </div>
  </footer>
);

// ====== Cursor follower ======
const CursorBlob = () => {
  const ref = useRef(null);
  useEffect(() => {
    if (window.matchMedia('(hover: none)').matches) return;
    const el = ref.current;
    if (!el) return;
    let x = window.innerWidth / 2, y = window.innerHeight / 2;
    let tx = x, ty = y;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    window.addEventListener('mousemove', onMove);
    let raf;
    const tick = () => {
      x += (tx - x) * 0.18;
      y += (ty - y) * 0.18;
      el.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    tick();
    return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
  }, []);
  return <div ref={ref} className="cursor-blob"></div>;
};

// ====== App ======
const TWEAK_DEFAULTS = {
  "theme": "light",
  "heroVariant": "A"
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme === 'light' ? '' : tweaks.theme);
  }, [tweaks.theme]);

return (
    <>
      <CursorBlob />
      <Nav />
      <LiveBar />
      <Hero variant={tweaks.heroVariant} />
      <Marquee />
      <Who />
      <Story />
      <Speed />
      <Services />
      <Why />
      <Showcases />
      <Process />
      <Audience />
      <Blog />
      <FAQ />
      <Contact />
      <Footer />

<TweaksPanel title="Tweaks">
        <TweakSection title="Color theme">
          <TweakSelect
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'light', label: 'Light & airy' },
              { value: 'dark', label: 'Dark mode' },
              { value: 'editorial', label: 'Editorial paper' },
              { value: 'tech', label: 'Tech mono' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero variant">
          <TweakRadio
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              { value: 'A', label: 'A · Speed' },
              { value: 'B', label: 'B · Combined' },
              { value: 'C', label: 'C · Generation' },
              { value: 'D', label: 'D · Premium' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);