// LandAI — Contact Us page. Exposes window.Contact. Used by LandAI.html (and /contact standalone).
(function () {
const { useState, useEffect } = React;

const INK = "#14171C";
const DARK = "#10141A";
const BLUE = "#2E6BF0";
const GREEN = "#1C7A5B";
const PAPER = "#F4F1EA";
const CREAM = "#EFEAE0";
const GRAY = "#5C6168";
const BORDER = "#E4DFD3";
const SERIF = "'Newsreader', Georgia, serif";
const SANS = "'Hanken Grotesk', system-ui, sans-serif";
const MONO = "'JetBrains Mono', monospace";
const APP_STORE_URL = "https://apps.apple.com/us/app/landai-property-maps/id6753875511";
const WEB_APP_URL = "https://app.landai.app";
const openUrl = (u) => window.open(u, "_blank", "noopener");
const nav = (p, fallback) => () => { if (window.__landaiNav) window.__landaiNav(p); else if (fallback) location.href = fallback; };

function useNarrow(max = 900) {
  const [narrow, setNarrow] = useState(() => window.innerWidth <= max);
  useEffect(() => {
    const onResize = () => setNarrow(window.innerWidth <= max);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [max]);
  return narrow;
}

function Mark({ size = 34 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: size * 0.28, background: "#fff", border: `1px solid ${BORDER}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 36 36">
        <path d="M18 5 L31 12 L18 19 L5 12 Z" fill="#2E7D5B" />
        <path d="M5 18 L18 25 L31 18" fill="none" stroke="#2E7D5B" strokeWidth="2.4" strokeLinejoin="round" />
        <path d="M5 24 L18 31 L31 24" fill="none" stroke="#9bbfae" strokeWidth="2.4" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function Nav() {
  const narrow = useNarrow();
  const links = [["Mobile App", nav("mobile", "/")], ["Data Store", nav("store", "/data-store")], ["About", nav("about", "/about")], ["Contact Us", null]];
  const navItemStyle = (active) => ({
    display: "inline-flex",
    alignItems: "center",
    gap: 7,
    fontSize: 15,
    fontWeight: active ? 700 : 500,
    color: INK,
    opacity: active ? 1 : 0.72,
    cursor: active ? "default" : "pointer",
    padding: "7px 11px",
    borderRadius: 999,
    background: active ? "#fff" : "transparent",
    border: active ? `1px solid ${BORDER}` : "1px solid transparent",
    boxShadow: active ? "0 8px 18px rgba(16,40,30,0.06)" : "none"
  });
  const activeDot = <span style={{ width: 7, height: 7, borderRadius: 99, background: BLUE, flexShrink: 0 }} />;
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: narrow ? 14 : 28, padding: narrow ? "16px 20px" : "22px 56px", borderBottom: `1px solid ${BORDER}`, position: "sticky", top: 0, background: PAPER, zIndex: 20, flexWrap: "wrap" }}>
      <div onClick={nav("mobile", "/")} style={{ display: "flex", alignItems: "center", gap: 11, cursor: "pointer" }}>
        <Mark size={34} /><span style={{ fontSize: 22, fontWeight: 700, color: INK, letterSpacing: -0.4 }}>LandAI</span>
      </div>
      <div style={{ display: narrow ? "none" : "flex", gap: 34 }}>
        {links.map(([l, fn], i) => {
          const active = l === "Contact Us";
          return <span key={i} onClick={fn || undefined} style={navItemStyle(active)}>{active && activeDot}{l}</span>;
        })}
      </div>
      <div style={{ display: "flex", gap: narrow ? 12 : 18, alignItems: "center", marginLeft: narrow ? "auto" : 0 }}>
        <span onClick={() => openUrl(WEB_APP_URL)} style={{ fontSize: 15, fontWeight: 500, color: INK, cursor: "pointer" }}>Web app</span>
        <button onClick={() => window.__landaiGetApp && window.__landaiGetApp()} style={{ border: "none", background: INK, color: "#fff", fontSize: 14, fontWeight: 600, padding: narrow ? "10px 16px" : "11px 22px", borderRadius: 99, cursor: "pointer", fontFamily: SANS }}>Get the app</button>
      </div>
    </div>
  );
}

function Eyebrow({ children }) {
  return <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: 1.4, color: "#9aa099", textTransform: "uppercase", fontWeight: 600 }}>{children}</div>;
}

const INQUIRIES = [
  ["sales", "Sales & plans", "Pricing, teams, and the right plan for you.", "tag"],
  ["data", "Data licensing", "Bulk parcel data, API access, or nationwide coverage.", "layers"],
  ["support", "Help & support", "Account, billing, or something not working right.", "life"],
  ["press", "Press & partnerships", "Media requests and partnership ideas.", "mic"],
];

function InqIcon({ kind, active }) {
  const c = active ? "#fff" : INK;
  const p = {
    tag: <g><path d="M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" /></g>,
    layers: <g><path d="M12 3l9 5-9 5-9-5 9-5z" /><path d="M3 13l9 5 9-5" /></g>,
    life: <g><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="4" /><path d="M5 5l3.5 3.5M19 5l-3.5 3.5M5 19l3.5-3.5M19 19l-3.5-3.5" /></g>,
    mic: <g><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3" /></g>,
  }[kind];
  return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{p}</svg>;
}

function Field({ label, placeholder, value, onChange, type = "text", required, tall, half }) {
  return (
    <div style={{ marginBottom: 16, flex: half ? 1 : "none" }}>
      <div style={{ fontSize: 13.5, fontWeight: 700, color: INK, marginBottom: 7 }}>{label}{required && <span style={{ color: BLUE }}> *</span>}</div>
      {tall ? (
        <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} rows={5} style={{ width: "100%", border: `1.5px solid ${BORDER}`, borderRadius: 11, padding: "13px 15px", fontSize: 15, color: INK, fontFamily: SANS, background: "#fff", outline: "none", resize: "vertical", boxSizing: "border-box" }} />
      ) : (
        <input value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} type={type} style={{ width: "100%", border: `1.5px solid ${BORDER}`, borderRadius: 11, height: 48, padding: "0 15px", fontSize: 15, color: INK, fontFamily: SANS, background: "#fff", outline: "none", boxSizing: "border-box" }} />
      )}
    </div>
  );
}

function ContactCard() {
  const narrow = useNarrow();
  const [inq, setInq] = useState("sales");
  const [f, setF] = useState({ name: "", email: "", company: "", phone: "", subject: "", message: "" });
  const [consent, setConsent] = useState(false);
  const [sent, setSent] = useState(false);
  const [status, setStatus] = useState("idle");
  const [error, setError] = useState("");
  const set = (k) => (v) => {
    setF(s => ({ ...s, [k]: v }));
    setError("");
  };
  const valid = f.name && f.email && f.message && consent;
  const submit = async () => {
    if (!valid || status === "sending") return;
    setStatus("sending");
    setError("");
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          source: "contact-page",
          inquiry: inq,
          name: f.name,
          email: f.email,
          phone: f.phone,
          company: f.company,
          subject: f.subject || "Website contact inquiry",
          message: f.message,
          consent,
          page: window.location.href,
        }),
      });
      const contentType = response.headers.get("content-type") || "";
      if (!contentType.includes("application/json")) {
        throw new Error("Email endpoint is not available on this local server.");
      }
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) throw new Error(payload.error || "Message could not be sent.");
      setSent(true);
    } catch (err) {
      setError(`${err.message || "Message could not be sent."} You can also email john@landai.app directly.`);
    } finally {
      setStatus("idle");
    }
  };

  if (sent) return (
    <div style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 22, padding: "56px 44px", textAlign: "center", boxShadow: "0 30px 70px rgba(16,40,30,0.08)" }}>
      <div style={{ width: 64, height: 64, borderRadius: 99, background: "#e7efe9", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 22px" }}>
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#2E7D5B" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
      </div>
      <h2 style={{ fontFamily: SERIF, fontSize: 32, color: INK, margin: "0 0 10px", fontWeight: 500 }}>Message sent.</h2>
      <p style={{ fontSize: 16, color: GRAY, lineHeight: 1.55, maxWidth: 380, margin: "0 auto 24px" }}>Thanks, {f.name.split(" ")[0] || "there"}. Our team replies within one business day — keep an eye on {f.email || "your inbox"}.</p>
      <button onClick={() => { setSent(false); setF({ name: "", email: "", company: "", phone: "", subject: "", message: "" }); setConsent(false); }} style={{ border: `1.5px solid ${INK}`, background: "transparent", color: INK, fontSize: 15, fontWeight: 600, padding: "12px 26px", borderRadius: 99, cursor: "pointer", fontFamily: SANS }}>Send another</button>
    </div>
  );

  return (
    <div style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 22, padding: 36, boxShadow: "0 30px 70px rgba(16,40,30,0.08)" }}>
      <div style={{ fontSize: 13.5, fontWeight: 700, color: INK, marginBottom: 12 }}>What can we help with?</div>
      <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "1fr 1fr", gap: 10, marginBottom: 26 }}>
        {INQUIRIES.map(([k, t, d]) => {
          const active = inq === k;
          return (
            <div key={k} onClick={() => setInq(k)} style={{ border: active ? `2px solid ${INK}` : `1.5px solid ${BORDER}`, background: active ? INK : "#fff", borderRadius: 14, padding: "14px 15px", cursor: "pointer", display: "flex", flexDirection: "column", gap: 9 }}>
              <InqIcon kind={INQUIRIES.find(x => x[0] === k)[3]} active={active} />
              <div>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: active ? "#fff" : INK }}>{t}</div>
                <div style={{ fontSize: 12, color: active ? "rgba(255,255,255,0.7)" : GRAY, lineHeight: 1.35, marginTop: 2 }}>{d}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ display: "flex", flexDirection: narrow ? "column" : "row", gap: narrow ? 0 : 14 }}>
        <Field half label="Full name" placeholder="Jordan Reyes" value={f.name} onChange={set("name")} required />
        <Field half label="Email" placeholder="you@company.com" value={f.email} onChange={set("email")} type="email" required />
      </div>
      <div style={{ display: "flex", flexDirection: narrow ? "column" : "row", gap: narrow ? 0 : 14 }}>
        <Field half label="Company / organization" placeholder="Acme Land Co." value={f.company} onChange={set("company")} />
        <Field half label="Phone (optional)" placeholder="(555) 555-1234" value={f.phone} onChange={set("phone")} type="tel" />
      </div>
      <Field label="Subject" placeholder="Briefly, what's this about?" value={f.subject} onChange={set("subject")} />
      <Field label="How can we help?" placeholder="Tell us what you're working on and what you need." value={f.message} onChange={set("message")} tall required />

      <div onClick={() => setConsent(c => !c)} style={{ display: "flex", gap: 11, alignItems: "flex-start", cursor: "pointer", margin: "4px 0 22px" }}>
        <span style={{ flexShrink: 0, width: 20, height: 20, borderRadius: 5, border: consent ? "none" : `2px solid #b9bdb5`, background: consent ? GREEN : "#fff", display: "flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
          {consent && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>}
        </span>
        <span style={{ fontSize: 13.5, color: GRAY, lineHeight: 1.45 }}>I agree to LandAI's <span style={{ color: BLUE, fontWeight: 600 }}>privacy policy</span> and consent to being contacted about my inquiry.</span>
      </div>

      {error && <div style={{ color: "#a83f32", background: "#fff0ed", border: "1px solid #f0c8bf", borderRadius: 10, padding: "10px 12px", fontSize: 13.5, lineHeight: 1.45, marginBottom: 14 }}>{error}</div>}
      <button onClick={submit} disabled={!valid || status === "sending"} style={{ width: "100%", border: "none", background: valid && status !== "sending" ? INK : "#bcbcb4", color: "#fff", fontSize: 16, fontWeight: 700, padding: "16px 0", borderRadius: 99, cursor: valid && status !== "sending" ? "pointer" : "default", fontFamily: SANS, transition: "background .15s" }}>
        {status === "sending" ? "Sending..." : "Send message"}
      </button>
    </div>
  );
}

function ContactMethod({ icon, label, value, sub }) {
  return (
    <div style={{ display: "flex", gap: 16, alignItems: "flex-start", padding: "18px 0", borderBottom: `1px solid ${BORDER}` }}>
      <div style={{ flexShrink: 0, width: 44, height: 44, borderRadius: 12, background: "#fff", border: `1px solid ${BORDER}`, display: "flex", alignItems: "center", justifyContent: "center" }}>{icon}</div>
      <div>
        <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: 1.2, color: "#9aa099", textTransform: "uppercase", fontWeight: 600 }}>{label}</div>
        <div style={{ fontSize: 17, fontWeight: 700, color: INK, marginTop: 4 }}>{value}</div>
        {sub && <div style={{ fontSize: 13.5, color: GRAY, marginTop: 2 }}>{sub}</div>}
      </div>
    </div>
  );
}

function Footer() {
  const narrow = useNarrow();
  const go = (t) => {
    if (t === "mobile") return window.__landaiNav ? window.__landaiNav("mobile") : (location.href = "/");
    if (t === "store") return window.__landaiNav ? window.__landaiNav("store") : (location.href = "/data-store");
    if (t === "contact") return window.__landaiNav ? window.__landaiNav("contact") : (location.href = "/contact");
    if (t === "about") return window.__landaiNav ? window.__landaiNav("about") : (location.href = "/about");
    if (t === "privacy") return location.href = "/privacy";
    if (t === "web") return openUrl(WEB_APP_URL);
    if (t === "app") return window.__landaiGetApp && window.__landaiGetApp();
  };
  const cols = [
    ["Product", [["Mobile App", "mobile"], ["Data Store", "store"], ["Web app", "web"], ["Get the app", "app"]]],
    ["For", [["Hunters", "mobile"], ["Real estate", "mobile"], ["Landowners", "mobile"], ["Investors", "mobile"]]],
    ["Company", [["About", "about"], ["Contact", "contact"], ["Privacy", "privacy"], ["Terms", null]]],
  ];
  return (
    <div style={{ background: PAPER, padding: narrow ? "44px 20px 30px" : "60px 64px 34px", borderTop: `1px solid ${BORDER}` }}>
      <div style={{ display: "flex", flexDirection: narrow ? "column" : "row", gap: narrow ? 34 : 60, maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ flex: 1.4 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}><Mark size={40} /><span style={{ fontSize: 22, fontWeight: 700, color: INK, letterSpacing: -0.4 }}>LandAI</span></div>
          <div style={{ color: GRAY, fontSize: 16, lineHeight: 1.5, marginTop: 22, maxWidth: 300 }}>Property intelligence for the people who actually walk the land.</div>
        </div>
        {cols.map(([h, items], i) => (
          <div key={i} style={{ flex: 1 }}>
            <div style={{ color: "#9aa099", fontSize: 12, fontWeight: 600, letterSpacing: 1.6, textTransform: "uppercase", marginBottom: 22, fontFamily: MONO }}>{h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>{items.map(([label, t], j) => <span key={j} onClick={t ? () => go(t) : undefined} style={{ color: INK, fontSize: 16.5, cursor: t ? "pointer" : "default" }}>{label}</span>)}</div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1280, margin: "56px auto 0", paddingTop: 24, borderTop: `1px solid ${BORDER}`, display: "flex", flexDirection: narrow ? "column" : "row", gap: 10, justifyContent: "space-between", fontFamily: MONO, fontSize: 13, letterSpacing: 1.5, color: "#9aa099" }}>
        <span>© 2026 LANDAI</span><span>BUILT IN NORTH CAROLINA</span>
      </div>
    </div>
  );
}

function Contact() {
  const narrow = useNarrow();
  const ico = (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={INK} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{p}</svg>;
  return (
    <div style={{ background: PAPER, fontFamily: SANS, minHeight: "100vh" }}>
      <Nav />
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: narrow ? "48px 20px 28px" : "64px 56px 30px", display: "flex", flexDirection: narrow ? "column" : "row", gap: narrow ? 38 : 72, alignItems: "flex-start" }}>
        {/* left */}
        <div style={{ flex: narrow ? "none" : "0 0 420px", paddingTop: 8 }}>
          <Eyebrow>Contact us</Eyebrow>
          <h1 style={{ fontFamily: SERIF, fontSize: narrow ? 42 : 60, lineHeight: 0.98, color: INK, letterSpacing: -1.4, margin: "16px 0 0", fontWeight: 500 }}>Let's get you<br />on the <span style={{ fontStyle: "italic", color: BLUE }}>right land.</span></h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: GRAY, margin: "22px 0 30px", maxWidth: 380 }}>
            Questions about a plan, bulk parcel data, or your account? Send a note and the team will get back within one business day.
          </p>
          <div>
            <ContactMethod label="Email" value="hello@landai.app" sub="General questions & sales" icon={ico(<g><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></g>)} />
            <ContactMethod label="Data licensing" value="parcels@landai.app" sub="Bulk data & API access" icon={ico(<g><path d="M12 3l9 5-9 5-9-5 9-5z" /><path d="M3 13l9 5 9-5" /></g>)} />
            <ContactMethod label="HQ" value="Greensboro, North Carolina" sub="Built for the field, from the field" icon={ico(<g><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z" /><circle cx="12" cy="10" r="2.5" /></g>)} />
          </div>
        </div>
        {/* right */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <ContactCard />
        </div>
      </div>
      <Footer />
    </div>
  );
}

window.Contact = Contact;
if (!window.__landaiHost && document.getElementById("root")) {
  ReactDOM.createRoot(document.getElementById("root")).render(<Contact />);
}
})();