/* global React, ReactDOM */
const { useState, useEffect } = React;
const D = window.DOUMEN;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", f);
    return () => window.removeEventListener("scroll", f);
  }, []);
  const links = [
    ["#diensten", "Diensten"], ["#projecten", "Projecten"],
    ["#over", "Over"], ["#materieel", "Materieel"], ["#contact", "Contact"],
  ];
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "") + (open ? " open" : "")}>
      <div className="container nav-inner">
        <a href="#top" className="brand" aria-label="Grondwerken J. Doumen">
          <img className="logo" src="assets/logo-light.png" alt="Grondwerken J. Doumen" />
        </a>
        <nav className="nav-links">
          {links.map(([h, t]) => <a key={h} href={h}>{t}</a>)}
        </nav>
        <a href="#contact" className="nav-cta">Offerte aanvragen</a>
        <button className={"nav-burger" + (open ? " open" : "")} onClick={() => setOpen(o => !o)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </div>
      <nav className={"nav-drawer" + (open ? " open" : "")}>
        {links.map(([h, t]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
        <a href="#contact" className="drawer-cta" onClick={() => setOpen(false)}>Offerte aanvragen</a>
      </nav>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div className="hero-left">
          <div className="hero-eyebrow">
            <span className="sq" aria-hidden="true"></span>
            Grondwerken sinds 2008
            <span className="sep">/</span>
            Dilsen-Stokkem
          </div>
          <h1>
            Wij graven<br/>
            <span className="out">dieper</span> <span className="amp">&</span><br/>
            bouwen vaster.
          </h1>
          <p className="hero-sub">
            Familiebedrijf voor graafwerken, rioleringen, opritten en
            afbraakwerken. Eigen ploeg, eigen materieel, één aanspreekpunt —
            van offerte tot oplevering.
          </p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary">Vraag uw offerte <span className="arrow">↗</span></a>
            <a href="#projecten" className="btn btn-ghost">Recente werken</a>
          </div>
        </div>
        <div className="hero-right">
          <div className="hero-photo">
            <div className="ph-tag">PHOTO · Werf in uitvoering</div>
          </div>
          <div className="hero-stats">
            {D.stats.map((s, i) => (
              <div className="st" key={i}>
                <div className="n">{s.num}{s.suffix}</div>
                <div className="l">{s.lbl}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Ticker() {
  const items = ["Graafwerken", "Rioleringen", "Opritten", "Afbraak", "Nivelleringen", "Funderingen", "Drainage", "Tuinaanleg"];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {Array.from({ length: 2 }).map((_, k) => (
          <React.Fragment key={k}>
            {items.map((it, i) => (
              <span key={i}>{it}<span className="x">✦</span></span>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Services() {
  return (
    <section className="section" id="diensten">
      <div className="container">
        <div className="sec-head">
          <div className="sec-idx">[ 01 — Diensten ]</div>
          <div>
            <h2 className="sec-title">Van eerste schop<br/><span className="out">tot afwerking</span></h2>
            <p className="sec-lede">Zes vaste werkdomeinen, uitgevoerd met eigen ploeg en materieel. Geen onderaannemers, geen verrassingen.</p>
          </div>
        </div>
        <div className="svc-list">
          {D.services.map((s) => (
            <div className="svc" key={s.n}>
              <div className="svc-n">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="svc-go" aria-hidden="true">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Projects() {
  return (
    <section className="section proj-section" id="projecten">
      <div className="container">
        <div className="sec-head">
          <div className="sec-idx">[ 02 — Projecten ]</div>
          <div>
            <h2 className="sec-title">Werk dat de<br/><span className="out">tand des tijds</span> doorstaat</h2>
            <p className="sec-lede">Een greep uit de werven van het afgelopen seizoen. Vraag gerust een referentie in uw buurt op.</p>
          </div>
        </div>
        <div className="proj-grid">
          {D.projects.map((p, i) => (
            <article className="proj" key={i}>
              <div className="proj-fill" aria-hidden="true"></div>
              <div className="proj-tag">{p.tag}</div>
              <div className="proj-overlay">
                <h4>{p.t}</h4>
                <div className="meta"><span>{p.p}</span><span className="y">{p.y}</span></div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="about" id="over">
      <div className="about-media">
        <div className="ph-tag">PHOTO · Werfploeg</div>
      </div>
      <div className="about-body">
        <div className="sec-idx" style={{ color: "var(--accent)", fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".1em" }}>[ 03 — Over Doumen ]</div>
        <h2>Een familiezaak<br/>met <span className="acc">diepe wortels</span></h2>
        <p>
          Grondwerken J. Doumen is gestart vanuit één graafmachine en een
          eenvoudige overtuiging: een werf goed afleveren begint bij eerlijk
          werk in de grond. Achttien jaar later is dat nog steeds de maat van
          alles wat we doen.
        </p>
        <p>
          We werken voor particulieren, architecten en aannemers in heel
          Belgisch Limburg. Eén ploeg, één aanspreekpunt — van plaatsbezoek
          tot de laatste klinker.
        </p>
        <div className="about-quote">"Goed werk zie je niet —<br/>het ligt onder de grond."</div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-idx">[ 04 — Werkwijze ]</div>
          <div>
            <h2 className="sec-title">Vier stappen,<br/><span className="out">zonder ruis</span></h2>
          </div>
        </div>
        <div className="proc-steps">
          {D.steps.map((s) => (
            <div className="proc-step" key={s.n}>
              <div className="n">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Machinery() {
  return (
    <section className="section" id="materieel">
      <div className="container">
        <div className="sec-head">
          <div className="sec-idx">[ 05 — Materieel ]</div>
          <div>
            <h2 className="sec-title">Eigen vloot,<br/><span className="out">steeds inzetbaar</span></h2>
            <p className="sec-lede">We werken uitsluitend met eigen machines, onderhouden in eigen werkplaats. Dat houdt de planning strak en de prijs eerlijk.</p>
          </div>
        </div>
        <div className="mach-grid">
          {D.machines.map((m, i) => (
            <div className="mach" key={i}>
              <div className="mach-img" aria-hidden="true"><div className="ph">PHOTO · {m.s}</div></div>
              <div className="mach-body">
                <div className="spec">{m.s}</div>
                <h5>{m.t}</h5>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const SVC_OPTS = ["Graafwerken", "Riolering", "Oprit", "Afbraak", "Nivellering", "Tuinaanleg"];
const TIMING = ["Zo snel mogelijk", "Binnen 1 maand", "Binnen 3 maanden", "Later dit jaar", "Nog te bepalen"];

function QuoteForm() {
  const [step, setStep] = useState(0);
  const [services, setServices] = useState([]);
  const [timing, setTiming] = useState("");
  const [form, setForm] = useState({ name: "", phone: "", city: "", note: "" });
  const [done, setDone] = useState(false);
  const toggle = (s) => setServices(a => a.includes(s) ? a.filter(x => x !== s) : [...a, s]);
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canNext = (step === 0 && services.length) || (step === 1 && timing) || (step === 2 && form.name && form.phone);

  if (done) return (
    <div className="qform">
      <div className="qsuccess">
        <div className="check" aria-hidden="true">✓</div>
        <h3>Bedankt, {form.name.split(" ")[0] || "buurman"}</h3>
        <p>We bekijken uw aanvraag en bellen u binnen één werkdag terug op {form.phone || "het opgegeven nummer"}.</p>
      </div>
    </div>
  );

  return (
    <form className="qform" onSubmit={(e) => { e.preventDefault(); if (canNext) setDone(true); }}>
      <div className="qstep-track" aria-hidden="true">
        {[0,1,2].map(i => <div key={i} className={"qdot" + (i < step ? " done" : i === step ? " active" : "")} />)}
      </div>
      <div className="qhead">Stap {step+1} van 3</div>
      {step === 0 && (<>
        <h3>Welk werk hebt u in gedachten?</h3>
        <div className="chip-row">
          {SVC_OPTS.map(s => <button type="button" key={s} className={"chip" + (services.includes(s) ? " on" : "")} onClick={() => toggle(s)}>{s}</button>)}
        </div>
      </>)}
      {step === 1 && (<>
        <h3>Wanneer wilt u beginnen?</h3>
        <div className="chip-row">
          {TIMING.map(t => <button type="button" key={t} className={"chip" + (timing === t ? " on" : "")} onClick={() => setTiming(t)}>{t}</button>)}
        </div>
      </>)}
      {step === 2 && (<>
        <h3>Hoe bereiken we u?</h3>
        <div className="field"><label htmlFor="n">Naam</label><input id="n" value={form.name} onChange={e => upd("name", e.target.value)} placeholder="Voor- en achternaam" /></div>
        <div className="field"><label htmlFor="p">Telefoon</label><input id="p" value={form.phone} onChange={e => upd("phone", e.target.value)} placeholder="+32 …" /></div>
        <div className="field"><label htmlFor="c">Werfadres (gemeente)</label><input id="c" value={form.city} onChange={e => upd("city", e.target.value)} placeholder="Bv. Maaseik" /></div>
        <div className="field"><label htmlFor="no">Korte omschrijving</label><textarea id="no" value={form.note} onChange={e => upd("note", e.target.value)} placeholder="Bv. nieuwe oprit ±80 m², afbraak oude betonplaat inbegrepen." /></div>
      </>)}
      <div className="qactions">
        {step > 0 ? <button type="button" className="btn btn-ghost" onClick={() => setStep(s => s-1)}>← Vorige</button> : <span />}
        {step < 2
          ? <button type="button" className="btn btn-primary" onClick={() => canNext && setStep(s => s+1)} style={!canNext ? { opacity: .4, cursor: "not-allowed" } : null}>Volgende →</button>
          : <button type="submit" className="btn btn-primary" style={!canNext ? { opacity: .4, cursor: "not-allowed" } : null}>Verzenden →</button>}
      </div>
    </form>
  );
}

function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="contact-left">
        <div className="sec-idx" style={{ color: "var(--accent)", fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".1em" }}>[ 06 — Contact ]</div>
        <h2>Plannen klaar?<br/>Bel <span className="acc">de graver</span></h2>
        <p className="lede">Een kort telefoontje, een plaatsbezoek, en u krijgt binnen de week een eerlijke offerte. Geen tussenpersonen.</p>
        <div className="cinfo">
          <div className="crow"><div className="k">Telefoon</div><div className="v">0479 19 28 33<small>Werkdagen 7u — 19u</small></div></div>
          <div className="crow"><div className="k">Mail</div><div className="v" style={{ fontSize: 17 }}>info@grondwerken-doumen.be<small>Antwoord binnen één werkdag</small></div></div>
          <div className="crow"><div className="k">Werkgebied</div><div className="v">Dilsen-Stokkem & omstreken<small>{D.towns.join(" · ")}</small></div></div>
          <div className="crow"><div className="k">BTW</div><div className="v">BE 0XXX.XXX.XXX<small>Erkend aannemer · categorie G</small></div></div>
        </div>
      </div>
      <div className="contact-right"><QuoteForm /></div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <img className="logo" src="assets/logo-light.png" alt="Grondwerken J. Doumen" />
            <p>Eerlijk vakmanschap in en rond Belgisch Limburg sinds 2008.</p>
          </div>
          <div>
            <h6>Diensten</h6>
            <ul><li><a href="#diensten">Graafwerken</a></li><li><a href="#diensten">Rioleringen</a></li><li><a href="#diensten">Opritten</a></li><li><a href="#diensten">Afbraak</a></li></ul>
          </div>
          <div>
            <h6>Bedrijf</h6>
            <ul><li><a href="#over">Over ons</a></li><li><a href="#projecten">Projecten</a></li><li><a href="#materieel">Materieel</a></li><li><a href="#contact">Contact</a></li></ul>
          </div>
          <div>
            <h6>Bereikbaar</h6>
            <ul><li>0479 19 28 33</li><li>info@grondwerken-doumen.be</li><li>Limburg, België</li></ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Grondwerken J. Doumen</div>
          <div>BE 0XXX.XXX.XXX · Erkend aannemer cat. G</div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Ticker />
        <Services />
        <Projects />
        <About />
        <Process />
        <Machinery />
        <Contact />
      </main>
      <Footer />
      {!window.HIDE_SWITCHER && window.VersionSwitcher ? <window.VersionSwitcher current="industrial" /> : null}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);