/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function WerkenBijPage() {
  return (<>
    <section className="subhero subhero-has-video" style={{ textAlign: "left", alignItems: "flex-start" }}>
      <video className="subhero-video" src="hero-werken-bij.mp4" poster="hero-werken-bij-poster.jpg" autoPlay muted loop playsInline aria-label="Sfeerbeelden van het werken bij VIA Vastgoed" />
      <div className="subhero-video-overlay" />
      <div className="subhero-eye reveal-fade"><span className="eyebrow"><span className="dot"></span>Werken bij</span></div>
      <h1 className="reveal-fade" style={{ marginTop: "16px", marginLeft: 0, "--reveal-delay": "0.1s" }}>Bouw mee<br/>aan <em>VIA</em>.</h1>
      <p className="lede reveal-fade" style={{ marginTop: "32px", maxWidth: "60ch", "--reveal-delay": "0.2s" }}>Wij bouwen aan een internationaal platform voor vastgoedbegeleiding. Compact team, korte lijnen en veel ruimte voor eigen initiatief.</p>
    </section>

    {/* WIE WE ZOEKEN */}
    <section className="section">
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Wie we zoeken</span></div>
        <div>
          <h2 className="section-title reveal-fade">Mensen met<br/><em>mentaliteit</em></h2>
          <div className="split-2" style={{ marginTop: "40px" }}>
            <div className="reveal-fade" style={{ "--reveal-delay": "0.1s", position: "relative" }}>
              <div style={{ aspectRatio: "4/5", backgroundImage: "url(rayco-werken.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} role="img" aria-label="Teamlid van VIA Vastgoed aan het werk"></div>
              <div style={{ position: "absolute", left: "-1px", bottom: "-1px", padding: "10px 14px", background: "var(--bg)", border: "1px solid var(--line)", fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted)" }}>Amsterdam HQ · 6 collega's</div>
            </div>
            <div className="reveal-fade" style={{ "--reveal-delay": "0.15s" }}>
              <p style={{ fontSize: "17px", lineHeight: 1.7, color: "var(--ink-soft)", marginBottom: "20px" }}>Wij zoeken geen standaard profiel, maar mensen met mentaliteit. Professionals die ondernemend denken, verantwoordelijkheid nemen en zich prettig voelen in een internationale omgeving.</p>
              <p style={{ fontSize: "17px", lineHeight: 1.7, color: "var(--ink-soft)", marginBottom: "32px" }}>Of je nu starter bent met ambitie of al ervaring hebt in vastgoed, sales, finance of business development. Als je wilt bouwen en groeien, gaan we graag het gesprek aan.</p>
              <a href={PLAN_URL} target="_blank" rel="noreferrer" className="cta-pill" style={{ padding: "14px 24px" }}>
                <span>Solliciteer direct</span>
                <svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" width="14" height="14"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* WAT JE GAAT DOEN — donker */}
    <section className="section" style={{ background: "var(--ink)", color: "var(--bg)" }}>
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow" style={{ color: "var(--accent)" }}><span className="dot" style={{ background: "var(--accent)" }}></span>Wat je gaat doen</span></div>
        <div>
          <h2 className="section-title reveal-fade" style={{ color: "var(--bg)" }}>Breed,<br/><em>internationaal</em><br/>en uitdagend</h2>
          <div className="split-2-top" style={{ marginTop: "32px" }}>
            <div className="reveal-fade" style={{ "--reveal-delay": "0.1s" }}>
              <p style={{ fontSize: "17px", lineHeight: 1.7, color: "rgba(243,238,229,0.7)", marginBottom: "32px" }}>Afhankelijk van je ervaring kun je betrokken zijn bij:</p>
              <ul style={{ listStyle: "none", borderTop: "1px solid rgba(243,238,229,0.15)" }}>
                {WERKEN_TAKEN.map((task, i) => (
                  <li key={i} className="reveal-fade" style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: "20px", alignItems: "baseline", padding: "20px 0", borderBottom: "1px solid rgba(243,238,229,0.15)", fontSize: "16px", lineHeight: 1.5, color: "var(--bg)", "--reveal-delay": `${i * 0.04}s` }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.16em", color: "var(--accent)" }}>{String(i+1).padStart(2,"0")}</span>
                    <span>{task}</span>
                  </li>
                ))}
              </ul>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2.2vw, 28px)", fontWeight: 300, lineHeight: 1.3, letterSpacing: "-0.01em", marginTop: "32px", color: "var(--bg)" }}>Wij geloven in brede ontwikkeling.<br/><em style={{ color: "var(--accent)", fontStyle: "italic" }}>Iedereen leert het volledige proces.</em></p>
            </div>
            <div className="reveal-fade" role="img" aria-label="De werkomgeving van VIA Vastgoed" style={{ "--reveal-delay": "0.2s", aspectRatio: "4/5", backgroundImage: "url(via-werkomgeving.jpg)", backgroundSize: "cover", backgroundPosition: "center" }}></div>
          </div>
        </div>
      </div>
    </section>

    {/* CULTUUR */}
    <section className="section">
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Onze cultuur</span></div>
        <div>
          <h2 className="section-title reveal-fade">Topsport-<em>mentaliteit</em>,<br/>menselijk bedrijf</h2>
          <div className="split-2-narrow" style={{ marginTop: "32px" }}>
            <div className="reveal-fade" role="img" aria-label="Teamcultuur bij VIA Vastgoed — actief en internationaal" style={{ "--reveal-delay": "0.1s", aspectRatio: "4/5", backgroundImage: "url(hyrox-cultuur.jpg)", backgroundSize: "cover", backgroundPosition: "center 65%" }}></div>
            <div className="reveal-fade" style={{ "--reveal-delay": "0.15s" }}>
              <p style={{ fontSize: "17px", lineHeight: 1.7, color: "var(--ink-soft)", marginBottom: "32px" }}>Wij zien ons werk als topsport. Dat betekent voorbereiding, focus, discipline en elke dag beter willen worden. Maar werk moet ook leuk blijven.</p>
              <ul style={{ listStyle: "none", borderTop: "1px solid var(--line)" }}>
                {WERKEN_CULTUUR.map((c, i) => (
                  <ListItem key={i} glyph="✓">{c}</ListItem>
                ))}
              </ul>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2.2vw, 28px)", fontWeight: 300, lineHeight: 1.3, letterSpacing: "-0.01em", marginTop: "32px" }}>Vrijheid en prestatie gaan bij ons<br/><em style={{ color: "var(--accent)", fontStyle: "italic" }}>hand in hand.</em></p>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* DOORGROEI */}
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Jouw toekomst</span></div>
        <div>
          <h2 className="section-title reveal-fade">Doorgroei-<br/><em>mogelijkheden</em></h2>
          <p className="lede reveal-fade" style={{ marginBottom: "60px", "--reveal-delay": "0.15s" }}>Bij VIA Vastgoed bouw je aan je eigen toekomst. Wie waarde toevoegt, groeit mee.</p>
          <div className="spain-promise-grid">
            {WERKEN_GROEI.map(g => (
              <div className="spain-promise-card reveal-fade" key={g.n}>
                <div className="spain-promise-num">{g.n}</div>
                <div className="spain-promise-title">{g.t}</div>
                <p className="spain-promise-desc">{g.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* SOLLICITATIE */}
    <section className="cta-big">
      <div className="cta-big-inner">
        <div className="eyebrow reveal-fade" style={{ color: "var(--accent)", marginBottom: "32px", display: "block" }}><span className="dot"></span>Open sollicitatie</div>
        <h2 className="reveal-fade">Sta jij open voor een <em>volgende stap?</em></h2>
        <p className="lede reveal-fade" style={{ color: "rgba(243,238,229,0.75)", marginBottom: "48px", "--reveal-delay": "0.15s", maxWidth: "55ch" }}>Wil jij onderdeel worden van een ambitieus team dat nationaal én internationaal opereert? Stuur je CV, een korte motivatie of simpelweg een bericht waarin je uitlegt waarom jij bij ons past.</p>
        <div className="cta-row">
          <a href={PLAN_URL} target="_blank" rel="noreferrer" className="cta-big-link">
            <span>Plan een kennismaking</span>
            <svg width="18" height="18" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
          </a>
          <a href="mailto:info@viavastgoed.com" className="cta-big-link" style={{ background: "transparent", color: "var(--bg)", border: "1px solid rgba(243,238,229,0.3)" }}>
            <span>Stuur een e-mail</span>
            <svg width="18" height="18" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
          </a>
        </div>

      </div>
    </section>

    <Footer />
  </>);
}
