/* Quick City LNS — expanded "Über uns" — story, stats, map, milestones */

function LnsAboutStyles() {
  React.useEffect(() => {
    if (document.getElementById('lns-about-styles')) return;
    const s = document.createElement('style');
    s.id = 'lns-about-styles';
    s.textContent = `
      /* HERO — large dark, with map silhouette accent */
      .lnsab-hero { background: #0d0d0d; color: #fff; padding: 120px 0 80px; position: relative; overflow: hidden; }
      .lnsab-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
      .lnsab-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.45); margin-bottom: 24px; }
      .lnsab-hero__crumbs a { color: inherit; text-decoration: none; }
      .lnsab-hero__crumbs > span:last-child { color: #fff; }
      .lnsab-hero__title { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 24px; max-width: 22ch; }
      .lnsab-hero__title em { font-style: normal; color: var(--accent); }
      .lnsab-hero__lead { font-size: 19px; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 60ch; margin: 0; font-weight: 300; }

      /* STATS band */
      .lnsab-stats { background: #1a1a1a; padding: 56px 0; border-top: 1px solid rgba(255,255,255,0.08); }
      .lnsab-stats__grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
      @media (max-width: 980px) { .lnsab-stats__grid { gap: 24px; justify-content: flex-start; } }
      .lnsab-stat { color: #fff; flex: 0 0 auto; }
      .lnsab-stat__num { font-size: clamp(28px, 3.8vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -0.025em; color: var(--accent); font-variant-numeric: tabular-nums; }
      .lnsab-stat__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 10px; line-height: 1.4; }

      /* STORY section */
      .lnsab-story { padding: 96px 0; background: #fafafa; }
      .lnsab-story__intro { text-align: center; max-width: 720px; margin: 0 auto 64px; }
      .lnsab-story__h { font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
      .lnsab-story__t { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
      .lnsab-story__t em { font-style: normal; color: var(--accent); }
      .lnsab-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
      @media (max-width: 800px) { .lnsab-story__grid { grid-template-columns: 1fr; } }
      .lnsab-block { background: #fff; border: 1px solid #ececec; border-top: 4px solid var(--accent); padding: 36px 36px 32px; transition: transform 0.25s, box-shadow 0.25s; }
      .lnsab-block:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.06); }
      .lnsab-block__num { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
      .lnsab-block__h { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; margin: 0 0 14px; }
      .lnsab-block__t { font-size: 15px; line-height: 1.7; color: #555; margin: 0; }
      .lnsab-block__t strong { color: #1a1a1a; }

      /* MAP section */
      .lnsab-map { background: #0d0d0d; color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
      .lnsab-map::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
      .lnsab-map .qc-cmap__stage { max-width: 560px; }
      .lnsab-map__head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 48px; }
      @media (max-width: 800px) { .lnsab-map__head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; } }
      .lnsab-map__h { font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
      .lnsab-map__t { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: #fff; }
      .lnsab-map__t em { font-style: normal; color: var(--accent); }
      .lnsab-map__sub { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.72); margin: 0; max-width: 60ch; }

      /* TIMELINE */
      .lnsab-time { background: #fff; padding: 96px 0; }
      .lnsab-time__head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
      .lnsab-time__list { position: relative; max-width: 880px; margin: 0 auto; padding-left: 32px; }
      .lnsab-time__list::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--accent), rgba(235,97,25,0.2)); }
      .lnsab-time__item { position: relative; padding: 0 0 36px 28px; }
      .lnsab-time__item::before { content: ''; position: absolute; left: -39px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--accent); }
      .lnsab-time__year { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 6px; }
      .lnsab-time__h { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
      .lnsab-time__t { font-size: 14.5px; line-height: 1.6; color: #555; margin: 0; max-width: 60ch; }

      /* VALUES PREVIEW */
      .lnsab-vals { background: #1a1a1a; color: #fff; padding: 96px 0; }
      .lnsab-vals__head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
      .lnsab-vals__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
      @media (max-width: 980px) { .lnsab-vals__grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 560px) { .lnsab-vals__grid { grid-template-columns: 1fr; } }
      .lnsab-val { padding: 32px 28px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-top: 3px solid var(--accent); }
      .lnsab-val__h { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: #fff; }
      .lnsab-val__t { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.65); margin: 0; }

      /* BIG CTA */
      .lnsab-cta { background: var(--accent); color: #fff; padding: 80px 0; }
      .lnsab-cta__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
      @media (max-width: 800px) { .lnsab-cta__inner { grid-template-columns: 1fr; gap: 24px; } }
      .lnsab-cta__h { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
      .lnsab-cta__title { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 14px; }
      .lnsab-cta__t { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.9); margin: 0; max-width: 60ch; }
      .lnsab-cta__buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
      @media (max-width: 800px) { .lnsab-cta__buttons { justify-content: flex-start; } }
      .lnsab-cta .btn--white { background: #fff; color: var(--accent); border-color: #fff; }
      .lnsab-cta .btn--white:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
      .lnsab-cta .btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
      .lnsab-cta .btn--outline:hover { background: #fff; color: var(--accent); border-color: #fff; }
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

function LnsAboutPage() {
  const { t } = useT();

  // Story blocks (extends QC_CONTENT.about.lns.blocks with renumbered numbering)
  const blocks = (window.QC_CONTENT && window.QC_CONTENT.about && window.QC_CONTENT.about.lns && window.QC_CONTENT.about.lns.blocks) || [];

  // Stats (curated)
  const stats = [
    { num: '70+',    label: t('lnsab.stat1', 'Einsatzorte bundesweit') },
    { num: '10',     label: t('lnsab.stat2', 'Regionen aktiv') },
    { num: '850+',   label: t('lnsab.stat3', 'Maschinen & Fahrzeuge') },
    { num: 'ISO',    label: t('lnsab.stat4', '9001:2015 zertifiziert') }
  ];

  // Milestones
  const milestones = [
    { year: '2018', h: t('lnsab.ms1.h', 'Gründung in Bernau bei Berlin'), t: t('lnsab.ms1.t', 'Start als spezialisierter Tiefbaubetrieb. Erste Aufträge: Hausanschlüsse für regionale Telekommunikationsanbieter und Stadtwerke.') },
    { year: '2019', h: t('lnsab.ms2.h', 'Erster Großauftrag Glasfaser'), t: t('lnsab.ms2.t', 'Eintritt in den FTTH-Ausbau. Backbone-Trassen für Carrier in Berlin und Brandenburg.') },
    { year: '2020', h: t('lnsab.ms3.h', 'Eigene Spülbohrtechnik'), t: t('lnsab.ms3.t', 'Anschaffung der ersten HDD-Spülbohranlage. Grabenlose Verlegung wird Standardverfahren bei LNS.') },
    { year: '2021', h: t('lnsab.ms4.h', 'ISO 9001:2015 zertifiziert'), t: t('lnsab.ms4.t', 'Qualitätsmanagement-System eingeführt und nach DIN EN ISO 9001:2015 zertifiziert. Jährliche Überwachungsaudits.') },
    { year: '2023', h: t('lnsab.ms5.h', 'Bundesweite Ausweitung'), t: t('lnsab.ms5.t', 'Erweiterung des Einsatzgebiets von Berlin/Brandenburg auf Hamburg, Lübeck, Sachsen-Anhalt und Sachsen.') },
    { year: '2026', h: t('lnsab.ms6.h', '70+ Einsatzorte · 850+ Maschinen'), t: t('lnsab.ms6.t', 'Heute betreut LNS Auftraggeber in 10 Regionen mit eigener Werkstatt und über 70 aktiven Einsätzen.') }
  ];

  // Values teaser
  const values = [
    { h: t('lnsab.v1.h', 'Verlässlichkeit'), t: t('lnsab.v1.t', 'Termine werden gehalten. Aufmaß stimmt. Was wir versprechen, bauen wir auch — ohne Ausreden, ohne Nachträge aus dem Nichts.') },
    { h: t('lnsab.v2.h', 'Eigenleistung'), t: t('lnsab.v2.t', 'Eigene Mannschaft, eigene Maschinen, eigene Werkstatt. Keine Subunternehmer-Karawane, kein Qualitätsverlust durch Weiterreichen.') },
    { h: t('lnsab.v3.h', 'Präzision'), t: t('lnsab.v3.t', 'GPS-Vermessung, dokumentierte Trassen, lückenlose Abnahmeprotokolle. Was wir verlegen, finden Sie auch in 20 Jahren wieder.') },
    { h: t('lnsab.v4.h', 'Schnelligkeit'), t: t('lnsab.v4.t', 'Zentrale Disposition aus Bernau, lokale Trupps vor Ort. Bei Störungen rücken wir umgehend aus — in Berlin und Umland wie bundesweit.') }
  ];

  return (
    <window.Layout brand="lns">
      <LnsAboutStyles />

      {/* HERO */}
      <section className="lnsab-hero">
        <div className="container">
          <div className="lnsab-hero__crumbs">
            <a href="/lns">Quick City LNS</a>
            <span style={{opacity:0.4}}>›</span>
            <span>{t('nav.about', 'Über uns')}</span>
          </div>
          <h1 className="lnsab-hero__title" dangerouslySetInnerHTML={{__html: t('lnsab.hero.title', 'Tiefbau, der trägt — <em>von Bernau aus, deutschlandweit.</em>')}} />
          <p className="lnsab-hero__lead">{t('lnsab.hero.lead', 'Seit 2018 realisieren wir Tief- und Netzausbauprojekte für Carrier, Stadtwerke, Kommunen und Generalunternehmer. Mit eigener Mannschaft, eigenem Maschinenpark und einer Leitungszentrale, die nie schläft.')}</p>
        </div>
      </section>

      {/* STATS BAND */}
      <section className="lnsab-stats">
        <div className="container">
          <div className="lnsab-stats__grid">
            {stats.map((s, i) => (
              <div key={i} className="lnsab-stat">
                <div className="lnsab-stat__num"><window.AnimatedNumber value={s.num} /></div>
                <div className="lnsab-stat__lbl">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* STORY */}
      <section className="lnsab-story">
        <div className="container">
          <div className="lnsab-story__intro">
            <div className="lnsab-story__h">{t('lnsab.story.label', 'Was uns ausmacht')}</div>
            <h2 className="lnsab-story__t" dangerouslySetInnerHTML={{__html: t('lnsab.story.title', 'Vier Prinzipien, <em>jede Baustelle.</em>')}} />
          </div>
          <div className="lnsab-story__grid">
            {blocks.map((b, i) => (
              <div key={i} className="lnsab-block">
                <div className="lnsab-block__num">{String(i + 1).padStart(2, '0')} —</div>
                <h3 className="lnsab-block__h">{t('lnsab.block' + (i+1) + '.h', b.h)}</h3>
                <p className="lnsab-block__t" dangerouslySetInnerHTML={{__html: t('lnsab.block' + (i+1) + '.t', b.t)}} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MAP — bundesweite Präsenz */}
      <section className="lnsab-map">
        <div className="container">
          <div className="lnsab-map__head">
            <div>
              <div className="lnsab-map__h">{t('lnsab.map.label', 'Bundesweite Präsenz')}</div>
              <h2 className="lnsab-map__t" dangerouslySetInnerHTML={{__html: t('lnsab.map.title', '70+ Einsatzorte in<br/><em>10 Regionen.</em>')}} />
            </div>
            <p className="lnsab-map__sub">{t('lnsab.map.sub', 'Von der Hauptstadtregion bis nach Mecklenburg, von der Ostseeküste bis nach Sachsen — wir arbeiten dort, wo unsere Auftraggeber bauen. Bewegen Sie den Mauszeiger über einen Punkt für Details.')}</p>
          </div>
          <window.GermanyClusterMap clusters={window.QC_LNS_CITY_CLUSTERS || []} />
        </div>
      </section>

      {/* CTA */}
      <section className="lnsab-cta">
        <div className="container">
          <div className="lnsab-cta__inner">
            <div>
              <div className="lnsab-cta__h">Quick City LNS</div>
              <h2 className="lnsab-cta__title">{t('lnsab.cta.title', 'Lernen Sie uns kennen.')}</h2>
              <p className="lnsab-cta__t">{t('lnsab.cta.text', 'Werfen Sie einen Blick auf unsere Projekte oder nehmen Sie direkt Kontakt mit uns auf.')}</p>
            </div>
            <div className="lnsab-cta__buttons">
              <a className="btn btn--white" href="/lns/projekte">{t('lnsab.cta.projects', 'Projekte ansehen')} →</a>
              <a className="btn btn--outline" href="/lns/kontakt">{t('nav.contact', 'Kontakt')}</a>
            </div>
          </div>
        </div>
      </section>
    </window.Layout>
  );
}

Object.assign(window, { LnsAboutPage, LnsAboutStyles });