/* LeadPixel — Over ons (About) page. Page sections only; chrome from js/shared.jsx. */
const ADS = window.LeadPixelDesignSystem_6ae30d;
const { Button } = ADS;
const { SiteChrome } = window;

/* ============================ HERO + COLLAGE ============================ */
function AboutHero() {
  return (
    <section className="lp-about-hero" id="home">
      <div className="lp-about-hero__glow" aria-hidden="true"></div>
      <div className="lp-container">
        <div className="lp-about-hero__head">
          <div className="lp-eyebrow-row" style={{ justifyContent: 'center' }}>
            <span className="lp-dot"></span><span className="lp-eyebrow">Over ons</span>
          </div>
          <h1 className="reveal">Groeien doen we <span className="metal">samen.</span></h1>
          <p className="lp-about-hero__sub reveal">
            LeadPixel is geen bureau dat zich verschuilt achter rapporten en vakjargon. We beoordelen
            onszelf op maar één ding: meer klanten en meer omzet voor jou.
          </p>
        </div>

        <div className="lp-collage reveal">
          <div className="lp-collage__cell lp-collage__cell--tall">
            <img src="assets/images/about-hero-1.webp" alt="Team aan het werk" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div className="lp-collage__cell">
            <img src="assets/images/about-hero-4.webp" alt="Aan het werk" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div className="lp-collage__cell lp-collage__cell--tall">
            <img src="assets/images/about-hero-2.webp" alt="Overleg" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div className="lp-collage__cell">
            <img src="assets/images/about-hero-3.webp" alt="Kantoor" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
        </div>
      </div>
    </section>);
}

/* ============================ MISSION + STATS ============================ */
const STATS = [
{ num: '150+', label: 'Ondernemers die we lieten groeien', accent: false },
{ num: '4,18×', label: 'Gemiddelde return on ad spend', accent: true },
{ num: '<24u', label: 'Reactietijd op je vraag', accent: false },
{ num: '0', label: 'Lange contracten — resultaat bindt', accent: false }];

function Mission() {
  return (
    <section className="lp-section">
      <div className="lp-container">
        <div className="lp-mission__grid">
          <div className="lp-head reveal" style={{ maxWidth: 'none' }}>
            <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">Waarom we bestaan</span></div>
            <h2 className="lp-h2">Marketing die je <span className="lp-em">terugziet in omzet.</span></h2>
          </div>
          <div className="lp-mission__copy reveal">
            <p>We zagen te veel ondernemers betalen voor mooie dashboards en vage beloften, zonder dat het ooit leidde tot klanten. Dat moest anders. LeadPixel begon vanuit één overtuiging: marketing heeft maar één doel: geld opleveren.</p>
            <p>
              Daarom bouwen we de complete groeimachine. Van advertenties en website tot SEO en
              automatisering, alles onder één dak en gericht op meetbaar resultaat. Geen losse projectjes,
              maar een aanpak die je bedrijf structureel laat groeien.
            </p>
            <p>
              Of je nu zzp'er bent of een mkb-bedrijf dat wil opschalen: je krijgt een vast
              aanspreekpunt dat je markt kent, snel schakelt en je vooruithelpt.
            </p>
          </div>
        </div>

      </div>
    </section>);
}

/* ============================ CORE VALUES ============================ */
const VALUES = [
{ icon: IconTarget, title: 'Resultaatgericht', body: 'Alles wat we doen rekenen we af op klanten en omzet. Geen vage statistieken. Alleen wat telt.' },
{ icon: IconContact, title: 'Direct contact', body: 'Geen anoniem callcenter. Je hebt een vast aanspreekpunt dat je bij naam kent.' },
{ icon: IconCheck, title: 'Transparant', body: 'Heldere afspraken vooraf, geen verrassingen achteraf. Je weet altijd waar je aan toe bent.' },
{ icon: IconZap, title: 'Snel schakelen', body: 'Geen lange wachttijden of trage trajecten. Als iets nodig is, regelen we het snel.' }];

function Values() {
  return (
    <section className="lp-section lp-band">
      <div className="lp-container">
        <div className="lp-head reveal">
          <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">Onze kernwaarden</span></div>
          <h2 className="lp-h2">Waar we <span className="lp-em">voor staan.</span></h2>
          <p className="lp-lead">Vier principes die bepalen hoe we werken en waarom ondernemers bij ons blijven.</p>
        </div>
        <div className="lp-values">
          {VALUES.map((v, i) => {
            const Icon = v.icon;
            return (
              <article className="lp-value reveal" key={v.title} style={{ transitionDelay: i % 4 * 70 + 'ms' }}>
                <span className="lp-value__icon"><Icon /></span>
                <h3>{v.title}</h3>
                <p>{v.body}</p>
              </article>);
          })}
        </div>
      </div>
    </section>);
}

/* ============================ FINAL CTA ============================ */
function FinalCta() {
  const openContact = useContact();
  return (
    <section className="lp-section lp-section--tight lp-cta" id="contact">
      <div className="lp-cta__glow" aria-hidden="true"></div>
      <div className="lp-container">
        <div className="lp-head lp-head--center reveal">
          <div className="lp-eyebrow-row" style={{ justifyContent: 'center' }}><span className="lp-dot"></span><span className="lp-eyebrow">Klaar om te groeien?</span></div>
          <h2 className="lp-h2">Laten we kennismaken en je <span className="lp-em">volgende klant binnenhalen.</span></h2>
          <p className="lp-lead">Plan een vrijblijvende intake. Binnen 30 minuten weet je precies waar jouw grootste groeikansen liggen.</p>
          <div className="lp-hero__actions" style={{ marginTop: '32px' }}>
            <Button variant="primary" size="lg" dot iconRight={<IconArrow />} as="a" href="#contact" onClick={(e) => {e.preventDefault();openContact();}}>Plan een intake</Button>
          </div>
        </div>
      </div>
    </section>);
}

/* ============================ MOUNT ============================ */
ReactDOM.createRoot(document.getElementById('root')).render(
  <SiteChrome>
    <AboutHero />
    <hr className="lp-rule" />
    <Mission />
    <Values />
    <FinalCta />
  </SiteChrome>
);