// LandAI — Features page. Matches the live site. Loaded by /home.
(function () {
const { useState, useEffect } = React;

const INK = "#14171C";
const DARK = "#10141A";
const BLUE = "#2E6BF0";
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 PLAY_STORE_URL = "https://play.google.com/store/search?q=LandAI%20Property%20Maps&c=apps";
const WEB_APP_URL = "https://app.landai.app";
const openUrl = (u) => window.open(u, "_blank", "noopener");
const SLIDES = ["assets/feat-slide-1.png", "assets/feat-slide-2.png", "assets/feat-slide-3.png", "assets/feat-slide-4.png"];

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 = 40 }) {
  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 go = (target) => {
    if (!target) return;
    if (target === "store") { if (window.__landaiNav) window.__landaiNav("store"); else location.href = "/data-store"; }
    if (target === "contact") { if (window.__landaiNav) window.__landaiNav("contact"); else location.href = "/contact"; }
    if (target === "about") { if (window.__landaiNav) window.__landaiNav("about"); else location.href = "/about"; }
  };
  const links = [["Mobile App", null], ["Data Store", "store"], ["About", "about"], ["Contact Us", "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",
    textDecoration: "none",
    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 style={{ display: "flex", alignItems: "center", gap: 11 }}>
        <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, target], i) => {
          const active = i === 0;
          return <span key={i} onClick={() => go(target)} 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 StoreButton({ kind }) {
  const dark = kind !== "web";
  const onClick = () => openUrl(kind === "web" ? WEB_APP_URL : kind === "play" ? PLAY_STORE_URL : APP_STORE_URL);
  return (
    <button onClick={onClick} style={{ display: "flex", alignItems: "center", gap: 9, border: dark ? "none" : `1.5px solid ${INK}`, background: dark ? INK : "transparent", color: dark ? "#fff" : INK, padding: "13px 20px", borderRadius: 12, cursor: "pointer", fontFamily: SANS }}>
      {kind === "app" && <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16.4 12.8c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.6-1.3-.1-2.5.8-3.1.8-.7 0-1.6-.7-2.7-.7-1.4 0-2.7.8-3.4 2.1-1.5 2.5-.4 6.3 1 8.3.7 1 1.5 2.1 2.6 2 1-.1 1.4-.7 2.6-.7s1.6.7 2.7.6c1.1 0 1.8-1 2.5-2 .8-1.1 1.1-2.3 1.1-2.3s-2.1-.8-2.1-3.1zM14.5 6.3c.6-.7 1-1.7.9-2.6-.8 0-1.9.5-2.5 1.2-.5.6-1 1.6-.9 2.5.9.1 1.8-.4 2.5-1.1z"/></svg>}
      {kind === "play" && <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3l13 9-13 9V3z"/></svg>}
      {kind === "web" && <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"/></svg>}
      <span style={{ fontSize: 15, fontWeight: 600 }}>{kind === "app" ? "App Store" : kind === "play" ? "Google Play" : "Web app"}</span>
    </button>
  );
}

function HeroSlideshow() {
  const narrow = useNarrow();
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI(p => (p + 1) % SLIDES.length), 4500);
    return () => clearInterval(t);
  }, []);
  const go = (d) => setI(p => (p + d + SLIDES.length) % SLIDES.length);
  return (
    <div style={{ position: "relative", width: narrow ? "min(100%, 340px)" : 384, height: narrow ? 638 : 720, borderRadius: 28, overflow: "hidden", background: "#0d3b30", boxShadow: "0 40px 90px rgba(13,40,30,0.35)", flexShrink: 0, margin: narrow ? "0 auto" : 0 }}>
      {SLIDES.map((s, k) => (
        <img key={k} src={s} alt="LandAI app" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "top", opacity: k === i ? 1 : 0, transition: "opacity .6s ease" }} />
      ))}
      <div onClick={() => go(-1)} style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", width: 38, height: 38, borderRadius: 99, background: "rgba(255,255,255,0.9)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={INK} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
      </div>
      <div onClick={() => go(1)} style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 38, height: 38, borderRadius: 99, background: "rgba(255,255,255,0.9)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={INK} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6" /></svg>
      </div>
      <div style={{ position: "absolute", bottom: 16, left: 0, right: 0, display: "flex", justifyContent: "center", gap: 7 }}>
        {SLIDES.map((_, k) => <span key={k} onClick={() => setI(k)} style={{ width: k === i ? 22 : 7, height: 7, borderRadius: 99, background: k === i ? "#fff" : "rgba(255,255,255,0.5)", cursor: "pointer", transition: "all .2s" }} />)}
      </div>
    </div>
  );
}

function Hero() {
  const narrow = useNarrow();
  return (
    <div style={{ background: PAPER, padding: narrow ? "44px 20px 64px" : "70px 56px 90px", display: "flex", flexDirection: narrow ? "column" : "row", gap: narrow ? 40 : 70, alignItems: narrow ? "stretch" : "center", maxWidth: 1280, margin: "0 auto" }}>
      <div style={{ flex: 1 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 99, padding: "6px 14px", fontSize: 12.5, fontWeight: 600, color: GRAY }}>
          <span style={{ width: 7, height: 7, borderRadius: 99, background: BLUE }} /> New · Nationwide parcel coverage
        </span>
        <h1 style={{ fontFamily: SERIF, fontSize: narrow ? 52 : 76, lineHeight: 0.98, color: INK, letterSpacing: -1.6, margin: "22px 0 0", fontWeight: 500 }}>
          Know where<br />you <span style={{ fontStyle: "italic", color: BLUE }}>stand.</span>
        </h1>
        <p style={{ fontSize: 19, lineHeight: 1.55, color: GRAY, maxWidth: 440, margin: "24px 0 30px" }}>
          Property lines, owner info, and offline maps — built for hunters, investors, and realtors who actually walk the ground.
        </p>
        <div style={{ display: "flex", gap: 12, marginBottom: 30, flexWrap: "wrap" }}>
          <StoreButton kind="app" /><StoreButton kind="play" /><StoreButton kind="web" />
        </div>
        <div style={{ display: "flex", gap: narrow ? 14 : 28, fontFamily: MONO, fontSize: 13, color: GRAY, letterSpacing: 0.5, flexWrap: "wrap" }}>
          <span><strong style={{ color: INK }}>150M+</strong> parcels</span>
          <span><strong style={{ color: INK }}>50</strong> states</span>
          <span><strong style={{ color: INK }}>3,200+</strong> counties</span>
        </div>
      </div>
      <HeroSlideshow />
    </div>
  );
}

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

function FeatureGrid() {
  const narrow = useNarrow();
  return (
    <div style={{ background: PAPER, padding: narrow ? "32px 20px 64px" : "40px 56px 90px", maxWidth: 1280, margin: "0 auto" }}>
      <h2 style={{ textAlign: "center", fontFamily: SERIF, fontSize: narrow ? 36 : 46, color: INK, letterSpacing: -0.8, margin: "0 0 52px", fontWeight: 500 }}>
        Everything you need to <span style={{ fontStyle: "italic", color: BLUE }}>read the land.</span>
      </h2>
      <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "0.9fr 1.4fr", gap: 22, marginBottom: 22 }}>
        <Card eyebrow="01 · On the line" title="Stand on the line, not guess at it." body="Your live GPS overlaid with the parcel boundary around you is already shown — know if you're on your side, or a neighbor's.">
          <ParcelArt />
        </Card>
        <Card dark eyebrow="02 · Circle a region" title="Draw a circle. Get every property inside." body="Drop a radius on any acreage, parcel, or zip, and LandAI returns every owner inside it — assemble lists or scout a region.">
          <CircleArt />
        </Card>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "1fr 1fr 1fr", gap: 22, marginBottom: 22 }}>
        <Card eyebrow="03 · Offline" title="No signal? Still works." body="Download regions before you go. Maps, boundaries, and saved pins stay with you off-grid.">
          <OfflineArt />
        </Card>
        <Card eyebrow="04 · Search" title="Address. Owner. Parcel ID." body="Find any property instantly across 150M+ parcels — nationwide coverage, county-level detail.">
          <SearchArt />
        </Card>
        <Card eyebrow="05 · Folders" title="Save it. Organize it." body="Drop pins, group them into folders, and save what matters to your hunting parties.">
          <FolderArt />
        </Card>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "0.9fr 1.4fr", gap: 22 }}>
        <Card eyebrow="06 · Layers" title="Topography at a glance." body="Toggle topo, satellite, and roads — read the land's shape before you ever leave the truck.">
          <LayersArt />
        </Card>
        {!narrow && <div />}
      </div>
    </div>
  );
}

function Card({ eyebrow, title, body, children, dark }) {
  return (
    <div style={{ background: dark ? DARK : "#fff", border: dark ? "none" : `1px solid ${BORDER}`, borderRadius: 20, padding: 30, display: "flex", flexDirection: "column", minHeight: 300, minWidth: 0, overflow: "hidden" }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <div style={{ fontFamily: SERIF, fontSize: 25, color: dark ? "#fff" : INK, letterSpacing: -0.4, margin: "12px 0 8px", lineHeight: 1.1, fontWeight: 500 }}>{title}</div>
      <div style={{ fontSize: 14.5, color: dark ? "rgba(255,255,255,0.62)" : GRAY, lineHeight: 1.5, maxWidth: 360 }}>{body}</div>
      <div style={{ flex: 1, display: "flex", alignItems: "flex-end", justifyContent: "center", marginTop: 20, minWidth: 0, maxWidth: "100%", overflow: "hidden" }}>{children}</div>
    </div>
  );
}

function ParcelArt() {
  return (
    <svg width="280" height="150" viewBox="0 0 280 150">
      <rect width="280" height="150" rx="10" fill="#ECE3D2" />
      <path d="M30 40 L150 28 L160 96 L40 110 Z" fill="#d8c9ad" stroke="#b59a5f" strokeWidth="2" />
      <path d="M160 96 L250 88 L256 132 L40 110" fill="none" stroke="#b59a5f" strokeWidth="2" />
      <path d="M150 28 L250 88" stroke="#b59a5f" strokeWidth="2" />
      <circle cx="120" cy="78" r="9" fill={BLUE} fillOpacity="0.25" />
      <circle cx="120" cy="78" r="4" fill={BLUE} stroke="#fff" strokeWidth="1.5" />
    </svg>
  );
}
function CircleArt() {
  return (
    <svg width="420" height="180" viewBox="0 0 420 180">
      <rect width="420" height="180" rx="10" fill="#13312a" />
      <g stroke="#1f4a3d" strokeWidth="1.2">
        {Array.from({length:9}).map((_,i)=><line key={i} x1={i*52} y1="0" x2={i*52} y2="180"/>)}
        {Array.from({length:5}).map((_,i)=><line key={i} x1="0" y1={i*40} x2="420" y2={i*40}/>)}
      </g>
      <circle cx="210" cy="90" r="62" fill={BLUE} fillOpacity="0.16" stroke={BLUE} strokeWidth="2" />
      <circle cx="210" cy="90" r="5" fill={BLUE} stroke="#fff" strokeWidth="1.5" />
      {[[170,60],[250,70],[260,120],[180,128],[150,95]].map(([x,y],i)=><circle key={i} cx={x} cy={y} r="4" fill="#E85D5D" />)}
    </svg>
  );
}
function OfflineArt() {
  return (
    <svg width="230" height="100" viewBox="0 0 230 100">
      <path d="M10 70 L50 40 L90 60 L130 25 L170 50 L220 20" fill="none" stroke={BLUE} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="130" cy="25" r="6" fill={BLUE} fillOpacity="0.25" /><circle cx="130" cy="25" r="3" fill={BLUE} />
      <text x="10" y="95" fontFamily="'JetBrains Mono',monospace" fontSize="9" fill="#9aa099">NO SIGNAL · SAVED</text>
    </svg>
  );
}
function SearchArt() {
  const rows = ["4521 Willow Creek Rd", "Willow Creek Rd · Bruno Co", "Willow Acres Dr · Hartz Co", "Willow Lake Ln · Travis Co"];
  return (
    <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 7 }}>
      <div style={{ border: `1.5px solid ${BORDER}`, borderRadius: 9, padding: "9px 12px", fontSize: 12, color: INK, display: "flex", alignItems: "center", gap: 8 }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9aa099" strokeWidth="2.4"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>4521 Willow Creek Rd
      </div>
      {rows.slice(1).map((r,i)=><div key={i} style={{ fontSize: 12, color: GRAY, padding: "5px 12px" }}>{r}</div>)}
    </div>
  );
}
function FolderArt() {
  const items = [["Georgetown", "#E85D5D"], ["Unit 4 — Q2", BLUE], ["Pasture", "#2E7D5B"], ["Kendall", "#E5A53A"]];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, width: "100%" }}>
      {items.map(([l,c],i)=>(
        <div key={i} style={{ border: `1px solid ${BORDER}`, borderRadius: 9, padding: "9px 11px", display: "flex", alignItems: "center", gap: 8, fontSize: 12, fontWeight: 600, color: INK }}>
          <span style={{ width: 9, height: 9, borderRadius: 3, background: c }} />{l}
        </div>
      ))}
    </div>
  );
}
function LayersArt() {
  const layers = [["Topography", true], ["Satellite", true], ["Roads", false]];
  return (
    <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 9 }}>
      {layers.map(([l,on],i)=>(
        <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", border: `1px solid ${BORDER}`, borderRadius: 9, padding: "9px 12px" }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: INK, display: "flex", alignItems: "center", gap: 8 }}><span style={{ width: 8, height: 8, borderRadius: 99, background: on ? BLUE : "#cfd2cc" }} />{l}</span>
          <span style={{ width: 34, height: 20, borderRadius: 99, background: on ? BLUE : "#d6dad2", position: "relative" }}><span style={{ position: "absolute", top: 2, left: on ? 16 : 2, width: 16, height: 16, borderRadius: 99, background: "#fff" }} /></span>
        </div>
      ))}
    </div>
  );
}

function ThreeMoves() {
  const narrow = useNarrow();
  const steps = [
    ["Step 01", "Open the map.", "Your location draws instantly. Every parcel boundary around you is already shown — in the woods, on the road, wherever."],
    ["Step 02", "Tap, search, or circle.", "Tap any parcel for the owner. Search an address. Or draw a circle and pull every property inside it at once."],
    ["Step 03", "Save. Share. Reach out.", "Drop pins, organize into folders, and reach the owner with the contact info on the record."],
  ];
  return (
    <div style={{ background: CREAM, padding: narrow ? "64px 20px" : "80px 56px", borderTop: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <Eyebrow>How it works</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontSize: narrow ? 34 : 46, color: INK, letterSpacing: -0.8, margin: "12px 0 0", fontWeight: 500 }}>Three moves. From map<br />to <span style={{ fontStyle: "italic", color: BLUE }}>owner on the phone.</span></h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "1fr 1fr 1fr", gap: narrow ? 28 : 40 }}>
          {steps.map(([s,t,b],i)=>(
            <div key={i} style={{ borderTop: `2px solid ${INK}`, paddingTop: 20 }}>
              <Eyebrow>{s}</Eyebrow>
              <div style={{ fontFamily: SERIF, fontSize: 24, color: INK, margin: "10px 0 10px", fontWeight: 500 }}>{t}</div>
              <div style={{ fontSize: 15, color: GRAY, lineHeight: 1.55 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Pricing() {
  const narrow = useNarrow();
  const [yearly, setYearly] = useState(true);
  const feats = ["Nationwide parcel coverage — 150M+ properties", "GPS line-walking + owner lookup", "Offline regions (unlimited)", "Topography & map-style layers", "Unlimited pins + folders", "iOS, Android & Web"];
  return (
    <div style={{ background: PAPER, padding: narrow ? "64px 20px" : "80px 56px" }}>
      <div style={{ textAlign: "center", marginBottom: 34 }}>
        <Eyebrow>Pricing</Eyebrow>
        <h2 style={{ fontFamily: SERIF, fontSize: narrow ? 34 : 46, color: INK, letterSpacing: -0.8, margin: "12px 0 0", fontWeight: 500 }}>One plan. <span style={{ fontStyle: "italic", color: BLUE }}>Cancel whenever.</span></h2>
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 30 }}>
        <div style={{ display: "flex", gap: 4, background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 99, padding: 4 }}>
          {[["Monthly", false], ["Yearly", true]].map(([l,v])=>(
            <button key={l} onClick={()=>setYearly(v)} style={{ border: "none", borderRadius: 99, padding: "9px 20px", fontSize: 14, fontWeight: 600, cursor: "pointer", fontFamily: SANS, background: yearly===v ? INK : "transparent", color: yearly===v ? "#fff" : GRAY }}>{l}{v && <span style={{ color: yearly===v?"#7FB0FF":BLUE, marginLeft: 6, fontSize: 12 }}>−33%</span>}</button>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 460, margin: "0 auto", background: DARK, borderRadius: 24, padding: 36, color: "#fff" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 22 }}>
          <span style={{ fontSize: 20, fontWeight: 700 }}>LandAI</span>
          <span style={{ background: "rgba(46,107,240,0.2)", color: "#7FB0FF", fontSize: 11, fontWeight: 700, letterSpacing: 0.5, padding: "5px 11px", borderRadius: 99, fontFamily: MONO }}>{yearly ? "BEST VALUE" : "FLEXIBLE"}</span>
        </div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 24 }}>
          <span style={{ fontFamily: SERIF, fontSize: 56, fontWeight: 500 }}>${yearly ? "39.99" : "4.99"}</span>
          <span style={{ fontSize: 15, color: "rgba(255,255,255,0.55)" }}>/{yearly ? "year" : "month"}</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 13, marginBottom: 26 }}>
          {feats.map((f,i)=>(
            <div key={i} style={{ display: "flex", gap: 11, alignItems: "center" }}>
              <span style={{ width: 20, height: 20, borderRadius: 99, background: BLUE, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><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: 14.5, color: "rgba(255,255,255,0.88)" }}>{f}</span>
            </div>
          ))}
        </div>
        <button onClick={() => window.__landaiGetApp && window.__landaiGetApp()} style={{ width: "100%", border: "none", background: BLUE, color: "#fff", fontSize: 16, fontWeight: 700, padding: "16px 0", borderRadius: 13, cursor: "pointer", fontFamily: SANS }}>Start 7-day free trial</button>
        <div style={{ textAlign: "center", marginTop: 14, fontSize: 12.5, color: "rgba(255,255,255,0.45)", fontFamily: MONO, letterSpacing: 0.5 }}>NO CARD REQUIRED · CANCEL ANYTIME</div>
      </div>
    </div>
  );
}

function FAQ() {
  const items = [
    ["How accurate are the boundaries?", "Boundaries come directly from county assessor records and are conflated to a consistent national geometry. They reflect the authoritative tax record but aren't a substitute for a recorded survey."],
    ["Does it work off-grid?", "Yes. Download any region before you head out and the maps, boundaries, and your saved pins stay fully available with no signal."],
    ["Is owner contact info always available?", "Owner of record is available for ~99% of parcels nationwide. Mailing addresses and secondary owners vary by county and are shown when present."],
    ["What states are covered?", "All 50 states plus DC and U.S. territories — 150M+ parcels across 3,200+ counties, refreshed on a rolling schedule."],
    ["Can I export a property list?", "Yes. Circle a region or build a folder, then export owners and parcel details to share with your team or import elsewhere."],
  ];
  const [open, setOpen] = useState(0);
  const narrow = useNarrow();
  return (
    <div style={{ background: PAPER, padding: narrow ? "60px 20px 72px" : "70px 56px 90px", borderTop: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 760, margin: "0 auto" }}>
        <h2 style={{ textAlign: "center", fontFamily: SERIF, fontSize: narrow ? 34 : 42, color: INK, letterSpacing: -0.8, margin: "0 0 40px", fontWeight: 500 }}>Questions <span style={{ fontStyle: "italic", color: BLUE }}>answered.</span></h2>
        {items.map(([q,a],i)=>(
          <div key={i} style={{ borderBottom: `1px solid ${BORDER}` }}>
            <div onClick={()=>setOpen(open===i?-1:i)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, padding: "22px 0", cursor: "pointer" }}>
              <span style={{ fontFamily: SERIF, fontSize: 21, color: INK, fontWeight: 500 }}>{q}</span>
              <span style={{ fontSize: 24, color: BLUE, transform: open===i?"rotate(45deg)":"none", transition: "transform .15s" }}>+</span>
            </div>
            {open===i && <div style={{ fontSize: 15.5, color: GRAY, lineHeight: 1.6, padding: "0 0 24px", maxWidth: 640 }}>{a}</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

function FinalCTA() {
  const narrow = useNarrow();
  return (
    <div style={{ background: PAPER, padding: narrow ? "0 20px 64px" : "0 56px 80px" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", background: DARK, borderRadius: 28, padding: narrow ? "40px 24px" : "64px 64px", display: "flex", flexDirection: narrow ? "column" : "row", alignItems: narrow ? "flex-start" : "center", justifyContent: "space-between", gap: 40 }}>
        <h2 style={{ fontFamily: SERIF, fontSize: narrow ? 36 : 48, color: "#fff", letterSpacing: -1, margin: 0, fontWeight: 500, lineHeight: 1 }}>Know where you <span style={{ fontStyle: "italic", color: "#7FB0FF" }}>stand.</span></h2>
        <div style={{ maxWidth: 420 }}>
          <p style={{ fontSize: 16, color: "rgba(255,255,255,0.7)", lineHeight: 1.5, margin: "0 0 20px" }}>Download LandAI free. Nationwide parcel coverage, live GPS, and offline maps — in your pocket.</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button onClick={() => openUrl(APP_STORE_URL)} style={{ display: "flex", alignItems: "center", gap: 8, border: "none", background: "#fff", color: INK, padding: "13px 20px", borderRadius: 12, cursor: "pointer", fontFamily: SANS, fontSize: 14, fontWeight: 600 }}>App Store</button>
            <button onClick={() => openUrl(PLAY_STORE_URL)} style={{ display: "flex", alignItems: "center", gap: 8, border: "none", background: "#fff", color: INK, padding: "13px 20px", borderRadius: 12, cursor: "pointer", fontFamily: SANS, fontSize: 14, fontWeight: 600 }}>Google Play</button>
            <button onClick={() => openUrl(WEB_APP_URL)} style={{ border: "1.5px solid rgba(255,255,255,0.4)", background: "transparent", color: "#fff", padding: "13px 20px", borderRadius: 12, cursor: "pointer", fontFamily: SANS, fontSize: 14, fontWeight: 600 }}>Web app</button>
          </div>
        </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 Features() {
  return (
    <div style={{ background: PAPER, fontFamily: SANS, minHeight: "100vh" }}>
      <Nav />
      <Hero />
      <FeatureGrid />
      <ThreeMoves />
      <Pricing />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}

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