// kariera.jsx — career page
// Five stones: alabastr (white) → grafit (gray) → obsidián (black) → rubín (coral) → diamant (white shimmer)

const STONES = [
{
  key: 'alabastr',
  name: 'alabastr',
  role: 'junior',
  desc: 'Určitě jsi kreativní a máš už trochu zkušeností. Na juniorní pozici ale od tebe potřebujeme hlavně pokoru a chuť se učit. Budeš mít od koho. S trochou nasazení se můžeš brzy vypracovat do vyšších úrovní systému.',
  years: '0–2 roky',
  facets: '#F0E6D8',
  facets2: '#E5D4B8',
  glow: 'rgba(240,230,216,.55)'
},
{
  key: 'grafit',
  name: 'grafit',
  role: 'medior',
  desc: 'Tvrdý, spolehlivý, hluboký. Umíš svoje řemeslo a víš proč to děláš. Vedeš si vlastní projekty a junioři za tebou chodí pro radu — protože ji umíš dát.',
  years: '2–4 roky',
  facets: '#3A3A3A',
  facets2: '#1F1F1F',
  glow: 'rgba(140,140,140,.45)'
},
{
  key: 'obsidian',
  name: 'obsidián',
  role: 'senior',
  desc: 'Vyleštěný do hloubky. Stal/a ses oporou týmu — vedeš strategie, klíčové klienty, mentoruješ. V momentu, kdy je horko, lidi koukají na tebe.',
  years: '4–7 let',
  facets: '#0A0A0A',
  facets2: '#1A1A1A',
  glow: 'rgba(60,60,80,.55)'
},
{
  key: 'rubin',
  name: 'rubín',
  role: 'lead',
  desc: 'Vzácný a žhavý. Vedeš tým, držíš vizi, otevíráš nové cesty. Tvoje rozhodnutí mění směr, kterým se agentura ubírá.',
  years: '7–10 let',
  facets: '#FF747D',
  facets2: '#C13B45',
  glow: 'rgba(255,116,125,.65)'
},
{
  key: 'diamant',
  name: 'diamant',
  role: 'partner',
  desc: 'Nejvyšší tlak vytváří nejtvrdší výsledek. Spolu-vlastnictví, partnerství a podíl na dlouhodobém směru Justmighty.',
  years: '10+ let',
  facets: '#FFFFFF',
  facets2: '#D8E8FF',
  glow: 'rgba(220,235,255,.7)'
}];


// Stone — actual PNG asset
const STONE_PNG = {
  alabastr: './assets/stone-alabastr.png',
  grafit: './assets/stone-grafit.png',
  obsidian: './assets/stone-obsidian.png',
  rubin: './assets/rubin.png',
  diamant: './assets/stone-diamant.png'
};

function Stone({ stone, size = 120, animated = false }) {
  const src = STONE_PNG[stone.key] || './assets/stone-asym.png';
  return (
    <img
      src={src}
      width={size}
      height={size}
      className={"stone-png " + (animated ? 'is-animated' : '')}
      style={{ width: size, height: size, objectFit: 'contain' }}
      alt={stone.name}
      aria-hidden="true" />);


}
window.Stone = Stone;
window.STONES = STONES;

// ──────────────────── Hodnoty — typografická kompozice ─────────────
// 3 velké řádky: THINK / FEEL / CREATE; objekt (mozek/srdce/rohy) "obtéká"
// typo, drobný mouse-tilt parallax, jemný mono řádek vedle.
const VALUES = [
{
  n: '01',
  word: 'think',
  cz: 'Mozek',
  riff: 'Promýšlej do hloubky.',
  body: 'Práci děláme strategicky a se znalostí věci. Do projektů jdeme s hlubokým poznáním klientova oboru, jeho cílů a jeho zákazníků. Protože značka odtržená od byznysu dlouho nevydrží.',
  sym: './assets/sym-brain.png',
  align: 'left'
},
{
  n: '02',
  word: 'feel',
  cz: 'Srdce',
  riff: 'Vášnivě (se) inspiruj.',
  body: 'Srdce do toho dáváme proto, že nám na výsledku záleží. Pracujeme na projektech, jako by byly naše vlastní. Proto si můžeme dovolit být upřímní i tam, kde jiní chodí kolem horké kaše.',
  sym: './assets/sym-heart.png',
  align: 'right',
  accent: true
},
{
  n: '03',
  word: 'create',
  cz: 'Rohy',
  riff: 'Tvoř s odvahou.',
  body: 'Nebojíme se přijít s nápadem, který předtím nikdo nezkusil, pokud má pro klienta smysl. A jsme dost zkušení na to, abychom poznali, kdy odvaha už hraničí se zbytečným riskem.',
  sym: './assets/sym-horns.png',
  align: 'left',
  outline: true
}];


function ValueShowcase() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const onMove = (e) => {
      const r = root.getBoundingClientRect();
      const cx = (e.clientX - r.left) / r.width - 0.5;
      const cy = (e.clientY - r.top) / r.height - 0.5;
      root.style.setProperty('--mx', cx.toFixed(3));
      root.style.setProperty('--my', cy.toFixed(3));
    };
    root.addEventListener('mousemove', onMove);
    return () => root.removeEventListener('mousemove', onMove);
  }, []);
  return (
    <div className="vshow" ref={ref}>
      {VALUES.map((v, i) => {
        const sym = v.sym || ['./assets/sym-brain.png', './assets/sym-heart.png', './assets/sym-horns.png'][i % 3];
        return (
          <article
            key={v.word}
            className={
            'vshow__row vshow__row--' + v.align + (
            v.accent ? ' vshow__row--accent' : '') + (
            v.outline ? ' vshow__row--outline' : '')
            }
            style={{ '--i': i }}
            data-reveal>
            
          <div className="vshow__meta">
            <span className="vshow__n">{v.n} / 03</span>
            <span className="vshow__rule" />
          </div>
          <div className="vshow__stage">
            <h3 className="vshow__word">{v.word}</h3>
            <img className="vshow__sym" src={sym} alt="" aria-hidden="true" />
          </div>
          <div className="vshow__riff">
            <span className="vshow__cz mono">{v.cz}</span>
            <p className="vshow__lede">{v.riff}</p>
            <p className="vshow__body">{v.body}</p>
          </div>
        </article>);
      })}
    </div>);

}
window.ValueShowcase = ValueShowcase;

// ──────────────────── Page ────────────────────
function KarieraPage({ onNav }) {
  useReveal();
  const [activeStone, setActiveStone] = React.useState(2); // start at obsidian (middle)
  const [openJob, setOpenJob] = React.useState(null);

  // Keyboard nav for stones — arrows when ladder section is in viewport
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
      const sec = document.querySelector('.kar-ladder');
      if (!sec) return;
      const r = sec.getBoundingClientRect();
      const inView = r.top < window.innerHeight * 0.7 && r.bottom > window.innerHeight * 0.3;
      if (!inView) return;
      const tag = document.activeElement && document.activeElement.tagName || '';
      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
      e.preventDefault();
      setActiveStone((i) => {
        const n = window.STONES?.length || 5;
        return e.key === 'ArrowRight' ? Math.min(n - 1, i + 1) : Math.max(0, i - 1);
      });
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      {/* HERO */}
      <section className="kar-hero" data-screen-label="K1 Kariera Hero">
        <div className="kar-hero__bg" />
        <div className="kar-hero__grain" />

        <div className="shell" style={{ padding: 0, position: 'relative', zIndex: 2 }}>
          <div className="kar-hero__stage" data-reveal style={{ "--reveal-delay": "120ms" }}>
            {/* 3 plovoucí symboly: brain · horns · heart */}
            <img className="kar-sym kar-sym--brain" src="./assets/sym-brain.png" alt="" />
            <img className="kar-sym kar-sym--horns" src="./assets/sym-horns.png" alt="" />
            <img className="kar-sym kar-sym--heart" src="./assets/sym-heart.png" alt="" />

            <h1 className="kar-hero__display kar-hero__display--hashtag">
              <span className="kar-hero__hash">#</span><span className="kar-hero__word" style={{ fontWeight: "600" }}>think</span><span className="kar-hero__word" style={{ fontWeight: "600" }}>feel</span><span className="kar-hero__word" style={{ fontWeight: "600" }}>create</span>
            </h1>
          </div>

          <div className="kar-hero__bottom" data-reveal style={{ "--reveal-delay": "500ms" }}>
            <p className="kar-hero__lede">
              Děláme marketing, který má smysl. Pro značky, které chtějí opravdu posunout.
              Hledáme lidi, kteří v tom chtějí růst s námi.
            </p>
            <div className="kar-hero__cta">
              <a href="#pozice" className="btn btn--coral" onClick={(e) => {e.preventDefault();document.getElementById('pozice')?.scrollIntoView({ behavior: 'smooth' });}}>
                Volné pozice
                <span className="arrow">↓</span>
              </a>
              <a href="#hodnoty" className="btn btn--ghost" onClick={(e) => {e.preventDefault();document.getElementById('hodnoty')?.scrollIntoView({ behavior: 'smooth' });}}>
                Naše hodnoty
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* THREE PILLARS — typografická kompozice se symboly */}
      <section className="kar-pillars" id="hodnoty" data-screen-label="K2 Hodnoty">
        <div className="shell">
          <div className="kar-pillars__head">
            <div data-reveal>
              <span className="eyebrow">tři pilíře · think / feel / create</span>
              <h2 className="h-1" style={{ marginTop: 16, maxWidth: '20ch', fontStyle: 'normal' }}>mozek, srdce a&nbsp;rohy</h2>
            </div>
            <p className="kar-pillars__intro" data-reveal style={{ "--reveal-delay": "160ms" }}>
              Justmighty stojí na třech myšlenkách a symbolech. Mozek, srdce a rohy. Think, Feel, Create. Není to abstraktní filozofie ani dodatečně postavený framework — tři symboly tvoří přímo naše logo. Pilíře jsou jejich významový výklad. Co je v&nbsp;logu obrazem, je v&nbsp;naší práci přístupem.
            </p>
          </div>

          <ValueShowcase />
        </div>
      </section>

      {/* WHAT AWAITS — light editorial collage */}
      <section className="kar-life" data-screen-label="K3 Co te ceka" style={{ backgroundColor: "rgb(243, 243, 243)" }}>
        <div className="shell">
          <div className="kar-life__head" data-reveal>
            <span className="eyebrow kar-life__eyebrow">life at justmighty</span>
            <h2 className="kar-life__title">jak se u nás <em>žije</em></h2>
            <p className="kar-life__lede">Pár věcí, kterých si u nás všimneš dřív než kávovaru.</p>
          </div>

          <div className="kar-life__grid">
            {/* item 01 — big landscape photo + caption */}
            <figure className="kar-life__item kar-life__item--photo-lg" data-reveal>
              <img src="./assets/team-designing.png" alt="" loading="lazy" />
              <figcaption>
                <span className="kar-life__tag">brno · veveří</span>
              </figcaption>
            </figure>

            {/* item 02 — vertical video preview */}
            <figure className="kar-life__item kar-life__item--video kar-life__item--video-1" data-reveal style={{ "--reveal-delay": "120ms" }}>
              <img src="./assets/team-meeting.png" alt="" loading="lazy" />
              <button className="kar-life__play" type="button" aria-label="Přehrát">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M6 4l12 7-12 7V4z" fill="currentColor" /></svg>
              </button>
              <span className="kar-life__time">0:24</span>
              <figcaption>pondělní stand-up</figcaption>
            </figure>

            {/* item 03 — text block */}
            <div className="kar-life__item kar-life__item--text-1" data-reveal style={{ "--reveal-delay": "60ms" }}>
              <span className="kar-life__num">01</span>
              <h3>děláme jen to, co dává <em>smysl</em></h3>
              <p>Neprodáváme nic, co klient nepotřebuje. Ráno se na sebe můžeme dívat do zrcadla.</p>
            </div>

            {/* item 04 — small portrait photo, slightly rotated */}
            <figure className="kar-life__item kar-life__item--photo-sm" data-reveal style={{ "--reveal-delay": "80ms" }}>
              <img src="./assets/team-dog.png" alt="" loading="lazy" />
              <span className="kar-life__sticky">kanci v práci. vítáni.</span>
            </figure>

            {/* item 05 — text block */}
            <div className="kar-life__item kar-life__item--text-2" data-reveal>
              <span className="kar-life__num">02</span>
              <h3>svoboda najít si <em>svůj režim</em></h3>
              <p>Důvěra místo docházkového systému. Žádný „kde jsi?" v 9:03.</p>
            </div>

            {/* item 06 — vertical video preview */}
            <figure className="kar-life__item kar-life__item--video kar-life__item--video-2" data-reveal style={{ "--reveal-delay": "160ms" }}>
              <img src="./assets/team-friends.png" alt="" loading="lazy" />
              <button className="kar-life__play" type="button" aria-label="Přehrát">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M6 4l12 7-12 7V4z" fill="currentColor" /></svg>
              </button>
              <span className="kar-life__time">0:11</span>
              <figcaption>after-work · veveří</figcaption>
            </figure>

            {/* item 07 — pano photo */}
            <figure className="kar-life__item kar-life__item--photo-mid" data-reveal style={{ "--reveal-delay": "100ms" }}>
              <img src="./assets/team-presentation.png" alt="" loading="lazy" />
            </figure>

            {/* item 08 — text + scribble */}
            <div className="kar-life__item kar-life__item--text-3" data-reveal>
              <span className="kar-life__num">03</span>
              <h3>učíme se. <em>pořád.</em></h3>
              <p>Konference, kurzy, knihovna. Co tě baví — my zaplatíme.</p>
              <span className="kar-life__scribble">& doporučíme co stojí za to</span>
            </div>

            {/* item 09 — small photo */}
            <figure className="kar-life__item kar-life__item--photo-sm2" data-reveal style={{ "--reveal-delay": "140ms" }}>
              <img src="./assets/team-breakfast.png" alt="" loading="lazy" />
              <span className="kar-life__sticky kar-life__sticky--coral">pondělní snídaně</span>
            </figure>
          </div>

          {/* small fact strip */}
          {/* čísla, ale lidsky */}
          <ul className="kar-life__nums" data-reveal>
            <li className="kar-life-num">
              <span className="kar-life-num__big">25</span>
              <span className="kar-life-num__unit">dní volna</span>
              <span className="kar-life-num__label">+ sick days, bez vysvětlování</span>
            </li>
            <li className="kar-life-num">
              <span className="kar-life-num__big">∞</span>
              <span className="kar-life-num__unit">konferencí</span>
              <span className="kar-life-num__label">co tě baví, my zaplatíme</span>
            </li>
            <li className="kar-life-num">
              <span className="kar-life-num__big">100%</span>
              <span className="kar-life-num__unit">flex režim</span>
              <span className="kar-life-num__label">důvěra místo docházky</span>
            </li>
            <li className="kar-life-num">
              <span className="kar-life-num__big">0</span>
              <span className="kar-life-num__unit">pevných hodin</span>
              <span className="kar-life-num__label">žádný „kde jsi?" v 9:03</span>
            </li>
            <li className="kar-life-num">
              <span className="kar-life-num__big">1</span>
              <span className="kar-life-num__unit">pes</span>
              <span className="kar-life-num__label">oliver — official mood manager</span>
            </li>
            <li className="kar-life-num">
              <span className="kar-life-num__big">9</span>
              <span className="kar-life-num__unit">kytar</span>
              <span className="kar-life-num__label">v zasedačce — hraje se</span>
            </li>
            <li className="kar-life-num">
              <span className="kar-life-num__big">42</span>
              <span className="kar-life-num__unit">workshopů</span>
              <span className="kar-life-num__label">dotaženo s klienty</span>
            </li>
            <li className="kar-life-num">
              <span className="kar-life-num__big">14 200</span>
              <span className="kar-life-num__unit">espress</span>
              <span className="kar-life-num__label">vypito v kuchyni</span>
            </li>
          </ul>
        </div>
      </section>

      {/* CAREER LADDER — STONES */}
      <section className="kar-ladder" data-screen-label="K4 Career Ladder">
        <div className="shell">
          <div className="kar-pillars__head" style={{ textAlign: 'center', gridTemplateColumns: '1fr', justifyItems: 'center' }}>
            <div data-reveal style={{ textAlign: 'center' }}>
              <span className="eyebrow" style={{ justifyContent: 'center' }}>03/ Career Growth</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>rosteme spolu</h2>
              <p className="lede" data-reveal style={{ "--reveal-delay": "160ms", marginTop: 24, maxWidth: '52ch' }}>
                Náš kariérní žebřík není pět titulů v HR systému. Je to pět kamenů.
                Každý má svou hloubku, hmotnost a zrání.
              </p>
            </div>
          </div>

          <div className="ladder">
            <div className="ladder__rail">
              {STONES.map((s, i) =>
              <button
                key={s.key}
                className={`ladder__step ${activeStone === i ? 'is-on' : ''}`}
                onClick={() => setActiveStone(i)}
                style={{ "--idx": i }}>
                
                  <span className="ladder__step-stone"><Stone stone={s} size={64} /></span>
                  <span className="ladder__step-label">
                    <span className="ladder__step-name">{s.name}</span>
                    <span className="ladder__step-role">{s.role}</span>
                  </span>
                </button>
              )}
              <div className="ladder__line" />
              <div className="ladder__line ladder__line--active" style={{ width: `${activeStone / (STONES.length - 1) * 100}%` }} />

              {/* Compact tooltip-style card anchored under the active stone */}
              <div
                className="ladder__callout-wrap"
                style={{ left: `calc(${(activeStone + 0.5) / STONES.length * 100}%)` }}>
                <div className="ladder__callout" key={activeStone}>
                  <div className="ladder__callout-arrow" aria-hidden="true" />
                  <div className="ladder__callout-stone">
                    <Stone stone={STONES[activeStone]} size={180} animated />
                  </div>
                  <div className="ladder__callout-body">
                    <div className="ladder__callout-head">
                      <span className="ladder__callout-step">{String(activeStone + 1).padStart(2, '0')}<span className="ladder__callout-step-tot">/05</span></span>
                      <span className="ladder__callout-meta-text">
                        <span className="ladder__callout-name">{STONES[activeStone].name}</span>
                      </span>
                    </div>
                    <p className="ladder__callout-desc">{STONES[activeStone].desc}</p>
                    <a href="#pozice" className="ladder__callout-link" onClick={(e) => {e.preventDefault();document.getElementById('pozice')?.scrollIntoView({ behavior: 'smooth' });}}>
                      <span>volné pozice</span>
                      <span className="ladder__callout-link-arrow">→</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* OPEN POSITIONS */}
      <section className="kar-jobs" id="pozice" data-screen-label="K6 Volne pozice">
        <div className="shell">
          <div className="kar-jobs__bridge" data-reveal>
            <h2 className="kar-jobs__bridge-title">
              <span className="kar-jobs__bridge-prefix">↘ tak co —</span>
              <span>který kámen</span>
              <span className="kar-jobs__bridge-coral">budeš ty?</span>
            </h2>
          </div>

          <div className="kar-pillars__head" style={{ textAlign: 'center', gridTemplateColumns: '1fr', justifyItems: 'center' }}>
            <div data-reveal style={{ textAlign: 'center' }}>
              <span className="eyebrow" style={{ justifyContent: 'center' }}>KOHO HLEDÁME</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>volné pozice</h2>
            </div>
          </div>

          <div className="jobs">
            {JOBS.map((j, i) =>
            <article key={j.id} className={`job ${openJob === j.id ? 'is-open' : ''} ${j.featured ? 'job--featured' : ''}`} data-reveal>
                <button className="job__head" onClick={() => setOpenJob(openJob === j.id ? null : j.id)}>
                  <div className="job__head-l">
                    <span className="job__num">{String(i + 1).padStart(2, '0')}</span>
                    <div>
                      <h3 className="job__title">{j.title}</h3>
                      <p className="job__short">{j.short}</p>
                    </div>
                  </div>
                  <div className="job__head-r">
                    <span className="job__tags">
                      {j.tags.map((t, k) => <span key={k} className="job__tag">{t}</span>)}
                    </span>
                    <span className="job__plus">{openJob === j.id ? '−' : '+'}</span>
                  </div>
                </button>
                {openJob === j.id &&
              <div className="job__body">
                    <div className="job__col">
                      <h4>Co budeš dělat</h4>
                      <ul>{j.do.map((x, k) => <li key={k}>{x}</li>)}</ul>
                    </div>
                    <div className="job__col">
                      <h4>Co od tebe potřebujeme</h4>
                      <ul>{j.need.map((x, k) => <li key={k}>{x}</li>)}</ul>
                    </div>
                    <div className="job__col">
                      <h4>Co ti za to dáme</h4>
                      <ul>{j.give.map((x, k) => <li key={k}>{x}</li>)}</ul>
                      <a className="btn btn--coral" href="#apply" style={{ marginTop: 24 }} onClick={(e) => {e.preventDefault();document.getElementById('apply')?.scrollIntoView({ behavior: 'smooth' });}}>
                        To je přesně pro mě!
                        <span className="arrow">↗</span>
                      </a>
                    </div>
                  </div>
              }
              </article>
            )}
          </div>

        </div>
      </section>

      {/* APPLY */}
      <section className="kar-apply" id="apply" data-screen-label="K7 Apply">
        <div className="shell">
          <div className="kar-apply__grid">
            <div className="kar-apply__left">
              <span className="eyebrow">PŘIDEJ SE K NÁM</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>chci být<br />součástí</h2>
              <p className="lede" style={{ marginTop: 24, maxWidth: '42ch', color: '#bdbdbd' }}>
                Napiš nám pár slov o sobě a co tě zajímá. Ozve se ti{' '}
                <strong style={{ color: 'var(--paper)' }}>Julie</strong>, naše HR. Žádný formulářový formál — chceme tě poznat.
              </p>

              <div className="kar-apply__person">
                <div className="kar-apply__photo" style={{ backgroundImage: 'url(./assets/julie.png)' }} />
                <div>
                  <h4>Julie Dvořáková</h4>
                  <p>HR & Backoffice</p>
                  <p style={{ color: 'var(--coral)' }}>dvorakova@justmighty.cz</p>
                  <p style={{ color: 'var(--muted)' }}>+420 111 222 333</p>
                </div>
              </div>
            </div>

            <form className="form kar-form" onSubmit={(e) => e.preventDefault()}>
              <div className="field-row">
                <div className="field"><label>Jméno *</label><input placeholder="Miko Kukuka" /></div>
                <div className="field"><label>Příjmení *</label><input placeholder="Příjmení" /></div>
              </div>
              <div className="field-row">
                <div className="field"><label>Email *</label><input placeholder="miko@email.cz" /></div>
                <div className="field"><label>Telefon</label><input placeholder="+420" /></div>
              </div>
              <div className="field">
                <label>Pozice, která tě zajímá</label>
                <select className="kar-select" defaultValue="">
                  <option value="" disabled>Vyber pozici nebo nech otevřené</option>
                  {JOBS.map((j) => <option key={j.id} value={j.id}>{j.title}</option>)}
                  <option value="other">Jiná / cokoliv</option>
                </select>
              </div>
              <div className="field">
                <label>Portfolio / LinkedIn / GitHub</label>
                <input placeholder="https://" />
              </div>
              <div className="field">
                <label>Pár slov o sobě</label>
                <textarea placeholder="Co tě baví, kde se vidíš za rok, na čem teď makáš..." />
              </div>
              <div className="form__cta">
                <p className="form__note">Odesláním souhlasíš se zpracováním osobních údajů.</p>
                <button className="btn btn--coral" type="submit">
                  Odeslat
                  <span className="arrow">↗</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>

      <Footer />
    </>);

}

const JOBS = [
{
  id: 'strateg',
  title: 'Kreativní stratég/yně',
  short: 'Hledáme stratéga. Někoho, kdo bude pokládat základy značkám a vymýšlet úspěšné kampaně.',
  tags: ['full-time', 'Brno', 'obsidián+'],
  featured: true,
  do: [
  'vést strategické workshopy s klienty',
  'pokládat brand foundations (positioning, archetypy, ToV)',
  'navrhovat koncepty kampaní od insightu po execution',
  'vést tým kreativců napříč projekty'],

  need: [
  '4+ let zkušeností v reklamě / agentuře',
  'samostatnost, schopnost obhájit nápad před klientem',
  'cit pro značku i pro byznys',
  'empatii — k týmu, klientům i cílovkám'],

  give: [
  'projekty napříč obory (výroba, sport, tech…)',
  'svobodu v rozhodování',
  'partnerský kolektiv, ne korporát',
  'nadprůměrné finanční ohodnocení']

},
{
  id: 'obchod',
  title: 'Vedoucí obchodu',
  short: 'Někdo, kdo přivede a udrží vztahy s top značkami a postará se o zdravý růst portfolia.',
  tags: ['full-time', 'Brno', 'rubín'],
  featured: true,
  do: [
  'aktivně oslovovat značky, kde dává Justmighty smysl',
  'kvalifikovat poptávky a vést úvodní rozhovory',
  'připravovat nabídky se stratégem a šéfem',
  'budovat dlouhodobé vztahy s klienty'],

  need: [
  'zkušenost s B2B prodejem služeb (ideálně agenturní)',
  'umíš vést zajímavou konverzaci (a poslouchat)',
  'rozumíš marketingu a značce',
  'chceš stavět, ne jen plnit kvóty'],

  give: [
  'volnou ruku v tom, koho oslovíš',
  'fixní + provizní složku',
  'tým, který zakázku doručí na 110 %',
  'možnost spolu-vlastnit směr agentury']

},
{
  id: 'designer',
  title: 'Senior brand designer/ka',
  short: 'Hledáme někoho, kdo dá značkám tvar, identitu a všechny aplikace.',
  tags: ['full-time', 'Brno / remote', 'grafit+'],
  do: [
  'navrhovat vizuální identity a logotypy',
  'vést designové workshopy s klienty',
  'tvořit brand guidelines a klíčové aplikace',
  'mentorovat juniorní designéry'],

  need: [
  'silné portfolio identit / brandů',
  'cit pro typografii, systém, detail',
  'zkušenost s prezentováním práce klientovi',
  'samostatnost — vedeš si vlastní projekty'],

  give: [
  'projekty, na které je radost se podepsat',
  'designerský tým, který rozumí',
  'nejnovější vybavení',
  'účast na konferencích po celé EU']

},
{
  id: 'webdev',
  title: 'Frontend developer/ka',
  short: 'Stavíš weby, které jsou stejně krásné v kódu jako v designu.',
  tags: ['full-time', 'remote-friendly', 'grafit+'],
  do: [
  'kódovat hi-fi weby z Figmy',
  'integrovat headless CMSky (Sanity, Strapi, Contentful)',
  'optimalizovat performance, SEO, accessibility',
  'spolupracovat s designéry od začátku projektu'],

  need: [
  'React / Next.js / TypeScript jako prst v nose',
  'cit pro detail v animacích a microinterakcích',
  'samostatnost a deadline awareness',
  'češtinu nebo angličtinu'],

  give: [
  'projekty od malých až po velké redesigny',
  'volnost ve výběru stacku',
  'remote-friendly režim',
  'budget na vzdělávání']

},
{
  id: 'pm',
  title: 'Project manager/ka',
  short: 'Hlídáš, aby všechno klapalo — termíny, alokace, klienti i tým.',
  tags: ['full-time', 'Brno', 'alabastr+'],
  do: [
  'vést projekty od briefu po launch',
  'koordinovat tým napříč disciplínami',
  'být kontaktem #1 pro klienta',
  'hlídat scope, rozpočet a timeline'],

  need: [
  '2+ let v projektovém řízení (ideálně agentura/digitál)',
  'organizační schopnosti a klid pod tlakem',
  'umíš vést schůzku',
  'rozumíš briefu i číslům'],

  give: [
  'týmy, které doručují',
  'nástroje, které ti život ulehčí',
  'tréninky a koučink',
  'jasný kariérní postup']

}];


window.KarieraPage = KarieraPage;
window.JOBS = JOBS;