// afspraak.jsx — Goudmeijer appointment booking

const { useState: useSt } = React;

const SERVICES = [
  { id: "tax", title: "Taxatie", sub: "1 sieraad of munt · 45 min · €75" },
  { id: "ver", title: "Verkoopbegeleiding", sub: "Inclusief taxatie · 90 min · €75 + provisie" },
  { id: "erf", title: "Erfenis & nalatenschap", sub: "Bij u thuis · op aanvraag" },
  { id: "tw", title: "Tweede mening", sub: "Op een bestaand bod · €95" },
];

const LOCATIONS = [
  { id: "kantoor", title: "In Zwolle", sub: "Onze taxatiekamer · Diezerstraat 88" },
  { id: "thuis", title: "Bij u thuis", sub: "Bij grotere collecties · NL" },
  { id: "tel", title: "Telefonisch", sub: "Voor tweede mening · 30 min" },
];

// Mock calendar — May 2026
const MONTH = "mei 2026";
const DOW = ["ma", "di", "wo", "do", "vr", "za", "zo"];
// 1 May 2026 is a Friday. Build a grid starting Monday.
const CAL_DAYS = (() => {
  const days = [];
  // previous month tail (Mon-Thu)
  for (let i = 27; i <= 30; i++) days.push({ d: i, muted: true });
  // 1..31
  for (let d = 1; d <= 31; d++) {
    const dow = (d + 3) % 7; // Mon=0 since 1 May = Fri = idx 4
    // available: weekdays only (skip Sun=6, Sat=5 is open till 15)
    const isWeek = dow < 5;
    const isSat = dow === 5;
    days.push({ d, muted: false, avail: isWeek || isSat, dot: [21, 22, 26, 28].includes(d) });
  }
  // pad to 35
  while (days.length % 7) days.push({ d: days.length - 33, muted: true });
  return days;
})();

const SLOTS_MORNING = ["10:00", "10:45", "11:30"];
const SLOTS_AFTERNOON = ["13:30", "14:15", "15:00", "15:45", "16:30"];
const GONE = new Set(["10:45", "14:15"]);

function BookingForm() {
  const [service, setService] = useSt("tax");
  const [location, setLocation] = useSt("kantoor");
  const [day, setDay] = useSt(21);
  const [slot, setSlot] = useSt("10:00");

  const svc = SERVICES.find((s) => s.id === service);
  const loc = LOCATIONS.find((l) => l.id === location);

  return (
    <div className="form-card">
      <div className="form-steps">
        <div className="step done"><span className="n">i</span><span>Dienst</span></div>
        <div className="sep"></div>
        <div className="step done"><span className="n">ii</span><span>Locatie</span></div>
        <div className="sep"></div>
        <div className="step active"><span className="n">iii</span><span>Moment</span></div>
        <div className="sep"></div>
        <div className="step"><span className="n">iv</span><span>Gegevens</span></div>
      </div>

      <div className="field">
        <label>Welke dienst?</label>
        <div className="pick-row">
          {SERVICES.map((s) => (
            <div key={s.id} className={`pick ${service === s.id ? "on" : ""}`} onClick={() => setService(s.id)}>
              <span className="t">{s.title}</span>
              <span className="s">{s.sub}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="field">
        <label>Waar?</label>
        <div className="pick-row cols-3">
          {LOCATIONS.map((l) => (
            <div key={l.id} className={`pick ${location === l.id ? "on" : ""}`} onClick={() => setLocation(l.id)}>
              <span className="t">{l.title}</span>
              <span className="s">{l.sub}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="field">
        <label>Welke dag?</label>
        <div className="cal">
          <div className="cal-head">
            <span>‹ april</span>
            <span className="month">{MONTH}</span>
            <span>juni ›</span>
          </div>
          <div className="cal-grid">
            {DOW.map((d) => <div key={d} className="dow">{d}</div>)}
            {CAL_DAYS.map((d, i) => (
              <div
                key={i}
                className={`d ${d.muted ? "muted" : ""} ${d.avail ? "avail" : ""} ${day === d.d && !d.muted ? "on" : ""} ${d.dot && !d.muted ? "dot" : ""}`}
                onClick={() => !d.muted && d.avail && setDay(d.d)}
              >
                {d.d}
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 22 }}>
          <span className="s" style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--muted)" }}>Ochtend</span>
          <div className="slots">
            {SLOTS_MORNING.map((s) => (
              <div key={s} className={`slot ${GONE.has(s) ? "gone" : ""} ${slot === s ? "on" : ""}`} onClick={() => !GONE.has(s) && setSlot(s)}>{s}</div>
            ))}
          </div>
          <span className="s" style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--muted)", display: "block", marginTop: 18 }}>Middag</span>
          <div className="slots">
            {SLOTS_AFTERNOON.map((s) => (
              <div key={s} className={`slot ${GONE.has(s) ? "gone" : ""} ${slot === s ? "on" : ""}`} onClick={() => !GONE.has(s) && setSlot(s)}>{s}</div>
            ))}
          </div>
        </div>
      </div>

      <div className="field">
        <label>Uw gegevens</label>
        <div className="row2">
          <input placeholder="Voornaam" />
          <input placeholder="Achternaam" />
        </div>
        <div className="row2" style={{ marginTop: 12 }}>
          <input placeholder="E-mailadres" type="email" />
          <input placeholder="Telefoon" />
        </div>
        <textarea style={{ marginTop: 12 }} placeholder="Wat wilt u laten taxeren? (optioneel — een korte omschrijving helpt ons voorbereiden)"></textarea>
      </div>

      <div className="summary">
        <div className="line">
          <span>Dienst</span>
          <span className="v">{svc.title}</span>
        </div>
        <div className="line">
          <span>Locatie</span>
          <span className="v">{loc.title}</span>
        </div>
        <div className="line">
          <span>Wanneer</span>
          <span className="v">{day} {MONTH} · {slot}</span>
        </div>
        <div className="line total">
          <span>Te betalen na afspraak</span>
          <span className="v">{service === "tw" ? "€ 95,—" : service === "erf" ? "op aanvraag" : "€ 75,—"}</span>
        </div>
      </div>

      <div className="submit-row">
        <p className="small">U ontvangt direct een bevestiging per e-mail. Annuleren of verzetten kan kosteloos tot 24 uur van tevoren.</p>
        <a className="btn btn-primary" href="#">Bevestig afspraak <span className="arrow">→</span></a>
      </div>
    </div>
  );
}

function PageHero() {
  return (
    <section className="book">
      <div className="wrap book-grid">
        <div className="book-side">
          <span className="eyebrow">Afspraak maken</span>
          <h1 style={{ marginTop: 28 }}>
            Een uur in Zwolle.<br />
            Daarna <span className="em">weet u het</span>.
          </h1>
          <p className="lede">
            Plan een vrijblijvende afspraak in onze taxatiekamer. We nemen rustig de tijd, leggen u alles uit en u beslist daarna zelf hoe u verder wilt.
          </p>

          <div className="info">
            <div className="info-row">
              <span className="k">Adres</span>
              <span className="v">Diezerstraat 88 · 8011 RK Zwolle<small>Naast de Grote Kerk. Parkeren in Q-Park Diezerpoort, 3 min lopen.</small></span>
            </div>
            <div className="info-row">
              <span className="k">Bereikbaar</span>
              <span className="v">038 — 421 06 88<small>Of WhatsApp 06 — 28 73 14 99 · ma t/m vr · 9—17</small></span>
            </div>
            <div className="info-row">
              <span className="k">E-mail</span>
              <span className="v">hallo@goudmeijer.nl<small>We reageren binnen één werkdag.</small></span>
            </div>
            <div className="info-row">
              <span className="k">Vertrouwen</span>
              <span className="v">FGS-gecertificeerd<small>Aangesloten bij Federatie TMV. Volledig BTW-vrij beroep.</small></span>
            </div>
          </div>
        </div>

        <div>
          <BookingForm />
        </div>
      </div>
    </section>
  );
}

function App() {
  useReveal();
  return (
    <>
      <TopStrip />
      <MainNav active="Contact" />
      <PageHero />
      <Footer />
    </>
  );
}

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