function App() {
  const [tweaks, updateTweaks, editActive] = useTweaks();
  const [waitlistOpen, setWaitlistOpen] = useState(false);
  const openWaitlist = () => setWaitlistOpen(true);

  // Nav dim until first-time visitor has scrolled ≥75% of the page
  const [navLocked, setNavLocked] = useState(() => {
    try { return localStorage.getItem("activus_nav_unlocked") !== "1"; } catch (e) { return false; }
  });
  useEffect(() => {
    if (!navLocked) return;
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      if (max <= 0) return;
      const depth = h.scrollTop / max;
      if (depth >= 0.75) {
        setNavLocked(false);
        try { localStorage.setItem("activus_nav_unlocked", "1"); } catch (e) {}
      }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [navLocked]);

  return (
    <div>
      <Nav onJoinWaitlist={openWaitlist} locked={navLocked} />
      <Hero headline={tweaks.headline} onJoinWaitlist={openWaitlist} />
      <ClientViewSection gridStyle="houses" showDealColors={tweaks.showDealColors} />
      <MLSvsActivus />
      <FeatureStrip />
      <HowSection />
      <AgentsSection />
      <OurStory />
      <FAQ />
      <CTA onJoinWaitlist={openWaitlist} />
      <Footer />
      <WaitlistModal open={waitlistOpen} onClose={() => setWaitlistOpen(false)} />
      <TweaksPanel active={editActive} tweaks={tweaks} update={updateTweaks} />
    </div>);

}

/* -------------------------------------------------------------- */
/*  What MLS sees vs. What Activus sees                             */
/*  Two panels side-by-side:                                        */
/*    Left (muted): a short MLS row — closed deals only             */
/*    Right (rich): Activus specialization + activity timeline      */
/* -------------------------------------------------------------- */

function MLSClosedRow({ date, price, address, type }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "70px 1fr 90px",
      alignItems: "center", gap: 12,
      padding: "14px 14px", borderTop: "1px solid var(--line)",
      fontSize: 13
    }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--mute)" }}>{date}</div>
      <div>
        <div style={{ color: "var(--ink-2)" }}>{address}</div>
        <div className="mono" style={{ fontSize: 10, color: "var(--mute)", marginTop: 2 }}>{type}</div>
      </div>
      <div className="mono" style={{ fontSize: 12, color: "var(--ink-2)", textAlign: "right" }}>{price}</div>
    </div>);

}

function MLSPanel() {
  return (
    <div style={{
      background: "var(--paper)", border: "1px solid var(--line)",
      borderRadius: 12, overflow: "hidden", opacity: 0.9
    }}>
      <div style={{
        padding: "16px 18px",
        borderBottom: "1px solid var(--line)",
        background: "var(--paper-2)"
      }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--mute)", letterSpacing: "0.08em" }}>MLS / ZILLOW VIEW</div>
        <div style={{ fontFamily: "Prompt, sans-serif", fontSize: 22, fontWeight: 500, marginTop: 4, color: "var(--ink-2)" }}>
          3 closed deals · 12 months
        </div>
      </div>
      <MLSClosedRow date="Jan 12" address="142 Bedford Rd, Toronto" price="$1.82M" type="condo · closed · sold" />
      <MLSClosedRow date="Sep 04" address="28 Carlton St, Toronto" price="$1.15M" type="condo · closed · sold" />
      <MLSClosedRow date="May 19" address="77 Charles St, Toronto" price="$2.10M" type="condo · closed · sold" />
      <div style={{
        padding: "40px 18px", textAlign: "center",
        borderTop: "1px dashed var(--line)",
        background: "repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in oklab, var(--line) 40%, transparent) 6px 7px)"
      }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--mute)" }}>[MLS data shown weeks after closing]

        </div>
        <div style={{ fontSize: 13, color: "var(--mute)", marginTop: 8, maxWidth: 320, margin: "8px auto 0" }}>what isn't shown:
339 tours · 47 consultations · 14 builder meetings · 22 client retention touchpoints
        </div>
      </div>
    </div>);

}

function ActivusPanel() {
  const specs = [
  ["precon", 62, "Pre-construction"],
  ["resale", 22, "Re-sale"],
  ["luxury", 11, "Luxury"],
  ["investor", 5, "Investor"]];

  return (
    <div style={{
      background: "var(--paper)",
      border: "1px solid var(--accent-tint-2)",
      borderRadius: 12, overflow: "hidden",
      boxShadow: "0 20px 60px -24px color-mix(in oklab, var(--accent) 50%, transparent)"
    }}>
      <div style={{
        padding: "16px 18px",
        borderBottom: "1px solid var(--line)",
        background: "var(--accent-tint)"
      }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--accent-ink)", letterSpacing: "0.08em" }}>ACTIVUS VIEW</div>
        <div style={{ fontFamily: "Prompt, sans-serif", fontSize: 22, fontWeight: 500, marginTop: 4, color: "var(--ink)" }}>
          487 verified activities · 12 months
        </div>
      </div>
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 18 }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--mute)", letterSpacing: "0.06em", marginBottom: 8 }}>SPECIALIZATION MIX</div>
          <div style={{ display: "flex", height: 10, borderRadius: 5, overflow: "hidden", border: "1px solid var(--line)" }}>
            {specs.map(([k, pct]) =>
            <div key={k} style={{ width: `${pct}%`, background: `var(--${k})` }} />
            )}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, flexWrap: "wrap", gap: 8 }}>
            {specs.map(([k, pct, label]) =>
            <div key={k} style={{ display: "flex", alignItems: "center", gap: 5 }}>
                <span style={{ width: 7, height: 7, borderRadius: 2, background: `var(--${k})` }} />
                <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-2)" }}>{label} {pct}%</span>
              </div>
            )}
          </div>
        </div>

        <div className="r-grid-4" style={{ gap: 10 }}>
          <Metric value="339" label="TOURS" />
          <Metric value="47" label="CONSULTATIONS" />
          <Metric value="22" label="RETENTION" />
          <Metric value="14" label="BUILDER RELS" accent />
          <Metric value="68%" label="REPEAT + REFERRAL" accent />
          <Metric value="4" label="AVG TOURS / BUYER" sub="vs. 11 avg" />
        </div>

        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--mute)", letterSpacing: "0.06em", marginBottom: 10 }}>CLIENT FIT</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            <Tag tone="accent">first-time buyer</Tag>
            <Tag tone="accent">pre-construction</Tag>
            <Tag tone="resale">downsizer</Tag>
            <Tag tone="luxury">$1.2M–$2.5M</Tag>
            <Tag tone="investor">assignment</Tag>
          </div>
        </div>
      </div>
    </div>);

}

function Metric({ value, label, sub, accent }) {
  return (
    <div style={{
      background: accent ? "var(--accent-tint)" : "var(--paper-2)",
      border: accent ? "1px solid var(--accent-tint-2)" : "1px solid var(--line)",
      borderRadius: 7, padding: "10px 12px"
    }}>
      <div style={{
        fontFamily: "Prompt, sans-serif",
        fontSize: 22, fontWeight: 500,
        color: accent ? "var(--accent-ink)" : "var(--ink)",
        lineHeight: 1
      }}>{value}</div>
      <div className="mono" style={{ fontSize: 9, color: "var(--mute)", marginTop: 6, letterSpacing: "0.06em" }}>{label}</div>
      {sub && <div className="mono" style={{ fontSize: 9, color: "var(--accent-ink)", marginTop: 2 }}>{sub}</div>}
    </div>);

}

function MLSvsActivus() {
  return (
    <section className="snap section-pad" style={{ padding: "80px 40px", background: "var(--paper-2)", borderTop: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto" }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--accent-ink)", letterSpacing: "0.08em", marginBottom: 12 }}>// WHY EXISTING TOOLS FALL SHORT</div>
        <h2 className="section-h" style={{ fontFamily: "Prompt, sans-serif", fontWeight: 500, fontSize: 44, letterSpacing: "-0.02em", lineHeight: 1.1, maxWidth: 820, marginTop: 0, paddingBottom: "0.08em" }}>
          MLS shows outcomes. <span style={{ color: "var(--accent-ink)" }}>Activus shows the work that got there.</span>
        </h2>
        <p style={{ fontSize: 15, color: "var(--ink-2)", maxWidth: 620, marginTop: 12 }}>The same agent, same city, same year, seen two different ways. Three closed deals on MLS, or the four hundred hours of tours, consultations, and builder meetings that made them happen.

        </p>
        <div className="r-grid-2" style={{ marginTop: 44, alignItems: "start" }}>
          <MLSPanel />
          <ActivusPanel />
        </div>
      </div>
    </section>);

}

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