/* Top sections: TopStrip, Nav, Hero, Diensten */

const TopStrip = () => (
  <div className="topstrip">
    <div className="topstrip-inner">
      <a href="tel:0651567734"><Icon.Phone />06 51 56 77 34</a>
      <a href="mailto:verhuurservicepluym@gmail.com"><Icon.Mail />verhuurservicepluym@gmail.com</a>
      {/*<span className="tag">Actief in regio Ede</span>*/}
    </div>
  </div>
);

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand" onClick={close}>
          <img src="images/logo.svg" alt="Van Der Pluym Verhuurservice" className="brand-logo" />
        </a>
        <button className="nav-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu">
          {open ? "Sluit" : "Menu"}
        </button>
        <div className={"nav-links" + (open ? " open" : "")}>
          <a href="#diensten" onClick={close}>Diensten</a>
          <a href="#over" onClick={close}>Ons verhaal</a>
          <a href="#contact" onClick={close}>Contact</a>
        </div>
      </div>
    </nav>
  );
};

const Hero = () => (
  <header className="hero" id="top">
    <div className="hero-photo">
      <img src="images/d-afvoer.jpg" alt="Van Der Pluym in actie — Giant en Takeuchi op locatie" />
    </div>
    <div className="hero-inner">
      <div className="hero-eyebrow">Grondverzet · Sloop · Transport</div>
      <h1 className="hero-title">
        Grondwerk,<br/>sloopwerk en
        <span className="accent">(klein) grondverzet.</span>
      </h1>
      <p className="lead">
        Grondverzet en minikraan nodig voor kabelsleuven, bouwputten, egaliseren
        en transport van grondstoffen. Snel inzetbaar en professioneel uitgevoerd.
      </p>
      <div className="hero-ctas">
        <a href="#contact" className="btn btn-primary btn-arrow">Direct contact</a>
        <a href="#diensten" className="btn btn-ghost">Bekijk diensten</a>
      </div>
    </div>
    <div className="hero-meta">
      Direct contact<b>06 51 56 77 34</b>
    </div>
  </header>
);

const diensten = [
  {
    num: "01",
    icon: <Icon.Excavator style={{ width: 40, height: 40 }} />,
    title: "Grondwerk voor bouw- en aanlegprojecten",
    body: "Uitvoeren van grondwerk voor kleinere bouw- en aanlegprojecten, zoals ontgraven, aanvullen en het voorbereiden van ondergronden voor aanbouw en bestrating.",
    img: "images/d-straatwerk.jpg",
  },
  {
    num: "02",
    icon: <Icon.Pavers style={{ width: 40, height: 40 }} />,
    title: "Straatwerk voorbereiden",
    body: "Voorbereiden van bestrating door het aanbrengen en afrijden van zandbedden en het klaarleggen van de ondergrond.",
    img: "images/d-transport.jpg",
  },
  {
    num: "03",
    icon: <Icon.Trench style={{ width: 40, height: 40 }} />,
    title: "Sleuven graven (kabels en leidingen)",
    body: "Graven van sleuven voor riolering, kabels en leidingen, nauwkeurig en volgens maatvoering uitgevoerd.",
    img: "images/d-sloop.jpg",
  },
  {
    num: "04",
    icon: <Icon.Level style={{ width: 40, height: 40 }} />,
    title: "Egaliseren en profileren",
    body: "Egaliseren en op hoogte brengen van zand- en grondbanen voor een strakke en stabiele ondergrond.",
    img: "images/egaliseren.jpeg",
  },
  {
    num: "05",
    icon: <Icon.Truck style={{ width: 40, height: 40 }} />,
    title: "Grondstoffen leveren en transport",
    body: "Leveren en transporteren van zand, grond, puin en andere materialen, afgestemd op het project.",
    img: "images/transport.jpg",
  },
  {
    num: "06",
    icon: <Icon.Dumper style={{ width: 40, height: 40 }} />,
    title: "Af- en aanvoer van grond en puin",
    body: "Efficiënt afvoeren van vrijkomende grond en puin en aanvoeren van benodigde materialen op locatie.",
    img: "images/levering.jpg",
  },
  {
    num: "07",
    icon: <Icon.Leaf style={{ width: 40, height: 40 }} />,
    title: "Tuin, perceel en terreinbewerking",
    body: "Frezen, zaaien en klaarmaken van tuinen, percelen en recreatieruimtes voor aanleg, onderhoud of herinrichting.",
    img: "images/terreinbewerking.jpg",
  },
  {
    num: "08",
    icon: <Icon.Wrecker style={{ width: 40, height: 40 }} />,
    title: "Sloop- en opruimwerkzaamheden",
    body: "Kleinschalig sloopwerk en het vrijmaken van locaties, inclusief afvoer van materiaal.",
    img: "images/opruim.jpg",
  },
];

const Diensten = () => (
  <section id="diensten">
    <div className="wrap">
      <div className="section-head">
        <div style={{ flex: "1 1 60%" }}>
          <div className="section-tag">Wat we doen</div>
          <h2>Eerlijk werk,<br/>strak uitgevoerd.</h2>
        </div>
      </div>
      <div className="dienst-grid">
        {diensten.map((d, i) => (
          <div className="dienst" key={d.num}>
            <div className="dienst-img">
              <img src={d.img} alt={d.title} />
              <div className="dienst-icon">{d.icon}</div>
              <div className="dienst-num">{d.num}</div>
            </div>
            <div className="dienst-body">
              <h3>{d.title}</h3>
              <p>{d.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
    <div className="hazard-bar" />
  </section>
);

window.TopStrip = TopStrip;
window.Nav = Nav;
window.Hero = Hero;
window.Diensten = Diensten;