// justask-page.jsx — modeled on ask.justmighty.cz, addressing Tomáš feedback
// Structure: Hero (compact), Termíny strip, Pro koho, Balíčky Shape/Build/Sculpt,
//            Tomáš sekce (větší foto, méně klasická), Důkaz/Projekty CTA,
//            Testimonials + video, Form (zjednodušená)

const JUSTASK_PERSONAS = [
{
  tag: 'Zakladatel / 55–65',
  name: 'Petr',
  role: 'Stavebnictví, výroba, logistika',
  desc: 'Buduje firmu 30 let. Cítí, že se mění svět kolem ní — a marketing je jeden z důvodů.',
  img: 'https://framerusercontent.com/images/JHb8T8r1VrUGa7CInlPoEqEHck.jpg?width=4110&height=6159',
  questions: [
  'Fungovalo nám to 30 let. Proč to měnit?',
  'Čemu z dnešního marketingu mám reálně věřit?',
  'Kdo mi dá důkaz, ne jen prezentaci?']

},
{
  tag: 'CEO / 35–45',
  name: 'David',
  role: 'Druhá generace, B2B technologie',
  desc: 'Přebírá byznys nebo přichází jako profi management. Sales drží firmu — ale dlouhodobě sám nestačí.',
  img: 'https://framerusercontent.com/images/D1JZqLCFZutwCfx0UQnFxUIS14.jpg?width=2624&height=2392',
  questions: [
  'Jak udělat z marketingu páteř, ne přídavek?',
  'Kde vidí konkurence díry, které my nevidíme?',
  'Vsadit teď na brand, nebo na výkon?']

},
{
  tag: 'CMO / 28–40',
  name: 'Veronika',
  role: 'Brand & Marketing Manager',
  desc: 'Cítí, že současný setup nefunguje — a potřebuje stratéga, parťáka do diskuze a argumenty pro vedení.',
  img: 'https://framerusercontent.com/images/BIACwCvVFTI9xvHqMXoAnGF2bwc.jpg?width=5000&height=6821',
  questions: [
  'Jak obhájit hodnotu brandu před vedením?',
  'Kde leží reálná páka — a kde jen aktivita?',
  'Které procesy si v týmu udržíme?']

},
{
  tag: 'Founder / 27–35',
  name: 'Filip',
  role: 'Tech / startup po investici',
  desc: 'Ví, že má jednu pořádnou šanci na první dojem — a že polovičatý marketing už nestačí.',
  img: 'https://framerusercontent.com/images/AqMDVaakRAkWTudm4LP2DV1NMc.jpg?width=4110&height=6159',
  questions: [
  'Co dřív — značka, nebo performance?',
  'Co opravdu potřebuju teď a co počká?',
  'Jak postavit go-to-market bez balíku peněz?']

}];


const JUSTASK_DATES = [
{ city: 'BRNO', date: '5. 5. 2026', time: '10:00 – 16:00', open: true },
{ city: 'BRNO', date: '12. 5. 2026', time: '10:00 – 16:00', open: true },
{ city: 'BRNO', date: '19. 5. 2026', time: '10:00 – 16:00', open: true },
{ city: 'PRAHA', date: 'Q3 2026', time: 'připravujeme', open: false },
{ city: 'ONLINE', date: 'kdykoli', time: 'dle domluvy', open: true }];


// Balíčky podle brandbooku
const JUSTASK_PACKAGES = [
{
  key: 'shape',
  name: 'SHAPE',
  feels: '„konečně mám klid."',
  forWho: 'Pro firmy, co chtějí mít marketing v pohodě a vědět, že běží.',
  role: 'jako byste najali juniora',
  desc: 'Stabilní provoz. Konzistence. Někdo, kdo to prostě dělá — a vy se k tomu nemusíte vracet každý týden.',
  price: '30–80 tis.',
  note: 'cca jako jeden plat juniora',
  bullets: [
  'Social, kampaně a copy, který nezní jak ChatGPT',
  'Drobné úpravy webu a grafika podle potřeby',
  'Měsíční report + 1× konzultace, ať víte, kam to jede'],

  stone: './assets/tier-shape.png',
  accent: 'paper',
  fear: '„Nemáme na to čas a neumíme to."'
},
{
  key: 'build',
  name: 'BUILD',
  feels: '„chci výsledky."',
  forWho: 'Pro firmy, kterým marketing běží — ale chtějí, aby přinášel byznys.',
  role: 'jako byste najali seniora',
  desc: 'Víc lidí, víc kanálů, víc testování. Konkrétní leady, prodeje, zájem. Tým, který byste si interně stavěli roky.',
  price: '80–150 tis.',
  note: 'levnější než jeden senior na full-time',
  bullets: [
  'Brand management + obsahová strategie, která se drží',
  'Pokročilé social, PPC a A/B testy, co umíme číst',
  'Kvartální reviews + landing pages, co přivádějí byznys'],

  stone: './assets/tier-build.png',
  accent: 'ink',
  featured: true,
  fear: '„Marketing běží, ale neprodává."'
},
{
  key: 'sculpt',
  name: 'SCULPT',
  feels: '„chci posun."',
  forWho: 'Pro firmy, co chtějí ovládnout svůj trh — ne v něm jen být.',
  role: 'jako byste najali celé oddělení',
  desc: 'Strategický posun. 4P perspektiva, byznys consulting, přímý přístup k CEO. Když chcete změnit hru, ne jen lépe hrát.',
  price: '120–300 tis.',
  note: 'levnější než postavit interní oddělení',
  bullets: [
  'Byznys consulting + 4P perspektiva s CEO',
  'Rebrand a nový web v rámci paušálu, bez příplatků',
  'Pravidelné sessions s Tomášem, ne s account managerem'],

  stone: './assets/tier-sculpt.png',
  accent: 'coral',
  fear: '„Stojíme na místě a nevíme, kam dál."'
}];


const JUSTASK_TESTIMONIALS = [
{
  name: 'Magda Švarcová',
  role: 'Zahradnictví Flos',
  text: 'Na nabídku konzultace s Tomášem jsem reagovala téměř okamžitě. Setkání bylo milé, v přiměřeném tempu a do hlavy mi nasadilo nejednoho brouka. Tomáš nadhodil spoustu přínosných podnětů — díky tomu jsem si potvrdila, že bych s Justmighty ráda spolupracovala dlouhodobě.'
},
{
  name: 'Radovan Vaculík',
  role: 'Taroc Consulting',
  text: 'S Tomášem jsme analyzovali moje marketingové strategie, konkrétně obsah na LinkedInu. Moc děkuji za tuto možnost a všem ostatním rozhodně doporučuji se zúčastnit. Pro některé to může být hodina, která vám změní byznys.'
},
{
  name: 'Petr Hlavnička',
  role: 'Foundr · DriveUp',
  text: 'Dvanáct let v byznysu, ale takhle stručně, věcně a bez omáčky to se mnou nikdo neřešil. Z Justask jsme odešli s konkrétním seznamem věcí, které dávají smysl udělat. A taky s několika, co dávají smysl naopak hned přestat.'
},
{
  name: 'Lucie Marková',
  role: 'CMO · Rovinka s.r.o.',
  text: 'Před schůzkou jsem si nemohla představit, co se dá za hodinu zvládnout. Po ní mi bylo jasno: konečně někdo, kdo myslí v souvislostech a umí to pojmenovat. Vrátila jsem se s argumenty pro vedení.'
}];


// ───────── Hero ─────────
function HandwrittenZdarma({ className }) {
  // Ruční typografie "zdarma" — PNG dle příručky značky
  return (
    <img
      className={className}
      src="./assets/justask-zdarma.png"
      alt="zdarma"
      draggable={false} />);


}

function JustaskHero({ onScrollToForm }) {
  return (
    <section className="ja-hero ja-hero--compact" data-screen-label="J1 Hero">
      <img className="stone-deco" src="./assets/crystal-pink.png" alt="" style={{
        right: '-8%', top: '-30%', width: 580, opacity: .55, transform: 'rotate(-12deg)', mixBlendMode: 'screen'
      }} />
      <img className="stone-deco" src="./assets/stone-render-2.png" alt="" style={{
        left: '-6%', bottom: '-40%', width: 380, opacity: .4, transform: 'rotate(20deg)', mixBlendMode: 'screen'
      }} />
      <div className="shell" style={{ padding: '0 36px', position: 'relative' }}>
        <div className="ja-hero__top" data-reveal>
          <span className="pulse" />
          <span className="mono">KONZULTACE · BRNO + ONLINE · MÁJ 2026</span>
        </div>

        <div className="ja-hero__head">
          <h1 className="ja-hero__display" data-reveal>
            <span className="ja-hero__line">just<i>ask.</i></span>
            <span className="ja-hero__line">konzultace s Tomášem</span>
            <span className="ja-hero__line ja-hero__line--hw">
              <HandwrittenZdarma className="ja-hero__hw" />
            </span>
          </h1>

          <a
            href="#ja-tomas-section"
            className="ja-hero__tom ja-hero__tom--xl"
            data-reveal
            style={{ "--reveal-delay": "260ms" }}
            onClick={(e) => {
              e.preventDefault();
              const el = document.getElementById('ja-tomas-section');
              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }}>
            
            <div className="ja-hero__tom-photo" style={{ backgroundImage: 'url(./assets/tom-bg.jpg)' }} />
            <div className="ja-hero__tom-meta">
              <span className="mono">vede konzultace</span>
              <strong>Tomáš Pohl</strong>
              <span>zakladatel &amp; CEO Justmighty</span>
            </div>
            <span className="ja-hero__tom-anchor" aria-hidden="true">
              <span className="ja-hero__tom-anchor-label">poznat tomáše</span>
              <span className="ja-hero__tom-anchor-arrow">↓</span>
            </span>
          </a>
        </div>

        <div className="ja-hero__meta">
          <p className="ja-hero__lede" data-reveal style={{ "--reveal-delay": "180ms" }}>
            Hodina nabitá tipy z praxe. Nezaujatý pohled člověka, pro kterého je marketing každodenní téma. Bez prodeje, bez závazku.
          </p>
          <div className="ja-hero__cta" data-reveal style={{ "--reveal-delay": "260ms" }}>
            <button className="btn btn--coral btn--big" onClick={onScrollToForm}>
              Chci konzultaci
              <span className="arrow">↗</span>
            </button>
            <span className="ja-hero__price">
              <span className="ja-hero__price-strike">5 000 Kč</span>
              <span className="ja-hero__price-now">0 Kč</span>
            </span>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Termíny (with embedded marquee strip) ─────────
function JustaskTerminy({ onScrollToForm }) {
  const items = ['60 minut', 'audit marketingu', 'tipy z praxe', 'nezaujatý pohled', 'akční plán', '0 Kč', 'bez závazku'];
  return (
    <section className="ja-when" data-screen-label="J2 Termíny">
      {/* Slim coral marquee strip on top */}
      <div className="ja-marquee ja-marquee--slim" aria-hidden="true">
        <div className="ja-marquee__track">
          {Array.from({ length: 3 }).map((_, k) =>
          <React.Fragment key={k}>
              {items.map((t, i) =>
            <span className="ja-marquee__item" key={k + '-' + i}>
                  <span className="ja-marquee__star">✦</span>
                  {t}
                </span>
            )}
            </React.Fragment>
          )}
        </div>
      </div>

      <div className="shell" style={{ padding: '0 36px', position: 'relative' }}>
        <div className="ja-section__head">
          <span className="eyebrow" data-reveal>02 / Kde a kdy</span>
          <h2 className="h-1" data-reveal style={{ marginTop: 16 }}>vyber si <em>termín</em></h2>
        </div>

        <div className="ja-when__grid">
          <div className="ja-loc ja-loc--brno" data-reveal>
            <div className="ja-loc__head">
              <span className="ja-loc__city">BRNO</span>
              <span className="ja-loc__addr">Justmighty · Palackého třída 291/51</span>
            </div>
            <div className="ja-loc__dates">
              {JUSTASK_DATES.filter((d) => d.city === 'BRNO').map((d, i) =>
              <button key={i} className="ja-date" onClick={onScrollToForm}>
                  <span className="ja-date__day">{d.date}</span>
                  <span className="ja-date__time">{d.time}</span>
                  <span className="ja-date__cta">vybrat →</span>
                </button>
              )}
            </div>
            <p className="ja-loc__cap mono">5 míst na termín</p>
          </div>

          <div className="ja-loc ja-loc--praha" data-reveal style={{ "--reveal-delay": "160ms" }}>
            <div className="ja-loc__head">
              <span className="ja-loc__city">PRAHA</span>
              <span className="ja-loc__addr">#HolkyzMarketingu · Pobřežní 12, Karlín</span>
            </div>
            <div className="ja-loc__pending">
              <span className="mono">Q3 2026</span>
              <h4>Nové termíny<br />připravujeme</h4>
              <button className="btn btn--ghost-light" onClick={onScrollToForm}>Dej mi vědět ↗</button>
            </div>
          </div>

          <div className="ja-loc ja-loc--online" data-reveal style={{ "--reveal-delay": "260ms" }}>
            <div className="ja-loc__head">
              <span className="ja-loc__city">ONLINE</span>
              <span className="ja-loc__addr">Google Meet · dle vzájemné domluvy</span>
            </div>
            <p className="ja-loc__online-body">
              Nemůžeš osobně? Sedneme si online. Hodina, link, začínáme.
            </p>
            <button className="btn btn--coral" onClick={onScrollToForm}>
              Domluvit online
              <span className="arrow">↗</span>
            </button>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Pro koho — minimalistická verze ─────────
function JustaskPersonas() {
  return (
    <section className="ja-personas-min" data-screen-label="J3 Pro koho">
      <div className="shell" style={{ padding: 0 }}>
        <div className="ja-personas-min__head">
          <span className="eyebrow" data-reveal>03 / Pro koho</span>
          <h2 className="h-2" data-reveal style={{ marginTop: 12 }}>
            komu se to <em>vyplatí</em>
          </h2>
        </div>

        <ul className="ja-personas-min__list" data-reveal style={{ "--reveal-delay": "120ms" }}>
          {JUSTASK_PERSONAS.map((it, i) => (
            <li className="ja-personas-min__item" key={it.name}>
              <span className="ja-personas-min__num mono">0{i + 1}</span>
              <span className="ja-personas-min__name">{it.name}</span>
              <span className="ja-personas-min__role">{it.tag}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>);

}

// ───────── Balíčky (3 packages with stones) ─────────
function JustaskBaliky() {
  return (
    <section className="ja-baliky" data-screen-label="J4 Balíčky">
      {/* dekorativní vrstva */}
      <div className="ja-baliky__deco" aria-hidden="true">
        <span className="ja-baliky__blob ja-baliky__blob--1" />
        <span className="ja-baliky__blob ja-baliky__blob--2" />
      </div>

      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="ja-section__head ja-baliky__head">
          <span className="eyebrow" data-reveal>04 / BALÍČKY</span>
          <h2 className="h-1 ja-baliky__title" data-reveal style={{ marginTop: 16 }}>
            děláme co je <em>potřeba</em>.
          </h2>
          <p className="ja-section__sub" data-reveal style={{ "--reveal-delay": "160ms" }}>
            Justask je první kontakt — hodina, kde si řekneme, co dává smysl. Když chcete pokračovat, máme <strong>tři způsoby</strong>. Každý odpovídá jiné situaci, jinému strachu, jiné fázi firmy.
          </p>
        </div>

        <div className="ja-baliky__grid">
          {JUSTASK_PACKAGES.map((p, i) =>
          <article
            key={p.key}
            className={"ja-balik ja-balik--" + p.accent + (p.featured ? ' ja-balik--featured' : '')}
            data-reveal
            style={{ "--reveal-delay": i * 140 + 'ms' }}>
            
              <div className="ja-balik__stone">
                <img src={p.stone} alt={p.name} />
                <span className="ja-balik__stone-tag mono">{p.role}</span>
              </div>

              <div className="ja-balik__head-block">
                <h3 className="ja-balik__name">{p.name}</h3>
                <p className="ja-balik__feels">{p.forWho}</p>
              </div>

              <ul className="ja-balik__list">
                {p.bullets.map((b, j) =>
              <li key={j}>
                    <span className="ja-balik__bullet-mark" aria-hidden="true" />
                    <span>{b}</span>
                  </li>
              )}
              </ul>

              <div className="ja-balik__price">
                <div>
                  <span className="mono">měsíčně od</span>
                  <strong>{p.price}</strong>
                </div>
                <div className="ja-balik__fear">
                  <span className="mono">když si říkáte:</span>
                  <span className="ja-balik__fear-quote">{p.fear}</span>
                </div>
              </div>
            </article>
          )}
        </div>

        <div className="ja-baliky__foot" data-reveal>
          <p className="ja-baliky__foot-note">Žádné lock-iny - 3 měsíční výpovědní lhůta. Kdykoli můžete přejít mezi balíčky.</p>
        </div>
      </div>
    </section>);

}

// ───────── Tomáš (asymetrická, vetší fotka, méně klasická) ─────────
function JustaskTomas() {
  return (
    <section id="ja-tomas-section" className="ja-tomas ja-tomas--v2" data-screen-label="J5 Tomas">
      <img className="stone-deco" src="./assets/stone-asym.png" alt="" style={{
        left: '-6%', top: '5%', width: 340, opacity: .18, mixBlendMode: 'screen', transform: 'rotate(-12deg)'
      }} />
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="ja-tomas__v2-grid">
          {/* Big photo */}
          <div className="ja-tomas__v2-photo" data-reveal>
            <div className="ja-tomas__v2-photo-inner" style={{ backgroundImage: 'url(./assets/tom-2.jpg)' }}>
              <span className="ja-tomas__v2-overlay-name">Tomáš<br />Pohl<span style={{ color: 'var(--coral)' }}>.</span></span>
            </div>
          </div>

          {/* Side */}
          <div className="ja-tomas__v2-side">
            <span className="eyebrow" data-reveal>04 / Vede konzultace</span>
            <h2 className="ja-tomas__v2-title" data-reveal style={{ marginTop: 20 }}>
              s vámi <em>sedne</em><br />tomáš.
            </h2>
            <p className="ja-tomas__bio" data-reveal style={{ "--reveal-delay": "160ms" }}>
              Zakladatel a CEO Justmighty. Brand strategie, obchodní rozvoj, komplexní marketing. Pomáhá firmám — od startupů po zavedené značky — nastavit marketing <strong>pořádně</strong>.
            </p>

            <div className="ja-tomas__v2-cards" data-reveal style={{ "--reveal-delay": "240ms" }}>
              <a className="ja-tomas__v2-card" href="https://justmighty.cz" target="_blank" rel="noopener">
                <span className="mono">CEO</span>
                <strong>Agentura Justmighty</strong>
                <span className="ja-tomas__v2-card-cta">web ↗</span>
              </a>
              <a className="ja-tomas__v2-card" href="https://motmot.cz" target="_blank" rel="noopener">
                <span className="mono">CMO</span>
                <strong>Pražírna motmot</strong>
                <span className="ja-tomas__v2-card-cta">web ↗</span>
              </a>
              <a className="ja-tomas__v2-card" href="https://open.spotify.com/show/0kD92MeXyAR0LLejEolETp" target="_blank" rel="noopener">
                <span className="mono">podcast</span>
                <strong>69 dní po splatnosti</strong>
                <span className="ja-tomas__v2-card-cta">Spotify ↗</span>
              </a>
              <a className="ja-tomas__v2-card" href="#" onClick={(e) => e.preventDefault()}>
                <span className="mono">lektor</span>
                <strong>Master of Marketing</strong>
                <span className="ja-tomas__v2-card-cta">poznat ↗</span>
              </a>
              <a className="ja-tomas__v2-card" href="#" onClick={(e) => e.preventDefault()}>
                <span className="mono">lektor</span>
                <strong>Holky z Marketingu</strong>
                <span className="ja-tomas__v2-card-cta">poznat ↗</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Důkaz / Projekty CTA ─────────
function JustaskProjectsCTA() {
  return (
    <section className="ja-proof" data-screen-label="J6 Důkaz">
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="ja-proof__inner">
          <div className="ja-proof__copy" data-reveal>
            <span className="eyebrow" style={{ color: 'var(--ink-2)' }}>05 / Neradíme jen tak</span>
            <h2 className="h-1" data-reveal style={{ marginTop: 16, color: 'var(--ink-2)' }}>
              za naším knowhow <em>stojí 500+&nbsp;projektů</em>
            </h2>
            <p data-reveal style={{ "--reveal-delay": "160ms", color: 'var(--ink-2)', fontSize: 18, lineHeight: 1.5, maxWidth: '56ch', marginTop: 18 }}>
              Justask není teorie. Tipy a doporučení vychází z věcí, které denně řešíme s klienty. Než si sedneme, projděte si pár projektů — uvidíte, kde a jak přemýšlíme.
            </p>
            <div className="ja-proof__cta" data-reveal style={{ "--reveal-delay": "240ms" }}>
              <a className="btn btn--ink" href="#" onClick={(e) => {e.preventDefault();window.__appNav && window.__appNav('projekty');}}>
                Zobrazit projekty
                <span className="arrow">↗</span>
              </a>
              <a href="#" onClick={(e) => {e.preventDefault();window.__appNav && window.__appNav('home');}} className="ja-proof__link">
                Zpět na justmighty.cz →
              </a>
            </div>
          </div>
          <div className="ja-proof__strip" data-reveal style={{ "--reveal-delay": "280ms" }}>
            {['tylex', 'žabiny', 'adrick', 'domoplan', 'huust', 'kara', 'rohlík', 'aurora'].map((c, i) =>
            <span key={i} className="ja-proof__chip">{c}</span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Reference + video sekce ─────────
function JustaskTestimonials() {
  return (
    <section className="ja-testimonials ja-testimonials--v2" data-screen-label="J7 Reference">
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="ja-section__head">
          <span className="eyebrow" data-reveal style={{ color: 'var(--ink-2)' }}>06 / Co říkají účastníci</span>
          <h2 className="h-1" data-reveal style={{ marginTop: 16, color: 'var(--ink-2)' }}>hodina, co <em>nakopne</em></h2>
        </div>

        {/* Reels — vertikální videa z minulých ročníků */}
        <div className="ja-reels" data-reveal>
          {[
          { img: './assets/conference.jpg', name: 'Magda Š.', role: 'Zahradnictví Flos', dur: '0:42' },
          { img: './assets/prednaska.jpg', name: 'Radovan V.', role: 'Taroc Consulting', dur: '0:58' },
          { img: './assets/kh-flagship-podcast.jpg', name: 'Petr H.', role: 'Foundr · DriveUp', dur: '1:12' }].
          map((r, i) =>
          <figure key={i} className="ja-reel" style={{ "--reveal-delay": i * 100 + 'ms' }}>
              <div className="ja-reel__poster" style={{ backgroundImage: `url(${r.img})` }}>
                <button className="ja-reel__play" aria-label="Přehrát">
                  <svg width="22" height="22" viewBox="0 0 32 32" fill="none">
                    <path d="M11 8 L24 16 L11 24 Z" fill="currentColor" />
                  </svg>
                </button>
                <span className="ja-reel__dur mono">{r.dur}</span>
                <span className="ja-reel__tag mono">REELS · 2024</span>
                <figcaption className="ja-reel__cap">
                  <strong>{r.name}</strong>
                  <span>{r.role}</span>
                </figcaption>
              </div>
            </figure>
          )}
        </div>

        <div className="ja-testimonials__grid ja-testimonials__grid--3">
          {JUSTASK_TESTIMONIALS.slice(0, 3).map((t, i) =>
          <figure key={t.name} className="ja-quote" data-reveal style={{ "--reveal-delay": i * 120 + 'ms' }}>
              <span className="ja-quote__mark">"</span>
              <blockquote>{t.text}</blockquote>
              <figcaption>
                <strong>{t.name}</strong>
                <span>{t.role}</span>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

// ───────── Form (zjednodušený, fotka Tomáše) ─────────
function JustaskForm({ formRef }) {
  const [form, setForm] = useStateApp({
    first: '', last: '', company: '', email: '', phone: '',
    slot: 'Brno 5. 5. 2026', help: '', consent: true
  });
  const [sent, setSent] = useStateApp(false);
  const change = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <section className="ja-form ja-form--v2" id="subscribe" ref={formRef} data-screen-label="J8 Form">
      <img className="stone-deco" src="./assets/stone-render-2.png" alt="" style={{
        right: -160, top: -80, width: 520, opacity: .45, mixBlendMode: 'screen', transform: 'rotate(20deg)'
      }} />
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="ja-form__v2-grid">
          {/* Tomáš side */}
          <aside className="ja-form__v2-tom" data-reveal>
            <div className="ja-form__v2-tom-photo" style={{ backgroundImage: 'url(./assets/tom-bg.jpg)' }}>
              <span className="ja-form__v2-tom-name">tomáš pohl<span style={{ color: 'var(--coral)' }}>.</span></span>
            </div>
            <div className="ja-form__v2-tom-meta">
              <span className="mono">↳ vede tvou konzultaci</span>
              <p>Po odeslání ti pošlu potvrzení nejpozději 5 dní před termínem. Pro každý termín vybírám 5 účastníků.</p>
              <a className="ja-form__v2-link" href="mailto:tomas@justmighty.cz">tomas@justmighty.cz ↗</a>
            </div>
          </aside>

          {/* Form side */}
          <div className="ja-form__v2-main">
            <span className="eyebrow" data-reveal>07 / Přihlas se</span>
            <h2 className="ja-form__title" data-reveal style={{ marginTop: 16 }}>
              vyplň <em>3 minuty.</em>
            </h2>

            <form className="ja-form__form" onSubmit={submit} data-reveal style={{ "--reveal-delay": "160ms" }}>
              <div className="ja-form__row">
                <div className="ja-field">
                  <label>Jméno *</label>
                  <input value={form.first} onChange={change('first')} required placeholder="Tomáš" />
                </div>
                <div className="ja-field">
                  <label>Příjmení *</label>
                  <input value={form.last} onChange={change('last')} required placeholder="Pohl" />
                </div>
              </div>
              <div className="ja-form__row">
                <div className="ja-field">
                  <label>Firma</label>
                  <input value={form.company} onChange={change('company')} placeholder="Justmighty s.r.o." />
                </div>
                <div className="ja-field">
                  <label>Telefon</label>
                  <input type="tel" value={form.phone} onChange={change('phone')} placeholder="+420 777 123 456" />
                </div>
              </div>
              <div className="ja-field">
                <label>E-mail *</label>
                <input type="email" value={form.email} onChange={change('email')} required placeholder="ja@firma.cz" />
              </div>
              <div className="ja-field">
                <label>Místo a datum *</label>
                <select value={form.slot} onChange={change('slot')} required>
                  <option>Brno 5. 5. 2026 · 10:00–16:00</option>
                  <option>Brno 12. 5. 2026 · 10:00–16:00</option>
                  <option>Brno 19. 5. 2026 · 10:00–16:00</option>
                  <option>Online · dle domluvy</option>
                  <option>Praha · dej mi vědět nový termín</option>
                </select>
              </div>
              <div className="ja-field">
                <label>S čím ti můžeme pomoci?</label>
                <textarea value={form.help} onChange={change('help')} placeholder="Pár vět o tom, co řešíš. Čím konkrétněji, tím užitečnější bude konzultace." rows={4} />
              </div>

              <label className="ja-form__consent">
                <input type="checkbox" checked={form.consent} onChange={change('consent')} />
                <span>Souhlasím s podmínkami zpracování osobních údajů.</span>
              </label>

              <button type="submit" className="btn btn--coral btn--big" disabled={!form.consent}>
                {sent ? 'Odesláno ✓ ozveme se brzy' : 'Přihlásit se zdarma'}
                {!sent && <span className="arrow">↗</span>}
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>);

}

function JustaskPage() {
  useReveal();
  const formRef = React.useRef(null);
  const scrollToForm = () => {
    if (formRef.current) {
      const top = formRef.current.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };
  return (
    <>
      <JustaskHero onScrollToForm={scrollToForm} />
      <JustaskTerminy onScrollToForm={scrollToForm} />
      <JustaskPersonas />
      <JustaskTomas />
      <JustaskProjectsCTA />
      <JustaskTestimonials />
      <JustaskForm formRef={formRef} />
      <Footer />
    </>);

}

// Exported so the Services page can use it under the services list
window.JustaskBaliky = JustaskBaliky;
window.JustaskPage = JustaskPage;