// Quick City — Info pages: About, Companies, Tech, Values, Certs, Team, Contact, Projects
const { useState: useI, useMemo: useIm } = React;
const HomeStyles = window.HomeStyles;

/* ─────────────────────────────────────────
   Shared: a Legacy-Look hero matching home pages
───────────────────────────────────────── */
function PageHero({ brand, eyebrow, title, sub, image, side = 'left' }) {
  // side: which side the SVG-shape sits on. ifm=left, lns=right.
  const isIfm = brand === 'ifm';
  return (
    <section className={`hh hh--${brand} hh--info`}>
      {image && <img className="hh__img" src={image} alt="" />}
      <div className="hh__shape">
        <svg viewBox="0 0 1440 800" preserveAspectRatio={side === 'left' ? 'xMinYMid slice' : 'xMaxYMid slice'} xmlns="http://www.w3.org/2000/svg">
          {side === 'left' ?
          <>
              <polygon points="0,0 420,0 320,800 0,800" fill={isIfm ? '#a01215' : '#c44f0f'} opacity="0.95" />
              <polygon points="0,0 360,0 480,400 360,800 0,800 120,400" fill={isIfm ? '#ce171b' : '#eb6119'} />
            </> :

          <>
              <polygon points="1440,0 1020,0 1120,800 1440,800" fill={isIfm ? '#a01215' : '#c44f0f'} opacity="0.95" />
              <polygon points="1440,0 1080,0 960,400 1080,800 1440,800 1320,400" fill={isIfm ? '#ce171b' : '#eb6119'} />
            </>
          }
        </svg>
      </div>
      <div className="hh__content" style={side === 'right' ? { right: '6%', left: 'auto', textAlign: 'right' } : null}>
        <div className="hh__eyebrow">{eyebrow}</div>
        <div className="hh__title" dangerouslySetInnerHTML={{ __html: title }} />
        {sub && <p className="hh__sub">{sub}</p>}
      </div>
    </section>);

}

/* small inline-styles ensure info hero a bit shorter than home hero */
function InfoHeroStyles() {
  React.useEffect(() => {
    if (document.getElementById('info-hero-styles')) return;
    const s = document.createElement('style');
    s.id = 'info-hero-styles';
    s.textContent = `
      .hh--info { height: 56vh; min-height: 440px; max-height: 620px; }
      .hh--info .hh__title { font-size: clamp(32px, 4.2vw, 56px); }
      .hh--info .hh__content { max-width: 540px; }
      .page > .hh--info:first-child { height: 56vh; min-height: 440px; max-height: 620px; }

      /* Team page bits */
      .tm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
      .tm-chip { background:#fff; border:1px solid #e8e8e8; padding:10px 18px; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; cursor:pointer; transition: all .2s; color:#444; }
      .tm-chip:hover { border-color: var(--accent); color: var(--accent); }
      .tm-chip.active { background: var(--accent); color:#fff; border-color: var(--accent); }
      .tm-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
      @media (max-width: 1100px) { .tm-grid { grid-template-columns: repeat(3,1fr); } }
      @media (max-width: 800px)  { .tm-grid { grid-template-columns: repeat(2,1fr); } }
      .tm-card { background:#fff; padding: 28px 24px; cursor:pointer; transition: transform .25s, box-shadow .25s; border-bottom: 3px solid transparent; position:relative; }
      .tm-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); border-bottom-color: var(--accent); }
      .tm-card__ph { width: 88px; height: 88px; border-radius:50%; background: linear-gradient(135deg, #efefef, #d8d8d8); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:900; color:#999; letter-spacing:0.05em; margin-bottom:18px; }
      .tm-card__name { font-size:16px; font-weight:700; margin-bottom:4px; }
      .tm-card__role { font-size:12px; color:#666; line-height:1.5; margin-bottom:8px; }
      .tm-card__dept { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color: var(--accent); }

      /* Org chart */
      .tm-org { padding: 40px 0 8px; }
      .tm-org__row { display: flex; gap: 24px; justify-content:center; flex-wrap:wrap; }
      .tm-org__connector { width: 2px; height: 24px; background: var(--accent); margin: 0 auto; }
      .tm-org__crossbar { height: 2px; background: var(--accent); width: min(560px, 80%); margin: 0 auto; }
      .tm-org-card { background: #fff; border-top: 4px solid var(--accent); padding: 24px 28px; min-width: 240px; max-width: 280px; cursor:pointer; transition: transform .2s, box-shadow .2s; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
      .tm-org-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
      .tm-org-card__ph { width: 60px; height: 60px; border-radius:50%; background: linear-gradient(135deg, #efefef, #d8d8d8); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; color:#999; margin-bottom:14px; }
      .tm-org-card__name { font-size:15px; font-weight:700; }
      .tm-org-card__role { font-size:12px; color:#666; line-height:1.5; margin-top:2px; }
      .tm-org-card__dept { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color: var(--accent); margin-top:8px; }

      /* Modal */
      .tm-modal { position:fixed; inset:0; background: rgba(20,20,20,0.7); display:flex; align-items:center; justify-content:center; z-index:1000; padding:24px; }
      .tm-modal__box { background:#fff; max-width:560px; width:100%; padding: 48px 48px 40px; position:relative; border-top: 6px solid var(--accent); }
      .tm-modal__close { position:absolute; top:14px; right:18px; background:none; border:none; font-size:28px; cursor:pointer; color:#888; }
      .tm-modal__ph { width:100px; height:100px; border-radius:50%; background: linear-gradient(135deg, #efefef, #d8d8d8); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:900; color:#999; margin-bottom:20px; }
      .tm-modal__name { font-size:24px; font-weight:700; margin-bottom:4px; }
      .tm-modal__role { font-size:14px; color:#555; }
      .tm-modal__dept { font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color: var(--accent); margin-top:12px; }
      .tm-modal__bio { font-size:14.5px; line-height:1.75; color:#444; margin-top:20px; }

      /* Contact form */
      .ck-grid { display:grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
      @media (max-width: 900px) { .ck-grid { grid-template-columns: 1fr; gap: 32px; } }
      .ck-info { display:flex; flex-direction:column; gap: 2px; }
      .ck-info__block { background:#fff; padding: 28px 32px; border-left: 4px solid var(--accent); }
      .ck-info__label { font-size:10px; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color: var(--accent); margin-bottom:10px; }
      .ck-info__value { font-size:15px; line-height:1.7; color:#222; white-space: pre-line; }
      .ck-info__value a { color: inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.15); }
      .ck-info__value a:hover { color: var(--accent); border-color: var(--accent); }
      .ck-form { background:#fff; padding: 40px 44px; border-top: 4px solid var(--accent); }
      @media (max-width: 600px) { .ck-form { padding: 28px; } }
      .ck-form__label { font-size:10px; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color: var(--accent); margin-bottom:8px; }
      .ck-form__title { font-size:24px; font-weight:900; margin-bottom:24px; text-transform:uppercase; letter-spacing:-0.01em; }
      .ck-row { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
      @media (max-width: 600px) { .ck-row { grid-template-columns: 1fr; } }
      .ck-field { margin-bottom: 14px; }
      .ck-field label { display:block; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#555; margin-bottom:6px; }
      .ck-field input, .ck-field select, .ck-field textarea {
        width:100%; padding:12px 14px; border:1px solid #ddd; background:#fafafa; font-family:inherit; font-size:14px; color:#222; transition: border-color .2s, background .2s;
      }
      .ck-field input:focus, .ck-field select:focus, .ck-field textarea:focus {
        outline:none; border-color: var(--accent); background:#fff;
      }
      .ck-field textarea { min-height: 120px; resize: vertical; }
      .ck-submit { display:inline-flex; align-items:center; gap:12px; background: var(--accent); color:#fff; border:none; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; padding:14px 28px; cursor:pointer; transition: opacity .2s; }
      .ck-submit:hover { opacity:0.85; }
      .ck-success { padding: 32px 0; text-align:center; }
      .ck-success__check { width:64px; height:64px; border-radius:50%; background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 18px; }

      /* Cert list (legacy) */
      .cert-list { display: grid; gap: 4px; }
      .cert-row { background:#fff; padding: 36px 40px; display:grid; grid-template-columns: 220px 1fr auto; gap: 40px; align-items:center; border-left: 4px solid var(--accent); }
      @media (max-width: 800px) { .cert-row { grid-template-columns: 1fr; gap:20px; padding: 28px; } }
      .cert-row__img { background:#f5f5f5; padding: 20px; text-align:center; border: none; cursor: default; font: inherit; color: inherit; position: relative; width: 100%; }
      .cert-row__img--clickable { cursor: zoom-in; transition: background 0.2s, transform 0.2s; }
      .cert-row__img--clickable:hover { background: #ececec; transform: scale(1.02); }
      .cert-row__img--clickable:hover .cert-row__zoom { opacity: 1; }
      .cert-row__img img { max-width:100%; height:auto; display:block; margin:0 auto; }
      .cert-row__placeholder { color:#999; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; padding: 30px 0; font-weight:700; }
      .cert-row__zoom { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
      .cert-row__badge { position: absolute; left: 8px; bottom: 8px; width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 1px 5px rgba(0,0,0,0.2); }

      /* Cert lightbox */
      .cert-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 40px; animation: certLbFadeIn 0.18s ease-out; }
      @keyframes certLbFadeIn { from { opacity: 0; } to { opacity: 1; } }
      .cert-lightbox__close { position: absolute; top: 24px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; border: none; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
      .cert-lightbox__close:hover { background: rgba(255,255,255,0.2); }
      .cert-lightbox__inner { max-width: min(1200px, 92vw); max-height: 85vh; display: flex; flex-direction: column; align-items: center; gap: 16px; }
      .cert-lightbox__inner img { max-width: 100%; max-height: 78vh; height: auto; width: auto; object-fit: contain; background: #fff; padding: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
      .cert-lightbox__label { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
      .cert-row__code { font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color: var(--accent); margin-bottom:8px; }
      .cert-row__name { font-size:22px; font-weight:700; margin-bottom:14px; line-height:1.2; }
      .cert-row__meta { display:grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size:13.5px; color:#555; line-height:1.6; }
      .cert-row__meta dt { font-weight:700; color:#222; }
      .cert-row__valid { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#888; white-space:nowrap; }
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

function PageHead({ brand, crumbs, title, sub, image }) {
  const b = window.QC_DATA.brands[brand];
  const cls = 'page-head' + (image ? ' page-head--image' : '');
  const style = image ? { '--bg-image': `url("${image}")` } : null;
  return (
    <section className={cls} style={{ ...style, opacity: "51" }}>
      <div className="container">
        <div className="page-head__crumbs">
          <a href={b.home}>{brand === 'lns' ? 'Quick City Line Network Solution GmbH' : 'Quick City GmbH'}</a>
          {crumbs.map((c, i) => <React.Fragment key={i}> <span style={{ margin: '0 8px', opacity: 0.5 }}>›</span> {c.href ? <a href={c.href}>{c.label}</a> : <span>{c.label}</span>}</React.Fragment>)}
        </div>
        <h1 className="page-head__title" dangerouslySetInnerHTML={{ __html: title }} />
        {sub && <p className="page-head__sub">{sub}</p>}
      </div>
    </section>);

}

/* ─────────────────────────────────────────
   ABOUT — original legacy markup (page-head + narrative + next-block)
───────────────────────────────────────── */
function AboutStyles() {
  React.useEffect(() => {
    if (document.getElementById('about-styles')) return;
    const s = document.createElement('style');
    s.id = 'about-styles';
    s.textContent = `
      .ab-lead { font-size: 19px; line-height: 1.7; color: #444; max-width: 720px; margin-bottom: 64px; }
      .ab-lead strong { color: var(--accent); font-weight: 700; }
      .ab-narrative { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 96px; margin-bottom: 88px; }
      @media (max-width: 800px) { .ab-narrative { grid-template-columns: 1fr; gap: 48px; } }
      .ab-item h3 { font-size: 20px; font-weight: 700; margin-bottom: 14px; color: var(--accent); }
      .ab-item h3::before { content:''; display:inline-block; width:24px; height:2px; background:var(--accent); vertical-align:middle; margin-right:12px; }
      .ab-item p { font-size: 15px; line-height: 1.8; color: #444; }
      .ab-stats-box { background:#f5f5f5; padding:32px; border-left:4px solid var(--accent); }
      .ab-stats-box__label { font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
      .ab-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
      .ab-stat__num { font-size:32px; font-weight:700; color:var(--accent); line-height:1; }
      .ab-stat__label { font-size:12px; color:#666; margin-top:4px; }
      .ab-next { margin-top: 64px; background: var(--accent); color: #fff; padding: 56px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
      @media (max-width: 800px) { .ab-next { grid-template-columns: 1fr; gap: 24px; padding: 40px; } }
      .ab-next h3 { font-size: 28px; font-weight: 700; line-height: 1.2; }
      .ab-next p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.9); margin-bottom: 24px; }
      .ab-next .btn { background:#fff; color:var(--accent); border-color:#fff; }
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

function AboutPage({ brand }) {
  if (brand === 'lns' && typeof window.LnsAboutPage === 'function') {
    return <window.LnsAboutPage />;
  }
  if (brand === 'ifm' && typeof window.IfmAboutPage === 'function') {
    return <window.IfmAboutPage />;
  }
  const { t } = useT();
  const d = window.QC_CONTENT.about[brand];
  const titleHtml = t(`${brand}.about.title2`, (d.title || '').replace(/<br\s*\/?>/gi, ' '));
  const stripTitle = titleHtml.replace(/<br\s*\/?>/gi, ' ');
  return (
    <Layout brand={brand}>
      <AboutStyles />
      <PageHead brand={brand} crumbs={[{ label: t('about.crumb', 'Über uns') }]} title={stripTitle} />
      <section className="section">
        <div className="container">
          <p className="ab-lead" dangerouslySetInnerHTML={{ __html: t(`${brand}.about.lead`, d.lead) }} />
          <div className="ab-narrative">
            {d.blocks.map((bl, i) => {
              const k = `${brand}.about.p${i + 1}`;
              return (
                <div key={i} className="ab-item">
                  <h3>{t(`${k}.h`, bl.h)}</h3>
                  <p dangerouslySetInnerHTML={{ __html: t(`${k}.t`, bl.t) }} />
                </div>);
            })}
            <div>
              <div className="ab-stats-box">
                <div className="ab-stats-box__label">{brand === 'ifm' ? t('ifm.about.stats.label', 'Quick City in Zahlen') : t('lns.about.stats.label', 'LNS in Zahlen')}</div>
                <div className="ab-stats-grid">
                  {d.stats.map((s, i) =>
                  <div key={i}>
                      <div className="ab-stat__num"><AnimatedNumber value={s.num} /></div>
                      <div className="ab-stat__label">{t(`${brand}.about.stat${i + 1}.label`, s.label)}</div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
          <div className="ab-next">
            <div><h3>{t('companies.together', 'Gemeinsam stark')}</h3></div>
            <div>
              <p>{t('companies.together.text', window.QC_CONTENT.companies.togetherT)}</p>
              <a href={`/${brand}/unternehmen`} className="btn btn--primary">{t('nav.companies', 'Unsere Unternehmen')}</a>
            </div>
          </div>
        </div>
      </section>
    </Layout>);

}

/* ─────────────────────────────────────────
   COMPANIES (left as-is — already passable)
───────────────────────────────────────── */
function CompaniesPage({ brand }) {
  const { t } = useT();
  const d = window.QC_CONTENT.companies;
  return (
    <Layout brand={brand}>
      <PageHead brand={brand} crumbs={[{ label: t('nav.company', 'Unternehmen') }, { label: t('companies.crumb', 'Unsere Unternehmen') }]} title={t('companies.title', d.title)} sub={t('companies.lead', d.lead)} />
      <section className="section">
        <div className="container">
          <div className="qc-companies-grid">
            {d.cards.map((c) => {
              const cb = window.QC_DATA.brands[c.brand];
              return (
                <div key={c.brand} className="qc-company-card" style={{ borderTop: '6px solid ' + cb.accent }}>
                  <img src={cb.logo} alt={c.name} className="qc-company-card__logo" />
                  <div className="qc-company-card__label" style={{ color: cb.accent }}>{t(`companies.${c.brand}.label`, c.tag)}</div>
                  <h2 className="qc-company-card__title" dangerouslySetInnerHTML={{ __html: t(`companies.${c.brand}.title`, c.name) }} />
                  <p className="qc-company-card__text">{t(`companies.${c.brand}.text`, c.text)}</p>
                  <a className="btn btn--primary qc-company-card__cta" href={c.link} style={{ background: cb.accent, borderColor: cb.accent }}>{t(`companies.${c.brand}.cta`, c.cta)} →</a>
                </div>);

            })}
          </div>
        </div>
      </section>
      <section className="section section--alt">
        <div className="container" style={{ maxWidth: 820, textAlign: 'center', margin: '0 auto' }}>
          <div className="section-label" style={{ justifyContent: 'center' }}>{t('companies.section.label', 'Zusammenspiel')}</div>
          <h2 className="section-title">{t('companies.together', d.togetherH)}</h2>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: '#555' }}>{t('companies.together.text', d.togetherT)}</p>
        </div>
      </section>
    </Layout>);

}

/* ─────────────────────────────────────────
   TECH (left as-is)
───────────────────────────────────────── */
function TechPage({ brand }) {
  const { t, lang } = useT();
  const d = window.QC_CONTENT.tech[brand];
  // Technik-Übersetzung: Hersteller bleiben, Kategorien & Bezeichnungen werden übersetzt
  const TT = window.QC_TECH_TX || { ui: {}, terms: {} };
  const txUI = (de) => (lang === 'de' ? de : (TT.ui[lang] && TT.ui[lang][de]) || de);
  const txTerm = (de) => (lang === 'de' ? de : (TT.terms[lang] && TT.terms[lang][de]) || de);
  const heroImg = brand === 'ifm' ? 'assets/ifm-fleet-sprinter.jpg' : 'assets/lns-fleet.jpg';
  const hasInventory = Array.isArray(d.inventory) && d.inventory.length > 0;
  const totalMachines = hasInventory ? d.inventory.reduce((s, c) => s + c.items.reduce((a, it) => a + (typeof it.count === 'number' ? it.count : 1), 0), 0) : 0;
  const hasCounts = hasInventory && d.inventory.some(g => g.items.some(it => typeof it.count === 'number'));
  // Display override: IFM shows aggregate "350+" since per-item counts aren't tracked
  const totalDisplay = brand === 'ifm' ? '350+' : brand === 'lns' ? '850+' : `${totalMachines}${hasCounts ? '+' : ''}`;

  return (
    <Layout brand={brand}>
      <TechStyles />
      <PageHead brand={brand} image={heroImg} crumbs={[{ label: t('nav.company', 'Unternehmen') }, { label: t('tech.crumb', 'Unsere Technik') }]} title={t(`${brand}.tech.title`, d.title)} sub={t(`${brand}.tech.lead`, d.lead)} />

      {/* Overview cats — only shown when no detailed inventory exists */}
      {!hasInventory && (
        <section className="section">
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
              {d.cats.map((c, i) =>
              <div key={i} style={{ background: '#fff', border: '1px solid #eee', padding: '40px 36px', borderLeft: '4px solid var(--accent)' }}>
                  <div style={{ fontFamily: 'Courier New, monospace', fontSize: 13, fontWeight: 700, color: 'var(--accent)', letterSpacing: '0.15em', marginBottom: 12 }}>{String(i + 1).padStart(2, '0')}</div>
                  <h3 style={{ fontSize: 24, fontWeight: 700, marginBottom: 14, lineHeight: 1.2 }}>{t(`tech.cat${i + 1}`, c.name)}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.75, color: '#555' }}>{t(`${brand}.tech.f${i + 1}.t`, c.t)}</p>
                </div>
              )}
            </div>
          </div>
        </section>
      )}

      {/* Detailed inventory (IFM only — when data is present) */}
      {hasInventory && (
        <section className="section tech-inv">
          <div className="container">
            <div className="tech-inv__head">
              <div className="section__h">{txUI('Maschinenpark')}</div>
              <h2 className="section__title">{txUI('Vollständige Übersicht.')}</h2>
              <div className="tech-inv__stats">
                <div className="tech-inv__stat"><strong>{totalDisplay}</strong><span>{txUI('Maschinen & Fahrzeuge')}</span></div>
                <div className="tech-inv__stat"><strong>{d.inventory.length}</strong><span>{txUI('Bereiche')}</span></div>
                <div className="tech-inv__stat"><strong>100 %</strong><span>{txUI('Eigener Bestand')}</span></div>
              </div>
            </div>

            <div className="tech-inv__list">
              {d.inventory.map((group, gi) => (
                <div key={gi} className="tech-inv__group">
                  <div className="tech-inv__group-head">
                    <span className="tech-inv__group-icon" aria-hidden="true">{group.icon}</span>
                    <div className="tech-inv__group-info">
                      <h3 className="tech-inv__group-title">{txTerm(group.cat)}</h3>
                    </div>
                  </div>
                  {group.compact ? (
                    <div className="tech-inv__chips">
                      {group.items.map((it, ii) => (
                        <span key={ii} className="tech-inv__chip">{txTerm(it.type)}</span>
                      ))}
                      <div className="tech-inv__chips-note">{group.items[0] && group.items[0].brand ? group.items[0].brand : txUI('Diverse Hersteller')}</div>
                    </div>
                  ) : (
                  <div className={'tech-inv__table' + (hasCounts ? ' tech-inv__table--with-count' : '')}>
                    <div className="tech-inv__row tech-inv__row--head">
                      <div>{txUI('Bezeichnung')}</div>
                      <div>{txUI('Hersteller / Modell')}</div>
                      {hasCounts && <div className="tech-inv__count-cell">{txUI('Anzahl')}</div>}
                    </div>
                    {group.items.map((it, ii) => (
                      <div key={ii} className="tech-inv__row">
                        <div className="tech-inv__type">{txTerm(it.type)}</div>
                        <div className="tech-inv__brand">{it.brand}</div>
                        {hasCounts && <div className="tech-inv__count-cell">{typeof it.count === 'number' ? <span className="tech-inv__count-pill">{it.count}×</span> : <span className="tech-inv__count-pill tech-inv__count-pill--ghost">—</span>}</div>}
                      </div>
                    ))}
                  </div>
                  )}
                </div>
              ))}
            </div>

            <p className="tech-inv__note">{txUI('Auszug aus unserem Bestand · Stand: laufend aktualisiert. Wartung, Reparatur und Pflege erfolgen in der eigenen Werkstatt.')}</p>
          </div>
        </section>
      )}
    </Layout>
  );
}

function TechStyles() {
  React.useEffect(() => {
    if (document.getElementById('tech-inv-styles')) return;
    const s = document.createElement('style');
    s.id = 'tech-inv-styles';
    s.textContent = `
      .tech-inv__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
      .tech-inv__head .section__h, .tech-inv__head .section__title, .tech-inv__head .section__sub { margin-left: auto; margin-right: auto; }
      .tech-inv__head .section__sub { max-width: 60ch; }
      .tech-inv__stats { display: flex; justify-content: center; gap: 56px; margin-top: 32px; flex-wrap: wrap; }
      .tech-inv__stat { text-align: center; }
      .tech-inv__stat strong { display: block; font-size: 38px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
      .tech-inv__stat span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #888; }

      .tech-inv__list { display: flex; flex-direction: column; gap: 28px; }
      .tech-inv__group { background: #fff; border: 1px solid #ececec; overflow: hidden; }
      .tech-inv__group-head { display: flex; align-items: center; gap: 18px; padding: 22px 28px; background: #1a1a1a; color: #fff; }
      .tech-inv__group-icon { font-size: 26px; line-height: 1; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
      .tech-inv__group-info { display: flex; align-items: baseline; gap: 14px; flex: 1; flex-wrap: wrap; }
      .tech-inv__group-title { font-size: 19px; font-weight: 700; letter-spacing: -0.005em; margin: 0; }
      .tech-inv__group-count { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

      .tech-inv__table { display: flex; flex-direction: column; }

      /* Compact chip layout — used for groups with all-same brand (e.g. "Spezialtechnik") */
      .tech-inv__chips { padding: 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: relative; }
      .tech-inv__chip { display: inline-block; padding: 9px 16px; background: #fafafa; border: 1px solid #ececec; border-left: 3px solid var(--accent); font-size: 13.5px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.01em; line-height: 1.3; }
      .tech-inv__chips-note { width: 100%; margin-top: 12px; padding-top: 14px; border-top: 1px dashed #e0e0e0; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #999; }
      .tech-inv__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding: 14px 28px; border-bottom: 1px solid #f0f0f0; font-size: 14.5px; }
      .tech-inv__table--with-count .tech-inv__row { grid-template-columns: 1.4fr 1fr 100px; }
      .tech-inv__row:last-child { border-bottom: none; }
      .tech-inv__row:nth-child(even) { background: #fafafa; }
      .tech-inv__row--head { background: #fff !important; padding-top: 16px; padding-bottom: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #999; border-bottom: 2px solid #1a1a1a; }
      .tech-inv__type { color: #333; font-weight: 500; }
      .tech-inv__brand { color: #1a1a1a; font-weight: 700; }
      .tech-inv__count-cell { text-align: right; }
      .tech-inv__count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 4px 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
      .tech-inv__count-pill--ghost { background: #ececec; color: #999; }
      @media (max-width: 640px) {
        .tech-inv__row,
        .tech-inv__table--with-count .tech-inv__row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 20px; }
        .tech-inv__row--head { display: none; }
        .tech-inv__type { font-size: 12px; color: #888; letter-spacing: 0.04em; text-transform: uppercase; grid-column: 1 / -1; }
        .tech-inv__count-cell { grid-row: 2; grid-column: 2; align-self: center; }
        .tech-inv__brand { grid-row: 2; grid-column: 1; }
        .tech-inv__group-head { padding: 18px 20px; gap: 14px; }
        .tech-inv__group-icon { width: 38px; height: 38px; font-size: 22px; }
        .tech-inv__group-title { font-size: 17px; }
      }

      .tech-inv__note { margin-top: 36px; font-size: 12px; color: #888; text-align: center; font-style: italic; }
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

/* ─────────────────────────────────────────
   VALUES (left as-is)
───────────────────────────────────────── */
function ValuesPage({ brand }) {
  const { t } = useT();
  const d = window.QC_CONTENT.values[brand];
  return (
    <Layout brand={brand}>
      <ValuesStyles />
      <PageHead brand={brand} crumbs={[{ label: t('nav.company', 'Unternehmen') }, { label: t('values.crumb', 'Unsere Werte') }]} title={t(`${brand}.values.title`, d.title)} sub={t(`${brand}.values.lead`, d.lead)} />
      <section className="section">
        <div className="container">
          <div className="qc-vals-grid">
            {d.vals.map((v, i) =>
              <div key={i} className="qc-val-card">
                <h3 className="qc-val-card__h">{t(`${brand}.val${i + 1}.h`, v.h)}</h3>
                <p className="qc-val-card__t">{t(`${brand}.val${i + 1}.t`, v.t)}</p>
                {v.points && (
                  <ul className="qc-val-card__list">
                    {v.points.map((p, j) => <li key={j}>{t(`${brand}.val${i + 1}.p${j + 1}`, p)}</li>)}
                  </ul>
                )}
              </div>
            )}
          </div>
        </div>
      </section>
    </Layout>);

}

function ValuesStyles() {
  React.useEffect(() => {
    if (document.getElementById('qc-vals-styles')) return;
    const s = document.createElement('style');
    s.id = 'qc-vals-styles';
    s.textContent = `
      .qc-vals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
      @media (max-width: 980px) { .qc-vals-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 680px) { .qc-vals-grid { grid-template-columns: 1fr; gap: 16px; } }
      .qc-val-card { background: #fff; border: 1px solid #ececec; border-top: 3px solid var(--accent); padding: 32px 30px 28px; transition: transform 0.25s, box-shadow 0.25s; }
      .qc-val-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.06); }
      .qc-val-card__h { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; color: #1a1a1a; }
      .qc-val-card__t { font-size: 14.5px; line-height: 1.7; color: #555; margin: 0 0 18px; }
      .qc-val-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
      .qc-val-card__list li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--accent); font-weight: 600; }
      .qc-val-card__list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
      @media (max-width: 680px) {
        .qc-val-card { padding: 24px 22px 22px !important; }
        .qc-val-card__h { font-size: 18px !important; }
        .qc-val-card__t { font-size: 14px !important; }
      }
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

/* ─────────────────────────────────────────
   CERTS — Legacy-Look
───────────────────────────────────────── */
function CertsPage({ brand }) {
  const { t, lang } = useT();
  const certName = (n) => {
    const m = { 'Qualitätsmanagement': { en: 'Quality management', tr: 'Kalite yönetimi' }, 'Umweltmanagement': { en: 'Environmental management', tr: 'Çevre yönetimi' } };
    return lang === 'de' ? n : (m[n] && m[n][lang]) || n;
  };
  const certValid = (v) => {
    if (lang === 'de' || !v) return v;
    const yr = (v.match(/\d{4}/) || [''])[0];
    if (lang === 'en') return yr ? `valid until ${yr}` : v;
    if (lang === 'tr') return yr ? `${yr}’e kadar geçerli` : v;
    return v;
  };
  const d = window.QC_CONTENT.certs[brand];
  const isIfm = brand === 'ifm';
  const heroImg = isIfm ? 'assets/ifm-hero.png' : 'assets/lns-kabel.jpg';
  const [lightbox, setLightbox] = useI(null);

  React.useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [lightbox]);

  // map known cert codes to image files
  const imgFor = (code, c) => {
    if (c && c.img) return c.img;
    if (code.includes('9001')) return isIfm ? 'assets/zertifikate/qc-iso-9001.jpg' : 'assets/zertifikate/lns-iso-9001.jpg';
    if (code.includes('14001')) return 'assets/zertifikate/qc-iso-14001.jpg';
    return null;
  };
  return (
    <Layout brand={brand}>
      <HomeStyles />
      <InfoHeroStyles />

      <PageHead
        brand={brand}
        image="assets/zertifikate/certs-hero.jpg"
        crumbs={[{ label: t('nav.company', 'Unternehmen') }, { label: t('certs.crumb', 'Zertifikate') }]}
        title={t(`${brand}.certs.title`, d.title)}
        sub={t(`${brand}.certs.lead`, d.lead)}
      />

      <section className="hsec hsec--alt">
        <div className="container">
          <div className="hsec__label">{t('certs.overview.label', 'Übersicht')}</div>
          <h2 className="hsec__title" style={{ marginBottom: 48 }}>{t('certs.overview.title', 'Unsere aktuellen Zertifizierungen')}</h2>
          <div className="cert-list">
            {d.list.map((c, i) => {
              const img = imgFor(c.code, c);
              const isIso9 = c.code.includes('9001');
              const isIso14 = c.code.includes('14001');
              const scopeKey = isIso9 ? `${brand}.certs.iso9.scope` : isIso14 ? `${brand}.certs.iso14.scope` : null;
              return (
                <div className="cert-row" key={i}>
                  <button
                    className={'cert-row__img' + (img ? ' cert-row__img--clickable' : '')}
                    onClick={() => { if (img) setLightbox({ src: img, label: c.code }); }}
                    aria-label={img ? `${c.code} vergrößern` : c.code}
                    type="button"
                  >
                    {img ?
                    <img src={img} alt={c.code} onError={(e) => {e.target.style.display = 'none';e.target.nextSibling && (e.target.nextSibling.style.display = 'block');}} /> :
                    null}
                    {isIfm && (isIso9 || isIso14) && <img className="cert-row__badge" src="assets/zertifikate/icg-siegel.png" alt="ICG zertifiziert" />}
                    <div className="cert-row__placeholder" style={{ display: img ? 'none' : 'block' }}>{c.code}</div>
                    {img && (
                      <span className="cert-row__zoom" aria-hidden="true">
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.6"/><path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><path d="M5 7h4M7 5v4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
                      </span>
                    )}
                  </button>
                  <div>
                    <div className="cert-row__code">{c.code}</div>
                    <h3 className="cert-row__name">{certName(c.name)}</h3>
                    <dl className="cert-row__meta">
                      <dt>{t('certs.scope.h', 'Geltungsbereich')}</dt><dd>{scopeKey ? t(scopeKey, c.scope) : c.scope}</dd>
                      <dt>{(isIso9 || isIso14) ? t('certs.body.h', 'Zertifizierungsstelle') : t('certs.body2.h', 'Art des Nachweises')}</dt><dd>{c.body}</dd>
                      {(isIso9 || isIso14) && (<><dt>{t('certs.acc.h', 'Akkreditierung')}</dt><dd>{t('certs.dakks', 'DAkkS · IAF')}</dd></>)}
                    </dl>
                  </div>
                  <div className="cert-row__valid">{certValid(c.valid)}</div>
                </div>);

            })}
          </div>
        </div>
      </section>

      {/* Was uns Zertifizieren bedeutet */}
      <section className="hsec hsec--dark">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'start' }}>
            <div>
              <div className="hsec__label">{t('certs.bg.label', 'Hintergrund')}</div>
              <h2 className="hsec__title" dangerouslySetInnerHTML={{ __html: t('certs.next', 'Was Zertifizierung<br />für uns bedeutet') }} />
            </div>
            <p className="hsec__text" style={{ maxWidth: 'none', fontSize: 17 }}>
              {t('certs.next.t', 'Zertifizierungen sind kein Selbstzweck. Sie zwingen uns zu Disziplin: Prozesse werden dokumentiert, Abweichungen analysiert, Verbesserungen umgesetzt. Jährliche Überwachungs­audits durch unabhängige Stellen sichern, dass Anspruch und Realität deckungsgleich bleiben — auf jeder Baustelle, in jedem Auftrag.')}
            </p>
          </div>
        </div>
      </section>

      {/* Lightbox */}
      {lightbox && (
        <div className="cert-lightbox" onClick={(e) => { if (e.target.classList.contains('cert-lightbox')) setLightbox(null); }}>
          <button className="cert-lightbox__close" onClick={() => setLightbox(null)} aria-label="Schließen">×</button>
          <div className="cert-lightbox__inner">
            <img src={lightbox.src} alt={lightbox.label} />
            <div className="cert-lightbox__label">{lightbox.label}</div>
          </div>
        </div>
      )}
    </Layout>);

}

/* ─────────────────────────────────────────
   TEAM — Legacy-Look mit Org-Chart + Filter
───────────────────────────────────────── */
function TeamPage({ brand }) {
  const { t } = useT();
  const td = window.TEAM_DATA[brand];
  const all = [...td.leadership, ...td.team];
  const depts = [...new Set(all.map((p) => p.dept))];
  const [active, setActive] = useI('all');
  const [openId, setOpenId] = useI(null);
  const list = active === 'all' ? td.team : td.team.filter((p) => p.dept === active);
  const isIfm = brand === 'ifm';
  const heroImg = isIfm ? 'assets/ifm-bg.jpg' : 'assets/lns-tiefbau.jpeg';

  const initials = (n) => n.split(' ').filter((p) => p[0] && p[0] === p[0].toUpperCase()).slice(0, 2).map((p) => p[0]).join('');

  // Org: GF row + Bereichsleitung row
  const gf = td.leadership.filter((p) => p.dept === 'Geschäftsführung');
  const bl = td.leadership.filter((p) => p.dept !== 'Geschäftsführung');

  const openPerson = openId ? all.find((p) => p.id === openId) : null;

  // ── WIP-Schalter: nur LNS-Team-Seite vorerst in Bearbeitung.
  const TEAM_WIP = brand === 'lns';
  if (TEAM_WIP) {
    return (
      <Layout brand={brand}>
        <PageHead brand={brand} crumbs={[{ label: t('nav.team', 'Team') }]} title={t('wip.team.title', 'Unser Team')} sub={t('wip.sub', 'Diese Seite wird gerade aufgebaut.')} />
        <section className="section">
          <div className="container" style={{ maxWidth: 680, textAlign: 'center', padding: '40px 24px 60px' }}>
            <div style={{ width: 72, height: 72, margin: '0 auto 28px', borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
            </div>
            <h2 style={{ fontSize: 'clamp(26px, 4vw, 38px)', fontWeight: 800, lineHeight: 1.15, letterSpacing: '-0.02em', marginBottom: 16 }}>{t('wip.h', 'Diese Seite ist in Bearbeitung.')}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: '#555', marginBottom: 32 }}>
              {t('wip.team.p', 'Wir stellen Ihnen unser Team in Kürze hier vor. Bis dahin erreichen Sie uns jederzeit direkt.')}
            </p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
              <a className="btn btn--primary" href={`/${brand}/kontakt`}>{t('wip.contact', 'Kontakt aufnehmen')} →</a>
              <a className="btn btn--ghost" href={`/${brand}`}>{t('wip.home', 'Zur Startseite')}</a>
            </div>
          </div>
        </section>
      </Layout>
    );
  }

  return (
    <Layout brand={brand}>
      <InfoHeroStyles />

      <PageHead
        brand={brand}
        crumbs={[{ label: t('nav.team', 'Team') }]}
        title={t('team.title', 'Das Team hinter den Aufträgen.')}
        sub={t('team.lead', 'Geschäftsführung, Bauleitung, Disposition, Verwaltung — Menschen, die Berlin kennen und Verantwortung übernehmen.')}
        image="assets/team-header.jpg" />
      

      {/* Org chart */}
      {td.leadership.length > 0 &&
      <section className="hsec" style={{ paddingBottom: 0 }}>
          <div className="container">
            <div className="hsec__label">{t('team.leadership.label', 'Führung')}</div>
            <h2 className="hsec__title">{t('team.leadership.title', 'Geschäftsführung & Bereichsleitung')}</h2>
            <div className="tm-org">
              {gf.length > 0 && <div className="tm-org__row">{gf.map((p) =>
              <div key={p.id} className="tm-org-card" onClick={() => setOpenId(p.id)}>
                  <div className="tm-org-card__ph">{p.photo ? <img src={p.photo} alt={p.name} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'50%'}} /> : initials(p.name)}</div>
                  <div className="tm-org-card__name">{p.name}</div>
                  <div className="tm-org-card__role">{p.role}</div>
                  <div className="tm-org-card__dept">{p.dept}</div>
                </div>
              )}</div>}
              {gf.length > 0 && bl.length > 0 && <>
                <div className="tm-org__connector"></div>
                <div className="tm-org__crossbar"></div>
                <div className="tm-org__connector"></div>
              </>}
              {bl.length > 0 && <div className="tm-org__row">{bl.map((p) =>
              <div key={p.id} className="tm-org-card" onClick={() => setOpenId(p.id)}>
                  <div className="tm-org-card__ph">{p.photo ? <img src={p.photo} alt={p.name} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'50%'}} /> : initials(p.name)}</div>
                  <div className="tm-org-card__name">{p.name}</div>
                  <div className="tm-org-card__role">{p.role}</div>
                  <div className="tm-org-card__dept">{p.dept}</div>
                </div>
              )}</div>}
            </div>
          </div>
        </section>
      }

      {/* Team grid with filters */}
      <section className="hsec hsec--alt" style={{ marginTop: 48 }}>
        <div className="container">
          <div className="hsec__label">{t('team.staff.label', 'Mitarbeiter')}</div>
          <h2 className="hsec__title" style={{ marginBottom: 32 }}>{t('team.staff.title', 'Unser Team')}</h2>
          <div className="tm-chips">
            <button className={'tm-chip' + (active === 'all' ? ' active' : '')} onClick={() => setActive('all')}>{t('team.filter.all', 'Alle')} ({td.team.length})</button>
            {depts.filter((d) => td.team.some((p) => p.dept === d)).map((d) =>
            <button key={d} className={'tm-chip' + (active === d ? ' active' : '')} onClick={() => setActive(d)}>{d} ({td.team.filter((p) => p.dept === d).length})</button>
            )}
          </div>
          <div className="tm-grid">
            {list.map((p) =>
            <div key={p.id} className="tm-card" onClick={() => setOpenId(p.id)}>
                <div className="tm-card__ph">{p.photo ? <img src={p.photo} alt={p.name} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'50%'}} /> : initials(p.name)}</div>
                <div className="tm-card__name">{p.name}</div>
                <div className="tm-card__role">{p.role}</div>
                <div className="tm-card__dept">{p.dept}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {openPerson &&
      <div className="tm-modal" onClick={(e) => {if (e.target.classList.contains('tm-modal')) setOpenId(null);}}>
          <div className="tm-modal__box">
            <button className="tm-modal__close" onClick={() => setOpenId(null)}>×</button>
            <div className="tm-modal__ph">{openPerson.photo ? <img src={openPerson.photo} alt={openPerson.name} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'50%'}} /> : initials(openPerson.name)}</div>
            <div className="tm-modal__name">{openPerson.name}</div>
            <div className="tm-modal__role">{openPerson.role}</div>
            <div className="tm-modal__dept">{openPerson.dept}</div>
            <p className="tm-modal__bio">{openPerson.bio}</p>
            {openPerson.email &&
              <a href={`mailto:${openPerson.email}`} style={{display:'inline-block', marginTop:4, color:'var(--accent)', fontWeight:600, fontSize:15, textDecoration:'none'}}>{openPerson.email}</a>}
          </div>
        </div>
      }
    </Layout>);

}

/* ─────────────────────────────────────────
   CONTACT — original legacy markup
───────────────────────────────────────── */
function ContactStyles() {
  React.useEffect(() => {
    if (document.getElementById('contact-styles')) return;
    const s = document.createElement('style');
    s.id = 'contact-styles';
    s.textContent = `
      .ct-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
      @media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; gap: 40px; } }
      .ct-info { background: var(--light); padding: 36px; border-left: 4px solid var(--accent); }
      .ct-block { margin-bottom: 28px; }
      .ct-block:last-child { margin-bottom: 0; }
      .ct-block__label { font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
      .ct-block__value { font-size: 15px; line-height: 1.7; color: #222; white-space: pre-line; }
      .ct-block__value a { color: var(--accent); text-decoration: none; }
      .ct-block__value a:hover { text-decoration: underline; }

      .ct-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
      .ct-section-title { font-size: 32px; font-weight: 700; line-height: 1.15; margin-bottom: 16px; }
      .ct-intro { font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 36px; }

      .ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
      @media (max-width: 600px) { .ct-form { grid-template-columns: 1fr; } }
      .ct-form__full { grid-column: 1 / -1; }
      .ct-field { display: flex; flex-direction: column; }
      .ct-field label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #555; margin-bottom: 6px; }
      .ct-field input, .ct-field select, .ct-field textarea {
        width: 100%; padding: 12px 14px; border: 1px solid #ddd; background: #fafafa;
        font-family: inherit; font-size: 14px; color: #222; transition: border-color .2s, background .2s;
      }
      .ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus {
        outline: none; border-color: var(--accent); background: #fff;
      }
      .ct-field textarea { min-height: 140px; resize: vertical; }

      .ct-submit { display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: #fff; border: none; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 28px; cursor: pointer; transition: opacity .2s; }
      .ct-submit:hover { opacity: 0.85; }

      .ct-success { background: #fff4ec; border-left: 4px solid var(--accent); padding: 18px 22px; margin-top: 18px; font-size: 14px; color: #b04510; }

      .ct-map-section { padding: 0 0 96px; }
      .ct-map-wrap { width: 100%; height: 480px; position: relative; overflow: hidden; border-top: 4px solid var(--accent); }
      .ct-map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
      .ct-map-consent { width: 100%; height: 100%; border: 0; cursor: pointer; background: #1a1a1a; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; font-family: inherit; }
      .ct-map-consent svg { color: var(--accent); margin-bottom: 4px; }
      .ct-map-consent__title { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; }
      .ct-map-consent__text { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.65); max-width: 420px; }
      .ct-map-consent__btn { margin-top: 8px; display: inline-block; padding: 12px 24px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
      .ct-map-consent:hover .ct-map-consent__btn { background: #fff; color: #1a1a1a; }
      .ct-map-cta { position: absolute; bottom: 24px; right: 24px; background: #fff; padding: 14px 22px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s, color 0.2s; }
      .ct-map-cta:hover { background: var(--accent); color: #fff; }
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

function ContactPage({ brand }) {
  const { t } = useT();
  const d = window.QC_CONTENT.contact[brand];
  const [sent, setSent] = useI(false);
  const [mapConsent, setMapConsent] = useI(false);
  const [sending, setSending] = useI(false);
  const [sendError, setSendError] = useI(false);
  const isIfm = brand === 'ifm';

  const submitContact = async (e) => {
    e.preventDefault();
    if (sending) return;
    const form = e.target;
    const payload = {
      brand,
      name: form.name.value,
      company: form.company ? form.company.value : '',
      email: form.email.value,
      phone: form.phone ? form.phone.value : '',
      city: form.city ? form.city.value : '',
      topic: form.topic ? form.topic.value : '',
      message: form.message.value,
      website: form.website ? form.website.value : ''
    };
    setSending(true); setSendError(false);
    try {
      const res = await fetch('kontakt.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json().catch(() => ({ ok: false }));
      if (res.ok && data.ok) { setSent(true); }
      else { setSendError(true); }
    } catch (err) {
      setSendError(true);
    } finally {
      setSending(false);
    }
  };
  const mapQ = d.mapQuery || 'Blankenburger+Straße+18,+13089+Berlin';

  return (
    <Layout brand={brand}>
      <ContactStyles />
      <PageHead brand={brand} crumbs={[{ label: t('nav.contact', 'Kontakt & Standort') }]} title={t('contact.title', 'Kontakt & Standort')} sub={t(`${brand}.contact.sub`, d.sub)} />

      <section className="section">
        <div className="container">
          <div className="ct-grid">
            {/* FORM */}
            <div>
              <div className="ct-section-label">{t('contact.form.label', 'Anfrage senden')}</div>
              <h2 className="ct-section-title">{t('contact.form.title', 'Schreiben Sie uns')}</h2>
              <p className="ct-intro">{isIfm ?
                t('ifm.contact.intro', 'Beschreiben Sie kurz Ihr Anliegen — wir melden uns in der Regel innerhalb eines Werktags.') :
                t('lns.contact.intro', 'Beschreiben Sie kurz Bauvorhaben und Standort — wir melden uns in der Regel innerhalb eines Werktags.')}</p>

              {sent ?
              <div className="ct-success">{t('contact.success', 'Vielen Dank — wir haben Ihre Nachricht erhalten und melden uns zeitnah. Eine Eingangsbestätigung haben wir Ihnen per E-Mail geschickt (bitte ggf. auch den Spam-Ordner prüfen).')}</div> :

              <form className="ct-form" onSubmit={submitContact} noValidate>
                  <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{position:'absolute',left:'-9999px',width:1,height:1,opacity:0}} aria-hidden="true" />
                  <div className="ct-field">
                    <label htmlFor="cf-name">{t('contact.f.name', 'Name')}</label>
                    <input id="cf-name" name="name" type="text" required />
                  </div>
                  <div className="ct-field">
                    <label htmlFor="cf-company">{t('contact.f.company', 'Unternehmen')}</label>
                    <input id="cf-company" name="company" type="text" />
                  </div>
                  <div className="ct-field">
                    <label htmlFor="cf-email">{t('contact.f.email', 'E-Mail')}</label>
                    <input id="cf-email" name="email" type="email" required />
                  </div>
                  <div className="ct-field">
                    <label htmlFor="cf-phone">{t('contact.f.phone', 'Telefon')}</label>
                    <input id="cf-phone" name="phone" type="tel" />
                  </div>
                  {!isIfm &&
                <div className="ct-field">
                      <label htmlFor="cf-city">{t('contact.f.city', 'Bauort / Stadt')}</label>
                      <input id="cf-city" name="city" type="text" />
                    </div>
                }
                  <div className={'ct-field' + (isIfm ? ' ct-form__full' : '')}>
                    <label htmlFor="cf-topic">{t('contact.f.topic', 'Thema')}</label>
                    <select id="cf-topic" name="topic">
                      {d.topics.map((tp, ti) => <option key={tp}>{t(`${brand}.contact.topic${ti+1}`, tp)}</option>)}
                    </select>
                  </div>
                  <div className="ct-field ct-form__full">
                    <label htmlFor="cf-msg">{t('contact.f.msg', 'Ihre Nachricht')}</label>
                    <textarea id="cf-msg" name="message" required></textarea>
                  </div>
                  <div className="ct-form__full" style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
                    <button type="submit" className="ct-submit" disabled={sending}>
                      <span>{sending ? t('contact.sending', 'Wird gesendet …') : t('contact.submit', 'Anfrage senden')}</span>
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    </button>
                    <span style={{ fontSize: 11, color: '#888', letterSpacing: '0.05em' }}>{t('contact.privacy', 'Mit dem Absenden akzeptieren Sie unsere Datenschutzbestimmungen.')}</span>
                    {sendError && <span style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600, flexBasis: '100%' }}>{t('contact.error', 'Senden fehlgeschlagen. Bitte versuchen Sie es erneut oder schreiben Sie uns direkt per E-Mail.')}</span>}
                  </div>
                </form>
              }
            </div>

            {/* INFO */}
            <div>
              <div className="ct-info">
                <div className="ct-block">
                  <div className="ct-block__label">{isIfm ? t('contact.info.address', 'Adresse') : t('contact.info.hq', 'Leitungszentrale')}</div>
                  <div className="ct-block__value">{d.address}</div>
                </div>
                <div className="ct-block">
                  <div className="ct-block__label">{t('contact.info.phone', 'Telefon')}</div>
                  <div className="ct-block__value">
                    <a href={'tel:' + d.phone.replace(/\s/g, '')}>{d.phone}</a>
                    {d.fax ? <>{'\n'}{t('contact.info.fax', 'Fax')}: {d.fax}</> : null}
                  </div>
                </div>
                <div className="ct-block">
                  <div className="ct-block__label">{t('contact.info.email', 'E-Mail')}</div>
                  <div className="ct-block__value"><a href={'mailto:' + d.email}>{d.email}</a></div>
                </div>
                <div className="ct-block">
                  <div className="ct-block__label">{isIfm ? t('contact.info.hours', 'Öffnungszeiten') : t('contact.info.officehours', 'Bürozeiten')}</div>
                  <div className="ct-block__value">{t(`${brand}.contact.hours`, d.hours)}</div>
                </div>
                {isIfm && (
                <div className="ct-block">
                  <div className="ct-block__label">{t('contact.info.emergency', 'Notfall & Winterdienst')}</div>
                  <div className="ct-block__value"><a href={'tel:' + d.phone.replace(/\s/g, '')}>{t(`${brand}.contact.emergency`, d.emergency)}</a></div>
                </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MAP — DSGVO: erst nach Klick laden */}
      <section className="ct-map-section">
        <div className="ct-map-wrap">
          {mapConsent ? (
            <iframe
              title={t('contact.map.title', 'Standort')}
              src={`https://www.google.com/maps?q=${mapQ}&output=embed`}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen />
          ) : (
            <button type="button" className="ct-map-consent" onClick={() => setMapConsent(true)}>
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><circle cx="12" cy="10" r="2.4" stroke="currentColor" strokeWidth="1.6"/></svg>
              <span className="ct-map-consent__title">{t('contact.map.consent.title', 'Karte anzeigen')}</span>
              <span className="ct-map-consent__text">{t('contact.map.consent.text', 'Mit dem Laden der Karte akzeptieren Sie die Datenschutzbestimmungen von Google. Es werden Daten an Google übertragen.')}</span>
              <span className="ct-map-consent__btn">{t('contact.map.consent.btn', 'Google Maps laden')}</span>
            </button>
          )}

          {mapConsent && (
          <a
            className="ct-map-cta"
            href={`https://www.google.com/maps/dir/?api=1&destination=${mapQ}`}
            target="_blank" rel="noopener noreferrer">
            <span>{t('contact.map.route', 'Route planen')}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
          )}
        </div>
      </section>
    </Layout>);

}

/* ─────────────────────────────────────────
   PROJECTS — neu strukturiert (LNS-fokussiert)
───────────────────────────────────────── */
function ProjectsPage({ brand }) {
  const { t } = useT();
  const bf = brand;

  // ── WIP-Schalter: Projekte-Seite noch nicht final. true = "in Bearbeitung"-Hinweis.
  //    Zum Freischalten der echten Projekte-Seite auf false setzen.
  const PROJ_WIP = true;
  if (PROJ_WIP) {
    return (
      <Layout brand={bf}>
        <PageHead brand={bf} crumbs={[{ label: t('nav.projects', 'Projekte') }]} title={t('nav.projects', 'Projekte')} sub={t('wip.sub', 'Diese Seite wird gerade aufgebaut.')} />
        <section className="section">
          <div className="container" style={{ maxWidth: 680, textAlign: 'center', padding: '40px 24px 60px' }}>
            <div style={{ width: 72, height: 72, margin: '0 auto 28px', borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
            </div>
            <h2 style={{ fontSize: 'clamp(26px, 4vw, 38px)', fontWeight: 800, lineHeight: 1.15, letterSpacing: '-0.02em', marginBottom: 16 }}>{t('wip.h', 'Diese Seite ist in Bearbeitung.')}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: '#555', marginBottom: 32 }}>
              {t('wip.proj.p', 'Wir stellen Ihnen unsere Referenzprojekte in Kürze hier vor. Bis dahin erreichen Sie uns jederzeit direkt.')}
            </p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
              <a className="btn btn--primary" href={`/${bf}/kontakt`}>{t('wip.contact', 'Kontakt aufnehmen')} →</a>
              <a className="btn btn--ghost" href={`/${bf}`}>{t('wip.home', 'Zur Startseite')}</a>
            </div>
          </div>
        </section>
      </Layout>
    );
  }

  const [discipline, setDisc] = useI('all');
  const [region, setRegion] = useI('all');
  const [year, setYear] = useI('all');
  const [activeId, setActive] = useI(null);

  const allProjects = window.QC_DATA.projects;
  const brandProjects = allProjects.filter(p => p.brand === bf);
  const filtered = brandProjects.filter(p =>
    (discipline === 'all' || (p.discipline || '') === discipline) &&
    (region === 'all' || p.region === region) &&
    (year === 'all' || p.year === year)
  );

  const discLabels = { glasfaser: 'FTTH-Glasfaserausbau', tiefbau: 'Tiefbau', strassenbau: 'Straßenbau', verkehr: 'Verkehrssicherung' };
  const disciplines = [];
  const regions = [...new Set(brandProjects.map(p => p.region))];
  const years = [...new Set(brandProjects.map(p => p.year))].sort((a,b) => Number(b) - Number(a));

  const featured = filtered[0];
  const rest = filtered.slice(1);
  const activeProject = activeId ? allProjects.find(p => p.id === activeId) : null;

  // Discipline-Icon for disciplines we use
  const discIcon = {
    glasfaser:  '📡',
    tiefbau:    '⛏',
    strassenbau:'🚧',
    verkehr:    '🛡'
  };

  // Aggregate stats across filtered LNS projects
  const totalKm = bf === 'lns' ? filtered.reduce((s,p)=>{
    const km = parseFloat((p.stats||[]).find(x=>/km/.test(x.num||''))?.num) || 0;
    return s + km;
  }, 0) : 0;

  return (
    <Layout brand={bf}>
      <ProjectsStyles />

      {/* Hero — page head */}
      <section className="prj-hero">
        <div className="container">
          <div className="prj-hero__crumbs">
            <a href={`/${bf}`}>{bf === 'lns' ? 'Quick City Line Network Solution GmbH' : 'Quick City GmbH'}</a>
            <span>/</span>
            <span>{t('nav.projects', 'Projekte')}</span>
          </div>
          <h1 className="prj-hero__title">{t('projects.title', 'Projekte aus der Praxis.').replace(/<br\s*\/?>/gi, ' ')}</h1>
          <p className="prj-hero__lead">{bf === 'lns'
            ? 'Über 64 Projekte haben wir deutschlandweit realisiert — vom Glasfaser-Hausanschluss bis zum großflächigen FTTH-Ausbau ganzer Landkreise. Hier sehen Sie eine Auswahl der wichtigsten. Klicken Sie ein Projekt für Details.'
            : t('projects.lead', 'Eine Auswahl aktueller und abgeschlossener Aufträge — vom Wohnumfeld bis zum Backbone.')}</p>
        </div>
      </section>

      {/* Filter bar */}
      <section className="prj-filter">
        <div className="container">
          <div className="prj-filter__row">
            {disciplines.length > 0 && (
              <div className="prj-filter__group">
                <span className="prj-filter__label">Bereich</span>
                <div className="chips">
                  <button className={'chip' + (discipline === 'all' ? ' active' : '')} onClick={() => setDisc('all')}>Alle</button>
                  {disciplines.map(d => (
                    <button key={d.id} className={'chip' + (discipline === d.id ? ' active' : '')} onClick={() => setDisc(d.id)}>
                      {d.label} ({brandProjects.filter(p => p.discipline === d.id).length})
                    </button>
                  ))}
                </div>
              </div>
            )}
            <div className="prj-filter__group">
              <span className="prj-filter__label">Region</span>
              <div className="chips">
                <button className={'chip' + (region === 'all' ? ' active' : '')} onClick={() => setRegion('all')}>{t('projects.allregions', 'Alle Regionen')}</button>
                {regions.map(r => (
                  <button key={r} className={'chip' + (region === r ? ' active' : '')} onClick={() => setRegion(r)}>{t('projects.region.' + r, r)}</button>
                ))}
              </div>
            </div>
            <div className="prj-filter__group">
              <span className="prj-filter__label">Jahr</span>
              <div className="chips">
                <button className={'chip' + (year === 'all' ? ' active' : '')} onClick={() => setYear('all')}>Alle</button>
                {years.map(y => (
                  <button key={y} className={'chip' + (year === y ? ' active' : '')} onClick={() => setYear(y)}>{y}</button>
                ))}
              </div>
            </div>
            <div className="prj-filter__count">
              {filtered.length} von {brandProjects.length}
            </div>
          </div>
        </div>
      </section>

      {/* Featured project */}
      {featured && (
        <section className="prj-section">
          <div className="container">
            <div className="prj-eyebrow">
              <span>Highlight</span>
              <span className="prj-eyebrow__line"></span>
            </div>
            <button className="prj-featured" onClick={() => setActive(featured.id)}>
              <div className="prj-featured__media">
                {featured.img ? <img src={featured.img} alt="" /> : <div className="prj-featured__media-ph">📷</div>}
                <div className="prj-featured__overlay"></div>
                <div className="prj-featured__year">{featured.year}</div>
                {featured.status && <div className={'prj-featured__status' + (featured.status === 'Abgeschlossen' ? ' prj-featured__status--done' : '')}>{featured.status}</div>}
              </div>
              <div className="prj-featured__body">
                <div className="prj-featured__meta">
                  <span>{t('projects.region.' + featured.region, featured.region)}</span>
                  <span className="prj-featured__dot"></span>
                  <span>{featured.discipline ? (discLabels[featured.discipline] || featured.discipline) : 'QC ' + featured.brand.toUpperCase()}</span>
                </div>
                <h2 className="prj-featured__title">{t('projects.p' + featured.id + '.title', featured.title)}</h2>
                {featured.headline && <p className="prj-featured__headline">{featured.headline}</p>}
                <div className="prj-featured__client">
                  <div className="prj-featured__client-label">Auftraggeber</div>
                  <div className="prj-featured__client-name">{featured.client}</div>
                </div>
                {featured.stats && (
                  <div className="prj-featured__stats">
                    {featured.stats.map((s, i) => (
                      <div key={i}>
                        <div className="prj-featured__stat-num">{s.num}</div>
                        <div className="prj-featured__stat-lbl">{s.label}</div>
                      </div>
                    ))}
                  </div>
                )}
                <span className="prj-featured__cta">Projekt-Details ansehen →</span>
              </div>
            </button>
          </div>
        </section>
      )}

      {/* Grid of remaining projects */}
      {rest.length > 0 && (
        <section className="prj-section prj-section--alt">
          <div className="container">
            <div className="prj-eyebrow">
              <span>Weitere Projekte</span>
              <span className="prj-eyebrow__line"></span>
            </div>
            <div className="prj-grid">
              {rest.map(p => (
                <button key={p.id} className="prj-card" onClick={() => setActive(p.id)}>
                  <div className="prj-card__media">
                    {p.img ? <img src={p.img} alt="" /> : <div className="prj-card__media-ph">📷</div>}
                    <div className="prj-card__year">{p.year}</div>
                    {p.status && <div className={'prj-card__status' + (p.status === 'Abgeschlossen' ? ' prj-card__status--done' : '')}>{p.status}</div>}
                  </div>
                  <div className="prj-card__body">
                    <div className="prj-card__meta">
                      <span>{t('projects.region.' + p.region, p.region)}</span>
                      <span>·</span>
                      <span>{p.discipline ? (discLabels[p.discipline] || p.discipline) : 'QC ' + p.brand.toUpperCase()}</span>
                    </div>
                    <h3 className="prj-card__title">{t('projects.p' + p.id + '.title', p.title)}</h3>
                    <div className="prj-card__client">{p.client}</div>
                    {p.headline && <p className="prj-card__headline">{p.headline}</p>}
                    {p.stats && p.stats.length > 0 && (
                      <div className="prj-card__stats">
                        {p.stats.slice(0, 2).map((s, i) => (
                          <div key={i} className="prj-card__stat">
                            <span className="prj-card__stat-num">{s.num}</span>
                            <span className="prj-card__stat-lbl">{s.label}</span>
                          </div>
                        ))}
                      </div>
                    )}
                    <span className="prj-card__cta">Details →</span>
                  </div>
                </button>
              ))}
            </div>
            <div className="prj-more-note">
              <span className="prj-more-note__line"></span>
              <span className="prj-more-note__text">Eine Auswahl aus über 60 abgeschlossenen und laufenden Projekten — von Hamburg bis Sachsen. Gerne stellen wir Ihnen weitere Referenzen auf Anfrage zusammen.</span>
            </div>
          </div>
        </section>
      )}

      {filtered.length === 0 && (
        <section className="prj-section">
          <div className="container" style={{textAlign:'center', padding:'80px 0'}}>
            <p style={{fontSize:17, color:'#888'}}>Keine Projekte mit dieser Filterauswahl.</p>
            <button className="btn btn--primary" style={{marginTop:20}} onClick={() => {setDisc('all'); setRegion('all'); setYear('all');}}>Filter zurücksetzen</button>
          </div>
        </section>
      )}

      {/* CTA */}
      <section className="prj-cta">
        <div className="container">
          <div className="prj-cta__inner">
            <div>
              <div className="prj-cta__eyebrow">Ihr Projekt</div>
              <h2 className="prj-cta__title">Sie planen einen Netzausbau? Sprechen wir darüber.</h2>
              <p className="prj-cta__sub">Erzählen Sie uns von Ihrem Vorhaben — wir melden uns mit einer konkreten Einschätzung.</p>
            </div>
            <a className="btn btn--primary" href={`/${bf}/kontakt`}>Anfrage stellen →</a>
          </div>
        </div>
      </section>

      {/* Detail modal */}
      {activeProject && (
        <ProjectModal project={activeProject} onClose={() => setActive(null)} t={t} disciplines={disciplines} />
      )}
    </Layout>
  );
}

function ProjectModal({ project, onClose, t, disciplines }) {
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onEsc = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); };
  }, []);
  const p = project;
  const discLabel = p.discipline ? (disciplines.find(d => d.id === p.discipline)?.label || p.discipline) : null;
  return (
    <div className="prj-modal" onClick={(e) => { if (e.target.classList.contains('prj-modal')) onClose(); }}>
      <div className="prj-modal__box">
        <button className="prj-modal__close" onClick={onClose} aria-label="Schließen">×</button>

        {p.beforeImg && p.afterImg ? (
          <>
            {/* Title bar without image */}
            <div className="prj-modal__title-bar">
              <div className="prj-modal__hero-meta">
                <span>{p.period || p.year}</span><span className="prj-modal__dot"></span>
                <span>{t('projects.region.' + p.region, p.region)}</span>
                {discLabel && <><span className="prj-modal__dot"></span><span>{discLabel}</span></>}
              </div>
              <h2 className="prj-modal__title">{t('projects.p' + p.id + '.title', p.title)}</h2>
              {p.headline && <p className="prj-modal__headline">{p.headline}</p>}
              {p.status && <div className="prj-modal__status prj-modal__status--inbar">{p.status}</div>}
            </div>
            {/* Slider as separate block */}
            <div className="prj-modal__slider">
              <BeforeAfter beforeSrc={p.beforeImg} afterSrc={p.afterImg} beforeLabel="Vorher" afterLabel="Nachher" alt={p.title} />
            </div>
          </>
        ) : (
          <div className="prj-modal__hero">
            {p.img ? <img src={p.img} alt="" /> : <div className="prj-modal__hero-ph">📷</div>}
            <div className="prj-modal__hero-overlay"></div>
            <div className="prj-modal__hero-content">
              <div className="prj-modal__hero-meta">
                <span>{p.year}</span><span className="prj-modal__dot"></span>
                <span>{t('projects.region.' + p.region, p.region)}</span>
                {discLabel && <><span className="prj-modal__dot"></span><span>{discLabel}</span></>}
              </div>
              <h2 className="prj-modal__title">{t('projects.p' + p.id + '.title', p.title)}</h2>
              {p.headline && <p className="prj-modal__headline">{p.headline}</p>}
            </div>
            {p.status && <div className="prj-modal__status">{p.status}</div>}
          </div>
        )}

        <div className="prj-modal__body">
          {/* Stats */}
          {p.stats && p.stats.length > 0 && (
            <div className="prj-modal__stats">
              {p.stats.map((s, i) => (
                <div key={i} className="prj-modal__stat">
                  <div className="prj-modal__stat-num">{s.num}</div>
                  <div className="prj-modal__stat-lbl">{s.label}</div>
                </div>
              ))}
            </div>
          )}

          {/* Client + services */}
          <div className="prj-modal__row">
            <div>
              <div className="prj-modal__h">Auftraggeber</div>
              <div className="prj-modal__client">{p.client}</div>
            </div>
            <div>
              <div className="prj-modal__h">Leistungen</div>
              <div className="prj-modal__services">
                {p.services.map(s => (
                  <span key={s} className="prj-modal__service">{t('projects.svc.' + s, s)}</span>
                ))}
              </div>
            </div>
          </div>

          {/* Challenge / Approach / Result */}
          {(p.challenge || p.approach || p.result) && (
            <div className="prj-modal__story">
              {p.challenge && (
                <div className="prj-modal__story-block">
                  <div className="prj-modal__story-label">Die Herausforderung</div>
                  <p>{p.challenge}</p>
                </div>
              )}
              {p.approach && (
                <div className="prj-modal__story-block">
                  <div className="prj-modal__story-label">Unser Ansatz</div>
                  <p>{p.approach}</p>
                </div>
              )}
              {p.result && (
                <div className="prj-modal__story-block">
                  <div className="prj-modal__story-label">Ergebnis</div>
                  <p>{p.result}</p>
                </div>
              )}
            </div>
          )}

          {/* Fallback short desc if no full story */}
          {!p.challenge && p.desc && (
            <p style={{fontSize:15, lineHeight:1.7, color:'#555', marginTop:24}}>
              {t('projects.p' + p.id + '.desc', p.desc)}
            </p>
          )}

          {/* Team */}
          {p.people && p.people.length > 0 && (
            <div className="prj-modal__team">
              <div className="prj-modal__h">Projektteam</div>
              <div className="prj-modal__people">
                {p.people.map(person => <span key={person} className="prj-modal__person">{person}</span>)}
              </div>
            </div>
          )}

          {/* CTA */}
          <div className="prj-modal__cta">
            <a className="btn btn--primary" href={`/${p.brand}/kontakt`}>Ähnliches Projekt? Anfrage senden →</a>
          </div>
        </div>
      </div>
    </div>
  );
}

function ProjectsStyles() {
  React.useEffect(() => {
    if (document.getElementById('prj-styles')) return;
    const s = document.createElement('style');
    s.id = 'prj-styles';
    s.textContent = `
      /* Hero */
      .prj-hero { background: #1a1a1a; color: #fff; padding: 120px 0 64px; position: relative; }
      .prj-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
      .prj-hero__crumbs { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
      .prj-hero__crumbs a { color: rgba(255,255,255,0.5); text-decoration: none; }
      .prj-hero__crumbs a:hover { color: #fff; }
      .prj-hero__crumbs > span:last-child { color: #fff; }
      .prj-hero__title { font-size: clamp(36px, 6vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; }
      .prj-hero__lead { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 68ch; margin: 0 0 28px; }
      .prj-hero__stats { display: flex; gap: 32px; font-size: 13px; color: rgba(255,255,255,0.55); padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
      .prj-hero__stats strong { color: #fff; font-size: 22px; font-weight: 700; display: block; margin-bottom: 2px; font-variant-numeric: tabular-nums; }

      /* Filter bar */
      .prj-filter { background: #fafafa; border-bottom: 1px solid #e0e0e0; padding: 12px 0; position: sticky; top: 68px; z-index: 50; }
      .prj-filter__row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
      .prj-filter__group { display: flex; align-items: center; gap: 10px; }
      .prj-filter__label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #888; flex-shrink: 0; }
      .prj-filter__count { font-size: 12px; color: #888; margin-left: auto; padding-left: 14px; border-left: 1px solid #ddd; }
      .prj-filter .chip { padding: 4px 10px; font-size: 12px; border-radius: 14px; }
      @media (max-width: 720px) { .prj-filter { padding: 10px 0; } .prj-filter__count { width: 100%; margin-left: 0; padding-left: 0; border-left: none; padding-top: 6px; border-top: 1px solid #e0e0e0; } }

      /* Sections */
      .prj-section { padding: 64px 0; }
      .prj-section--alt { background: #fafafa; padding: 80px 0; }
      .prj-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
      .prj-eyebrow__line { flex: 1; height: 2px; background: var(--accent); opacity: 0.25; }

      /* Featured */
      .prj-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; background: #fff; border: 1px solid #ececec; cursor: pointer; padding: 0; font-family: inherit; text-align: left; width: 100%; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
      .prj-featured:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
      @media (max-width: 900px) { .prj-featured { grid-template-columns: 1fr; } }
      .prj-featured__media { position: relative; min-height: 380px; background: #1a1a1a; overflow: hidden; }
      .prj-featured__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 0.6s; }
      .prj-featured:hover .prj-featured__media img { transform: scale(1.04); }
      .prj-featured__media-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(255,255,255,0.2); }
      .prj-featured__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.45) 100%); }
      .prj-featured__year { position: absolute; left: 28px; top: 24px; z-index: 2; color: #fff; font-size: 64px; font-weight: 900; letter-spacing: -0.03em; line-height: 0.85; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
      .prj-featured__status { position: absolute; right: 24px; top: 24px; z-index: 2; padding: 6px 12px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
      .prj-featured__body { padding: 40px 44px; display: flex; flex-direction: column; }
      @media (max-width: 720px) { .prj-featured__body { padding: 28px 24px; } .prj-featured__year { font-size: 44px; left: 20px; top: 18px; } .prj-featured__media { min-height: 260px; } }
      .prj-featured__meta { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
      .prj-featured__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,0.2); }
      .prj-featured__title { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; }
      .prj-featured__headline { font-size: 15.5px; line-height: 1.6; color: #555; margin: 0 0 20px; }
      .prj-featured__client { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; margin-bottom: 20px; }
      .prj-featured__client-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #999; }
      .prj-featured__client-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
      .prj-featured__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px; margin-bottom: 24px; }
      .prj-featured__stat-num { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
      .prj-featured__stat-lbl { font-size: 11px; color: #777; letter-spacing: 0.06em; margin-top: 2px; }
      .prj-featured__cta { margin-top: auto; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

      /* Card grid */
      .prj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
      .prj-card { background: #fff; border: 1px solid #ececec; cursor: pointer; padding: 0; font-family: inherit; text-align: left; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; }
      .prj-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.08); }
      .prj-card__media { position: relative; aspect-ratio: 16/10; background: #1a1a1a; overflow: hidden; }
      .prj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
      .prj-card:hover .prj-card__media img { transform: scale(1.05); }
      .prj-card__media-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: rgba(255,255,255,0.25); }
      .prj-card__year { position: absolute; left: 18px; top: 14px; color: #fff; font-size: 32px; font-weight: 900; letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0,0,0,0.4); font-variant-numeric: tabular-nums; }
      .prj-card__status { position: absolute; right: 14px; top: 14px; padding: 4px 10px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
      .prj-card__status--done { background: #1f8a4c; }
      .prj-featured__status--done { background: #1f8a4c; }
      .prj-card__body { padding: 24px 26px 22px; display: flex; flex-direction: column; flex: 1; }
      .prj-card__meta { display: flex; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
      .prj-card__title { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 8px; }
      .prj-card__client { font-size: 12.5px; color: #888; margin-bottom: 12px; }
      .prj-card__headline { font-size: 13.5px; line-height: 1.55; color: #555; margin: 0 0 16px; flex: 1; }
      .prj-card__stats { display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid #ececec; margin-bottom: 14px; }
      .prj-card__stat-num { font-size: 16px; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; display: block; }
      .prj-card__stat-lbl { font-size: 10.5px; color: #888; letter-spacing: 0.04em; margin-top: 2px; display: block; }
      .prj-card__cta { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-top: auto; }

      /* CTA */
      .prj-cta { background: #1a1a1a; color: #fff; padding: 80px 0; }
      .prj-more-note { display: flex; align-items: flex-start; gap: 18px; margin-top: 48px; padding-top: 28px; border-top: 1px solid #e0e0e0; }
      .prj-more-note__line { flex-shrink: 0; width: 32px; height: 2px; background: var(--accent); margin-top: 9px; }
      .prj-more-note__text { font-size: 14.5px; line-height: 1.65; color: #666; max-width: 70ch; }
      .prj-cta__inner { display: grid; grid-template-columns: 1.5fr auto; gap: 40px; align-items: center; }
      @media (max-width: 800px) { .prj-cta__inner { grid-template-columns: 1fr; } }
      .prj-cta__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
      .prj-cta__title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; }
      .prj-cta__sub { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.65); margin: 0; max-width: 60ch; }

      /* Modal */
      .prj-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; animation: prjFadeIn 0.18s ease-out; }
      @keyframes prjFadeIn { from { opacity: 0; } to { opacity: 1; } }
      .prj-modal__box { background: #fff; max-width: 980px; width: 100%; border-radius: 4px; position: relative; overflow: hidden; animation: prjSlideUp 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform, opacity; }
      @keyframes prjSlideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
      .prj-modal__close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.92); border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #1a1a1a; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
      .prj-modal__close:hover { background: #fff; }

      .prj-modal__hero { position: relative; height: 360px; background: #1a1a1a; overflow: hidden; }
      @media (max-width: 720px) { .prj-modal__hero { height: 260px; } }
      .prj-modal__hero img { width: 100%; height: 100%; object-fit: cover; }
      .prj-modal__hero-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(255,255,255,0.2); }
      .prj-modal__hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%); }
      .prj-modal__hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 40px; color: #fff; }

      /* Title bar variant — used when BeforeAfter slider is shown */
      .prj-modal__title-bar { background: #1a1a1a; color: #fff; padding: 36px 40px 30px; position: relative; }
      @media (max-width: 720px) { .prj-modal__title-bar { padding: 26px 24px 22px; } }
      .prj-modal__slider { background: #0a0a0a; padding: 0; }
      .prj-modal__status--inbar { position: absolute; right: 24px; top: 24px; }
      @media (max-width: 720px) { .prj-modal__hero-content { padding: 24px; } }
      .prj-modal__hero-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
      .prj-modal__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.45); }
      .prj-modal__title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }
      .prj-modal__headline { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.9); margin: 0; max-width: 60ch; }
      .prj-modal__status { position: absolute; right: 16px; top: 16px; padding: 6px 14px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

      .prj-modal__body { padding: 36px 40px 40px; }
      @media (max-width: 720px) { .prj-modal__body { padding: 24px; } }
      .prj-modal__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; padding-bottom: 28px; border-bottom: 1px solid #ececec; margin-bottom: 28px; }
      .prj-modal__stat-num { font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }
      .prj-modal__stat-lbl { font-size: 12px; color: #777; letter-spacing: 0.06em; margin-top: 4px; }

      .prj-modal__row { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid #ececec; margin-bottom: 28px; }
      @media (max-width: 600px) { .prj-modal__row { grid-template-columns: 1fr; gap: 18px; } }
      .prj-modal__h { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #999; margin-bottom: 8px; }
      .prj-modal__client { font-size: 17px; font-weight: 700; color: #1a1a1a; }
      .prj-modal__services { display: flex; flex-wrap: wrap; gap: 6px; }
      .prj-modal__service { font-size: 12px; padding: 5px 12px; background: #f4f4f0; border-radius: 2px; color: #444; }

      .prj-modal__story { display: flex; flex-direction: column; gap: 24px; margin-bottom: 28px; }
      .prj-modal__story-block { padding-left: 16px; border-left: 3px solid var(--accent); }
      .prj-modal__story-label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
      .prj-modal__story-block p { font-size: 14.5px; line-height: 1.7; color: #444; margin: 0; }

      .prj-modal__team { padding-top: 24px; border-top: 1px solid #ececec; margin-top: 8px; }
      .prj-modal__people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
      .prj-modal__person { font-size: 13px; padding: 6px 12px; background: #fafafa; border: 1px solid #ececec; border-radius: 20px; color: #444; }

      .prj-modal__cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid #ececec; text-align: center; }
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

Object.assign(window, { PageHead, PageHero, InfoHeroStyles, AboutPage, CompaniesPage, TechPage, ValuesPage, CertsPage, TeamPage, ContactPage, ProjectsPage });