// crossroads.jsx
// Hero dlaždice = živý preview Knowhub (event-first hub, L1→L3)
// Sourozenecké dlaždice = O nás (rotující portréty), Kariéra (kameny)

const CROSS_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' }];


const CROSS_TEAM = [
{ src: './assets/team-misa.png', name: 'Míša' },
{ src: './assets/team-oto.png', name: 'Oto' },
{ src: './assets/team-misko.png', name: 'Miško' },
{ src: './assets/team-sara.png', name: 'Sára' }];


function CrossPhotoRotator() {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((p) => (p + 1) % CROSS_TEAM.length), 3000);
    return () => clearInterval(t);
  }, []);
  return (
    <span className="cross-side__media cross-side__media--photo" aria-hidden="true">
      {CROSS_TEAM.map((p, idx) =>
      <span key={idx}
      className={"cross-side__photo " + (idx === i ? 'is-on' : '')}
      style={{ backgroundImage: `url(${p.src})` }} />
      )}
      <span className="cross-side__photo-overlay" />
    </span>);

}

window.CrossPhotoRotator = CrossPhotoRotator;

function Crossroads({ onNav }) {
  const go = (page) => (e) => {e.preventDefault();onNav && onNav(page);};
  return (
    <section className="crossroads" id="crossroads" data-screen-label="06 Crossroads">
      <img className="stone-deco" src="./assets/stone-render-2.png" alt="" style={{
        right: -100, top: 80, width: 300, opacity: .4, transform: 'rotate(20deg)'
      }} />
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="crossroads__head">
          <span className="eyebrow" data-reveal>05 / Crossroad</span>
          <h2 className="h-1" data-reveal style={{ marginTop: 16 }}>kam dál?</h2>
        </div>

        <div className="cross-list-v2">
          {/* === HERO: KNOWHUB === */}
          <a href="#knowhub" onClick={go('knowhub')}
          className="cross cross--hero cross--knowhub"
          data-reveal style={{ "--reveal-delay": "0ms" }}>
            <div className="cross-kh__top">
              <span className="cross__num">Centrum vzdělávání
</span>
              <span className="cross-kh__pulse" aria-hidden="true">
                <span className="cross-kh__pulse-dot"></span>
                <span className="cross-kh__pulse-txt">12 nových událostí</span>
              </span>
            </div>
            <div className="cross-kh__title-block">
              <h3 className="cross__title" style={{ fontWeight: "400" }}>Knowhub</h3>
              <p className="cross-kh__lede">Naše centrum vzdělávání. Webináře, školení, podcast i kurz Master of Marketing. Předáváme Know How zadarmo nebo trochu peněz.



              </p>
            </div>
            <ul className="cross-kh__list">
              {CROSS_KH_PREVIEW.map((e, i) => {
                const labelMap = { free: 'Free', p: '$', pp: '$$' };
                return <li key={i} className="cross-kh__item">
                  <span className={"cross-kh__layer cross-kh__layer--" + e.layer}>{labelMap[e.layer]}</span>
                  <div className="cross-kh__item-text">
                    <span className="cross-kh__kicker">{e.kicker}</span>
                    <span className="cross-kh__name">{e.title}</span>
                  </div>
                  <span className="cross-kh__date">{e.date}</span>
                </li>;
              })}
            </ul>
            <div className="cross-kh__foot">
              <span className="cross-kh__layers">
                <span className="cross-kh__chip">Free</span>
                <span className="cross-kh__chip">$ placené</span>
                <span className="cross-kh__chip cross-kh__chip--accent">$$ hlavní</span>
              </span>
              <span className="cross-kh__cta">do knowhubu <span className="cross-kh__cta-arrow">→</span></span>
            </div>
          </a>

          {/* === O NÁS — rotující portréty === */}
          <a href="#onas" onClick={go('home')}
          className="cross cross--photo"
          data-reveal style={{ "--reveal-delay": "120ms" }}>
            <CrossPhotoRotator />
            <span className="cross-side__top">
              <span className="cross__num">Jsme Justmighty
</span>
            </span>
            <span className="cross-side__body">
              <h3 className="cross__title" style={{ fontWeight: "400" }}>O nás</h3>
              <p className="cross__desc">Kdo jsme, jak pracujeme a co jsou naše stavební kameny.</p>
            </span>
            <span className="cross-side__foot">
              <span className="cross-side__meta">~20 lidí
</span>
              <span className="cross-side__cta">poznej nás <span className="cross-side__cta-arrow">→</span></span>
            </span>
          </a>

          {/* === KARIÉRA — kameny === */}
          <a href="#kariera" onClick={go('kariera')} className="cross cross--stones" data-reveal style={{ "--reveal-delay": "240ms" }}>
            <span className="cross-side__media cross-side__media--stones" aria-hidden="true">
              <img src="./assets/stone-alabastr.png" alt="" className="cross-stone cross-stone--a" />
              <img src="./assets/stone-grafit.png" alt="" className="cross-stone cross-stone--b" />
              <img src="./assets/stone-obsidian.png" alt="" className="cross-stone cross-stone--c" />
              <img src="./assets/rubin.png" alt="" className="cross-stone cross-stone--r" />
              <img src="./assets/stone-diamant.png" alt="" className="cross-stone cross-stone--d" />
            </span>
            <span className="cross-side__top">
              <span className="cross__num">Přidej se k nám
</span>
            </span>
            <span className="cross-side__body">
              <h3 className="cross__title" style={{ fontWeight: "400" }}>Kariéra</h3>
              <p className="cross__desc">Možná hledáme právě tebe. Mrkni, co po tobě chceme a co ti nabízíme.</p>
            </span>
            <span className="cross-side__foot">
              <span className="cross-side__meta">volné pozice </span>
              <span className="cross-side__cta">otevřít pozice <span className="cross-side__cta-arrow">→</span></span>
            </span>
          </a>
        </div>
      </div>
    </section>);
}
window.Crossroads = Crossroads;