// services-flat.jsx — plochá prezentace služeb (žádné záložky, vše viditelné)
const SVCF_DATA = [
  {
    id: 'workshop',
    num: '00',
    kind: 'intro',
    title: 'Workshop',
    lead: 'Pro ty, kteří chtějí posunout marketing interně a ocení pomoc v začátku.',
    body: 'Workshopy slouží jako podklad pro naši práci, ale profituje z nich i klient sám.',
    photo: './assets/team-meeting.png',
  },
  {
    id: 'znacka',
    num: '01',
    kind: 'core',
    title: 'Značka',
    lead: 'Pilíře, na kterých marketing stojí.',
    parts: [
      { k: 'Revize současného stavu', v: 'vymyslíme s klientem, do čeho se pustit' },
      { k: 'Strategie', v: 'na čem značka stojí a kam míří' },
      { k: 'Vizuální identita', v: 'jak značka vypadá' },
      { k: 'Verbální identita', v: 'jak značka komunikuje' },
    ],
    cases: [
      { id: 'tylex',   title: 'tylex',     tag: 'rebranding · 2025', img: './assets/case-tylex.jpg' },
      { id: 'adrick',  title: 'adrick',    tag: 'strategy · brand · 2024', img: './assets/case-adrick.jpg' },
      { id: 'kaucuk',  title: 'kaučuk',    tag: 'identity · strategy · 2024' },
    ],
  },
  {
    id: 'web',
    num: '02',
    kind: 'core',
    title: 'Web',
    lead: 'Výkladní skříň projektu. Nikdy nezačínáme webem, pokud usoudíme, že je potřeba pohnout s vizuální identitou a stanovit strategii značky.',
    parts: [
      { k: 'Architektura webu', v: 'stránky a jejich role na webu' },
      { k: 'Wireframes', v: 'struktura informací a přibližný layout' },
      { k: 'Webdesign', v: 'finální podoba webu v souladu s vizuální identitou značky' },
      { k: 'Webcopy', v: 'veškeré texty v souladu se strategií a verbální identitou značky' },
    ],
    cases: [
      { id: 'domoplan', title: 'domoplan', tag: 'rebranding · web · 2023', img: './assets/case-domoplan.png' },
      { id: 'huust',    title: 'huust',    tag: 'brand · web · 2023', img: './assets/case-huust.png' },
      { id: 'aukro',    title: 'aukro',    tag: 'rebranding · web · 2022' },
    ],
  },
  {
    id: 'propagace',
    num: '03',
    kind: 'core',
    title: 'Propagace',
    lead: 'Kampaně a pravidelná komunikace na kanálech klientovy značky.',
    parts: [
      { k: 'Komunikační strategie', v: 'kde, ke komu, o čem a jak' },
      { k: 'Kampaně', v: 'kreativní koncept a případná realizace' },
      { k: 'Správa sítí', v: 'podřízená strategii značky, konkrétním cílům i aktuálním trendům' },
      { k: 'Výkon', v: 'performance kampaně napříč platformami' },
    ],
    cases: [
      { id: 'zabiny',   title: 'žabiny brno', tag: 'kampaň · social · 2024', img: './assets/case-zabiny.jpg' },
      { id: 'tylex2',   title: 'tylex',       tag: 'kampaň · 2025', img: './assets/project-tylex-1.png' },
      { id: 'livesport',title: 'livesport',   tag: 'brand · identity · 2024' },
    ],
  },
  {
    id: 'vzdelavani',
    num: '04',
    kind: 'edu',
    title: 'Vzdělávání',
    lead: 'Konzultační forma postavená na metodice Justask 10 times®. Patří sem školení, mentoring, přednášky a audity. Vede je nejčastěji Tomáš Pohl.',
  },
];

const SVCF_KH_PREVIEW = [
  { kicker: 'webinář', title: 'Positioning značky', date: '21. 5.', layer: 'free' },
  { kicker: 'justask konzultace', title: 'Hodina s Tomášem', date: '15. 5.', layer: 'free' },
  { kicker: 'komplexní kurz', title: 'Master of Marketing', date: '8. 9.', layer: 'pp' },
];

function SvcfItem({ s, onNav }) {
  if (s.kind === 'intro') {
    return (
      <article className="svcf__item svcf__item--intro" data-reveal>
        <header className="svcf__head">
          <span className="svcf__chip mono">vstupní · není samostatně prodejné</span>
          <span className="svcf__num mono">{s.num}</span>
          <h3 className="svcf__title">{s.title}</h3>
        </header>
        <div className="svcf__col">
          <div className="svcf__intro-grid">
            <figure className="svcf__intro-photo">
              <img src={s.photo} alt="Workshop justmighty" />
              <figcaption className="mono">⌬ workshop · 1–2 dny · brno</figcaption>
            </figure>
            <div className="svcf__intro-text">
              <p className="svcf__lead">{s.lead}</p>
              <p className="svcf__body">{s.body}</p>
              <span className="svcf__intro-pill mono">↘ tudy startují všechny služby níže</span>
            </div>
          </div>
        </div>
      </article>
    );
  }

  if (s.kind === 'edu') {
    return (
      <article className="svcf__item svcf__item--edu" data-reveal>
        <header className="svcf__head">
          <span className="svcf__num mono">{s.num}</span>
          <h3 className="svcf__title">{s.title}</h3>
        </header>
        <div className="svcf__col">
          <p className="svcf__lead">{s.lead}</p>

          <div className="edu">
            {/* Knowhub — hlavní */}
            <a
              href="#knowhub"
              onClick={(e)=>{e.preventDefault(); onNav && onNav('knowhub');}}
              className="edu__hero"
            >
              <div className="edu__hero-grid">
                <div className="edu__hero-left">
                  <span className="edu__pill mono">⌬ centrum vzdělávání</span>
                  <h4 className="edu__hero-title">Knowhub</h4>
                  <p className="edu__hero-lede">
                    Webináře, školení, podcast i komplexní kurzy. Předáváme know-how zdarma, nebo za rozumné peníze.
                  </p>
                </div>
                <div className="edu__hero-right">
                  <div className="edu__events">
                    <div className="edu__events-head">
                      <span className="edu__events-dot" />
                      <span className="mono">12 nadcházejících událostí</span>
                    </div>
                    {SVCF_KH_PREVIEW.map((e, i) => {
                      const labelMap = { free: 'Free', p: '$', pp: '$$' };
                      const colorMap = { free: 'edu__ev--free', p: 'edu__ev--p', pp: 'edu__ev--pp' };
                      return (
                        <div className={"edu__ev " + colorMap[e.layer]} key={i}>
                          <span className="edu__ev-tier mono">{labelMap[e.layer]}</span>
                          <div className="edu__ev-text">
                            <span className="edu__ev-kicker mono">{e.kicker}</span>
                            <span className="edu__ev-name">{e.title}</span>
                          </div>
                          <span className="edu__ev-date mono">{e.date}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
              <div className="edu__hero-foot">
                <span className="edu__hero-cta">vstoupit do Knowhubu <span aria-hidden="true">→</span></span>
              </div>
            </a>

            {/* Vedlejší — 2 karty */}
            <div className="edu__sides">
              <a className="edu__side" href="#" onClick={(e)=>e.preventDefault()}>
                <span className="edu__side-num mono">→ vzdělávací program</span>
                <h4 className="edu__side-title">Master of Marketing</h4>
                <p className="edu__side-desc">Komplexní 8měsíční kurz pro CMO a majitele firem. Vede Tomáš Pohl.</p>
                <div className="edu__side-meta">
                  <span className="edu__side-tag">$$ hlavní</span>
                  <span className="edu__side-cta">poznat program →</span>
                </div>
              </a>

              <a className="edu__side edu__side--alt" href="#" onClick={(e)=>e.preventDefault()}>
                <span className="edu__side-num mono">→ na míru týmu</span>
                <h4 className="edu__side-title">Školení pro firmy</h4>
                <p className="edu__side-desc">Interní workshopy a školení šitá konkrétnímu týmu — strategie, brand, performance.</p>
                <div className="edu__side-meta">
                  <span className="edu__side-tag">$ na poptávku</span>
                  <span className="edu__side-cta">poptat školení →</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </article>
    );
  }

  // core (značka / web / propagace)
  return (
    <article className="svcf__item svcf__item--core" data-reveal>
      <header className="svcf__head">
        <span className="svcf__num mono">{s.num}</span>
        <h3 className="svcf__title">{s.title}</h3>
      </header>
      <div className="svcf__col">
        <p className="svcf__lead">{s.lead}</p>

        <ul className="svcf__parts">
          {s.parts.map((p, i) => (
            <li className="svcf__part" key={i}>
              <span className="svcf__part-k">{p.k}</span>
              <span className="svcf__part-v">{p.v}</span>
            </li>
          ))}
        </ul>

        <div className="svcf__cases">
          <div className="svcf__cases-head">
            <span className="mono svcf__cases-label">↘ jak to vypadá v praxi</span>
            <a className="svcf__cases-all mono" href="#projekty" onClick={(e)=>{e.preventDefault(); onNav && onNav('projekty');}}>
              všechny projekty <span aria-hidden="true">→</span>
            </a>
          </div>
          <div className="svcf__cases-grid">
            {s.cases.map((c) => (
              <a
                key={c.id}
                className={"svcf__case " + (c.img ? '' : 'svcf__case--placeholder')}
                href="#projekty"
                onClick={(e)=>{e.preventDefault(); onNav && onNav('projekty');}}
                style={c.img ? { backgroundImage: `url(${c.img})` } : undefined}
              >
                {c.img && <span className="svcf__case-shade" aria-hidden="true" />}
                <span className="svcf__case-tag mono">{c.tag}</span>
                <span className="svcf__case-title">{c.title}</span>
                <span className="svcf__case-arrow">→</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </article>
  );
}

function ServicesFlat({ onNav }) {
  return (
    <section className="svcf" data-screen-label="P2 Sluzby">
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="svcf__intro">
          <span className="eyebrow" data-reveal>02 / SLUŽBY</span>
          <h2 className="svcf__hero" data-reveal style={{ marginTop: 16 }}>
            Dobrý marketing si <em>zaslouží každá firma</em>.
          </h2>
        </div>

        <div className="svcf__list">
          {SVCF_DATA.map((s) => (
            <SvcfItem key={s.id} s={s} onNav={onNav} />
          ))}
        </div>

        <aside className="svcf__forwhom" data-reveal>
          <div className="svcf__forwhom-text">
            <span className="mono svcf__forwhom-kicker">pro koho to děláme</span>
            <h3 className="svcf__forwhom-pitch">
              Pro fungující organizace, které <em>dospěly</em> z nejlevnějších freelancerů.
            </h3>
            <p className="svcf__forwhom-body">
              My nejlevnější nejsme — a decision makeři už chápou, že to není nutně špatně. Jsou připravení dělat změny a ochotní si poradit.
            </p>
            <div className="svcf__forwhom-marks">
              <span className="svcf__forwhom-mark">⌬ B2B</span>
              <span className="svcf__forwhom-mark">⌬ rostoucí značky</span>
              <span className="svcf__forwhom-mark">⌬ rodinné firmy</span>
              <span className="svcf__forwhom-mark">⌬ scale-upy</span>
            </div>
          </div>
          <div
            className="svcf__forwhom-photo"
            style={{ backgroundImage: 'url(./assets/case-tylex.jpg)' }}
          >
            <img src="./assets/stone-clients-coral.png" alt="" className="svcf__forwhom-stone" />
            <span className="svcf__forwhom-photocap">
              <span className="mono">⌬ klient · 2025</span>
              <span>tylex — rebranding tradiční značky</span>
            </span>
          </div>
        </aside>
      </div>
    </section>
  );
}

window.ServicesFlat = ServicesFlat;
window.SVCF_DATA = SVCF_DATA;
window.SvcfItem = SvcfItem;