// Main app — nav + hero + sections wiring + Tweaks
const { useState: useState2, useEffect: useEffect2 } = React;

function ComingSoonPopup({ onClose }) {
  useEffect2(() => {
    const t = setTimeout(onClose, 3200);
    return () => clearTimeout(t);
  }, []);
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 999,
        display: "grid", placeItems: "center",
        background: "rgba(14,18,32,.4)",
        backdropFilter: "blur(4px)",
        animation: "fadeIn .18s ease",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: "var(--ink)", color: "var(--bg)",
          borderRadius: 20, padding: "36px 44px",
          textAlign: "center", maxWidth: 340,
          boxShadow: "0 24px 64px rgba(0,0,0,.3)",
          animation: "popIn .22s cubic-bezier(.34,1.56,.64,1)",
        }}
      >
        <div style={{ fontSize: 36, marginBottom: 12 }}>🚀</div>
        <div style={{
          fontFamily: "'Instrument Serif', serif",
          fontSize: 32, lineHeight: 1.1, marginBottom: 8,
        }}>Launching Q4 2026</div>
        <div style={{ color: "rgba(255,255,255,.6)", fontSize: 14, lineHeight: 1.5, marginBottom: 20 }}>
          LandAI is coming soon.<br/>Be the first to know when we launch.
        </div>
        <button onClick={onClose} style={{
          background: "var(--blue)", color: "#0E1220",
          border: "none", borderRadius: 99,
          padding: "12px 24px", fontSize: 14, fontWeight: 600,
          cursor: "pointer", fontFamily: "inherit",
        }}>Got it</button>
      </div>
    </div>
  );
}
window.ComingSoonPopup = ComingSoonPopup;

function CTABtn({ children, className = "btn btn-primary", style = {} }) {
  return (
    <button
      className={className}
      style={{ ...style, cursor: "pointer", border: className.includes("secondary") ? "1px solid var(--line)" : "none" }}
      onClick={() => window.__showComingSoon && window.__showComingSoon()}
    >{children}</button>
  );
}
window.CTABtn = CTABtn;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "navy",
  "heroLayout": "split",
  "copyTone": "bold",
  "mode": "light"
}/*EDITMODE-END*/;

const ACCENTS = {
  navy: { color: "#4F69A3", name: "Navy" },
  blue: { color: "#01B3F1", name: "Sky" },
  green: { color: "#61B39E", name: "Field" },
  beige: { color: "#C5B478", name: "Beige" },
};

const HEROES = {
  split: "Split",
  centered: "Centered",
  editorial: "Editorial"
};

const COPY = {
  bold: {
    eyebrow: "New · Nationwide parcel coverage",
    title: 'Know where you <em>stand.</em>',
    sub: "Property lines, owner info, and offline maps — built for hunters, investors, and realtors who actually walk the ground.",
  },
  subtle: {
    eyebrow: "Now on iOS & Android",
    title: 'Every line, <em>every acre.</em>',
    sub: "A quiet, precise map of who owns what. For the people whose work doesn't stop at the pavement.",
  },
};

function Nav() {
  return (
    <nav className="top">
      <div className="shell nav-inner">
        <div className="brand">
          <span className="brand-mark">L</span>
          LandAI
        </div>
        <div className="nav-links">
          <a href="#features">Features</a>
          <a href="#how">How it works</a>
          <a href="#coverage">Coverage</a>
          <a href="#pricing">Pricing</a>
          <a href="About.html">About</a>
          <a href="Contact.html">Contact</a>
        </div>
        <div className="nav-cta">
          <CTABtn className="btn btn-secondary" style={{ padding: "8px 16px", fontSize: 14 }}>Web app</CTABtn>
          <CTABtn className="btn btn-primary" style={{ padding: "8px 16px", fontSize: 14 }}>Get the app</CTABtn>
        </div>
      </div>
    </nav>
  );
}

function Hero({ layout, copy, accentName }) {
  const accent = ACCENTS[accentName].color;
  const body = COPY[copy];

  if (layout === "centered") {
    return (
      <section className="hero">
        <div className="topo-bg"/>
        <div className="shell" style={{ position: "relative", zIndex: 2, textAlign: "center" }}>
          <div style={{ display: "inline-flex" }} className="eyebrow">
            <span className="dot">✦</span>
            {body.eyebrow}
          </div>
          <h1 className="hero-title" style={{ maxWidth: 960, margin: "20px auto 0" }} dangerouslySetInnerHTML={{__html: body.title}}/>
          <p className="hero-sub" style={{ margin: "28px auto 0" }}>{body.sub}</p>
          <div className="hero-ctas" style={{ justifyContent: "center" }}>
            <CTABtn><Icon.Apple/> App Store</CTABtn>
            <CTABtn><Icon.Play/> Google Play</CTABtn>
            <CTABtn className="btn btn-secondary"><Icon.Globe/> Try the web app</CTABtn>
          </div>
          <div style={{ marginTop: 64, position: "relative" }}>
            <PhoneMockup width={320}/>
          </div>
        </div>
      </section>
    );
  }

  if (layout === "editorial") {
    return (
      <section className="hero" style={{ paddingTop: 32, paddingBottom: 32 }}>
        <div className="shell" style={{ position: "relative", zIndex: 2 }}>
          <div className="eyebrow" style={{ marginBottom: 40 }}>
            <span className="dot">✦</span>
            {body.eyebrow}
          </div>
          <h1 className="hero-title" style={{ fontSize: "clamp(64px, 10vw, 160px)", lineHeight: 0.9 }} dangerouslySetInnerHTML={{__html: body.title}}/>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40, marginTop: 48, alignItems: "end" }}>
            <div>
              <p className="hero-sub" style={{ fontSize: 20 }}>{body.sub}</p>
              <div className="hero-ctas">
                <CTABtn><Icon.Apple/> App Store</CTABtn>
                <CTABtn className="btn btn-secondary"><Icon.Play/> Google Play</CTABtn>
              </div>
              <div className="hero-meta">
                <span><span className="mono">150M+</span> US parcels</span>
                <span><span className="mono">50</span> states</span>
                <span><span className="mono">4.8★</span> App Store</span>
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <PhoneMockup width={260}/>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // split (default)
  return (
    <section className="hero">
      <div className="topo-bg"/>
      <div className="shell">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">
              <span className="dot">✦</span>
              {body.eyebrow}
            </div>
            <h1 className="hero-title" dangerouslySetInnerHTML={{__html: body.title}}/>
            <p className="hero-sub">{body.sub}</p>
            <div className="hero-ctas">
              <CTABtn><Icon.Apple/> App Store</CTABtn>
              <CTABtn><Icon.Play/> Google Play</CTABtn>
              <CTABtn className="btn btn-secondary"><Icon.Globe/> Web app</CTABtn>
            </div>
            <div className="hero-meta">
              <span><span className="mono">150M+</span> US parcels</span>
              <span><span className="mono">50</span> states</span>
              <span><span className="mono">Offline</span> ready</span>
            </div>
          </div>
          <div className="phone-stage">
            <div className="phone-coord tl mono">30.2672° N, 97.7431° W</div>
            <div className="phone-coord br mono">± 0.8 m · live</div>
            <PhoneMockup width={320}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function SocialProof() {
  const logos = ["REALTOR.com", "Outdoor Life", "Land Report", "Hunting Digest", "BiggerPockets"];
  return (
    <section style={{ padding: "24px 0 64px" }}>
      <div className="shell">
        <div className="caps mono" style={{ color: "var(--muted)", marginBottom: 20, textAlign: "center" }}>As seen in</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 28, opacity: 0.7 }}>
          {logos.map(l => (
            <span key={l} className="serif" style={{ fontSize: 22, color: "var(--ink-2)", letterSpacing: "-0.01em" }}>{l}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const [showPopup, setShowPopup] = useState2(false);

  useEffect2(() => {
    window.__showComingSoon = () => setShowPopup(true);
    return () => { delete window.__showComingSoon; };
  }, []);

  useEffect2(() => {
    const accent = ACCENTS[t.accent] || ACCENTS.navy;
    document.documentElement.style.setProperty("--accent", accent.color);
    document.documentElement.setAttribute("data-mode", t.mode);
  }, [t.accent, t.mode]);

  return (
    <>
      {showPopup && <ComingSoonPopup onClose={() => setShowPopup(false)}/>}
      <Nav/>
      <main>
        <Hero layout={t.heroLayout} copy={t.copyTone} accentName={t.accent}/>
        <FeatureGrid/>
        <HowItWorks/>
        <Coverage/>
        <Pricing/>
        <FAQ/>
        <FinalCTA/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakRadio label="Accent"
            value={t.accent}
            onChange={v => setT({ accent: v })}
            options={Object.entries(ACCENTS).map(([k,v]) => ({ value: k, label: v.name }))}
          />
          <TweakRadio label="Mode"
            value={t.mode}
            onChange={v => setT({ mode: v })}
            options={[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio label="Layout"
            value={t.heroLayout}
            onChange={v => setT({ heroLayout: v })}
            options={Object.entries(HEROES).map(([k,v]) => ({ value: k, label: v }))}
          />
          <TweakRadio label="Copy tone"
            value={t.copyTone}
            onChange={v => setT({ copyTone: v })}
            options={[{value:"bold",label:"Bold"},{value:"subtle",label:"Subtle"}]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App/>);