/* Middle sections: Over ons, Materieel, Projecten, CTA strip */

const OverOns = () => (
  <section id="over">
    <div className="wrap">
      <div className="over-grid">
        <div className="over-photo">
          <img src="images/over.jpg" alt="Van Der Pluym op locatie — minigraver bij de waterkant" />
          <div className="badge"><b>2017</b><span>Sinds</span></div>
          <div className="stripe hazard" />
        </div>
        <div className="over-text">
          <div className="section-tag" style={{ marginBottom: 18 }}>Ons verhaal</div>
          <h2>Klein team,<br/>grote inzet.</h2>
          <p className="lead">
            Vanuit Ede werken we sinds 2017 aan uiteenlopende grondverzetprojecten.
            Met jaren ervaring in grondwerk, loonwerk en transport weten we wat er
            nodig is op de werkvloer.
          </p>
          <p>
            We werken met korte lijnen en een no-nonsense mentaliteit. Geen
            ingewikkeld verhaal. Gewoon komen opdagen, goed werk leveren en
            afspraken nakomen.
          </p>
          <p>
            Met eigen materieel en transport kunnen we snel schakelen en
            praktisch werken.
          </p>
          <div className="over-points">
            <div className="over-point">
              <div className="ico"><Icon.Check style={{ width: 22, height: 22 }} /></div>
              <div>
                <b>Afspraak is afspraak</b>
              </div>
            </div>
            <div className="over-point">
              <div className="ico"><Icon.Wrench style={{ width: 22, height: 22 }} /></div>
              <div>
                <b>Eigen materieel</b>
              </div>
            </div>
            <div className="over-point">
              <div className="ico"><Icon.Stopwatch style={{ width: 22, height: 22 }} /></div>
              <div>
                <b>Snel inzetbaar</b>
              </div>
            </div>
          </div>
          <div className="signature">
            <img src="images/logo.svg" alt="Van Der Pluym Verhuurservice" className="brand-logo" />
          </div>
        </div>
      </div>
    </div>
  </section>
);

const materieel = [
  { label: "Rupskraan", note: "5 ton", cls: "wide" },
  { label: "Minigraver", note: "1.8 ton" },
  { label: "Kipper", note: "8 m³" },
  { label: "Trilplaat", note: "Bestrating", cls: "tall" },
  { label: "Dumper", note: "1.5 ton" },
  { label: "Aanhanger", note: "Open laadbak" },
  { label: "Sloophamer", note: "Hydraulisch" },
  { label: "Generator", note: "Bouwlocatie" },
];

const Materieel = () => (
  <section id="materieel">
    <div className="wrap">
      <div className="section-head">
        <div style={{ flex: "1 1 60%" }}>
          <div className="section-tag">Materieel</div>
          <h2>Het juiste<br/>gereedschap.</h2>
        </div>
        <div className="head-aside">
          Eigen, goed onderhouden materieel. Op de meeste klussen rijd ik er zelf op.
          Sleep eigen foto's hierin om uw eigen materieel te tonen.
        </div>
      </div>
      <div className="materieel-grid">
        {materieel.map((m, i) => (
          <div key={i} className={"materieel-card " + (m.cls || "")}>
            <image-slot id={"mat-" + i} shape="rect" placeholder={"Foto: " + m.label}></image-slot>
            <div className="cap">
              <span>
                <small>{m.note}</small>
                {m.label}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const projecten = [
  {
    place: "Goes",
    year: "2025",
    title: "Bouwput nieuwbouwwoning",
    body: "Compleet uitgegraven, klaargemaakt en afgevoerd. Drie dagen — op planning opgeleverd voor de aannemer.",
    tags: ["Grondwerk", "Transport"],
  },
  {
    place: "Middelburg",
    year: "2025",
    title: "Tuin & oprit egaliseren",
    body: "Oude beplanting verwijderd, terrein vlak gezet en bouwzand aangevoerd. Voor een lokale hovenier.",
    tags: ["Grondverzet", "Hovenier"],
  },
  {
    place: "Vlissingen",
    year: "2024",
    title: "Sloop schuur + fundering",
    body: "Bestaande loods gesloopt en fundering verwijderd. Locatie schoon achtergelaten voor de volgende fase.",
    tags: ["Sloopwerk", "Afvoer"],
  },
  {
    place: "Kapelle",
    year: "2024",
    title: "Kabelsleuf voor netbeheerder",
    body: "180 meter kabelsleuf gegraven, gezeefd en opnieuw aangevuld. Snel, schoon en zonder overlast.",
    tags: ["Sleuven", "Infra"],
  },
  {
    place: "Terneuzen",
    year: "2024",
    title: "Bedrijventerrein bouwrijp",
    body: "Twee kavels bouwrijp gemaakt voor een aannemer. Grond afgevoerd en zand aangevoerd in twee weken.",
    tags: ["Grondwerk", "Transport"],
  },
  {
    place: "Zierikzee",
    year: "2023",
    title: "Aanleg paardenbak",
    body: "Toplaag verwijderd, ondergrond gestabiliseerd en drainagezand verwerkt. Klaar voor de afwerking.",
    tags: ["Egaliseren", "Particulier"],
  },
];

const Projecten = () => (
  <section id="projecten">
    <div className="wrap">
      <div className="section-head">
        <div style={{ flex: "1 1 60%" }}>
          <div className="section-tag">Recente projecten</div>
          <h2>Werk waar ik<br/>achter sta.</h2>
        </div>
        <div className="head-aside">
          Een greep uit klussen van de afgelopen jaren. Van kleine particulieren
          tot bouwteams — de aanpak blijft hetzelfde: aanpakken en netjes opleveren.
        </div>
      </div>
      <div className="proj-grid">
        {projecten.map((p, i) => (
          <article className="proj" key={i}>
            <div className="img">
              <image-slot id={"proj-" + i} shape="rect" placeholder={"Foto: " + p.title}></image-slot>
            </div>
            <div className="body">
              <div className="meta">
                <span>{p.place}</span>
                <span>{p.year}</span>
              </div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <div className="tags">
                {p.tags.map(t => <span className="tag" key={t}>{t}</span>)}
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const CtaStrip = () => (
  <section className="cta-strip">
    <div className="cta-strip-inner">
      <h2>
        Klus in gedachten?
        <span>Een beller is sneller.</span>
      </h2>
      <a href="tel:0651567734" className="btn btn-primary btn-arrow">06 51 56 77 34</a>
      <a href="#contact" className="btn btn-ghost">Stuur een bericht</a>
    </div>
  </section>
);

window.OverOns = OverOns;
window.Materieel = Materieel;
window.Projecten = Projecten;
window.CtaStrip = CtaStrip;