/* global React, ReactDOM, I, Nav, Footer, FabWa, useReveal, submitLead, submitWeb3Form */
const { useState: _cus, useEffect: _cue } = React;

/* ─── DATA ────────────────────────────────────────────────── */

const CONTACT_METHODS = [
  {
    key: "phone",
    icon: <I.phone />,
    label: "Bel ons",
    value: "+31 6 49069000",
    sub: "Direct iemand aan de lijn — geen keuzemenu",
    href: "tel:+31649069000",
    cta: "Bel direct",
  },
  {
    key: "whatsapp",
    icon: <I.whatsapp />,
    label: "WhatsApp",
    value: "Reactie binnen een uur",
    sub: "Foto's en kentekens delen mag",
    href: "https://wa.me/31649069000",
    cta: "Open WhatsApp",
  },
  {
    key: "email",
    icon: <I.mail />,
    label: "E-mail",
    value: "info@abbaautomotive.nl",
    sub: "Voor uitgebreide offerte-aanvragen",
    href: "mailto:info@abbaautomotive.nl",
    cta: "Stuur e-mail",
  },
  {
    key: "visit",
    icon: <I.pin />,
    label: "Kom langs",
    value: "Nieuwe Maanderbuurtweg 63, Ede",
    sub: "Op afspraak · ruim parkeren voor de deur",
    href: "https://maps.google.com/?q=Nieuwe+Maanderbuurtweg+63+Ede",
    cta: "Bekijk route",
  },
];

const HOURS = [
  { day: "Maandag",   time: "09:00 – 18:00" },
  { day: "Dinsdag",   time: "09:00 – 18:00" },
  { day: "Woensdag",  time: "09:00 – 18:00" },
  { day: "Donderdag", time: "09:00 – 18:00" },
  { day: "Vrijdag",   time: "09:00 – 18:00" },
  { day: "Zaterdag",  time: "10:00 – 17:00" },
  { day: "Zondag",    time: "Op afspraak",  muted: true },
];

const ROUTES = [
  {
    icon: <I.car />,
    title: "Met de auto",
    desc: "Afrit A12 · Ede. Ruim 20 parkeerplaatsen pal voor de deur. Laden bij elektrische auto's mogelijk op verzoek.",
  },
  {
    icon: <I.train />,
    title: "Met OV",
    desc: "Station Ede-Wageningen · 8 min met buslijn 50 of 105 tot halte Frankeneng. Laat het weten — we halen je graag op.",
  },
  {
    icon: <I.bike />,
    title: "Op de fiets",
    desc: "Vanuit centrum Ede 12 minuten via de Klinkenbergerweg. Overdekte fietsenstalling naast ons pand.",
  },
];

const FAQS = [
  {
    q: "Hoe snel krijg ik antwoord?",
    a: "Op werkdagen reageren we binnen een uur op WhatsApp en e-mail. Bellen mag altijd — geen keuzemenu, je krijgt direct iemand aan de lijn.",
  },
  {
    q: "Kan ik langskomen om een auto te bekijken?",
    a: "Ja, bezoek is op afspraak. Bel of app even vooruit met de auto die je wilt zien, dan zorgen we dat 'm klaar staat en de sleutel binnen handbereik is.",
  },
  {
    q: "Hoe werkt een proefrit?",
    a: "Geldig rijbewijs meenemen en we maken een tijdslot. Een normale proefrit duurt 20–30 minuten. Wil je 'm langer rijden? Vraag het gerust — dat valt vaak te regelen.",
  },
  {
    q: "Wat heb ik nodig voor een inruiltaxatie?",
    a: "Het kenteken volstaat voor een eerste inschatting. Voor een definitieve prijs zien we de auto graag in het echt — een rondje van 15 minuten en je hebt een schriftelijke biedprijs.",
  },
  {
    q: "Doen jullie ook zaken met bedrijven?",
    a: "Zeker. Zakelijke leasing, BTW-marge, exportdocumenten en internationale levering: vraag naar een offerte op maat — we maken het in een dag rond.",
  },
];

/* ─── COMPONENTS ──────────────────────────────────────────── */

function ContactHeader() {
  return (
    <header className="page-head" data-screen-label="Contact · Header">
      <div className="container">
        <div className="crumb">
          <a href="index.html">Home</a>
          <span className="crumb__sep">/</span>
          <span className="crumb__current">Contact</span>
        </div>
        <div className="page-head__inner">
          <h1 className="page-head__title">
            Stel je vraag,<br/>plan je <em>bezoek</em>.
          </h1>
          <div className="page-head__meta">
            <p style={{ maxWidth: 460, color: "var(--fg-mute)", fontSize: 15, lineHeight: 1.55 }}>
              Drie manieren om ons te bereiken — kies wat je het beste uitkomt.
              Op werkdagen reageren we binnen een uur, en bellen mag altijd.
            </p>
          </div>
        </div>
      </div>
    </header>
  );
}

function ContactMethods() {
  return (
    <section className="contact-methods" data-screen-label="Contact · Methodes">
      <div className="container">
        <div className="contact-methods__grid">
          {CONTACT_METHODS.map((m) => (
            <a
              key={m.key}
              href={m.href}
              target={m.key === "visit" || m.key === "whatsapp" ? "_blank" : undefined}
              rel="noopener noreferrer"
              className="contact-method"
            >
              <span className="contact-method__icon" aria-hidden="true">{m.icon}</span>
              <div className="contact-method__head">
                <span className="contact-method__label mono">{m.label}</span>
              </div>
              <div className="contact-method__value">{m.value}</div>
              <div className="contact-method__sub">{m.sub}</div>
              <span className="contact-method__cta">
                {m.cta} <span className="btn__arrow"><I.arrow /></span>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactFormSection() {
  const TOPICS = [
    { v: "information_request", label: "iets over een auto vragen" },
    { v: "test_drive",          label: "een proefrit plannen" },
    { v: "trade_in_request",    label: "een inruil bespreken" },
    { v: "offer_request",       label: "een offerte aanvragen" },
    { v: "information_request", label: "een wagen laten importeren" },
  ];
  const PREFERS = [
    { v: "phone",    label: "telefoon", placeholder: "+31 6 …",      icon: <I.phone /> },
    { v: "whatsapp", label: "WhatsApp", placeholder: "+31 6 …",      icon: <I.whatsapp /> },
    { v: "email",    label: "e-mail",   placeholder: "jouw@email.nl", icon: <I.mail /> },
  ];

  const [form, setForm] = _cus({
    name: "",
    topicIdx: 0,
    prefer: "phone",
    handle: "",
    message: "",
  });
  const [sending, setSending] = _cus(false);
  const [result, setResult] = _cus(null);
  const setF = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const currentTopic  = TOPICS[form.topicIdx];
  const currentPrefer = PREFERS.find((p) => p.v === form.prefer);

  async function send(e) {
    e.preventDefault();
    if (sending) return;
    setSending(true);
    setResult(null);
    const isEmail = form.prefer === "email";
    const niceMessage = (
      `Onderwerp: ${currentTopic.label}\n` +
      `Voorkeurskanaal: ${currentPrefer.label}\n` +
      `Bereikbaar op: ${form.handle}\n\n` +
      (form.message || "—")
    );
    const r = await submitWeb3Form({
      subject: `Contactaanvraag — ${currentTopic.label}`,
      from_name: form.name || "Website-bezoeker",
      ...(isEmail ? { email: form.handle } : {}),
      Naam: form.name,
      Onderwerp: currentTopic.label,
      Voorkeurskanaal: currentPrefer.label,
      "Bereikbaar op": form.handle,
      Bericht: form.message || "—",
      message: niceMessage,
    });
    const firstName = form.name ? form.name.split(" ")[0] : "";
    const channelLabel = currentPrefer.label;
    setSending(false);
    setResult(r.success ? { ...r, firstName, channelLabel } : r);
    if (r.success) {
      setForm({ name: "", topicIdx: 0, prefer: "phone", handle: "", message: "" });
    }
  }

  return (
    <section className="section contact-form" data-screen-label="Contact · Formulier">
      <div className="container">
        <div className="section__head reveal">
          <div>
            <span className="eyebrow">Stuur een bericht</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              Vertel ons waar<br/>we mee <em>kunnen helpen</em>.
            </h2>
          </div>
          <p className="section__intro" style={{ marginTop: 0 }}>
            Vul de zinnen aan, kies je voorkeurskanaal en we nemen op het
            door jou gekozen moment contact op. Geen gedoe — wel persoonlijk.
          </p>
        </div>

        <div className="contact-form__grid reveal">
          {/* LEFT: conversational form */}
          <form className="convo-form" onSubmit={send}>
            <div className="convo-form__head">
              <span className="convo-form__step mono">01 · Jouw verhaal</span>
              <h3 className="convo-form__title">
                Vul de <em>zinnen</em> aan.
              </h3>
            </div>

            <div className="convo-form__body">
              <p className="convo-form__line">
                <span>Hoi! Mijn naam is</span>
                <input
                  type="text"
                  required
                  className="convo-form__input convo-form__input--name"
                  placeholder="je naam"
                  size={Math.max(8, form.name.length || 8)}
                  value={form.name}
                  onChange={(e) => setF("name", e.target.value)}
                />
                <span>, en ik wil graag</span>
              </p>

              <div className="convo-form__chips" role="radiogroup" aria-label="Onderwerp">
                {TOPICS.map((t, i) => (
                  <button
                    key={i}
                    type="button"
                    className={"convo-form__chip " + (form.topicIdx === i ? "active" : "")}
                    onClick={() => setF("topicIdx", i)}
                    aria-pressed={form.topicIdx === i}
                  >
                    {t.label}
                  </button>
                ))}
              </div>

              <p className="convo-form__line">
                <span>Bereik me het liefst via</span>
              </p>
              <div className="convo-form__prefer" role="radiogroup" aria-label="Voorkeurskanaal">
                {PREFERS.map((p) => (
                  <button
                    key={p.v}
                    type="button"
                    className={"convo-form__prefer-btn " + (form.prefer === p.v ? "active" : "")}
                    onClick={() => setF("prefer", p.v)}
                    aria-pressed={form.prefer === p.v}
                  >
                    <span className="convo-form__prefer-icon">{p.icon}</span>
                    {p.label}
                  </button>
                ))}
              </div>

              <p className="convo-form__line">
                <span>op</span>
                <input
                  type={form.prefer === "email" ? "email" : "tel"}
                  required
                  className="convo-form__input convo-form__input--handle"
                  placeholder={currentPrefer.placeholder}
                  value={form.handle}
                  onChange={(e) => setF("handle", e.target.value)}
                />
                <span>.</span>
              </p>

              <div className="convo-form__optional">
                <label className="convo-form__optional-label" htmlFor="convo-msg">
                  Wil je het kort toelichten?
                  <span className="convo-form__optional-hint">optioneel</span>
                </label>
                <textarea
                  id="convo-msg"
                  rows="3"
                  className="convo-form__textarea"
                  placeholder="Bijv. een kenteken, gewenste budget, of het moment dat je het beste bereikbaar bent…"
                  value={form.message}
                  onChange={(e) => setF("message", e.target.value)}
                />
              </div>
            </div>

            <div className="convo-form__foot">
              <small className="convo-form__note">
                <I.shield /> We reageren binnen één werkdag op je voorkeurskanaal.
                Je gegevens delen we met niemand anders.
              </small>
              <button type="submit" className="btn btn--primary convo-form__submit" disabled={sending}>
                {sending ? "Versturen…" : "Verstuur bericht"}
                <span className="btn__arrow"><I.arrow /></span>
              </button>
            </div>

            {result && (
              <div className={"convo-form__result " + (result.success ? "ok" : "err")}>
                {result.success
                  ? <><I.check /> Bedankt {result.firstName} — je bericht is bij ons binnen. We nemen via {result.channelLabel} contact op.</>
                  : <>⚠ {result.error || "Versturen mislukt."} Bel ons gerust direct.</>}
              </div>
            )}
          </form>

          {/* RIGHT: info panel */}
          <aside className="contact-form__aside">
            <div className="contact-aside__block">
              <span className="eyebrow">Locatie</span>
              <h3 className="contact-aside__title">
                Onze locatie in <em>Ede</em>.
              </h3>
              <p className="contact-aside__note" style={{ marginTop: -4 }}>
                Bezoek op afspraak — even bellen of appen, en we zorgen dat
                de auto van jouw interesse klaar staat.
              </p>
              <div className="contact-aside__rows">
                <div className="contact-aside__row">
                  <span className="contact-aside__row-label">Adres</span>
                  <span className="contact-aside__row-value">
                    Nieuwe Maanderbuurtweg 63<br/>6717 AP Ede
                  </span>
                </div>
                <div className="contact-aside__row">
                  <span className="contact-aside__row-label">Telefoon</span>
                  <span className="contact-aside__row-value">
                    <a href="tel:+31649069000">+31 6 49069000</a>
                  </span>
                </div>
                <div className="contact-aside__row">
                  <span className="contact-aside__row-label">E-mail</span>
                  <span className="contact-aside__row-value">
                    <a href="mailto:info@abbaautomotive.nl">info@abbaautomotive.nl</a>
                  </span>
                </div>
                <div className="contact-aside__row">
                  <span className="contact-aside__row-label">KvK</span>
                  <span className="contact-aside__row-value">84086815</span>
                </div>
              </div>
            </div>

            <div className="contact-aside__map">
              <iframe
                title="Locatie Abba Automotive op de kaart"
                src="https://www.google.com/maps?q=Nieuwe+Maanderbuurtweg+63+Ede&output=embed"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
              <a
                href="https://maps.google.com/?q=Nieuwe+Maanderbuurtweg+63+Ede"
                target="_blank" rel="noopener noreferrer"
                className="contact-aside__map-cta"
              >
                Open in Google Maps <span className="btn__arrow"><I.arrow /></span>
              </a>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function RouteInfo() {
  return (
    <section className="section contact-routes" data-screen-label="Contact · Route">
      <div className="container">
        <div className="section__head reveal">
          <div>
            <span className="eyebrow">Bereikbaarheid</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              Drie manieren om<br/>hier te <em>komen</em>.
            </h2>
          </div>
          <p className="section__intro" style={{ marginTop: 0 }}>
            Vlakbij de A12, op fietsafstand van centrum Ede, en bereikbaar met OV
            vanaf station Ede-Wageningen. Laat het weten — we maken het je makkelijk.
          </p>
        </div>

        <div className="contact-routes__grid">
          {ROUTES.map((r, i) => (
            <article className="contact-routes__card reveal" key={i} style={{ transitionDelay: `${i * 60}ms` }}>
              <span className="contact-routes__icon" aria-hidden="true">{r.icon}</span>
              <h4 className="contact-routes__title">{r.title}</h4>
              <p className="contact-routes__desc">{r.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactFaq() {
  const [open, setOpen] = _cus(0);
  return (
    <section className="section contact-faq" data-screen-label="Contact · FAQ">
      <div className="container">
        <div className="section__head reveal">
          <div>
            <span className="eyebrow">Veelgestelde vragen</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              Het korte<br/><em>antwoord</em>.
            </h2>
          </div>
          <p className="section__intro" style={{ marginTop: 0 }}>
            Vijf vragen die we vaker krijgen. Staat jouw vraag er niet bij?
            Bel of stuur een bericht — we helpen je persoonlijk verder.
          </p>
        </div>

        <ul className="contact-faq__list reveal">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <li className={"contact-faq__item " + (isOpen ? "open" : "")} key={i}>
                <button
                  type="button"
                  className="contact-faq__q"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                >
                  <span className="contact-faq__q-num mono">{String(i + 1).padStart(2, "0")}</span>
                  <span className="contact-faq__q-text">{f.q}</span>
                  <span className="contact-faq__q-icon" aria-hidden="true">
                    {isOpen ? "−" : "+"}
                  </span>
                </button>
                <div className="contact-faq__a">
                  <p>{f.a}</p>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

/* ─── PAGE ────────────────────────────────────────────────── */

function ContactPage() {
  useReveal();
  return (
    <>
      <Nav active="contact" />

      <ContactHeader />
      <ContactMethods />
      <ContactFormSection />
      <ContactFaq />

      <section className="cta-block" data-screen-label="Contact · CTA">
        <div className="container">
          <div className="cta-block__inner reveal">
            <div>
              <span className="eyebrow">Of bel gewoon</span>
              <h2 className="cta-block__title">
                Liever direct<br/>iemand aan de <em>lijn</em>?
              </h2>
              <p className="cta-block__desc">
                Geen keuzemenu, geen wachtmuziek. Bel ons — je krijgt iemand
                aan de lijn die je dossier kent of vandaag nog gaat kennen.
              </p>
            </div>
            <div className="cta-block__actions">
              <a href="tel:+31649069000" className="btn btn--primary">
                <I.phone /> +31 6 49069000
              </a>
              <a href="https://wa.me/31649069000" className="contact__cta-wa">
                <I.whatsapp /> Stuur WhatsApp
              </a>
              <a href="mailto:info@abbaautomotive.nl" className="btn btn--ghost">
                <I.mail /> info@abbaautomotive.nl
              </a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <FabWa />
    </>
  );
}

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