/* global React */
const { useState: useContactState } = React;

window.ContactPage = function ContactPage() {
  const [form, setForm] = useContactState({
    name: "",
    email: "",
    company: "",
    topic: "leasing",
    message: ""
  });
  const [submitted, setSubmitted] = useContactState(false);

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const topics = [
  { id: "leasing", label: "Eiendom" },
  { id: "selge", label: "Leie" },
  { id: "presse", label: "Presse" },
  { id: "annet", label: "Annet" }];


  return (
    <div>
      <section style={ctStyles.hero}>
        <div style={ctStyles.heroInner}>
          <div style={{ ...ctStyles.overline, fontSize: "20px", color: "rgb(207, 139, 81)" }}>Kontakt oss</div>
          <h2 style={ctStyles.headline}>
            La oss snakke eiendom. <span style={{ fontStyle: "italic", color: "rgb(207, 139, 81)" }}></span>
          </h2>
        </div>
      </section>
      <section style={ctStyles.formSection}>
        <div style={ctStyles.formGrid}>
          {/* LEFT — contact info */}
          <div style={ctStyles.left}>
            {/* Selskapspost */}
            <div style={ctStyles.infoBlock}>
              <div style={{ ...ctStyles.infoLabel, fontSize: "14px" }}>Selskapspost</div>
              <a href="mailto:ja@voltproperty.no" style={ctStyles.infoLink}>ja@voltproperty.no</a>
            </div>

            {/* Telefonnummer */}
            <div style={ctStyles.infoBlock}>
              <div style={{ ...ctStyles.infoLabel, fontSize: "14px" }}>Telefonnummer</div>
              <a href="tel:+4741599960" style={ctStyles.infoLink}>+47 41 59 99 60</a>
            </div>
          </div>

          {/* RIGHT — form */}
          <div style={ctStyles.right}>
            {submitted ? <div style={ctStyles.success}>
                <div style={ctStyles.checkmark}>
                  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                    <circle cx="20" cy="20" r="19" stroke="#4f6f3f" strokeWidth="1.5" />
                    <path d="M 12 20 L 18 26 L 28 14" stroke="#4f6f3f" strokeWidth="1.5"
                  fill="none" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
                <h2 style={ctStyles.successHeadline}>Takk for henvendelsen.</h2>
                <p style={ctStyles.successBody}>
                  Vi tar kontakt med deg på {form.email || "e-post"} innen samme arbeidsdag.
                  I mellomtiden — finn deg en god kopp kaffe.
                </p>
                <button onClick={() => {setForm({ name: "", email: "", company: "", topic: "leasing", message: "" });setSubmitted(false);}}
              style={ctStyles.resetBtn}>
                  Send ny henvendelse
                </button>
              </div> :

            <form onSubmit={handleSubmit} style={ctStyles.form}>
                <div style={ctStyles.field}>
                  <label style={{ ...ctStyles.flabel, fontSize: "16px" }}>Hva gjelder det?</label>
                  <div style={ctStyles.topicRow}>
                    {topics.map((t) =>
                  <button key={t.id} type="button"
                  onClick={() => setForm({ ...form, topic: t.id })}
                  style={{
                    ...ctStyles.topicBtn,
                    ...(form.topic === t.id ? ctStyles.topicBtnActive : null)
                  }}>
                        {t.label}
                      </button>
                  )}
                  </div>
                </div>

                <div style={ctStyles.fieldRow}>
                  <div style={ctStyles.field}>
                    <label style={{ ...ctStyles.flabel, fontSize: "16px" }}>Navn</label>
                    <input type="text" value={form.name} onChange={update("name")}
                  required placeholder="Ditt fulle navn" style={ctStyles.input} />
                  </div>
                  <div style={ctStyles.field}>
                    <label style={{ ...ctStyles.flabel, fontSize: "16px" }}>Selskap</label>
                    <input type="text" value={form.company} onChange={update("company")}
                  placeholder="Valgfritt" style={ctStyles.input} />
                  </div>
                </div>

                <div style={ctStyles.field}>
                  <label style={{ ...ctStyles.flabel, fontSize: "16px" }}>E-post</label>
                  <input type="email" value={form.email} onChange={update("email")}
                required placeholder="navn@selskap.no" style={ctStyles.input} />
                </div>

                <div style={ctStyles.field}>
                  <label style={{ ...ctStyles.flabel, fontSize: "16px" }}>Melding</label>
                  <textarea value={form.message} onChange={update("message")}
                required rows={6}
                placeholder="Skriv noen ord om hva du leter etter, eller hva vi kan hjelpe med."
                style={ctStyles.textarea} />
                </div>

                <div style={ctStyles.submitRow}>
                  <button type="submit" style={ctStyles.submitBtn}>
                    Send melding <span style={{ marginLeft: 8 }}>→</span>
                  </button>
                  <div style={ctStyles.disclaimer}>
                    Vi behandler dine opplysninger i tråd med vår personvernerklæring.
                  </div>
                </div>
              </form>
            }
          </div>
        </div>
      </section>

      {/* Map / location strip */}
      <section style={ctStyles.location}>
        <div style={ctStyles.locInner}>
          <div style={ctStyles.locMeta}>
            <div style={{ ...ctStyles.locOverline, color: "rgb(207, 139, 81)", fontSize: "20px" }}>HER FINNER DU OSS</div>
            <h2 style={ctStyles.locHeadline}>Sandnes, Norge</h2>
          </div>
          <div style={ctStyles.mapPlaceholder}>
            <iframe
              title="Kart over Sandnes"
              src="https://www.openstreetmap.org/export/embed.html?bbox=5.6800%2C58.8200%2C5.8000%2C58.8900&amp;layer=mapnik&amp;marker=58.8517%2C5.7361"
              style={{ border: 0, width: "100%", height: "100%", display: "block", filter: "saturate(0.85)" }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade" />
            
          </div>
        </div>
      </section>
    </div>);

};

const ctStyles = {
  hero: { background: "#f2f2ec", padding: "56px 32px 24px" },
  heroInner: { maxWidth: 1240, margin: "0 auto" },
  overline: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
    color: "#7a8492", fontWeight: 500, marginBottom: 28
  },
  headline: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontWeight: 500, fontSize: 56, lineHeight: 1.12,
    letterSpacing: "-0.01em", color: "#0d1b2a", margin: 0, maxWidth: 920
  },
  lead: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 20, lineHeight: 1.6, color: "#4a5868",
    marginTop: 28, maxWidth: 680
  },
  formSection: { background: "#f2f2ec", padding: "32px 32px 96px" },
  formGrid: {
    maxWidth: 1240, margin: "0 auto",
    display: "grid", gridTemplateColumns: "1fr 1.7fr", gap: 56,
    alignItems: "start"
  },
  left: {
    background: "#f9f8f2", borderRadius: 24, padding: 32,
    boxShadow: "0 0 0 1px #ebe9df",
    display: "flex", flexDirection: "column", gap: 28
  },
  personList: { display: "flex", flexDirection: "column", gap: 28 },
  personRow: {
    display: "flex", flexDirection: "column", gap: 2,
    paddingLeft: 16,
    borderLeft: "2px solid #ebe9df"
  },
  personName: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontSize: 18, color: "#0d1b2a", fontWeight: 500
  },
  personRole: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 12, color: "#7a8492", marginBottom: 8,
    letterSpacing: "0.04em", textTransform: "uppercase"
  },
  personLink: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 14, color: "#b8743a", textDecoration: "none", border: 0,
    lineHeight: 1.6
  },
  infoBlock: {},
  infoLabel: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
    color: "#7a8492", fontWeight: 500, marginBottom: 12
  },
  infoValue: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontSize: 18, lineHeight: 1.55, color: "#0d1b2a"
  },
  infoLink: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontSize: 20, color: "#0d1b2a",
    border: 0, textDecoration: "none",
    borderBottom: "1px solid #b8743a", paddingBottom: 1
  },
  hours: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 13, color: "#7a8492", marginTop: 8
  },
  directRow: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-end",
    paddingTop: 16, gap: 12
  },
  directName: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontSize: 16, color: "#0d1b2a", fontWeight: 500
  },
  directRole: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 13, color: "#7a8492", marginTop: 2
  },
  smallLink: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 13, color: "#b8743a", textDecoration: "none", border: 0
  },
  right: {},
  form: {
    background: "#f9f8f2", borderRadius: 24, padding: 48,
    boxShadow: "0 0 0 1px #ebe9df",
    display: "flex", flexDirection: "column", gap: 28
  },
  field: { display: "flex", flexDirection: "column", gap: 10 },
  fieldRow: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 },
  flabel: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 13, color: "#0d1b2a", fontWeight: 500
  },
  input: {
    height: 52, borderRadius: 12, padding: "0 16px",
    border: 0, background: "#ffffff",
    boxShadow: "0 0 0 1px #ebe9df",
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 15, color: "#0d1b2a", outline: "none"
  },
  textarea: {
    minHeight: 140, borderRadius: 12, padding: "16px",
    border: 0, background: "#ffffff",
    boxShadow: "0 0 0 1px #ebe9df",
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 15, color: "#0d1b2a", outline: "none",
    resize: "vertical", lineHeight: 1.5
  },
  topicRow: { display: "flex", gap: 8, flexWrap: "wrap" },
  topicBtn: {
    background: "transparent", border: 0,
    boxShadow: "0 0 0 1px #d8d6c9",
    borderRadius: 999, height: 38, padding: "0 16px",
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 13, fontWeight: 500, color: "#4a5868",
    cursor: "pointer",
    transition: "all 160ms cubic-bezier(0.22,1,0.36,1)"
  },
  topicBtnActive: {
    background: "#0d1b2a", color: "#f2f2ec",
    boxShadow: "0 0 0 1px #0d1b2a"
  },
  submitRow: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    gap: 24, marginTop: 8, flexWrap: "wrap"
  },
  submitBtn: {
    background: "#b8743a", color: "#f2f2ec", border: 0,
    borderRadius: 999, height: 52, padding: "0 26px",
    fontSize: 15, fontWeight: 500, cursor: "pointer",
    fontFamily: "Inter Tight, system-ui, sans-serif",
    display: "inline-flex", alignItems: "center"
  },
  disclaimer: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 12, color: "#7a8492", maxWidth: 280
  },
  success: {
    background: "#f9f8f2", borderRadius: 24, padding: 56,
    boxShadow: "0 0 0 1px #ebe9df",
    textAlign: "center"
  },
  checkmark: { display: "flex", justifyContent: "center", marginBottom: 24 },
  successHeadline: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontSize: 36, fontWeight: 500, color: "#0d1b2a", margin: 0, marginBottom: 16
  },
  successBody: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 17, lineHeight: 1.6, color: "#4a5868",
    margin: 0, marginBottom: 32, maxWidth: 480, marginLeft: "auto", marginRight: "auto"
  },
  resetBtn: {
    background: "transparent", color: "#0d1b2a",
    border: 0, boxShadow: "0 0 0 1px #d8d6c9",
    borderRadius: 999, height: 44, padding: "0 22px",
    fontSize: 14, fontWeight: 500, cursor: "pointer",
    fontFamily: "Inter Tight, system-ui, sans-serif"
  },
  location: { background: "#f9f8f2", padding: "56px 32px 72px", borderTop: "1px solid #ebe9df" },
  locInner: {
    maxWidth: 1240, margin: "0 auto",
    display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 40,
    alignItems: "center"
  },
  locMeta: {},
  locOverline: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
    color: "#7a8492", fontWeight: 500, marginBottom: 12
  },
  locHeadline: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontSize: 32, fontWeight: 500, color: "#0d1b2a", margin: 0,
    lineHeight: 1.15, letterSpacing: "-0.005em"
  },
  locBody: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 15, lineHeight: 1.6, color: "#4a5868",
    marginTop: 12, maxWidth: 380
  },
  mapPlaceholder: {
    aspectRatio: "2.4",
    borderRadius: 20, overflow: "hidden",
    boxShadow: "0 0 0 1px #ebe9df",
    background: "#e6e4d8"
  }
};