// services.jsx — homepage sekce SLUŽBY
// 1:1 sdílí data se /sluzby (window.SVCF_DATA), ale jen 3 core (značka, web, propagace).
// Layout: vlevo popis + parts, vpravo JEDNA case card (kvůli redukci výšky).

function Services() {
  const onNav = (t, a) => { window.__appNav && window.__appNav(t, a); };
  const SVCF_DATA = window.SVCF_DATA || [];
  const items = SVCF_DATA.filter(s => s.kind === 'core');

  return (
    <section className="svcf svcf--home" id="sluzby" data-screen-label="04 Services">
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="svcf__intro">
          <span className="eyebrow" data-reveal>03 / Co umíme</span>
          <h2 className="svcf__hero" data-reveal style={{ marginTop: 16 }}>
            Dobrý marketing si <em>zaslouží každá firma</em>.
          </h2>
        </div>

        <div className="svcf__list">
          {items.map((s) => {
            const c = (s.cases && s.cases[0]) || null;
            return (
              <article key={s.id} className="svcf__item svcf__item--core svcf__item--home" data-reveal>
                <header className="svcf__head">
                  <span className="svcf__num mono">{s.num}</span>
                  <h3 className="svcf__title">{s.title}</h3>
                </header>

                <div className="svcf-home__row">
                  <div className="svcf-home__left">
                    <p className="svcf__lead">{s.lead}</p>
                    <ul className="svcf__parts">
                      {s.parts.map((p, i) => (
                        <li className="svcf__part" key={i}>
                          <span className="svcf__part-k">{p.k}</span>
                          <span className="svcf__part-v">{p.v}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  {c && (
                    <a
                      className={"svcf-home__case " + (c.img ? '' : 'svcf-home__case--placeholder')}
                      href="#projekty"
                      onClick={(e) => { e.preventDefault(); onNav('projekty'); }}
                      style={c.img ? { backgroundImage: `url(${c.img})` } : undefined}
                    >
                      {c.img && <span className="svcf-home__case-shade" aria-hidden="true" />}
                      <span className="mono svcf-home__case-kicker">↘ z naší práce</span>
                      <span className="svcf-home__case-tag mono">{c.tag}</span>
                      <span className="svcf-home__case-title">{c.title}</span>
                      <span className="svcf-home__case-arrow">→</span>
                    </a>
                  )}
                </div>
              </article>
            );
          })}
        </div>

        <div className="svc-cta" data-reveal>
          <a
            href="#"
            onClick={(e) => { e.preventDefault(); onNav('sluzby'); }}
            className="svc-cta__link"
          >
            <span className="mono">↘ chcete víc detailu</span>
            <strong>Podívejte se na detail služeb</strong>
            <span className="svc-cta__arrow">↗</span>
          </a>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;