// Quick City — Service detail + Services index pages
const { useState: useSv } = React;

function ServiceDetail({ slug }) {
  const { t, lang } = useT();
  // Pick translated overlay if available, else fall back to DE
  const base = window.QC_CONTENT.services[slug];
  const overlay = (lang === 'en' && window.QC_CONTENT.services_en && window.QC_CONTENT.services_en[slug])
               || (lang === 'tr' && window.QC_CONTENT.services_tr && window.QC_CONTENT.services_tr[slug])
               || null;
  if (!base) return <Stub brand="ifm" title={t('svc.notfound', 'Leistung nicht gefunden')} />;
  const data = overlay ? { ...base, ...overlay } : base;
  const brand = base.brand;
  const b = window.QC_DATA.brands[brand];

  return (
    <Layout brand={brand}>
      {/* HERO — editorial dark */}
      <section className="svchero">
        <div className="svchero__bg" style={{backgroundImage: data.heroImg ? `url(${data.heroImg})` : undefined}}></div>
        <div className="svchero__overlay" aria-hidden="true"></div>
        <div className="svchero__rail" aria-hidden="true">{data.kicker}</div>
        <div className="container svchero__inner">
          <nav className="svchero__crumbs">
            <a href={'/' + brand}>{brand === 'lns' ? 'Quick City Line Network Solution GmbH' : 'Quick City GmbH'}</a>
            <span className="svchero__sep">/</span>
            <a href={'/' + brand + '/leistungen'}>{t('nav.services', 'Leistungen')}</a>
            <span className="svchero__sep">/</span>
            <span>{t('svc.' + (slug.indexOf('/') !== -1 ? slug.split('/').pop() : slug) + '.title', data.crumb)}</span>
          </nav>
          <div className="svchero__band">
            <span className="svchero__kicker">{data.kicker}</span>
            <span className="svchero__rule"></span>
            <span className="svchero__brand">{brand === 'lns' ? 'Quick City Line Network Solution GmbH' : 'Quick City GmbH'}</span>
          </div>
          <h1 className="svchero__title">{t('svc.' + (slug.indexOf('/') !== -1 ? slug.split('/').pop() : slug) + '.title', data.title)}</h1>
          <div className="svchero__bottom">
            <p className="svchero__lead">{data.lead}</p>
            <div className="svchero__icon"><img src={data.icon} alt="" /></div>
          </div>
        </div>
      </section>
      <style>{`
        .svchero { position: relative; min-height: clamp(560px, 78vh, 760px); background: #0d0d0d; color: #fff; overflow: hidden; padding: 0; display: flex; }
        .svchero__bg { position: absolute; inset: 0; background: linear-gradient(135deg, #2a2a2a 0%, #0d0d0d 100%) center/cover no-repeat; z-index: 0; }
        .svchero__bg[style*="url"] { background-blend-mode: normal; }
        .svchero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.35) 35%, rgba(13,13,13,0.85) 100%), linear-gradient(120deg, rgba(220,38,38,0.18) 0%, transparent 55%); z-index: 1; pointer-events: none; }
        .svchero__rail { position: absolute; right: 22px; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding: 56px 0; border-left: 2px solid var(--accent); pointer-events: none; }
        @media (max-width: 980px) { .svchero__rail { display: none; } }
        .svchero__inner { position: relative; z-index: 2; width: 100%; padding: 96px 24px 72px; display: flex; flex-direction: column; gap: 0; }
        @media (min-width: 981px) { .svchero__inner { padding: 120px 64px 80px; } }
        .svchero__crumbs { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: auto; padding-bottom: 56px; }
        .svchero__crumbs a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
        .svchero__crumbs a:hover { color: #fff; }
        .svchero__crumbs > span:last-child { color: #fff; }
        .svchero__sep { color: rgba(255,255,255,0.25); }
        .svchero__band { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; font-size: 11px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; }
        .svchero__kicker { color: var(--accent); }
        .svchero__rule { flex: 0 0 56px; height: 2px; background: var(--accent); }
        .svchero__brand { color: rgba(255,255,255,0.65); }
        .svchero__title { font-family: var(--font-display, var(--font)); font-size: clamp(54px, 9vw, 132px); font-weight: 800; line-height: 0.94; letter-spacing: -0.025em; margin: 0 0 48px; color: #fff; max-width: 16ch; text-wrap: balance; }
        .svchero__bottom { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.12); }
        @media (max-width: 720px) { .svchero__bottom { grid-template-columns: 1fr; } }
        .svchero__lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 60ch; margin: 0; }
        .svchero__icon { width: 88px; height: 88px; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; padding: 18px; flex-shrink: 0; background: rgba(220,38,38,0.06); }
        .svchero__icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
        @media (max-width: 720px) { .svchero__icon { width: 72px; height: 72px; padding: 14px; } }
      `}</style>

      {/* INTRO */}
      <section className="svc2-intro">
        <div className="container">
          <div className="svc2-intro__grid">
            <div>
              <div className="svc2-intro__label">{t('svc.intro.label', 'Worum es geht')}</div>
              <h2 className="svc2-intro__h">{data.introH}</h2>
            </div>
            <div className="svc2-intro__body">
              {data.introBody.map((p,i) => <p key={i} dangerouslySetInnerHTML={{__html: p}} />)}
            </div>
          </div>
        </div>
      </section>

      {/* SCOPE */}
      {Array.isArray(data.scope) && data.scope.length > 0 && (
      <section className="svc2-scope">
        <div className="container">
          <div className="section-label">{t('svc.scope.label', 'Leistungsumfang')}</div>
          <h2 className="section-title">{t('svc.scope.title', 'Was wir abdecken')}</h2>
          <div className="svc2-scope__grid">
            {data.scope.map((s,i) => (
              <div key={i} className="svc2-scope__item">
                <div className="svc2-scope__body">
                  <div className="svc2-scope__badge">{String(i+1).padStart(2,'0')}</div>
                  <h3 className="svc2-scope__h">{s.h}</h3>
                  <p className="svc2-scope__t">{s.t}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* MID BAND — colored statement banner (only if data present) */}
      {data.band && (
      <section className="svc2-band">
        <div className="container svc2-band__inner">
          <h2 className="svc2-band__h">{data.band.h}<span className="svc2-band__dot">.</span></h2>
          <p className="svc2-band__t">{data.band.t}</p>
        </div>
        <style>{`
          .svc2-band { background: var(--accent); color: #fff; padding: 72px 0; }
          .svc2-band__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
          @media (max-width: 820px) { .svc2-band__inner { grid-template-columns: 1fr; gap: 24px; } }
          .svc2-band__h { font-size: clamp(28px, 4vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; color: #fff; }
          .svc2-band__dot { color: rgba(255,255,255,0.55); }
          .svc2-band__t { font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; line-height: 1.6; color: rgba(255,255,255,0.92); margin: 0; }
        `}</style>
      </section>
      )}

      {/* WAS UNS UNTERSCHEIDET — reusable, only if data present */}
      {Array.isArray(data.diff) && data.diff.length > 0 && (
      <section className="svc2-diff">
        <div className="container">
          <div className="section-label" style={{color:'var(--accent)'}}>{t('svc.diff.label', 'Was uns unterscheidet')}</div>
          <h2 className="section-title">{data.diffH || t('svc.diff.title', 'Mehr als nur räumen.')}</h2>
          <div className="svc2-diff__grid">
            {data.diff.map((d,i) => (
              <div key={i} className="svc2-diff__card">
                <div className="svc2-diff__icon" aria-hidden="true">{d.icon}</div>
                <h3 className="svc2-diff__h">{d.h}</h3>
                <p className="svc2-diff__t">{d.t}</p>
              </div>
            ))}
          </div>
          {data.diffClose && <p className="svc2-diff__close">{data.diffClose}</p>}
        </div>
        <style>{`
          .svc2-diff { background: #f5f4f0; color: #1a1a1a; padding: 96px 0; }
          .svc2-diff__close { max-width: 70ch; margin: 44px auto 0; text-align: center; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; color: #444; font-weight: 500; }
          .svc2-diff__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 48px; }
          .svc2-diff__card { background: #fff; padding: 38px 32px 34px; border-top: 3px solid var(--accent); box-shadow: 0 1px 0 rgba(0,0,0,0.04); transition: transform 0.25s, box-shadow 0.25s; }
          .svc2-diff__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); }
          .svc2-diff__icon { font-size: 28px; line-height: 1; margin-bottom: 22px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: rgba(220,38,38,0.07); border: 1px solid rgba(220,38,38,0.25); }
          .svc2-diff__h { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; color: #1a1a1a; }
          .svc2-diff__t { font-size: 14.5px; line-height: 1.7; color: #555; margin: 0; }
        `}</style>
      </section>
      )}

      {/* IHR ANSPRECHPARTNER — vorerst ausgeblendet. Zum Reaktivieren: SHOW_CONTACT = true */}
      {(() => {
        const SHOW_CONTACT = true;
        if (!SHOW_CONTACT) return null;
        const td = window.TEAM_DATA && window.TEAM_DATA[brand];
        const shortSlug = slug.indexOf('/') !== -1 ? slug.split('/').pop() : slug;
        const cidRaw = td && td.contacts && td.contacts[shortSlug];
        if (!cidRaw) return null;
        const cids = Array.isArray(cidRaw) ? cidRaw : [cidRaw];
        const all = [...(td.leadership||[]), ...(td.team||[])];
        const people = cids.map(id => all.find(p => p.id === id)).filter(Boolean);
        if (people.length === 0) return null;
        const ini = (n) => n.split(' ').map(w => w[0]).join('').slice(0,2).toUpperCase();
        return (
          <section className="svc2-contact">
            <div className="container">
              <div className="svc2-contact__head">{t('svc.contact.label', 'Ihr Ansprechpartner')}{people.length > 1 ? ' (' + people.length + ')' : ''}</div>
              <div className={'svc2-contact__grid' + (people.length > 1 ? ' is-multi' : '')}>
                {people.map((person) => (
                  <div className="svc2-contact__card" key={person.id}>
                    <div className="svc2-contact__ph">{person.photo ? <img src={person.photo} alt={person.name} /> : ini(person.name)}</div>
                    <div className="svc2-contact__body">
                      <div className="svc2-contact__name">{person.name}</div>
                      <div className="svc2-contact__role">{person.role}</div>
                      {person.bio && <p className="svc2-contact__bio">{person.bio}</p>}
                      <div className="svc2-contact__details">
                        {person.email && (
                          <a className="svc2-contact__row" href={`mailto:${person.email}`}>
                            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
                            <span>{person.email}</span>
                          </a>
                        )}
                        <a className="svc2-contact__row" href={`tel:${(b.phone||'').replace(/[^+\d]/g,'')}`}>
                          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L20 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>
                          <span>{b.phone}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <style>{`
              .svc2-contact { background: #f5f4f0; padding: 80px 0; }
              .svc2-contact__head { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; max-width: 980px; margin-left: auto; margin-right: auto; }
              .svc2-contact__grid { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 24px; }
              .svc2-contact__grid.is-multi { max-width: 980px; grid-template-columns: 1fr 1fr; }
              @media (max-width: 760px) { .svc2-contact__grid.is-multi { grid-template-columns: 1fr; } }
              .svc2-contact__card { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid #ececec; border-radius: 4px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,0.05); }
              /* single card: photo left, body right */
              .svc2-contact__grid:not(.is-multi) .svc2-contact__ph { width: 200px; }
              /* multi cards: photo on top, body below — roomy */
              .svc2-contact__grid.is-multi .svc2-contact__card { flex-direction: column; }
              .svc2-contact__grid.is-multi .svc2-contact__ph { width: 100%; height: 240px; }
              @media (max-width: 640px) { .svc2-contact__card { flex-direction: column; } .svc2-contact__grid:not(.is-multi) .svc2-contact__ph { width: 100%; height: 220px; } }
              .svc2-contact__ph { flex-shrink: 0; background: linear-gradient(135deg,#e9e9e9,#d2d2d2); display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; color: #aaa; overflow: hidden; }
              .svc2-contact__ph img { width: 100%; height: 100%; object-fit: cover; }
              .svc2-contact__body { flex: 1; padding: 36px 40px; }
              @media (max-width: 640px) { .svc2-contact__body { padding: 28px 24px; } }
              .svc2-contact__name { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #1a1a1a; line-height: 1.1; }
              .svc2-contact__role { font-size: 15px; color: #666; margin-top: 4px; }
              .svc2-contact__bio { font-size: 14.5px; line-height: 1.65; color: #555; margin: 16px 0 20px; max-width: 46ch; }
              .svc2-contact__details { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid #eee; }
              .svc2-contact__row { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: #1a1a1a; text-decoration: none; font-weight: 600; width: fit-content; word-break: break-all; }
              .svc2-contact__row svg { color: var(--accent); flex-shrink: 0; }
              .svc2-contact__row:hover { color: var(--accent); }
            `}</style>
          </section>
        );
      })()}

      {/* QUOTE BANNER — hidden (band replaces it; set window.SVC_QUOTE = true to restore) */}
      {window.SVC_QUOTE && data.quote && (
      <section className="svc2-banner">
        <div className="svc2-banner__quote">
          <q>{data.quote.q}</q>
          <cite>{data.quote.cite}</cite>
        </div>
      </section>
      )}

      {/* PROCESS — hidden (set window.SVC_PROCESS = true to restore) */}
      {window.SVC_PROCESS && (
      <section className="svc2-process">
        <div className="container">
          <div className="section-label">{t('svc.process.label', 'Unser Ablauf')}</div>
          <h2 className="section-title">{t('svc.process.title', 'So gehen wir vor')}</h2>
          <div className="svc2-process__row">
            {data.process.map((p,i) => (
              <div key={i} className="svc2-process__step">
                <div className="svc2-process__num">{String(i+1).padStart(2,'0')}</div>
                <h4 className="svc2-process__h">{p.h}</h4>
                <p className="svc2-process__t">{p.t}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* FAQ + CTA — temporarily hidden (set window.SVC_FAQ_CTA = true to restore) */}
      {window.SVC_FAQ_CTA && (
      <section className="svc2-faq">
        <div className="container svc2-faq__inner">
          <div className="section-label">{t('svc.faq.label', 'FAQ')}</div>
          <h2 className="section-title">{t('svc.faq.title', 'Häufig gefragt')}</h2>
          {data.faq.map((f,i) => (
            <details key={i} className="svc2-faq__item">
              <summary>{f.q}</summary>
              <p>{f.a}</p>
            </details>
          ))}
          <div className="svc2-cta">
            <div>
              <div className="label">{t('svc.cta.label', 'Bereit?')}</div>
              <h3>{data.ctaH}</h3>
            </div>
            <div>
              <p>{data.ctaT}</p>
              <a className="btn btn--primary" href={'/' + brand + '/kontakt'}>{t('svc.cta.btn', 'Anfrage senden →')}</a>
            </div>
          </div>
        </div>
      </section>
      )}
    </Layout>
  );
}

function ServicesIndex({ brand }) {
  const { t } = useT();
  const services = brand === 'ifm' ? window.QC_DATA.ifmServices : window.QC_DATA.lnsServices;
  const otherBrand = brand === 'ifm' ? 'lns' : 'ifm';
  // Hero copy via i18n keys; default fallback in DE
  const heroH = brand === 'ifm'
    ? t('ifm.svcidx.h', 'Was wir können.')
    : t('lns.svcidx.h', 'Was wir bauen.');
  const heroP = brand === 'ifm'
    ? t('ifm.svcidx.p', 'Fünf Disziplinen, ein Anspruch: Außenflächen, die zu jeder Jahreszeit funktionieren — sicher, gepflegt, dokumentiert.')
    : t('lns.svcidx.p', 'Vier Disziplinen, eine Mannschaft: Tiefbau, Glasfaser, Straßen­bau und Verkehrssicherung — von der Spülbohrung bis zur Asphaltdecke.');
  const otherTitle = brand === 'ifm'
    ? t('svcidx.other.lns.title', 'Tiefbau, Netzausbau, Straßenbau')
    : t('svcidx.other.ifm.title', 'Winterdienst, Pflege, Reinigung');
  const otherSub = brand === 'ifm'
    ? t('svcidx.other.lns.sub', 'Quick City LNS ergänzt das IFM-Portfolio um Erd- und Tiefbau, Telekommunikations-Netzausbau und Verkehrsflächenbau. Häufig in einem gemeinsamen Auftrag.')
    : t('svcidx.other.ifm.sub', 'Quick City IFM betreut Außenanlagen — Winterdienst, Pflege, Reinigung — als Komplement zum Tiefbau.');
  const otherKicker = t('svcidx.other.kicker', 'Auch für {brand}-Leistungen?').replace('{brand}', otherBrand.toUpperCase());
  const otherCta = t('svcidx.other.cta', 'Zu den {brand}-Leistungen →').replace('{brand}', otherBrand.toUpperCase());
  // Translate service title/sub via QC_CONTENT overlay if available (services from data.js are DE only)
  const lang = (window.QCI18N && window.QCI18N.getLang()) || 'de';
  const overlay = lang === 'en' ? window.QC_CONTENT.services_en : (lang === 'tr' ? window.QC_CONTENT.services_tr : null);

  return (
    <Layout brand={brand}>
      <section className="svc-index-hero">
        <div className="container">
          <h1>{heroH.split(' ').slice(0,-1).join(' ')} <strong>{heroH.split(' ').slice(-1)[0].replace('.','')}</strong>.</h1>
          <p>{heroP}</p>
        </div>
      </section>
      <section className="svc-index">
        <div className="container">
          <div className="svc-index__grid">
            {services.map((s,i) => {
              const ov = overlay && overlay[s.slug];
              const title = t('svc.' + s.slug + '.title', ov ? ov.title : s.title);
              const sub = t('svc.' + s.slug + '.sub', ov ? ov.lead : s.sub);
              return (
                <a key={s.slug} className="svc-index__card" href={'/' + brand + '/' + s.slug}>
                  <img
                    src={'assets/icons/' + brand + '-' + s.slug + '.png'}
                    alt=""
                    onError={(e) => {
                      // Fallback: inline SVG for missing icons (e.g. lns-stoerungsdienst)
                      e.target.style.display = 'none';
                      const fb = e.target.parentElement.querySelector('.svc-index__icon-fb');
                      if (fb) fb.style.display = 'block';
                    }}
                  />
                  <svg className="svc-index__icon-fb" viewBox="0 0 64 64" fill="none" stroke="#1a1a1a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{display:'none', width:64, height:64, flexShrink:0}}>
                    <circle cx="32" cy="32" r="22"/>
                    <path d="M32 18 L32 32 L42 38"/>
                    <path d="M48 14 L52 10 M16 14 L12 10"/>
                  </svg>
                  <div>
                    <div className="svc-index__num">{String(i+1).padStart(2,'0')} — {brand.toUpperCase()}</div>
                    <h2 className="svc-index__h">{title}</h2>
                    <p className="svc-index__t">{sub}</p>
                    <span className="svc-index__more">{t('svcidx.more', 'Zur Leistung')}</span>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
      <section style={{background:'var(--light)', padding:'80px 0'}}>
        <div className="container" style={{textAlign:'center'}}>
          <div className="section-label" style={{justifyContent:'center'}}>{otherKicker}</div>
          <h2 className="section-title">{otherTitle}</h2>
          <p style={{maxWidth:620, margin:'0 auto 32px', fontSize:16, lineHeight:1.7, color:'#555'}}>{otherSub}</p>
          <a className="btn btn--primary" href={'/' + otherBrand + '/leistungen'} style={{ backgroundColor: window.QC_DATA.brands[otherBrand].accent, borderColor: window.QC_DATA.brands[otherBrand].accent, color: '#fff' }}>{otherCta}</a>
        </div>
      </section>
    </Layout>
  );
}

Object.assign(window, { ServiceDetail, ServicesIndex });
