// page-kontakt.jsx — Kontakt (with form validation)

function PageKontakt({ setRoute }) {
  const [form, setForm] = React.useState({
    name: "", company: "", email: "", phone: "",
    type: "erhverv", scope: "", message: "",
    when: "vurdering", gdpr: false
  });
  const [touched, setTouched] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  function validate(values) {
    const e = {};
    if (!values.name || values.name.trim().length < 2) e.name = "Skriv venligst dit navn";
    if (!values.company || values.company.trim().length < 2) e.company = "Skriv venligst virksomhed";
    if (!values.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) e.email = "Skriv en gyldig e-mail";
    if (!values.phone || !/^[+\d\s()-]{8,}$/.test(values.phone)) e.phone = "Skriv et gyldigt telefonnummer";
    if (!values.message || values.message.trim().length < 12) e.message = "Beskriv venligst projektet kort (min. 12 tegn)";
    if (!values.gdpr) e.gdpr = "Du skal acceptere for at fortsætte";
    return e;
  }
  const errors = validate(form);
  const ok = Object.keys(errors).length === 0;
  function show(field) {return (touched[field] || submitted) && errors[field];}

  function handleSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
    if (ok) {
      // pretend submit
      setTimeout(() => {
        setForm({ name: "", company: "", email: "", phone: "", type: "erhverv", scope: "", message: "", when: "vurdering", gdpr: false });
        setTouched({});
        setSubmitted("done");
      }, 300);
    }
  }

  function set(k, v) {setForm((f) => ({ ...f, [k]: v }));}
  function blur(k) {setTouched((t) => ({ ...t, [k]: true }));}

  const WHEN_OPTIONS = [
  { k: "vurdering", l: "En indledende vurdering" },
  { k: "tilbud", l: "Et konkret tilbud" },
  { k: "rammeaftale", l: "En ramme­aftale" },
  { k: "sparring", l: "Bare sparring" }];

  const [whenOpen, setWhenOpen] = React.useState(false);
  const whenRef = React.useRef(null);
  React.useEffect(() => {
    function onDoc(e) { if (whenRef.current && !whenRef.current.contains(e.target)) setWhenOpen(false); }
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  return (
    <div className="page pal-teil-cta">
      <header className="page-header">
        <div className="ph-bg"></div>
        <div className="wrap">
          <div className="intro-banner">
            <h1 className="h-display">
              Vi vender<br />
              <em className="serif-it" style={{ color: 'var(--accent)', fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontWeight: 500, textTransform: 'none', fontSize: '0.7em', letterSpacing: '-0.02em', display: 'block', marginTop: 12 }}>
                tilbage senest næste arbejdsdag
              </em>
            </h1>
            <p className="lead">En projektleder fra det relevante fagområde vil tage kontakt - og ringer aldrig senere end næste arbejdsdag.</p>
          </div>
        </div>
      </header>

      <section className="section" id="kontaktform">
        <div className="wrap">
          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            {submitted === "done" ?
            <div style={{
                padding: '56px 48px',
                border: '1px solid var(--accent)',
                background: 'rgba(148,67,30,0.08)',
                display: 'flex',
                flexDirection: 'column',
                gap: 20
              }}>
                <ChevSVG size={40} />
                <h2 style={{ fontFamily: 'var(--f-display)', fontWeight: 800, fontSize: 36, textTransform: 'uppercase', letterSpacing: '-0.02em', margin: 0 }}>Tak — din forespørgsel er sendt.</h2>
                <p className="lead" style={{ margin: 0, fontSize: 20 }}>
                  En projektleder vender tilbage senest næste arbejdsdag. Hvis det haster, er du velkommen til at ringe direkte på +45 21 65 91 04.
                </p>
                <button type="button" className="btn ghost" onClick={() => {setSubmitted(false);setRoute("home");}}>
                  Tilbage til forsiden <Arrow size={14} />
                </button>
              </div> :

            <>
                <div>
                  <h2 className="h-section" style={{ marginTop: 0, fontSize: 'clamp(32px, 4vw, 48px)' }}>Skriv til os</h2>
                </div>

                <div className="field-row">
                  <div className={`field ${show('name') ? 'invalid' : ''}`}>
                    <label>Navn *</label>
                    <input type="text" value={form.name} onChange={(e) => set('name', e.target.value)} onBlur={() => blur('name')} placeholder="Dit fulde navn" />
                    <div className="err">{show('name') ? errors.name : '\u00A0'}</div>
                  </div>
                  <div className={`field ${show('company') ? 'invalid' : ''}`}>
                    <label>Virksomhed *</label>
                    <input type="text" value={form.company} onChange={(e) => set('company', e.target.value)} onBlur={() => blur('company')} placeholder="Virksomhed eller bygherre" />
                    <div className="err">{show('company') ? errors.company : '\u00A0'}</div>
                  </div>
                </div>

                <div className="field-row">
                  <div className={`field ${show('email') ? 'invalid' : ''}`}>
                    <label>E-mail *</label>
                    <input type="email" value={form.email} onChange={(e) => set('email', e.target.value)} onBlur={() => blur('email')} placeholder="dit.navn@firma.dk" />
                    <div className="err">{show('email') ? errors.email : '\u00A0'}</div>
                  </div>
                  <div className={`field ${show('phone') ? 'invalid' : ''}`}>
                    <label>Telefon *</label>
                    <input type="tel" value={form.phone} onChange={(e) => set('phone', e.target.value)} onBlur={() => blur('phone')} placeholder="+45 ··· ·· ·· ··" />
                    <div className="err">{show('phone') ? errors.phone : '\u00A0'}</div>
                  </div>
                </div>

                <div className="field-row">
                <div className="field">
                  <label>Projekttype</label>
                  <div className="choice-row squares" style={{ marginTop: 8 }}>
                    {[
                  { k: "erhverv", l: "Erhverv" },
                  { k: "infra", l: "Infrastruktur" },
                  { k: "anlaeg", l: "Anlæg" },
                  { k: "natur", l: "Natur" }].
                  map((o) =>
                  <button key={o.k} type="button"
                  onClick={() => set('type', o.k)}
                  className={`choice ${form.type === o.k ? "on" : ""}`}>
                        <span className="chead">{o.l}</span>
                      </button>
                  )}
                  </div>
                  <div className="err">{'\u00A0'}</div>
                </div>

                <div className="field">
                  <label>Hvad har du brug for?</label>
                  <div className="dropdown-wrap" ref={whenRef}>
                    <button type="button" className="dropdown-trigger" onClick={() => setWhenOpen((o) => !o)}>
                      <span>{WHEN_OPTIONS.find((o) => o.k === form.when).l}</span>
                      <CaretDown size={10} />
                    </button>
                    {whenOpen &&
                    <div className="dropdown-menu">
                      {WHEN_OPTIONS.map((o) =>
                      <button key={o.k} type="button"
                      className={`dropdown-item ${form.when === o.k ? "on" : ""}`}
                      onClick={() => { set('when', o.k); setWhenOpen(false); }}>
                        {o.l}
                      </button>
                      )}
                    </div>
                    }
                  </div>
                  <div className="err">{'\u00A0'}</div>
                </div>
                </div>

                <div className={`field ${show('message') ? 'invalid' : ''}`}>
                  <label>Projektet *</label>
                  <textarea rows="5" value={form.message} onChange={(e) => set('message', e.target.value)} onBlur={() => blur('message')}
                placeholder="Beskriv kort projektet, lokationen og hvad du har brug for hjælp til."></textarea>
                  <div className="err">{show('message') ? errors.message : '\u00A0'}</div>
                </div>

                <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
                  <button type="submit" className="btn">
                    Send forespørgsel <Arrow size={14} />
                  </button>
                  <span style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', color: 'var(--ink-mute)', fontSize: 19 }}>
                    Vi vender tilbage senest næste arbejdsdag
                  </span>
                </div>

                <div className={`field ${show('gdpr') ? 'invalid' : ''}`} style={{ gap: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <input type="checkbox" checked={form.gdpr} onChange={(e) => set('gdpr', e.target.checked)} onBlur={() => blur('gdpr')} style={{ width: 18, height: 18, marginTop: 2, accentColor: 'var(--accent)' }} />
                    <label style={{ fontFamily: 'var(--f-body)', fontSize: 13, fontWeight: 400, letterSpacing: 0, textTransform: 'none', color: 'var(--ink-soft)', lineHeight: 1.5 }}>
                      Jeg accepterer, at DM Entreprenør A/S behandler mine oplysninger i henhold til <a href="#" className="gdpr-link">privatlivspolitikken</a>.
                    </label>
                  </div>
                  <div className="err">{show('gdpr') ? errors.gdpr : '\u00A0'}</div>
                </div>
              </>
            }
          </form>
        </div>
      </section>

      <section className="section deep">
        <div className="wrap">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="ci-block">
                <div className="ci-lbl">Hovedkontor</div>
                <div className="ci-val"><a href="https://www.google.com/maps/search/?api=1&query=Vasen+4,+8950+%C3%98rsted" target="_blank" rel="noopener" className="ci-map-link">Vasen 4<br />8950 Ørsted</a></div>
              </div>
              <div className="ci-block">
                <div className="ci-lbl">Direkte</div>
                <div className="ci-val">+45 21 65 91 04</div>
              </div>
              <div className="ci-block">
                <div className="ci-lbl">Skriv direkte</div>
                <div className="ci-val">info<em>@</em>entdm.dk</div>
              </div>
              <div className="ci-block" style={{ borderBottom: 0 }}>
                <div className="ci-lbl">Åbningstider</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 15, color: 'var(--ink-soft)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Mandag – torsdag</span><span className="mono">07:00 — 16:00</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Fredag</span><span className="mono">07:00 — 14:00</span></div>
                </div>
              </div>
            </div>

            {/* Map placeholder / illustration */}
            <div>
              <ImageBlock id="kontakt-map" label="Ørsted · hovedkontor" aspect="4-3" placeholderIcon="◎" />
              <a href="https://www.google.com/maps/search/?api=1&query=Vasen+4,+8950+%C3%98rsted" target="_blank" rel="noopener" className="map-cta" style={{
                display: 'inline-block',
                marginTop: 16,
                padding: '14px 18px',
                background: 'var(--accent)',
                color: 'var(--hvid)',
                fontFamily: 'var(--f-display)',
                fontWeight: 700,
                fontSize: 12,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                textDecoration: 'none'
              }}>Vis på kort</a>
            </div>
          </div>
        </div>
      </section>

      <div id="karriere"></div>
      <CTABand
        setRoute={setRoute}
        heading={<>Vil du være<br/><em>en del af holdet?</em></>}
        sub={<>Vi er altid på udkig efter dygtige folk, der deler DM-arbejdsånden, viljen til succes og altid stræbsomme faglighed. Hold øje med ledige stillinger på vores <a href="https://www.facebook.com/people/Entrepren%C3%B8r-Daniel-Madsen-AS/100031117705776/?locale=da_DK" target="_blank" rel="noopener" className="cta-band-link">Facebook-side</a>, eller indsend dit uopfordrede materiale her. Vi glæder os til at høre fra dig.</>}
        ctaLabel="Ansøg uopfordret" />

    </div>);

}

window.PageKontakt = PageKontakt;