// onas.jsx — O nás page
// Emoce, lidi, hodnoty. Žádné korporátní bla bla.
const { useState: useStateOnas, useRef: useRefOnas, useEffect: useEffectOnas } = React;

// ============ HERO MOZAIKA ============
function OnasHero() {
  return (
    <section className="onas-hero onas-hero--v5" data-screen-label="ON1 Hero">
      <div className="onas-hero__bg" />
      <div className="onas-hero__grain" />

      {/* floating stones */}
      <div className="onas-hero__stones" aria-hidden="true">
        <img className="onas-hero__stone onas-hero__stone--0" src="./assets/stone-alabastr.png" alt="" />
        <img className="onas-hero__stone onas-hero__stone--1" src="./assets/stone-grafit.png" alt="" />
        <img className="onas-hero__stone onas-hero__stone--2" src="./assets/stone-obsidian.png" alt="" />
        <img className="onas-hero__stone onas-hero__stone--3" src="./assets/stone-diamant.png" alt="" />
        <img className="onas-hero__stone onas-hero__stone--4" src="./assets/stone-clients-coral.png" alt="" />
      </div>

      <div className="shell" style={{ padding: 0, position: 'relative', zIndex: 2 }}>
        <p className="onas-hero__eyebrow" data-reveal>o nás · od 2014</p>

        <div className="onas-hero__stage" data-reveal style={{ "--reveal-delay": "120ms" }}>
          <h1 className="onas-hero__display">
            <span className="onas-hero__word">PŘEMÝŠLÍME</span>
            <span className="onas-hero__word"><em>&amp;</em></span>
            <span className="onas-hero__word">TVOŘÍME</span>
          </h1>
        </div>

        <div className="onas-hero__bottom" data-reveal style={{ "--reveal-delay": "500ms" }}>
          <p className="onas-hero__lede">
            Jsme parta lidí v Brně. 12 hlav, 500+ projektů, jedno přesvědčení —
            že marketing má firmy <em>někam vést</em>.
          </p>
          <div className="onas-hero__cta">
            <a href="#onas-tym" className="btn btn--coral">poznejte tým<span className="arrow">↓</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ MANIFEST + VIDEO ============
function OnasManifest() {
  const [open, setOpen] = useStateOnas(false);
  return (
    <section className="onas-manifest" data-screen-label="ON2 Manifest">
      <div className="shell onas-manifest__grid">
        <div className="onas-manifest__text">
          <span className="mono onas-manifest__tag" data-reveal>● manifest</span>
          <p className="onas-manifest__big" data-reveal>
            Většina marketingu se dělá <em>jen proto, že&nbsp;by&nbsp;se&nbsp;mělo</em>.<br/>
            Bez otázky <em>proč</em> a dopadu na byznys.{' '}
            <span className="onas-manifest__hl">Justmighty existuje, aby to bylo jinak.</span>{' '}
            Začínáme <em>otázkami</em>, ne kreativou. Méně klientů,{' '}
            <span className="onas-manifest__hl">větší odpovědnost</span>.<br/>
            <span className="onas-manifest__hl-coral">Tentokrát pořádně.</span>
          </p>
        </div>

        <aside className="onas-manifest__video" data-reveal style={{"--reveal-delay":"200ms"}}>
          <button
            className="onas-manifest__poster"
            onClick={() => setOpen(true)}
            aria-label="Přehrát: 90 sekund o nás"
          >
            <img src="./assets/team-designing.png" alt="" />
            <span className="onas-manifest__play">
              <span className="onas-manifest__play-ring" />
              <span className="onas-manifest__play-tri">▶</span>
            </span>
            <span className="onas-manifest__poster-meta mono">
              <span>● rec</span><span>01:30</span>
            </span>
          </button>
          <figcaption className="onas-manifest__caption">
            <span className="onas-manifest__caption-arrow" aria-hidden="true">↑</span>
            <span>pusť si nás —<br/>90 sekund a budeš nás znát líp<br/>než kdejaký LinkedIn profil.</span>
          </figcaption>
        </aside>
      </div>

      {open && (
        <div className="onas-manifest__lightbox" onClick={() => setOpen(false)}>
          <button
            className="onas-manifest__close"
            onClick={(e) => { e.stopPropagation(); setOpen(false); }}
            aria-label="Zavřít"
          >×</button>
          <div className="onas-manifest__player" onClick={(e) => e.stopPropagation()}>
            <img src="./assets/team-designing.png" alt="" />
            <div className="onas-manifest__player-overlay">
              <span className="mono">video se právě točí — placeholder</span>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// OnasVideo merged into OnasManifest above
function OnasVideo() { return null; }

// ============ HODNOTY: THINK / FEEL / CREATE ============
const PILLARS = [
  {
    id: 'think',
    no: '01',
    word: 'THINK',
    cz: 'mozek · promýšlej do hloubky',
    sym: './assets/sym-brain.png',
    photo: './assets/team-meeting.png',
    photoCaption: 'pondělní strategie',
    lead: 'Práci děláme strategicky a se znalostí věci.',
    body: 'Do projektů jdeme s hlubokým poznáním klientova oboru, jeho cílů a jeho zákazníků. Procesy nám pomáhají pracovat efektivně, ne se v nich utopit. Žádný projekt nezačneme dřív, než si odpovíme na to, co a proč chceme udělat. A když je to potřeba, díváme se i mimo marketing — do produktu, ceny, distribuce. Protože značka odtržená od byznysu dlouho nevydrží.',
  },
  {
    id: 'feel',
    no: '02',
    word: 'FEEL',
    cz: 'srdce · vášnivě (se) inspiruj',
    sym: './assets/sym-heart.png',
    photo: './assets/team-friends.png',
    photoCaption: 'parta na obědě',
    lead: 'Srdce do toho dáváme proto, že nám na výsledku záleží.',
    body: 'Pracujeme na projektech, jako by byly naše vlastní. Záleží nám na detailu i na vztahu s klientem — proto si můžeme dovolit být upřímní i tam, kde jiní chodí kolem horké kaše.',
  },
  {
    id: 'create',
    no: '03',
    word: 'CREATE',
    cz: 'rohy · tvoř s odvahou',
    sym: './assets/sym-horns.png',
    photo: './assets/team-designing.png',
    photoCaption: 'studio v plné palbě',
    lead: 'Nebojíme se přijít s nápadem, který předtím nikdo nezkusil — pokud má pro klienta smysl.',
    body: 'Kreativa u nás není třešnička na dortu, ale plnohodnotná disciplína. A jsme dost zkušení na to, abychom poznali, kdy odvaha už hraničí se zbytečným riskem.',
  },
];

function OnasValues() {
  const VS = window.ValueShowcase;
  return (
    <section className="kar-pillars kar-pillars--light" id="hodnoty" data-screen-label="ON4 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>

        {VS ? <VS /> : null}
      </div>
    </section>
  );
}

// ============ TÝM ============
const TEAM = [
  { id:'tomas', name:'Tomáš Pohl', role:'zakladatel · brand strategy', img:'./assets/julie.png', tag:'14 let v JM', quote:'Nejlepší meeting je ten u snídaně.', fun:'sbírá vinylové desky 80. let' },
  { id:'misa', name:'Míša K.', role:'strategy lead', img:'./assets/team-misa.png', tag:'7 let v JM', quote:'Kreativa bez strategie je drahá dekorace.', fun:'běhá maraton — i v dešti' },
  { id:'oto', name:'Oto V.', role:'creative director', img:'./assets/team-oto.png', tag:'9 let v JM', quote:'Když všichni přikývnou, je něco špatně.', fun:'kreslí komixy o své kočce' },
  { id:'misko', name:'Miško Z.', role:'brand strategy', img:'./assets/team-misko.png', tag:'5 let v JM', quote:'Nejdražší rebrand je ten, co se neměl dělat.', fun:'umí 5 jazyků (ale ne SQL)' },
  { id:'sara', name:'Sára M.', role:'copy & content', img:'./assets/team-sara.png', tag:'4 roky v JM', quote:'Slova, která nikdo neřekl nahlas, jsou ta nejlepší.', fun:'píše horor povídky pod pseudonymem' },
  { id:'prokop', name:'Prokop H.', role:'design lead', img:'./assets/team-prokop.png', tag:'6 let v JM', quote:'Detail je rozdíl mezi „dobré“ a „wow“.', fun:'ručně vyrábí nábytek do kanclu' },
  { id:'julie', name:'Julie B.', role:'project lead', img:'./assets/julie.png', tag:'3 roky v JM', quote:'Bez timeline nikdo neví, kde je sever.', fun:'vyhrála v týmu 4× lososové kvízy' },
];

function OnasTeam() {
  return (
    <section className="onas-team" data-screen-label="ON5 Tym">
      <div className="shell">
        <header className="onas-team__head" data-reveal>
          <span className="mono">● 05 / parta</span>
          <h2 className="onas-team__title">
            jména,<br/>
            ne&nbsp;<em>pozice</em>.
          </h2>
          <p className="onas-team__sub">
            Najedeš na jakoukoliv tvář — uvidíš, co dělá a co umí, když právě zrovna nedělá brandy.
          </p>
        </header>

        <div className="onas-team__grid">
          {TEAM.map((p, i) => (
            <article
              key={p.id}
              className="onas-person"
              data-reveal
              style={{"--reveal-delay": (i*40)+"ms"}}
            >
              <div className="onas-person__photo">
                <img src={p.img} alt={p.name} />
                <span className="onas-person__tag mono">{p.tag}</span>
              </div>
              <div className="onas-person__body">
                <h3 className="onas-person__name">{p.name}</h3>
                <p className="onas-person__role">{p.role}</p>
                <div className="onas-person__hover">
                  <div className="onas-person__hover-inner">
                    <p className="onas-person__quote">„{p.quote}"</p>
                    <p className="onas-person__fun mono">+ {p.fun}</p>
                  </div>
                </div>
              </div>
            </article>
          ))}
          {/* + 18 dalších */}
          <article className="onas-person onas-person--more" data-reveal>
            <div className="onas-person__more-inner">
              <span className="onas-person__more-num">+18</span>
              <span className="onas-person__more-label">dalších tváří</span>
              <span className="mono onas-person__more-cta">poznáš nás osobně</span>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

// ============ ŽIVOT VE STUDIU ============
const LIFE = [
  { img:'./assets/team-breakfast.png',    span:'a' },
  { img:'./assets/team-designing.png',    span:'b' },
  { img:'./assets/team-pub.png',          span:'c' },
  { img:'./assets/team-friends.png',      span:'d' },
  { img:'./assets/team-2people.png',      span:'e' },
];

function OnasMoments() {
  return (
    <section className="onas-life" data-screen-label="ON6 Momenty">
      <div className="shell">
        <div className="onas-life__grid">
          <header className="onas-life__head" data-reveal>
            <span className="mono">● 06 / život</span>
            <h2 className="onas-life__title">
              <span>žádný fake,</span>
              <em>jen&nbsp;my.</em>
            </h2>
            <p className="onas-life__sub">
              Pár momentů ze studia. Bez režie, bez výběru pro web.
            </p>
          </header>

          {LIFE.map((m, i) => (
            <figure
              key={i}
              className={"onas-life__cell onas-life__cell--" + m.span}
              data-reveal
              style={{"--reveal-delay": (i*60)+"ms"}}
            >
              <img src={m.img} alt="" />
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ ČÍSLA, ALE LIDSKY ============
const HUMAN_STATS = [
  { num:'12', unit:'let', label:'jsme vzhůru' },
  { num:'500+', unit:'projektů', label:'odvedených s pozorností' },
  { num:'~20', unit:'lidí', label:'pod jednou střechou' },
  { num:'14 200', unit:'espress', label:'vypito v kuchyni' },
  { num:'3 200', unit:'slidů', label:'vyrobeno za poslední rok' },
  { num:'1', unit:'pes', label:'oliver, official mood manager' },
  { num:'42', unit:'workshopů', label:'dotaženo s klienty' },
  { num:'9', unit:'kytar', label:'v zasedačce — ano, hraje se' },
];

function OnasNumbers() {
  return (
    <section className="onas-nums" data-screen-label="ON7 Cisla">
      <div className="shell">
        <header className="onas-nums__head" data-reveal>
          <span className="mono">● 07 / čísla, ale lidsky</span>
          <h2 className="onas-nums__title">
            statistiky,<br/>
            které <em>nikdo</em> nepočítá.
          </h2>
          <p className="onas-nums__sub">
            500 projektů zní pěkně. Ale k Justmighty patří i jeden firemní pes a 42 workshopů, na kterých nás bolelo břicho od smíchu.
          </p>
        </header>
        <ul className="onas-nums__grid">
          {HUMAN_STATS.map((s, i) => (
            <li key={i} className="onas-num" data-reveal style={{"--reveal-delay": (i*40)+"ms"}}>
              <span className="onas-num__big">{s.num}</span>
              <span className="onas-num__unit mono">{s.unit}</span>
              <span className="onas-num__label">{s.label}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ============ CTA ============
function OnasCta({ onNav }) {
  return (
    <section className="onas-cta" data-screen-label="ON9 CTA">
      <img className="onas-cta__stone" src="./assets/stone-render-2.png" alt="" />
      <div className="shell">
        <div className="onas-cta__inner" data-reveal>
          <span className="mono onas-cta__tag">● tak co?</span>
          <h2 className="onas-cta__title">
            <em>poznáme</em>&nbsp;se?
          </h2>
          <p className="onas-cta__sub">
            Buď máš projekt, na kterém to spolu rozjedeme — nebo k nám chceš nastoupit. Obojí dává smysl.
          </p>
          <div className="onas-cta__btns">
            <button className="btn btn--coral" onClick={()=>onNav('home','contact')}>
              Mám projekt
              <span className="arrow">↗</span>
            </button>
            <button className="btn btn--ghost-light" onClick={()=>onNav('kariera')}>
              Chci k vám pracovat
              <span className="arrow">↗</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ STRÁNKA ============
function OnasPage({ onNav }) {
  useReveal();
  return (
    <>
      <OnasHero />
      <OnasManifest />
      <OnasVideo />
      <OnasValues />
      <OnasTeam />
      <OnasMoments />
      <OnasNumbers />
      <OnasCta onNav={onNav} />
      <Footer />
    </>
  );
}

window.OnasPage = OnasPage;