// services-crossroads.jsx — varianta Crossroads pro stránku Služby
// Hero = Naše projekty (bento preview), vedlejší = O nás + Domluvit schůzku

const SVCX_PROJECTS = [
{ id: 'tylex', title: 'tylex', tag: 'rebranding · 2025', img: './assets/case-tylex.jpg' },
{ id: 'domoplan', title: 'domoplan', tag: 'rebranding · web · 2023', img: './assets/case-domoplan.png' },
{ id: 'zabiny', title: 'žabiny brno', tag: 'kampaň · social · 2024', img: './assets/case-zabiny.jpg' },
{ id: 'adrick', title: 'adrick', tag: 'strategy · brand · 2024', img: './assets/case-adrick.jpg' }];


function ServicesCrossroads({ onNav }) {
  const go = (page) => (e) => {e.preventDefault();onNav && onNav(page);};
  return (
    <section className="crossroads" id="crossroads" data-screen-label="P2 Crossroad Sluzby">
      <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: NAŠE PROJEKTY === */}
          <a href="#projekty" onClick={go('projekty')}
          className="cross cross--hero cross--projects"
          data-reveal style={{ "--reveal-delay": "0ms" }}>
            <div className="svcx2">
              <span className="cross__num svcx2__kicker">Co jsme dělali</span>

              <div className="svcx2__hero">
                <figure
                  className="svcx2__photo"
                  style={{ backgroundImage: `url(${SVCX_PROJECTS[0].img})` }}
                  aria-hidden="true">
                  <figcaption className="svcx2__photo-tag mono">
                    <span className="svcx2__photo-name">{SVCX_PROJECTS[0].title}</span>
                    <span className="svcx2__photo-meta">{SVCX_PROJECTS[0].tag}</span>
                  </figcaption>
                </figure>

                <div className="svcx2__counter" aria-hidden="true">
                  <span className="svcx2__counter-num">500<span className="svcx2__counter-plus">+</span></span>
                  <span className="svcx2__counter-label">projektů<br />za 12 let</span>
                </div>
              </div>

              <div className="svcx2__bottom">
                <h3 className="cross__title svcx2__title" style={{ fontSize: "48px" }}>Naše <em style={{ fontSize: "48px" }}>projekty</em></h3>
                <span className="svcx2__cta">prohlédnout portfolio <span className="svcx2__cta-arrow">→</span></span>
              </div>
            </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" }}>
            <window.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>

          {/* === DOMLUVIT SCHŮZKU === */}
          <a href="#contact" onClick={go('home')}
          className="cross cross--stones cross--meeting cross--light"
          data-reveal style={{ "--reveal-delay": "240ms" }}>
            <span className="cross-side__top">
              <span className="cross__num">Spojme se</span>
            </span>
            <span className="cross-side__body">
              <h3 className="cross__title" style={{ fontWeight: 400 }}>Potkáme se <span style={{ color: 'var(--coral)' }}>online</span><br/>nebo <span style={{ color: 'var(--coral)' }}>osobně</span> po staru?</h3>
            </span>
            <span className="cross-side__foot">
              <span className="cross-side__meta">60 min · zdarma</span>
              <span className="cross-side__cta">domluvit termín <span className="cross-side__cta-arrow">→</span></span>
            </span>
          </a>
        </div>
      </div>
    </section>);

}

// expose CrossPhotoRotator from crossroads.jsx scope to global, plus this component
// (CrossPhotoRotator is defined in crossroads.jsx — re-export here too, just in case)
window.ServicesCrossroads = ServicesCrossroads;