/* Quick City IFM — expanded "Über uns" — story, stats, milestones (no map) */

function IfmAboutPage() {
  const { t } = window.useT ? window.useT() : { t: (k, f) => f };
  // Story blocks (from QC_CONTENT.about.ifm.blocks)
  const blocks = (window.QC_CONTENT && window.QC_CONTENT.about && window.QC_CONTENT.about.ifm && window.QC_CONTENT.about.ifm.blocks) || [];

  // Stats — 6 metrics, IFM-relevant
  const stats = [
    { num: '25+',  label: t('ifmab.stat1', 'Jahre Erfahrung') },
    { num: '150',  label: t('ifmab.stat2', 'Mitarbeiter') },
    { num: '350+', label: t('ifmab.stat3', 'Maschinen & Fahrzeuge') },
    { num: '750+', label: t('ifmab.stat4', 'Aufträge / Jahr') },
    { num: 'ISO',  label: t('ifmab.stat5', '9001 & 14001 zertifiziert') },
    { num: '100%', label: t('ifmab.stat6', 'Berlin & Umland') }
  ];

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

      {/* HERO */}
      <section className="lnsab-hero">
        <div className="container">
          <div className="lnsab-hero__crumbs">
            <a href="/ifm">Quick City IFM</a>
            <span style={{opacity:0.4}}>›</span>
            <span>{t('about.crumb', 'Über uns')}</span>
          </div>
          <h1 className="lnsab-hero__title" dangerouslySetInnerHTML={{__html: t('ifmab.hero.title', 'Wir sind die Lösung — <em>seit 2001.</em>')}} />
          <p className="lnsab-hero__lead">{t('ifmab.hero.lead', 'Seit über zwei Jahrzehnten kümmern wir uns um das, was Berlins Außenanlagen jeden Tag funktionieren lässt. Eigene Mannschaft, eigener Maschinenpark, eigene Werkstatt — und Verlässlichkeit als Grundprinzip.')}</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('ifmab.story.h', 'Was uns ausmacht')}</div>
            <h2 className="lnsab-story__t" dangerouslySetInnerHTML={{__html: t('ifmab.story.t', 'Drei Prinzipien, <em>jeden Tag.</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('ifmab.block' + (i+1) + '.h', b.h)}</h3>
                <p className="lnsab-block__t" dangerouslySetInnerHTML={{__html: t('ifmab.block' + (i+1) + '.t', b.t)}} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="lnsab-cta">
        <div className="container">
          <div className="lnsab-cta__inner">
            <div>
              <div className="lnsab-cta__h">{t('ifmab.cta.h', 'Lernen Sie uns kennen.')}</div>
              <h2 className="lnsab-cta__title">{t('ifmab.cta.title', 'Sagen Sie uns, was Sie brauchen.')}</h2>
              <p className="lnsab-cta__t">{t('ifmab.cta.t', 'Vom Winterdienst-Vertrag über die neue Außenanlage bis zur Baumpflege — 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="/ifm/projekte">{t('lnsab.cta.projects', 'Projekte ansehen')} →</a>
              <a className="btn btn--outline" href="/ifm/kontakt">{t('nav.contact', 'Kontakt')}</a>
            </div>
          </div>
        </div>
      </section>
    </window.Layout>
  );
}

Object.assign(window, { IfmAboutPage });