// LandAI - API and bulk data page. Exposes window.ApiPage for the combined shell.
(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={GREEN} />
        <path d="M5 18 L18 25 L31 18" fill="none" stroke={GREEN} 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 Eyebrow({ children, light }) {
  return <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: 1.4, color: light ? "rgba(255,255,255,0.54)" : "#8d948b", textTransform: "uppercase", fontWeight: 700 }}>{children}</div>;
}

function Nav() {
  const narrow = useNarrow();
  const links = [["Mobile App", nav("mobile", "/")], ["Data Store", nav("store", "/data-store")], ["API", null], ["About", nav("about", "/about")], ["Contact Us", nav("contact", "/contact")]];
  const navItemStyle = (active) => ({
    display: "inline-flex",
    alignItems: "center",
    gap: 7,
    fontSize: 15,
    fontWeight: active ? 700 : 600,
    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: 30 }}>
        {links.map(([label, fn]) => {
          const active = label === "API";
          return <span key={label} onClick={fn || undefined} style={navItemStyle(active)}>{active && activeDot}{label}</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: 600, color: INK, cursor: "pointer" }}>Web app</span>
        <button onClick={() => window.__landaiGetApp && window.__landaiGetApp()} style={{ border: "none", background: INK, color: "#fff", fontSize: 14, fontWeight: 700, padding: narrow ? "10px 16px" : "11px 22px", borderRadius: 99, cursor: "pointer", fontFamily: SANS }}>Get the app</button>
      </div>
    </div>
  );
}

function ApiPreview() {
  return (
    <div style={{ background: DARK, borderRadius: 24, padding: 22, color: "#fff", boxShadow: "0 30px 80px rgba(16,40,30,0.22)", border: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
        <span style={{ width: 10, height: 10, borderRadius: 99, background: "#ff6b6b" }} />
        <span style={{ width: 10, height: 10, borderRadius: 99, background: "#ffd166" }} />
        <span style={{ width: 10, height: 10, borderRadius: 99, background: "#34C759" }} />
      </div>
      <div style={{ fontFamily: MONO, fontSize: 13, lineHeight: 1.8, color: "#dbe6f7", overflowX: "auto" }}>
        <div><span style={{ color: "#7FB0FF" }}>GET</span> /v1/counties/nc/guilford/parcels</div>
        <div style={{ color: "rgba(255,255,255,0.45)" }}>Authorization: Bearer YOUR_KEY</div>
        <div style={{ height: 1, background: "rgba(255,255,255,0.12)", margin: "16px 0" }} />
        <div>{"{"}</div>
        <div style={{ paddingLeft: 18 }}>"county": "Guilford County",</div>
        <div style={{ paddingLeft: 18 }}>"parcel_records": 222643,</div>
        <div style={{ paddingLeft: 18 }}>"data_date": "2026-06-24",</div>
        <div style={{ paddingLeft: 18 }}>"formats": ["GeoJSON", "CSV", "FileGDB"]</div>
        <div>{"}"}</div>
      </div>
    </div>
  );
}

function Hero() {
  const narrow = useNarrow();
  const browseCoverage = () => { location.href = "/data-store/browse"; };
  return (
    <div style={{ background: PAPER, padding: narrow ? "54px 20px 64px" : "86px 56px 96px", borderBottom: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: narrow ? "1fr" : "1.05fr 0.95fr", gap: narrow ? 34 : 58, alignItems: "center" }}>
        <div>
          <Eyebrow>Bulk data and API</Eyebrow>
          <h1 style={{ fontFamily: SERIF, fontSize: narrow ? 42 : 64, lineHeight: 1.02, color: INK, letterSpacing: -1.6, margin: "16px 0 0", fontWeight: 500 }}>Parcel data pipelines without the county cleanup.</h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: GRAY, maxWidth: 590, margin: "24px 0 32px" }}>License LandAI parcel data for apps, analytics, enrichment, and scheduled refreshes. Use county files, statewide deliveries, or API access backed by the same standardized schema.</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button onClick={nav("contact", "/contact")} style={{ border: "none", background: INK, color: "#fff", fontSize: 16, fontWeight: 700, padding: "15px 26px", borderRadius: 99, cursor: "pointer", fontFamily: SANS }}>Talk to us</button>
            <button onClick={browseCoverage} style={{ border: `1.5px solid ${INK}`, background: "transparent", color: INK, fontSize: 16, fontWeight: 700, padding: "13px 24px", borderRadius: 99, cursor: "pointer", fontFamily: SANS }}>Browse coverage</button>
          </div>
        </div>
        <ApiPreview />
      </div>
    </div>
  );
}

function Stats() {
  const narrow = useNarrow();
  const stats = [["2,170+", "Supported counties"], ["136M+", "Parcel records"], ["48", "Standard fields"], ["Nightly", "Coverage refresh"]];
  return (
    <div style={{ background: CREAM, padding: narrow ? "28px 20px" : "34px 56px", borderBottom: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: narrow ? "repeat(2, minmax(0, 1fr))" : "repeat(4, minmax(0, 1fr))", gap: 12 }}>
        {stats.map(([n, label]) => (
          <div key={label} style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 14, padding: "20px 18px" }}>
            <div style={{ fontFamily: MONO, fontSize: 24, fontWeight: 800, color: INK }}>{n}</div>
            <div style={{ fontSize: 13, color: GRAY, fontWeight: 700, marginTop: 6 }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Cards() {
  const narrow = useNarrow();
  const cards = [
    ["Bulk exports", "County, state, and multi-state deliveries in GIS-ready formats for analysis and internal systems."],
    ["Parcel API", "Programmatic access for owner lookup, parcel attributes, coverage checks, and app integrations."],
    ["Scheduled refreshes", "Keep your pipeline current with refreshed county data and coverage metadata on a predictable cadence."],
  ];
  return (
    <div style={{ background: PAPER, padding: narrow ? "56px 20px" : "76px 56px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <h2 style={{ fontFamily: SERIF, fontSize: narrow ? 34 : 42, color: INK, letterSpacing: -0.8, margin: "0 0 34px", fontWeight: 500, textAlign: "center" }}>Choose the access pattern that fits your team.</h2>
        <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "repeat(3, minmax(0, 1fr))", gap: 22 }}>
          {cards.map(([title, body], i) => (
            <div key={title} style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 18, padding: 26, boxShadow: "0 16px 40px rgba(16,40,30,0.05)" }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: i === 1 ? BLUE : MINT, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke={i === 1 ? "#fff" : INK} strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
                  {i === 0 && <><path d="M4 7h16" /><path d="M4 12h16" /><path d="M4 17h10" /></>}
                  {i === 1 && <><path d="M8 9l-4 3 4 3" /><path d="M16 9l4 3-4 3" /><path d="M14 5l-4 14" /></>}
                  {i === 2 && <><path d="M21 12a9 9 0 1 1-3-6.7" /><path d="M21 4v6h-6" /></>}
                </svg>
              </div>
              <div style={{ fontFamily: SERIF, fontSize: 25, color: INK, letterSpacing: -0.4 }}>{title}</div>
              <p style={{ fontSize: 15.5, lineHeight: 1.55, color: GRAY, margin: "12px 0 0" }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Workflow() {
  const narrow = useNarrow();
  const steps = [
    ["Scope", "Pick the counties, states, or nationwide coverage you need."],
    ["Schema", "Use LandAI's standardized parcel fields across supported counties."],
    ["Deliver", "Receive files, API access, or scheduled refreshes for your workflow."],
  ];
  return (
    <div style={{ background: MINT, padding: narrow ? "56px 20px" : "72px 56px" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <Eyebrow>How it works</Eyebrow>
        <h2 style={{ fontFamily: SERIF, fontSize: narrow ? 34 : 42, color: INK, letterSpacing: -0.8, margin: "12px 0 30px", fontWeight: 500 }}>From county coverage to production data.</h2>
        <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "repeat(3, minmax(0, 1fr))", gap: 18 }}>
          {steps.map(([title, body], i) => (
            <div key={title} style={{ background: "rgba(255,255,255,0.76)", border: `1px solid ${BORDER}`, borderRadius: 16, padding: 22 }}>
              <div style={{ fontFamily: MONO, fontSize: 12, fontWeight: 800, color: BLUE, letterSpacing: 1.2 }}>STEP {i + 1}</div>
              <div style={{ fontFamily: SERIF, fontSize: 24, color: INK, marginTop: 8 }}>{title}</div>
              <p style={{ color: GRAY, fontSize: 15.5, lineHeight: 1.5, margin: "10px 0 0" }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function FinalCTA() {
  const narrow = useNarrow();
  return (
    <div style={{ background: PAPER, padding: narrow ? "56px 20px" : "78px 56px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", background: DARK, color: "#fff", borderRadius: 26, padding: narrow ? "38px 24px" : "54px 56px", display: "flex", flexDirection: narrow ? "column" : "row", alignItems: narrow ? "flex-start" : "center", justifyContent: "space-between", gap: 28 }}>
        <div>
          <Eyebrow light>Start a data conversation</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontSize: narrow ? 34 : 42, fontWeight: 500, letterSpacing: -0.8, lineHeight: 1.05, margin: "12px 0 0" }}>Need bulk parcel data or API access?</h2>
        </div>
        <button onClick={nav("contact", "/contact")} style={{ border: "none", background: "#fff", color: INK, fontSize: 16, fontWeight: 800, padding: "15px 26px", borderRadius: 99, cursor: "pointer", fontFamily: SANS }}>Contact LandAI</button>
      </div>
    </div>
  );
}

function Footer() {
  const narrow = useNarrow();
  const links = [["Mobile App", "mobile"], ["Data Store", "store"], ["API", "api"], ["About", "about"], ["Contact", "contact"]];
  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 === "api") return window.__landaiNav ? window.__landaiNav("api") : (location.href = "/api");
    if (t === "about") return window.__landaiNav ? window.__landaiNav("about") : (location.href = "/about");
    if (t === "contact") return window.__landaiNav ? window.__landaiNav("contact") : (location.href = "/contact");
  };
  return (
    <div style={{ background: PAPER, padding: narrow ? "34px 20px 28px" : "44px 56px 34px", borderTop: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", display: "flex", flexDirection: narrow ? "column" : "row", justifyContent: "space-between", gap: 22 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11 }}><Mark size={38} /><span style={{ fontSize: 21, fontWeight: 800, color: INK }}>LandAI</span></div>
        <div style={{ display: "flex", gap: narrow ? 18 : 28, flexWrap: "wrap" }}>{links.map(([label, target]) => <span key={label} onClick={() => go(target)} style={{ fontSize: 15.5, fontWeight: 700, color: INK, cursor: "pointer" }}>{label}</span>)}</div>
      </div>
    </div>
  );
}

function ApiPage() {
  return (
    <div style={{ background: PAPER, fontFamily: SANS, minHeight: "100vh" }}>
      <Nav />
      <Hero />
      <Stats />
      <Cards />
      <Workflow />
      <FinalCTA />
      <Footer />
    </div>
  );
}

window.ApiPage = ApiPage;
})();