// ============================================================
// SERVICES PAGE — hero + zigzag rows + CTA back to contact
// Requires shared.jsx loaded first
// ============================================================

function ServicesHero({ lang }) {
  const t = i18n[lang];
  return (
    <section className="relative border-b border-line bg-paper overflow-hidden">
      <div className="absolute inset-0 dot-pattern opacity-50 pointer-events-none" />
      {/* yellow accent bar */}
      <div className="absolute top-0 left-0 right-0 h-1 bg-yel" />
      <div className="relative max-w-7xl mx-auto px-6 md:px-10 pt-10 md:pt-12 pb-10 md:pb-12">
        {/* breadcrumb */}
        <nav className="flex items-center gap-2 text-[12px] font-mono uppercase tracking-[0.2em] text-muted">
          <a href="index.html" className="hover:text-navy inline-flex items-center gap-1.5"><ArrowLeftIcon /> {t.home}</a>
          <span className="opacity-50">/</span>
          <span className="text-navy">{t.nav_services}</span>
        </nav>
        <Mono className="block mt-8 opacity-60">{t.services_hero_label}</Mono>
        <h1 className="font-sora font-semibold leading-[0.95] tracking-[-0.03em] mt-4 text-[clamp(48px,8vw,96px)]">
          {t.services_hero_title}<span style={{ color: '#F5C518' }}>.</span>
        </h1>
        <p className="mt-6 max-w-2xl text-[17px] md:text-[19px] leading-relaxed text-ink/80">
          {t.services_hero_subtitle}
        </p>
      </div>
    </section>);

}

// === single zigzag row ===
function ServiceRow({ service, index, lang }) {
  const t = i18n[lang];
  const reverse = index % 2 === 1;
  const [imgFailed, setImgFailed] = useState(false);
  const num = String(index + 1).padStart(2, '0');
  return (
    <article id={service.id}
    className="service-row relative scroll-mt-[100px] border-b border-line">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-10 md:py-14">
        <div className={`grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center ${reverse ? 'lg:[&>*:first-child]:order-2' : ''}`}>
          {/* TEXT */}
          <div>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-12 h-12 rounded-full bg-navy/5 flex items-center justify-center shrink-0">
                <ServiceIcon path={service.path} size={24} />
              </div>
              <Mono className="text-muted">{num} · {(lang === 'ro' ? service.label_ro : service.label_en).toUpperCase()}</Mono>
            </div>
            <h2 className="font-sora font-semibold text-[34px] md:text-[44px] leading-[1.05] tracking-[-0.02em]">
              {lang === 'ro' ? service.label_ro : service.label_en}
            </h2>
            <p className="mt-6 text-[16.5px] md:text-[17.5px] leading-[1.65] text-ink/80" style={{ textWrap: 'pretty' }}>
              {lang === 'ro' ? service.long_ro : service.long_en}
            </p>
            <div className="mt-8 flex items-center gap-5">
              <a href="index.html#contact"
              className="inline-flex items-center gap-2 bg-yel text-navy font-sora font-semibold px-6 py-3 rounded-full hover:bg-yel/90 transition-colors focus-yel">
                <span>{t.services_cta_btn}</span><ArrowRightIcon />
              </a>
              <a href="index.html#portfolio"
              className="text-[14px] font-sora font-semibold text-navy/70 hover:text-navy"
              style={{ borderBottom: '2px solid #F5C518', paddingBottom: '2px' }}>
                {lang === 'ro' ? 'Vezi proiecte' : 'See projects'}
              </a>
            </div>
          </div>
          {/* IMAGE */}
          <div className="relative">
            <div className="relative aspect-[4/3] rounded-2xl overflow-hidden bg-navy border border-line shadow-[0_18px_40px_rgba(14,42,71,0.10)]">
              {!imgFailed ?
              <img src={service.image}
              alt={lang === 'ro' ? service.label_ro : service.label_en}
              loading="lazy"
              className="absolute inset-0 w-full h-full object-cover"
              onError={() => setImgFailed(true)} /> :

              <div className="absolute inset-0 bg-navy flex items-center justify-center">
                  <div className="text-center">
                    <ServiceIcon path={service.path} size={88} color="#F5C518" />
                    <div className="font-mono text-paper/55 text-[10px] tracking-[0.2em] mt-4">EPT · IMAGE</div>
                  </div>
                </div>
              }
              {/* index badge */}
              <div className="absolute top-4 left-4 px-3 py-1.5 bg-paper text-navy font-mono text-[11px] tracking-[0.2em] rounded-full shadow-sm">
                {num}
              </div>
              {/* yellow corner accent */}
              <div className={`absolute ${reverse ? 'top-4 right-4' : 'bottom-4 right-4'} w-12 h-12 border-2 border-yel rounded-full`} />
            </div>
          </div>
        </div>
      </div>
    </article>);

}

function ServicesList({ lang }) {
  // Hash scroll + flash highlight
  useEffect(() => {
    const flash = (id) => {
      const el = document.getElementById(id);
      if (!el) return;
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      el.classList.remove('flash-yel');
      void el.offsetWidth;
      el.classList.add('flash-yel');
      setTimeout(() => el.classList.remove('flash-yel'), 2200);
    };
    if (window.location.hash) {
      const id = window.location.hash.slice(1);
      setTimeout(() => flash(id), 250);
    }
    const onHash = () => {
      if (window.location.hash) flash(window.location.hash.slice(1));
    };
    window.addEventListener('hashchange', onHash);
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      if (!id) return;
      if (window.location.hash === '#' + id) {
        e.preventDefault();
        flash(id);
      }
    };
    document.addEventListener('click', onClick);
    return () => {
      window.removeEventListener('hashchange', onHash);
      document.removeEventListener('click', onClick);
    };
  }, []);
  return (
    <div>
      {SERVICES.map((s, i) => <ServiceRow key={s.id} service={s} index={i} lang={lang} />)}
    </div>);

}

// ============================================================
// SERVICES CTA — navy band with contact button
// ============================================================
function ServicesCTA({ lang }) {
  const t = i18n[lang];
  return (
    <section className="bg-navy text-paper relative overflow-hidden">
      <div className="absolute inset-0 dot-pattern-light pointer-events-none" />
      <div className="relative max-w-7xl mx-auto px-6 md:px-10 py-14 md:py-16 grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
        <div>
          <Mono className="text-yel">06 · {t.nav_contact.toUpperCase()}</Mono>
          <h2 className="font-sora font-semibold text-[36px] md:text-[48px] leading-[1.05] tracking-[-0.02em] mt-4">
            {t.services_cta_title}
          </h2>
          <p className="mt-5 text-[16.5px] md:text-[17.5px] leading-relaxed text-paper/75 max-w-lg">
            {t.services_cta_meta}
          </p>
        </div>
        <div className="flex flex-col sm:flex-row md:justify-end items-start sm:items-center gap-4">
          <a href="index.html#contact"
          className="inline-flex items-center gap-2 bg-yel text-navy font-sora font-semibold px-7 py-4 rounded-full hover:bg-yel/90 transition-colors focus-yel">
            <span>{t.services_cta_btn}</span><ArrowRightIcon />
          </a>
          <a href={(window.CONTACT||{}).phone_link||'tel:+40700000000'}
          className="inline-flex items-center gap-2 text-paper border border-paper/25 px-6 py-4 rounded-full hover:bg-paper/10 transition-colors">
            <PhoneIcon /><span className="font-mono tracking-wider text-[13px]">{(window.CONTACT||{}).phone||'+40 700 000 000'}</span>
          </a>
        </div>
      </div>
    </section>);

}

function App() {
  const [lang, setLang] = useState('ro');
  const [mobileOpen, setMobileOpen] = useState(false);
  return (
    <div className="bg-paper text-navy min-h-screen">
      <Header lang={lang} setLang={setLang} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} servicesBase="servicii.html" />
      <main>
        <ServicesHero lang={lang} />
        <ServicesList lang={lang} />
        <ServicesCTA lang={lang} />
      </main>
      <Footer lang={lang} />
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);