// page-over.jsx — Over Werner + Over Melior

function OverPage() {
  return (
    <div className="page">
      <SiteNav />
      <PageRail index={6} slug="Over" />

      <div className="container">
        <section className="about-hero">
          <div className="about-hero-head">
            <Label>Wie is Werner Bruyns?</Label>
            <h1 className="display display-1">
              Een ondernemer<br/>met een{' '}
              <span className="italic" style={{ color: 'var(--green)' }}>passie<br/>voor mensen.</span>
            </h1>
          </div>
          <div className="about-portrait">
            <img src={window.__res('faceshot', 'branding/werner-faceshot.jpeg')} alt="Werner Bruyns" />
          </div>
          <p className="lead about-hero-lead">
            Werner omschrijft zichzelf als een Betermaker — een visie die centraal staat
            in alles wat hij doet. Met zijn adviesbureau Melior helpt hij bedrijven en
            ondernemers om beter te presteren én hun klanten écht gelukkig te maken.
          </p>
        </section>

        {/* The Coolblue anchor */}
        <section className="section tight">
          <Label red>Het ankerjaar</Label>
          <div className="years" style={{ marginTop: 24 }}>
            <span>2007</span>
            <span className="em-dash"></span>
            <span>2015</span>
          </div>
          <div className="years-caption">
            Drijvende kracht achter de Belgische expansie van Coolblue
          </div>

          <p className="lead" style={{ marginTop: 48, maxWidth: '64ch' }}>
            Werner bouwde een indrukwekkend parcours uit in de retail- en e-commercesector.
            Als drijvende kracht achter de Belgische expansie van Coolblue (2007–2015)
            speelde hij een sleutelrol in de groei van het e-commerce bedrijf en de uitbouw
            van de fysieke winkels. Nadien was hij actief als COO en verantwoordelijk voor
            de Belgische tak van het Nederlandse Leapp, gespecialiseerd in refurbished Apple-producten.
          </p>
        </section>

        {/* Career arc table */}
        <section className="section tight">
          <Label>Het parcours</Label>
          <div className="career-arc" style={{ marginTop: 24 }}>
            <CareerRow
              years="2007 — 2015"
              tag="Retail · E-commerce"
              title="Coolblue België"
              body="Drijvende kracht achter de Belgische expansie. Groei van het e-commerce bedrijf en uitbouw van de fysieke winkels."
            />
            <CareerRow
              years="2015 — 2019"
              tag="COO · Refurbished tech"
              title="Leapp BE"
              body="COO en verantwoordelijke voor de Belgische tak van het Nederlandse Leapp, gespecialiseerd in refurbished Apple-producten."
            />
            <CareerRow
              years="2017 →"
              tag="Bedrijfsadvies · BV"
              title="Melior Bedrijfsadvies"
              body="Eigen adviesbureau, opgericht op 24 december 2017 — beter maken van mensen en bedrijven, vanuit Berlaar."
            />
            <CareerRow
              years="2019 →"
              tag="Retail-verantwoordelijke"
              title="Thribe"
              body="Hands-on aanwezigheid op de werkvloer — Werner zit nog steeds aan beide kanten van de tafel."
            />
          </div>

          <p style={{ fontSize: 16.5, lineHeight: 1.6, maxWidth: '64ch', marginTop: 32 }}>
            Vandaag combineert hij zijn ondernemerservaring met strategisch advies.
            Daarnaast werkte hij samen met verschillende adviesplatformen rond
            klantbeleving en people management.
          </p>
        </section>

        {/* Werner op het podium */}
        <section className="section tight">
          <Label>Werner aan het werk</Label>
          <h2 className="display display-3" style={{ marginTop: 18, maxWidth: '24ch' }}>
            Op het podium, in de directiekamer,
            <span style={{ color: 'var(--green)' }}> aan de keukentafel.</span>
          </h2>
          <div className="stage-shots">
            <div className="stage-shot">
              <img src={window.__res('stage1', 'branding/werner-stage-1.jpeg')} alt="Werner — Q&A" />
            </div>
            <div className="stage-shot">
              <img src={window.__res('stage2', 'branding/werner-stage-2.jpeg')} alt="Werner — keynote" />
            </div>
          </div>
        </section>

        {/* Closing — coach role + Melior */}
        <section className="section tight">
          <div className="duo-grid">
            <div>
              <Label red>De coach-rol</Label>
              <h3 className="display display-3" style={{ marginTop: 18 }}>
                Naast ondernemer ook coach.
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, marginTop: 18 }}>
                Met zijn hands-on mentaliteit, ondernemerservaring en mensgerichte aanpak
                helpt Werner organisaties én individuen te groeien, met de mens die
                altijd centraal staat. Daarnaast begeleidt hij zowel particulieren als
                professionals in hun persoonlijke en professionele ontwikkeling.
              </p>
            </div>
            <div>
              <Label>Over Melior Bedrijfsadvies</Label>
              <h3 className="display display-3" style={{ marginTop: 18 }}>
                De BV achter de Betermaker.
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, marginTop: 18 }}>
                Melior Bedrijfsadvies is het consultancybureau van ondernemer Werner Bruyns,
                gevestigd in Berlaar. Het werd opgericht op 24 december 2017 en richt zich
                op het beter maken van mensen en bedrijven.
              </p>
              <p className="muted" style={{ fontSize: 14, marginTop: 12, fontFamily: 'var(--mono)', letterSpacing: '0.04em' }}>
                BTW BE0686.794.939 · Heikanthof 18, 2590 Berlaar
              </p>
            </div>
          </div>
        </section>

        <div className="page-end-cta">
          <Label red>Volgende stap</Label>
          <h3 className="display display-3" style={{ maxWidth: '24ch' }}>
            Praten over wat u nodig heeft?
          </h3>
          <div className="page-end-cta-double">
            <CTA to="/contact">Boek een kennismakingsgesprek</CTA>
          </div>
        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

function CareerRow({ years, tag, title, body }) {
  return (
    <div className="career-row">
      <div className="career-years">{years}</div>
      <div className="career-tag">{tag}</div>
      <div className="career-content">
        <h3>{title}</h3>
        <p>{body}</p>
      </div>
    </div>
  );
}

Object.assign(window, { OverPage, CareerRow });