/* Contact, Footer, App mount + Tweaks */

const Contact = () => {
  const [form, setForm] = React.useState({ naam: "", bedrijf: "", telefoon: "", email: "", bericht: "" });
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const upd = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(false);
    const res = await fetch("https://formspree.io/f/xdajyqkb", {
      method: "POST",
      headers: { "Accept": "application/json" },
      body: JSON.stringify({ naam: form.naam, bedrijf: form.bedrijf, telefoon: form.telefoon, email: form.email, bericht: form.bericht }),
    });
    setSending(false);
    if (res.ok) {
      setSent(true);
      setForm({ naam: "", bedrijf: "", telefoon: "", email: "", bericht: "" });
      setTimeout(() => setSent(false), 4500);
    } else {
      setError(true);
    }
  };
  return (
    <section id="contact">
      <div className="wrap">
        <div className="section-head">
          <div style={{ flex: "1 1 60%" }}>
            <div className="section-tag">Contact</div>
            <h2>Bel of mail<br/>gerust.</h2>
          </div>
        </div>
        <div className="contact-grid">
          <div className="contact-info">
            <h3>Direct contact</h3>
            <div className="info-row">
              <div className="ico"><Icon.Phone style={{ width: 20, height: 20 }} /></div>
              <a href="tel:0651567734">
                <small>Bel direct</small>
                <b>06 51 56 77 34</b>
              </a>
            </div>
            <div className="info-row">
              <div className="ico"><Icon.Whatsapp style={{ width: 20, height: 20 }} /></div>
              <a href="https://wa.me/31651567734">
                <small>WhatsApp</small>
                <b>Stuur een bericht</b>
              </a>
            </div>
            <div className="info-row">
              <div className="ico"><Icon.Mail style={{ width: 20, height: 20 }} /></div>
              <a href="mailto:verhuurservicepluym@gmail.com">
                <small>E-mail</small>
                <b style={{ fontSize: 15, fontFamily: "var(--body)", letterSpacing: 0 }}>verhuurservicepluym@gmail.com</b>
              </a>
            </div>
            <div className="info-row">
              <div className="ico"><Icon.Pin style={{ width: 20, height: 20 }} /></div>
              <div>
                <small>Werkgebied</small>
                <b>Vanuit Ede door heel Nederland</b>
              </div>
            </div>

            <div className="socials">
              {/*<a href="https://www.facebook.com/profile.php?id=verhuurservicepluym" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                <Icon.Facebook style={{ width: 18, height: 18 }} />
                <span>Facebook</span>
              </a>*/}
              <a href="https://www.instagram.com/verhuurservicepluym/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <Icon.Instagram style={{ width: 18, height: 18 }} />
                <span>Instagram</span>
              </a>
            </div>
          </div>
          <form className="contact-form" onSubmit={submit}>
            <input type="text" name="_gotcha" className="honeypot" tabIndex="-1" autoComplete="off" />
            <h3>Een klus in gedachten?</h3>
            <p className="sub">Neem gerust contact op.</p>
            <div className="field-row">
              <div className="field">
                <label>Naam</label>
                <input required value={form.naam} onChange={upd("naam")} placeholder="Voor- en achternaam" />
              </div>
              <div className="field">
                <label>Bedrijf (optioneel)</label>
                <input value={form.bedrijf} onChange={upd("bedrijf")} placeholder="Bedrijfsnaam" />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>Telefoon</label>
                <input required value={form.telefoon} onChange={upd("telefoon")} placeholder="06 ..." />
              </div>
              <div className="field">
                <label>E-mail</label>
                <input type="email" required value={form.email} onChange={upd("email")} placeholder="naam@voorbeeld.nl" />
              </div>
            </div>
            <div className="field">
              <label>Korte omschrijving</label>
              <textarea required value={form.bericht} onChange={upd("bericht")} placeholder="Waar, wat, wanneer? Schrijf gerust beknopt." />
            </div>
            <button type="submit" className="btn btn-primary btn-arrow submit" disabled={sending}>
              {sending ? "Bezig met versturen…" : "Verstuur bericht"}
            </button>
            {sent && (
              <div className="form-success">
                <Icon.Check style={{ width: 20, height: 20 }} />
                Bedankt — we nemen zo snel mogelijk contact op.
              </div>
            )}
            {error && (
              <div className="form-error">
                Er ging iets mis. Probeer het opnieuw of bel ons direct.
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer>
    <div className="footer-inner">
      <div>
        <div className="foot-brand">
          <img src="images/logo.svg" alt="Van Der Pluym Verhuurservice" className="brand-logo" />
        </div>
        <p className="foot-tag">
          Grondwerk, sloopwerk en (klein) grondverzet vanuit Ede.
          Klein team, grote inzet.
        </p>
        <div style={{ marginTop: 14, fontFamily: "var(--head)", textTransform: "uppercase", letterSpacing: ".15em", color: "var(--geel)", fontSize: 13 }}>
          Eerlijk werk, strak uitgevoerd.
        </div>
      </div>
      <div>
        <h4>Site</h4>
        <ul>
          <li><a href="#diensten">Wat we doen</a></li>
          <li><a href="#over">Ons verhaal</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
      <div>
        <h4>Contact</h4>
        <ul>
          <li><a href="tel:0651567734">06 51 56 77 34</a></li>
          <li><a href="mailto:verhuurservicepluym@gmail.com">verhuurservicepluym@gmail.com</a></li>
          <li>KvK 76853780</li>
        </ul>
      </div>
    </div>
    <div className="foot-bottom">
      <div>© {new Date().getFullYear()} Verhuurservice van der Pluym</div>
      <div className="foot-socials">
        {/*<a href="https://www.facebook.com/profile.php?id=verhuurservicepluym" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
          <Icon.Facebook style={{ width: 18, height: 18 }} />
        </a>*/}
        <a href="https://www.instagram.com/verhuurservicepluym/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
          <Icon.Instagram style={{ width: 18, height: 18 }} />
        </a>
      </div>
      <div className="kvk">KvK 76853780</div>
    </div>
  </footer>
);

const FloatCall = () => (
  <a href="tel:0651567734" className="float-call" aria-label="Bel direct">
    <Icon.Phone style={{ width: 26, height: 26 }} />
  </a>
);

/* ===== App + Tweaks ===== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FFC107",
  "accentName": "Geel",
  "showStripes": true,
  "stripeIntensity": 22,
  "displayFont": "Oswald",
  "uppercaseHeadlines": true
}/*EDITMODE-END*/;

const accentPalettes = [
  { name: "Geel (brand)", value: "#FFC107" },
  { name: "Oranje", value: "#F77F00" },
  { name: "Zandkleur", value: "#D4A85A" },
  { name: "Donkergroen", value: "#3F8C5C" },
];

const fontChoices = ["Oswald", "Bebas Neue", "Anton", "Barlow Condensed"];

const App = () => {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--geel", t.accent);
    // derive a slightly darker hover tone via filter trick — keep simple
    r.setProperty("--geel-2", t.accent);
    r.setProperty("--head", `"${t.displayFont}", "Arial Narrow", Impact, sans-serif`);
    const stripeLen = t.showStripes ? t.stripeIntensity : 0;
    document.querySelectorAll(".hazard, .hazard-thin, .hazard-bar").forEach(el => {
      el.style.display = t.showStripes ? "" : "none";
    });
    document.querySelectorAll("h1,h2,h3,h4").forEach(el => {
      el.style.textTransform = t.uppercaseHeadlines ? "uppercase" : "none";
    });
  }, [t]);

  const T = window.TweaksPanel;
  const { TweakSection, TweakColor, TweakToggle, TweakSelect, TweakSlider } = window;

  return (
    <React.Fragment>
      <TopStrip />
      <Nav />
      <Hero />
      <Diensten />
      <OverOns />
      <CtaStrip />
      <Contact />
      <Footer />
      <FloatCall />
      <T title="Tweaks">
        <TweakSection title="Accent">
          <TweakColor
            label="Accentkleur"
            value={t.accent}
            options={accentPalettes.map(p => p.value)}
            onChange={(v) => {
              const found = accentPalettes.find(p => p.value === v);
              setTweak({ accent: v, accentName: found ? found.name : v });
            }}
          />
          <TweakToggle
            label="Hazard-streepjespatroon tonen"
            value={t.showStripes}
            onChange={(v) => setTweak("showStripes", v)}
          />
        </TweakSection>
        <TweakSection title="Typografie">
          <TweakSelect
            label="Display-font (koppen)"
            value={t.displayFont}
            options={fontChoices}
            onChange={(v) => setTweak("displayFont", v)}
          />
          <TweakToggle
            label="Koppen in HOOFDLETTERS"
            value={t.uppercaseHeadlines}
            onChange={(v) => setTweak("uppercaseHeadlines", v)}
          />
        </TweakSection>
      </T>
    </React.Fragment>
  );
};

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