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

const INK = "#14171C";
const DARK = "#10141A";
const BLUE = "#2E6BF0";
const GREEN = "#2E7D5B";
const PAPER = "#F4F1EA";
const CREAM = "#EFEAE0";
const MINT = "#E7EDF6";
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 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", null], ["Contact Us", nav("contact", "/contact")]];
  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 === "About";
          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, light }) {
  return <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: 1.4, color: light ? "rgba(255,255,255,0.5)" : "#9aa099", textTransform: "uppercase", fontWeight: 600 }}>{children}</div>;
}

// faint parcel-grid backdrop for the hero
function GridBackdrop() {
  const lines = [];
  for (let x = 0; x <= 1400; x += 56) lines.push(`M ${x} 0 L ${x} 460`);
  for (let y = 0; y <= 460; y += 56) lines.push(`M 0 ${y} L 1400 ${y}`);
  return (
    <svg viewBox="0 0 1400 460" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
      <path d={lines.join(" ")} fill="none" stroke="#d9d2c2" strokeWidth="1" opacity="0.6" />
      <g fill="none" stroke={GREEN} strokeWidth="1.6" opacity="0.4">
        <path d="M 168 112 L 336 112 L 336 224 L 168 224 Z" />
        <path d="M 952 168 L 1120 168 L 1120 280 L 952 280 Z" />
        <path d="M 560 56 L 728 56 L 728 168 L 560 168 Z" />
      </g>
      <g fill={BLUE} opacity="0.5">
        <circle cx="252" cy="168" r="4" /><circle cx="1036" cy="224" r="4" />
      </g>
    </svg>
  );
}

function Hero() {
  const narrow = useNarrow();
  return (
    <div style={{ position: "relative", background: PAPER, padding: narrow ? "64px 20px 72px" : "84px 56px 92px", overflow: "hidden", borderBottom: `1px solid ${BORDER}` }}>
      <GridBackdrop />
      <div style={{ position: "relative", maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <Eyebrow>About LandAI</Eyebrow>
        <h1 style={{ fontFamily: SERIF, fontSize: narrow ? 42 : 64, lineHeight: 1.02, color: INK, letterSpacing: -1.6, margin: "18px 0 0", fontWeight: 500 }}>
          We map the land for the people who <span style={{ fontStyle: "italic", color: BLUE }}>work it.</span>
        </h1>
        <p style={{ fontSize: 20, lineHeight: 1.55, color: GRAY, maxWidth: 620, margin: "24px auto 0" }}>
          LandAI puts every property line in the country in your pocket — so hunters, landowners, and dealmakers always know exactly where they stand.
        </p>
      </div>
    </div>
  );
}

function Story() {
  const narrow = useNarrow();
  return (
    <div style={{ background: PAPER, padding: narrow ? "56px 20px" : "76px 56px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", display: "flex", flexDirection: narrow ? "column" : "row", gap: narrow ? 26 : 72, alignItems: "flex-start" }}>
        <div style={{ flex: narrow ? "none" : "0 0 280px", position: narrow ? "static" : "sticky", top: 100 }}>
          <Eyebrow>Our story</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontSize: 34, color: INK, letterSpacing: -0.6, margin: "12px 0 0", fontWeight: 500, lineHeight: 1.1 }}>Started in the field, not the office.</h2>
        </div>
        <div style={{ flex: 1, maxWidth: 600 }}>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "#33383d", margin: "0 0 22px" }}>
            LandAI started with a simple, frustrating problem: standing on a piece of ground and having no idea where one property ended and the next began. Paper plats were back at the courthouse. The county GIS site didn't load past the treeline. And the answer mattered — for a hunt, a deal, a fence line, a knock on the right door.
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "#33383d", margin: "0 0 22px" }}>
            So we built the tool we wanted in our own hands: every parcel boundary in the country, your live GPS on top of it, and the owner's name a tap away — working with or without a signal.
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "#33383d", margin: 0 }}>
            Today that same data powers a self-serve store for the teams who need it in bulk. But the mission hasn't moved an inch: make property information something you can actually use, out where decisions get made.
          </p>
        </div>
      </div>
    </div>
  );
}

function Stats() {
  const narrow = useNarrow();
  const stats = [["150M+", "Parcels mapped"], ["3,200+", "Counties covered"], ["50", "States, coast to coast"], ["1", "Tap to the owner"]];
  return (
    <div style={{ background: DARK, padding: narrow ? "48px 20px" : "60px 56px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: narrow ? "1fr 1fr" : "repeat(4, 1fr)", gap: narrow ? 24 : 28 }}>
        {stats.map(([n, l], i) => (
          <div key={i} style={{ textAlign: "center" }}>
            <div style={{ fontFamily: SERIF, fontSize: 52, color: "#fff", letterSpacing: -1, fontWeight: 500, lineHeight: 1 }}>{n}</div>
            <div style={{ fontSize: 14.5, color: "rgba(255,255,255,0.6)", marginTop: 10 }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Values() {
  const narrow = useNarrow();
  const vals = [
    ["Built for the field", "Every feature earns its place out where there's mud, no bars, and a decision to make. If it doesn't work off the grid, it isn't done.", "boot"],
    ["Honest about the data", "Parcel records are messy. We show you exactly how complete each field is, county by county — no overpromising what the courthouse didn't have.", "scale"],
    ["Plainspoken, always", "No jargon, no runaround. Clear maps, clear pricing, clear answers — the way you'd explain it to a neighbor over a tailgate.", "chat"],
    ["Respect the landowner", "Knowing who owns what is a responsibility. We build tools for legitimate work — research, outreach, and getting permission the right way.", "shield"],
  ];
  const ico = (k) => {
    const c = { fill: "none", stroke: INK, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
    if (k === "boot") return <g {...c}><path d="M7 4v9h-2v6a1 1 0 0 0 1 1h4l3-2 4 2h3a1 1 0 0 0 1-1c0-3-2-4-4-5l-3-2V4z" /></g>;
    if (k === "scale") return <g {...c}><path d="M12 4v16M5 8h14M5 8l-2 6h4zM19 8l-2 6h4zM7 20h10" /></g>;
    if (k === "chat") return <g {...c}><path d="M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.5A8 8 0 1 1 21 12z" /></g>;
    return <g {...c}><path d="M12 3l8 3v5c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z" /></g>;
  };
  return (
    <div style={{ background: PAPER, padding: narrow ? "64px 20px" : "80px 56px", borderTop: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 52 }}>
          <Eyebrow>What we value</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontSize: narrow ? 34 : 42, color: INK, letterSpacing: -0.8, margin: "12px 0 0", fontWeight: 500 }}>How we build.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "1fr 1fr", gap: 22 }}>
          {vals.map(([t, d, k], i) => (
            <div key={i} style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 18, padding: 28, display: "flex", gap: 18 }}>
              <div style={{ flexShrink: 0, width: 48, height: 48, borderRadius: 13, background: CREAM, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="26" height="26" viewBox="0 0 24 24">{ico(k)}</svg>
              </div>
              <div>
                <div style={{ fontFamily: SERIF, fontSize: 22, color: INK, fontWeight: 500, letterSpacing: -0.3 }}>{t}</div>
                <div style={{ fontSize: 15, color: GRAY, lineHeight: 1.55, marginTop: 7 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Roots() {
  const narrow = useNarrow();
  return (
    <div style={{ background: CREAM, padding: narrow ? "60px 20px" : "76px 56px", borderTop: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <div style={{ width: 52, height: 52, borderRadius: 14, background: "#fff", border: `1px solid ${BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 22px" }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={GREEN} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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" /></svg>
        </div>
        <h2 style={{ fontFamily: SERIF, fontSize: 36, color: INK, letterSpacing: -0.7, margin: 0, fontWeight: 500 }}>Built in Greensboro, North Carolina.</h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: GRAY, maxWidth: 580, margin: "18px auto 0" }}>
          We're a small team that grew up around farms, fence lines, and deer stands. We build for the field because we're still in it — and we answer our own email.
        </p>
      </div>
    </div>
  );
}

function FinalCTA() {
  const narrow = useNarrow();
  return (
    <div style={{ background: PAPER, padding: narrow ? "64px 20px" : "84px 56px", borderTop: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", background: DARK, borderRadius: 28, padding: narrow ? "40px 24px" : "60px 56px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 40, flexWrap: "wrap" }}>
        <div>
          <Eyebrow light>Get started</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontSize: narrow ? 34 : 42, color: "#fff", letterSpacing: -0.9, margin: "12px 0 0", fontWeight: 500, lineHeight: 1.04 }}>Know where you <span style={{ fontStyle: "italic", color: "#7FB0FF" }}>stand.</span></h2>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <button onClick={() => window.__landaiGetApp && window.__landaiGetApp()} style={{ border: "none", background: "#fff", color: INK, padding: "15px 26px", borderRadius: 99, cursor: "pointer", fontFamily: SANS, fontSize: 15, fontWeight: 600 }}>Get the app</button>
          <button onClick={nav("store", "/data-store")} style={{ border: "1.5px solid rgba(255,255,255,0.4)", background: "transparent", color: "#fff", padding: "15px 26px", borderRadius: 99, cursor: "pointer", fontFamily: SANS, fontSize: 15, fontWeight: 600 }}>Browse data store</button>
        </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 === "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", null], ["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 About() {
  return (
    <div style={{ background: PAPER, fontFamily: SANS, minHeight: "100vh" }}>
      <Nav />
      <Hero />
      <Story />
      <Stats />
      <Values />
      <Roots />
      <FinalCTA />
      <Footer />
    </div>
  );
}

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