// services-page.jsx — radikální systémový přístup: mapa procesu + interaktivní detail
const SVCP_FLOW = [
{
  id: 'workshop',
  num: '00',
  type: 'edge',
  label: 'vstupní',
  title: 'Workshop',
  short: 'Než to celé začneme.',
  lead: 'Pro ty, kteří chtějí posunout marketing interně a ocení pomoc v začátku.',
  desc: 'Workshop je první větší zastávka. Jeden nebo dva dny intenzivní práce s vaším týmem — vede stratég a designér. Slouží jako podklad pro naši práci, ale profituje z něj i klient sám.',
  parts: [
  { k: 'Hloubkové pochopení byznysu', v: 'Zákazníci, konkurence, cíle. To, co potřebujeme znát, abychom dělali pořádně.' },
  { k: 'Justask 10 times®', v: 'Deset otázek, na které musíte mít odpověď, než cokoli spustíme.' },
  { k: 'Roadmapa s doporučeními', v: 'Konkrétní seznam toho, co dává smysl udělat, čeho se vyvarovat a v jakém pořadí.' },
  { k: 'Podklad pro další práci', v: 'I když nepokračujete, odcházíte s něčím použitelným. Vlastní marketing tým z toho profituje stejně jako my.' }],

  keep: '1–2 dny · stratég + designér · často s vedením klienta',
  notFor: 'Když potřebujete jen rychlou radu — to je Justask. Když máte hotovou strategii a chcete jen execution.'
},
{
  id: 'znacka',
  num: '01',
  type: 'core',
  title: 'Značka',
  short: 'Pilíře, na kterých marketing stojí.',
  lead: 'Začínáme strategií. Z té vychází pozice značky, vizuální i verbální identita.',
  desc: 'Značka je nejhlubší vrstva, na které pak stojí všechno ostatní. Pokud je nestabilní, nepomůže ani sebelepší web ani sebevtipnější kampaň. Když je potřeba, díváme se i přes 4P — produkt, cena, distribuce.',
  parts: [
  { k: 'Revize', v: 'Vymyslíme s klientem, do čeho se pustit. Kde značka je, co jí brání.' },
  { k: 'Strategie', v: 'Na čem značka stojí a kam míří. Pozicování, hodnoty, klíčová sdělení, brand architecture.' },
  { k: 'Vizuální identita', v: 'Jak značka vypadá. Logotyp, typografie, barevnost, vizuální systém, brand guidelines.' },
  { k: 'Verbální identita', v: 'Jak značka komunikuje. Osobnost, tonalita, messaging framework, pravidla psaní.' }],

  keep: '2–4 měsíce · strateg + brand designer + copywriter',
  notFor: 'Když chcete jen logo. Logo bez strategie a systému je grafika, ne značka.'
},
{
  id: 'web',
  num: '02',
  type: 'core',
  title: 'Web',
  short: 'Výkladní skříň projektu.',
  lead: 'Nikdy nezačínáme webem, pokud má smysl pohnout s vizuální identitou a strategií.',
  desc: 'Web je místo, kde se značka potká s klientem nejintenzivněji. Děláme architekturu, design, copy. Vývoj outsourcujeme — pracujeme s low-code nástroji (Framer) a externími partnery.',
  parts: [
  { k: 'Architektura', v: 'Stránky a jejich role na webu. Co kde žije a proč.' },
  { k: 'Wireframes', v: 'Struktura informací a přibližný layout. Než přijde grafika.' },
  { k: 'Webdesign', v: 'Finální podoba v souladu s vizuální identitou značky.' },
  { k: 'Webcopy', v: 'Texty v souladu se strategií a tonalitou. Žádný copy-paste z LinkedInu.' }],

  keep: '2–3 měsíce · UX + designer + copywriter + dev partner',
  notFor: 'E-shopy s tisíci produkty. Komplexní SaaS aplikace. Custom dev z nuly.'
},
{
  id: 'propagace',
  num: '03',
  type: 'core',
  title: 'Propagace',
  short: 'Kampaně a pravidelná komunikace.',
  lead: 'Komunikace na kanálech klientovy značky — strategicky, kreativně, výkonnostně.',
  desc: 'To, co lidi vidí každý den. Sociální sítě, kampaně, performance. Vše podřízeno strategii značky a aktuálním cílům.',
  parts: [
  { k: 'Komunikační strategie', v: 'Kde, ke komu, o čem a jak. Než cokoli vyrazí ven.' },
  { k: 'Kampaně', v: 'Kreativní koncept a realizace. Od insightu po execution.' },
  { k: 'Správa sítí', v: 'Podřízená strategii i aktuálním trendům. Instagram, LinkedIn, TikTok.' },
  { k: 'Výkon', v: 'Performance kampaně napříč platformami. PPC, retargeting, A/B testy.' }],

  keep: 'průběžně · account + content + performance specialista',
  notFor: 'Eventy. PR. Influencer marketing jako hlavní kanál. To umí jiní líp.'
},
{
  id: 'vzdelavani',
  num: '04+',
  type: 'edge',
  label: 'výstupní',
  title: 'Vzdělávání',
  short: 'Když nepotřebujete agenturu, ale know-how.',
  lead: 'Pro ty, kteří chtějí marketing dělat sami — ale pořádně.',
  desc: 'Část naší práce není dělat marketing za vás, ale naučit vás dělat ho líp. Přednášky, školení, dlouhodobé mentoring programy.',
  parts: [
  { k: 'Justask konzultace', v: 'Hodina zdarma s Tomášem. Audit vašeho marketingu, deset otázek, doporučení.' },
  { k: 'Mentoring & sparring', v: 'Pravidelná setkání s vaším marketing managerem. Někdo, kdo se na to dívá zvenku.' },
  { k: 'Přednášky a školení', v: 'Pro firmy i komunity. Holky z marketingu, otevřená školení.' },
  { k: 'Master of Marketing', v: 'Náš vlajkový vzdělávací program. Pro CMO a majitele firem.' }],

  keep: 'flexibilní · vede nejčastěji Tomáš Pohl',
  notFor: 'Když chcete jen jednorázovou radu zadarmo — to už máme jako Justask.'
}];


function SvcMapHero({ onNav }) {
  return (
    <section className="svcp-hero" data-screen-label="P2 Sluzby Hero" style={{ height: "920px" }}>
      {/* full-width spodní kámen */}
      <img className="svcp-hero__mountain" src="./assets/stone-3-mountain.png" alt="" />

      <div className="shell" style={{ padding: 0, position: 'relative', zIndex: 2 }}>
        <div className="svcp-hero__top">
          <div className="svcp-hero__top-left">
            <span className="eyebrow svcp-hero__eyebrow" data-reveal>služby · co umíme</span>
            <h1 className="svcp-hero__title svcp-hero__title--full" data-reveal style={{ "--reveal-delay": "100ms", fontSize: "120px" }}>
              marketing,<br />
              který <em style={{ fontWeight: "400" }}>NĚKAM
VEDE</em>.
            </h1>
          </div>

          <div className="svcp-hero__pulled" data-reveal style={{ "--reveal-delay": "220ms", padding: "0px 0px 0px 44px" }}>
            <span className="svcp-hero__quote-mark" aria-hidden="true">„</span>
            <p className="svcp-hero__pulled-text" style={{ textAlign: "left" }}>
              Polovina nákladů na marketing jsou vyhozené peníze — jen nikdo neví, která.
              <strong> Justmighty existuje proto</strong>, aby firmy platily za marketing, který je <em>posune dál</em>.
            </p>
          </div>
        </div>

        <div className="svcp-hero__areas" data-reveal style={{ "--reveal-delay": "320ms" }}>
          <ul className="svcp-hero__pills">
            <li><span className="svcp-hero__pill-num">01</span><span>značka</span></li>
            <li><span className="svcp-hero__pill-num">02</span><span>web</span></li>
            <li><span className="svcp-hero__pill-num">03</span><span>propagace</span></li>
            <li><span className="svcp-hero__pill-num">04</span><span>vzdělávání</span></li>
          </ul>
        </div>
      </div>
    </section>);
}

function SvcProcessMap({ items, activeId, onSelect }) {
  return (
    <aside className="svcp-map">
      <div className="svcp-map__head">
        <span className="mono">↘ proces</span>
        <span className="svcp-map__hand">tudy to obvykle teče</span>
      </div>

      <ol className="svcp-map__list">
        {items.map((it, i) => {
          const isActive = it.id === activeId;
          const isCore = it.type === 'core';
          return (
            <li
              key={it.id}
              className={
              "svcp-map__item " + (
              isCore ? "svcp-map__item--core " : "svcp-map__item--edge ") + (
              isActive ? "is-active " : "")
              }
              onClick={() => onSelect(it.id)}>
              
              <span className="svcp-map__dot" aria-hidden="true" />
              <span className="svcp-map__num mono">{it.num}</span>
              <span className="svcp-map__title">{it.title}</span>
              {it.label && <span className="svcp-map__chip mono">{it.label}</span>}
              {isCore && i > 0 && items[i - 1].type === 'core' &&
              <span className="svcp-map__pipe" aria-hidden="true" />
              }
            </li>);

        })}
      </ol>

      <div className="svcp-map__foot">
        <span className="svcp-map__hand">↗ vzdělávání běží napříč</span>
      </div>
    </aside>);

}

function SvcDetail({ item }) {
  if (!item) return null;
  return (
    <article className="svcp-detail" key={item.id}>
      {/* Big head */}
      <header className="svcp-detail__head">
        <div className="svcp-detail__head-meta">
          <span className="mono svcp-detail__num">{item.num}</span>
          {item.label && <span className="svcp-detail__chip mono">{item.label}</span>}
          {item.type === 'core' && <span className="svcp-detail__chip svcp-detail__chip--core mono">jádro flow</span>}
        </div>
        <h2 className="svcp-detail__title">{item.title}</h2>
        <p className="svcp-detail__short">{item.short}</p>
      </header>

      {/* Lead + body */}
      <div className="svcp-detail__body">
        <p className="svcp-detail__lead">{item.lead}</p>
        <p className="svcp-detail__desc">{item.desc}</p>
      </div>

      {/* Parts grid */}
      <div className="svcp-detail__parts">
        <div className="svcp-detail__parts-head">
          <span className="mono">co konkrétně dostanete</span>
        </div>
        <div className="svcp-detail__parts-grid">
          {item.parts.map((p, j) =>
          <div className="svcp-part" key={j}>
              <span className="svcp-part__idx mono">{String(j + 1).padStart(2, '0')}</span>
              <strong className="svcp-part__k">{p.k}</strong>
              <span className="svcp-part__v">{p.v}</span>
            </div>
          )}
        </div>
      </div>

      {/* Foot — kdo + nepotřebujete */}
      <div className="svcp-detail__foot">
        <div className="svcp-detail__foot-row">
          <span className="mono">tým & rytmus</span>
          <strong>{item.keep}</strong>
        </div>
        <div className="svcp-detail__foot-row svcp-detail__foot-row--neg">
          <span className="mono">co tady nehledejte</span>
          <strong>{item.notFor}</strong>
        </div>
      </div>
    </article>);

}

function ServicesPage({ onNav }) {
  // Stub — skutečná implementace je v app.jsx (kvůli sdílení s JustaskBaliky/Justask/Contact/Footer)
  return null;
}

window.SVCP_FLOW = SVCP_FLOW;
window.SvcMapHero = SvcMapHero;
window.SvcProcessMap = SvcProcessMap;
window.SvcDetail = SvcDetail;
window.ServicesPage = ServicesPage;