// Sections: Features, How, Compare, Pricing, FAQ, Final CTA, Footer
const SectionHead = ({ label, title, children }) => (
  <div className="sec-head">
    <div>
      <div className="caps sec-label mono">{label}</div>
    </div>
    <h2 className="sec-title" dangerouslySetInnerHTML={{__html: title}} />
  </div>
);

function FeatureGrid() {
  return (
    <section className="features" id="features">
      <div className="shell">
        <SectionHead label="Features" title="Everything you need to <em>read the land.</em>" />
        <div className="feature-grid">
          <div className="feature tall">
            <div className="feature-num">01 — Live location</div>
            <div className="feature-title">Stand on the line, not guess at it.</div>
            <div className="feature-desc">Your live GPS pinned next to real-time parcel boundaries. Know if you're on your land — or someone else's.</div>
            <div className="feature-media">
              <svg viewBox="0 0 220 180" width="100%" style={{ maxWidth: 260 }}>
                <rect width="220" height="180" rx="12" fill="#F2EFE7"/>
                <polygon points="20,30 110,20 140,90 40,110" fill="#E6D7B8" stroke="#0E1220" strokeWidth="1"/>
                <polygon points="110,20 200,30 200,90 140,90" fill="#D4C28A" stroke="#0E1220" strokeWidth="1"/>
                <polygon points="40,110 140,90 200,90 200,160 20,160" fill="#C5B478" stroke="#0E1220" strokeWidth="1"/>
                <circle cx="120" cy="100" r="26" fill="#01B3F1" fillOpacity="0.18"/>
                <circle cx="120" cy="100" r="7" fill="#fff"/>
                <circle cx="120" cy="100" r="4" fill="#01B3F1"/>
              </svg>
            </div>
          </div>

          <div className="feature wide" style={{ background: "var(--ink)", color: "var(--bg)", borderColor: "var(--ink)" }}>
            <div className="feature-num" style={{ color: "rgba(255,255,255,.5)" }}>02 — Circle & reveal</div>
            <div className="feature-title" style={{ color: "var(--bg)" }}>Draw a circle. Get every property inside.</div>
            <div className="feature-desc" style={{ color: "rgba(255,255,255,.65)" }}>Owner names, acreage, parcel IDs, contact info where available. Export the list or save the region.</div>
            <div className="feature-media">
              <svg viewBox="0 0 420 180" width="100%" style={{ maxWidth: 440 }}>
                <rect width="420" height="180" rx="12" fill="#1a1d2b"/>
                <polygon points="20,30 200,20 220,100 40,120" fill="#3f5a3a" stroke="#0E1220" strokeWidth="1"/>
                <polygon points="200,20 400,30 400,90 220,100" fill="#4a6a42" stroke="#0E1220" strokeWidth="1"/>
                <polygon points="40,120 220,100 400,90 400,160 20,160" fill="#5a7350" stroke="#0E1220" strokeWidth="1"/>
                <circle cx="210" cy="95" r="55" fill="#01B3F1" fillOpacity="0.15" stroke="#01B3F1" strokeWidth="2" strokeDasharray="4 4"/>
                <circle cx="180" cy="70" r="4" fill="#DE1E20"/>
                <circle cx="230" cy="85" r="4" fill="#DE1E20"/>
                <circle cx="195" cy="120" r="4" fill="#DE1E20"/>
                <circle cx="250" cy="115" r="4" fill="#DE1E20"/>
              </svg>
            </div>
          </div>

          <div className="feature">
            <div className="feature-num">03 — Offline</div>
            <div className="feature-title">No signal? Still works.</div>
            <div className="feature-desc">Download regions before you go. Maps, boundaries, and saved pins stay with you off-grid.</div>
            <div className="feature-media">
              <svg viewBox="0 0 220 120" width="100%" style={{ maxWidth: 220 }}>
                <rect width="220" height="120" rx="10" fill="#F2EFE7"/>
                <path d="M 40 60 L 80 40 L 120 70 L 160 30 L 200 60" fill="none" stroke="#0E1220" strokeWidth="1.5"/>
                <path d="M 40 80 L 80 60 L 120 90 L 160 50 L 200 80" fill="none" stroke="#0E1220" strokeWidth="1" strokeOpacity=".5"/>
                <circle cx="110" cy="75" r="14" fill="none" stroke="#01B3F1" strokeWidth="2"/>
                <path d="M 110 69 V 82 M 104 75 H 116" stroke="#01B3F1" strokeWidth="2" strokeLinecap="round"/>
              </svg>
            </div>
          </div>

          <div className="feature">
            <div className="feature-num">04 — Search</div>
            <div className="feature-title">Address. Owner. Parcel ID.</div>
            <div className="feature-desc">Find any property instantly across 150M+ US parcels. Nationwide coverage, county-level detail.</div>
            <div className="feature-media">
              <div style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 10, padding: "10px 14px", width: "100%", display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "var(--muted)" }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
                4291 Willow Creek Rd
                <span style={{ marginLeft: "auto", color: "var(--navy)", fontSize: 11, fontFamily: "monospace" }}>TX</span>
              </div>
              <div style={{ marginTop: 10, display: "grid", gap: 6, fontSize: 12 }}>
                {["Willow Creek Rd · Brazos Co","Willow Bend Dr · Harris Co","Willow Lake Ln · Travis Co"].map(s => (
                  <div key={s} style={{ padding: "8px 12px", background: "#fff", border: "1px solid var(--line-2)", borderRadius: 8, color: "var(--ink-2)" }}>{s}</div>
                ))}
              </div>
            </div>
          </div>

          <div className="feature">
            <div className="feature-num">05 — Pins & folders</div>
            <div className="feature-title">Save it. Organize it.</div>
            <div className="feature-desc">Drop pins, group them into folders, share with clients or your hunting party.</div>
            <div className="feature-media">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 8, width: "100%" }}>
                {[
                  ["Hunting leases","12 pins","#61B39E"],
                  ["Listings — Q2","8 pins","#4F69A3"],
                  ["Prospects","23 pins","#E6D7B8"],
                  ["Scouted","5 pins","#DE1E20"],
                ].map(([n,c,col]) => (
                  <div key={n} style={{ padding: 10, background: "#fff", border: "1px solid var(--line-2)", borderRadius: 10 }}>
                    <div style={{ width: 10, height: 10, borderRadius: 99, background: col, marginBottom: 6 }}/>
                    <div style={{ fontSize: 12, fontWeight: 500 }}>{n}</div>
                    <div style={{ fontSize: 10, color: "var(--muted)", fontFamily: "monospace" }}>{c}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="feature">
            <div className="feature-num">06 — Layers</div>
            <div className="feature-title">Topography at a glance.</div>
            <div className="feature-desc">Toggle the topo layer to see contours, slope, and elevation — read the land's shape, not just its lines.</div>
            <div className="feature-media">
              <div style={{ display: "grid", gap: 6, width: "100%" }}>
                {[
                  ["Topography","#61B39E", true],
                  ["Satellite","#4F69A3", true],
                  ["Streets","#E6D7B8", false],
                ].map(([n,c,on]) => (
                  <div key={n} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", background: "#fff", border: "1px solid var(--line-2)", borderRadius: 8, fontSize: 12 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 99, background: c }}/>
                    <span>{n}</span>
                    <span style={{ marginLeft: "auto", width: 28, height: 16, borderRadius: 99, background: on ? "var(--ink)" : "var(--line)", position: "relative" }}>
                      <span style={{ position: "absolute", top: 2, left: on ? 14 : 2, width: 12, height: 12, borderRadius: 99, background: "#fff" }}/>
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="how" id="how">
      <div className="shell">
        <SectionHead label="How it works" title="Three moves. From map to <em>owner on the phone.</em>" />
        <div className="steps">
          <div className="step">
            <div className="step-num">STEP 01</div>
            <h3 className="step-title">Open the map.</h3>
            <p className="step-desc">Your location drops in instantly. Every parcel boundary around you is already drawn — in the woods, on the road, wherever.</p>
          </div>
          <div className="step">
            <div className="step-num">STEP 02</div>
            <h3 className="step-title">Tap, search, or circle.</h3>
            <p className="step-desc">Tap any parcel for the owner. Search an address. Or draw a circle and pull every property inside it at once.</p>
          </div>
          <div className="step">
            <div className="step-num">STEP 03</div>
            <h3 className="step-title">Save. Share. Reach out.</h3>
            <p className="step-desc">Drop pins, organize into folders, and — where available — get owner contact info to start the conversation.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Compare() {
  const rows = [
    ["Real-time parcel boundaries", true, true],
    ["Live GPS on property lines", true, true],
    ["Circle area → owner list", true, false],
    ["Owner contact info (where available)", true, false],
    ["Offline map downloads", true, true],
    ["Flood / soil / zoning layers", true, false],
    ["Shareable folders & pins", true, "limited"],
    ["iOS + Android + Web", true, "limited"],
  ];
  return (
    <section id="compare">
      <div className="shell">
        <SectionHead label="Comparison" title="Built for <em>working the land,</em> not just walking it." />
        <div className="compare-table">
          <div className="compare-row head">
            <div>Capability</div>
            <div>LandAI</div>
            <div>Typical mapping app</div>
          </div>
          {rows.map(([label, a, b]) => (
            <div className="compare-row" key={label}>
              <div>{label}</div>
              <div>{a === true ? <Icon.Check style={{ color: "var(--green)" }}/> : a === "limited" ? <span className="chip">Limited</span> : <span className="dash">—</span>}</div>
              <div>{b === true ? <Icon.Check style={{ color: "var(--muted)" }}/> : b === "limited" ? <span className="chip">Limited</span> : <span className="dash">—</span>}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const [billing, setBilling] = React.useState("yearly");
  const isYearly = billing === "yearly";
  const price = isYearly ? "39.99" : "4.99";
  const period = isYearly ? "/ year" : "/ month";
  const savings = "Save 33% — 2 months free";

  return (
    <section id="pricing">
      <div className="shell">
        <SectionHead label="Pricing" title="One plan. <em>Cancel whenever.</em>" />

        {/* Billing toggle */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 40 }}>
          <div style={{
            display: "inline-flex",
            padding: 4,
            background: "var(--bg-2)",
            border: "1px solid var(--line)",
            borderRadius: 99,
          }}>
            {[["monthly","Monthly"],["yearly","Yearly"]].map(([k,label]) => (
              <button
                key={k}
                onClick={() => setBilling(k)}
                style={{
                  padding: "10px 20px",
                  border: "none",
                  borderRadius: 99,
                  background: billing === k ? "var(--ink)" : "transparent",
                  color: billing === k ? "var(--bg)" : "var(--ink-2)",
                  fontFamily: "inherit",
                  fontSize: 14,
                  fontWeight: 500,
                  cursor: "pointer",
                  transition: "all .15s",
                  display: "inline-flex", alignItems: "center", gap: 8,
                }}
              >
                {label}
                {k === "yearly" && (
                  <span style={{
                    fontSize: 10,
                    fontFamily: "'JetBrains Mono', monospace",
                    padding: "2px 6px",
                    borderRadius: 4,
                    background: billing === k ? "var(--blue)" : "var(--blue)",
                    color: "#0E1220",
                    letterSpacing: ".04em",
                  }}>−33%</span>
                )}
              </button>
            ))}
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 520px)", justifyContent: "center" }}>
          <div className="price-card featured" style={{ padding: 40 }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
              <div>
                <div className="price-name" style={{ fontSize: 32 }}>LandAI</div>
                <div className="mono caps price-muted" style={{ marginTop: 6 }}>{isYearly ? "Yearly · best value" : "Monthly · flexible"}</div>
              </div>
              <span style={{
                fontSize: 11,
                fontFamily: "'JetBrains Mono', monospace",
                padding: "4px 10px",
                borderRadius: 99,
                background: "rgba(1,179,241,0.18)",
                color: "var(--blue)",
                letterSpacing: ".04em",
                textTransform: "uppercase",
                visibility: isYearly ? "visible" : "hidden",
              }}>{savings}</span>
            </div>

            <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 8 }}>
              <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 28, lineHeight: 1, color: "color-mix(in oklab, var(--bg) 60%, var(--ink))" }}>$</span>
              <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 84, lineHeight: 1, letterSpacing: "-0.03em" }}>{price}</span>
              <span style={{ fontSize: 16, color: "color-mix(in oklab, var(--bg) 60%, var(--ink))", marginLeft: 8 }}>{period}</span>
            </div>

            <div style={{ height: 1, background: "rgba(255,255,255,0.12)", margin: "8px 0" }}/>

            <ul className="price-feat" style={{ gap: 12 }}>
              <li><Icon.Check style={{ color: "var(--blue)", flexShrink:0, marginTop:3 }}/> Nationwide parcel coverage — 150M+ properties</li>
              <li><Icon.Check style={{ color: "var(--blue)", flexShrink:0, marginTop:3 }}/> Live GPS on real-time property lines</li>
              <li><Icon.Check style={{ color: "var(--blue)", flexShrink:0, marginTop:3 }}/> Circle-an-area + owner lists</li>
              <li><Icon.Check style={{ color: "var(--blue)", flexShrink:0, marginTop:3 }}/> Offline regions (unlimited)</li>
              <li><Icon.Check style={{ color: "var(--blue)", flexShrink:0, marginTop:3 }}/> Topography & map style layers</li>
              <li><Icon.Check style={{ color: "var(--blue)", flexShrink:0, marginTop:3 }}/> Unlimited pins + folders</li>
              <li><Icon.Check style={{ color: "var(--blue)", flexShrink:0, marginTop:3 }}/> iOS, Android & Web</li>
            </ul>

            <a href="#" className="btn btn-primary" style={{ background: "var(--blue)", color: "#0E1220", justifyContent: "center", padding: "16px 24px", fontSize: 15 }}>
              Start 7-day free trial <Icon.Arrow/>
            </a>
            <div className="mono caps" style={{ color: "color-mix(in oklab, var(--bg) 50%, var(--ink))", textAlign: "center", marginTop: -8 }}>
              No card required · cancel anytime
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    ["How accurate are the boundaries?", "We source parcel data directly from county assessors and refresh nightly where feeds allow. Accuracy matches the county record — typically within 1–5 feet in surveyed areas."],
    ["Does it work off-grid?", "Yes. Download any region ahead of time and the map, boundaries, and saved pins work fully offline. GPS still pins your position."],
    ["Is owner contact info always available?", "Where public records include it, yes. Coverage varies by county. Pro plan includes skip-trace for gaps, where legal."],
    ["What states are covered?", "We're rolling out state by state — see the Coverage section for exact availability in your state and county."],
    ["Can I export a property list?", "Pro users can export any circled region or folder as CSV or shapefile."],
  ];
  return (
    <section id="faq">
      <div className="shell">
        <SectionHead label="FAQ" title="Questions <em>answered.</em>" />
        <div className="faq">
          {items.map(([q,a]) => (
            <details key={q}>
              <summary>{q}</summary>
              <div className="faq-body">{a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ padding: "48px 0 96px" }}>
      <div className="shell">
        <div className="cta-final">
          <div className="topo"/>
          <div className="cta-grid">
            <h2>Know where you <em>stand.</em></h2>
            <div>
              <p style={{ color: "rgba(255,255,255,.7)", fontSize: 16, marginTop: 0, maxWidth: "42ch" }}>Download LandAI free. Nationwide parcel coverage, live GPS, and offline maps — in your pocket.</p>
              <div className="cta-ctas">
                <CTABtn className="btn btn-primary"><Icon.Apple/> App Store</CTABtn>
                <CTABtn className="btn btn-primary"><Icon.Play/> Google Play</CTABtn>
                <CTABtn className="btn btn-secondary"><Icon.Globe/> Web app</CTABtn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="shell">
        <div className="foot-grid">
          <div className="foot-col">
            <div className="brand" style={{ marginBottom: 16 }}>
              <span className="brand-mark">L</span>
              LandAI
            </div>
            <div style={{ fontSize: 13, color: "var(--muted)", maxWidth: "32ch" }}>Property intelligence for the people who actually walk the land.</div>
          </div>
          <div className="foot-col">
            <h4>Product</h4>
            <ul>
              <li><a href="#features">Features</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#">Web app</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>For</h4>
            <ul>
              <li><a href="#">Hunters</a></li>
              <li><a href="#">Real estate</a></li>
              <li><a href="#">Landowners</a></li>
              <li><a href="#">Investors</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Company</h4>
            <ul>
              <li><a href="About.html">About</a></li>
              <li><a href="Contact.html">Contact</a></li>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 LandAI</span>
          <span>Built in North Carolina</span>
        </div>
      </div>
    </footer>
  );
}

window.FeatureGrid = FeatureGrid;
window.HowItWorks = HowItWorks;
window.Compare = Compare;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
window.SectionHead = SectionHead;