// Vacatures — recruitment placeholder pagina
function Vacatures({ onNav }) {
  const vacatures = [
    {
      titel: "Allround monteur (BVE 1)",
      type: "Fulltime",
      ervaring: "MBO 4 + minimaal 3 jaar ervaring",
      salary: "€ 2.800 – € 3.600 bruto / maand",
      open: false,
    },
    {
      titel: "EV-specialist (NEN 9140)",
      type: "Fulltime",
      ervaring: "NEN 9140 Vakbekwaam Persoon of hoger",
      salary: "€ 3.200 – € 4.200 bruto / maand",
      open: false,
    },
    {
      titel: "Stage / leerwerktraject",
      type: "BBL/BOL",
      ervaring: "MBO 2-4 niveau",
      salary: "Volgens BPV-regeling",
      open: true,
    },
  ];

  const reasons = [
    { icon: I.ShieldCheck, t: "Vakwerk telt", d: "We werken volgens fabrikant-richtlijnen, met de juiste tools en de juiste tijd. Geen rommelwerk." },
    { icon: I.Sparkle, t: "Bijscholing aangemoedigd", d: "Cursussen op kosten van de zaak — IBKI, Innovam, merk-specifieke trainingen. We blijven leren." },
    { icon: I.Diag, t: "Top apparatuur", d: "Autel, Bosch KTS, Texa, Jaltest, OEM software. Met goed gereedschap werkt het lekker." },
    { icon: I.Bolt, t: "Toekomstgericht", d: "We werken al aan EV's, hybride en straks waterstof. Hier blijft je vak relevant." },
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "80px 32px 56px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Werken bij Garage DéDé</div>
          <h1 className="display" style={{ fontSize: 60, marginBottom: 18, maxWidth: 800 }}>
            Sleutelen waar <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 700 }}>vakkennis</span> nog telt.
          </h1>
          <p className="subhead" style={{ maxWidth: 640, fontSize: 19 }}>
            We zoeken collega's die net als wij geloven: één keer goed is beter dan twee keer half.
            Eerlijk werk, duidelijke afspraken, en een team waar je echt iets leert.
          </p>
        </div>
      </section>

      {/* Waarom hier werken */}
      <section style={{ padding: "80px 0", borderBottom: "1px solid var(--border)" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 32px" }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Waarom Garage DéDé</div>
          <h2 className="headline" style={{ marginBottom: 40 }}>4 redenen om je hier thuis te voelen.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {reasons.map((r, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 12, marginBottom: 18,
                  background: "var(--surface-2)",
                  border: "1px solid color-mix(in oklab, var(--accent) 30%, var(--border))",
                  display: "flex", alignItems: "center", justifyContent: "center", color: "var(--accent)",
                }}>
                  <r.icon size={22}/>
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8, letterSpacing: "-0.015em" }}>{r.t}</h3>
                <p className="text-muted" style={{ fontSize: 15, lineHeight: 1.6, margin: 0 }}>{r.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Open posities */}
      <section style={{ padding: "80px 0" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 32px" }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Open posities</div>
          <h2 className="headline" style={{ marginBottom: 40 }}>Onze huidige vacatures.</h2>

          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {vacatures.map((v, i) => (
              <div key={i} className="card" style={{ padding: 28, opacity: v.open ? 1 : 0.65 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
                      <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em" }}>{v.titel}</h3>
                      <span className={`pill ${v.open ? 'success' : ''}`}>
                        <span className="dot"/> {v.open ? "Open" : "Gesloten"}
                      </span>
                    </div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 18, fontSize: 14 }} className="text-muted">
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                        <I.Clock size={13}/> {v.type}
                      </span>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                        <I.ShieldCheck size={13}/> {v.ervaring}
                      </span>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                        <I.Star size={13}/> {v.salary}
                      </span>
                    </div>
                  </div>
                  {v.open && (
                    <button className="btn btn-primary btn-sm">
                      Solliciteer <I.ArrowRight size={14}/>
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>

          <div className="card" style={{ marginTop: 40, padding: 36, textAlign: "center",
                                          background: "linear-gradient(135deg, var(--surface) 0%, color-mix(in oklab, var(--accent) 12%, var(--surface)) 100%)",
                                          border: "1px solid color-mix(in oklab, var(--accent) 28%, var(--border))" }}>
            <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 10 }}>
              Geen passende vacature?
            </h3>
            <p className="text-muted" style={{ marginBottom: 20, maxWidth: 540, marginLeft: "auto", marginRight: "auto" }}>
              Stuur je CV alvast in. We onthouden goede mensen — komt er een plek vrij dan weten we je te vinden.
            </p>
            <a href="mailto:info@garage-dede.nl?subject=Open sollicitatie" className="btn btn-primary">
              <I.Mail size={14}/> Stuur je CV
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Vacatures = Vacatures;