/* global React, HP */
const { Logo, Icon } = HP;

// ── Parchment section label ────────────────────────────────────
const Label = ({ children, gold = false }) => (
  <div style={{
    display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 16,
  }}>
    <span style={{
      display: "inline-block", width: 18, height: 1.5,
      background: gold ? "#C8952A" : "rgba(42,31,20,0.22)",
      borderRadius: 1,
    }}/>
    <span style={{
      fontFamily: "var(--hp-font-sans)", fontSize: 18, fontWeight: 600,
      color: gold ? "#C8952A" : "var(--hp-text-2)",
      letterSpacing: "0.01em",
    }}>{children}</span>
    <span style={{
      display: "inline-block", width: 18, height: 1.5,
      background: gold ? "#C8952A" : "rgba(42,31,20,0.22)",
      borderRadius: 1,
    }}/>
  </div>
);

// ── App Store QR code ────────────────────────────────────────
const AppQR = ({ size = 160 }) => {
  const url = `https://api.qrserver.com/v1/create-qr-code/?size=${size * 2}x${size * 2}&color=2A1F14&bgcolor=FAF5EB&qzone=2&data=${encodeURIComponent("https://apps.apple.com/us/app/housingpulse/id6763149818")}`;
  return (
    <div style={{
      width: size, height: size,
      background: "#FAF5EB",
      borderRadius: 14,
      border: "1.5px solid rgba(200,149,42,0.40)",
      boxShadow: "0 4px 24px rgba(42,31,20,0.12)",
      overflow: "hidden",
      display: "flex", alignItems: "center", justifyContent: "center",
      flexShrink: 0,
    }}>
      <img src={url} alt="QR code to download HousingPulse" style={{ width: "100%", height: "100%", display: "block" }}/>
    </div>
  );
};

// ── Search bar ─────────────────────────────────────────────────
const SearchBar = ({ query, onQuery, onSearch, size = "lg" }) => {
  const isLg = size === "lg";
  return (
    <form
      onSubmit={(e) => { e.preventDefault(); if (query?.trim()) onSearch(query); }}
      style={{
        display: "flex", alignItems: "center",
        background: "#fff",
        border: `1.5px solid ${isLg ? "#C8952A" : "#D4C4A0"}`,
        borderRadius: isLg ? 12 : 10,
        overflow: "hidden",
        boxShadow: isLg
          ? "0 8px 40px rgba(42,31,20,0.14), 0 2px 8px rgba(42,31,20,0.08)"
          : "0 4px 20px rgba(42,31,20,0.10)",
        maxWidth: isLg ? 620 : 540, width: "100%",
      }}
    >
      <span style={{ color: "#9B7A52", flexShrink: 0, paddingLeft: isLg ? 22 : 16, paddingRight: 10 }}>
        <Icon.Search size={isLg ? 18 : 16}/>
      </span>
      <input
        autoFocus={isLg}
        placeholder="Enter any NYC address…"
        value={query || ""}
        onChange={(e) => onQuery(e.target.value)}
        style={{
          flex: 1, border: "none", outline: "none", background: "transparent",
          fontFamily: "var(--hp-font-sans)", fontSize: isLg ? 16 : 14,
          color: "#2A1F14", padding: isLg ? "20px 8px" : "15px 6px",
          caretColor: "#C8952A",
        }}
      />
      <button type="submit" style={{
        all: "unset", cursor: "pointer",
        background: "#C8952A",
        color: "#fff",
        padding: isLg ? "0 32px" : "0 22px",
        height: isLg ? 62 : 50,
        display: "flex", alignItems: "center", gap: 8,
        fontSize: isLg ? 14 : 13, fontWeight: 700,
        letterSpacing: "0.01em", whiteSpace: "nowrap",
        flexShrink: 0, transition: "background 150ms ease",
      }}
      onMouseEnter={e => e.currentTarget.style.background = "#B07E20"}
      onMouseLeave={e => e.currentTarget.style.background = "#C8952A"}>
        Run report <Icon.Arrow size={13}/>
      </button>
    </form>
  );
};

// ── Animated counter hook ──────────────────────────────────────
const useCounter = (target, duration = 1400) => {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      obs.disconnect();
      const start = performance.now();
      const tick = (now) => {
        const p = Math.min((now - start) / duration, 1);
        const ease = 1 - Math.pow(1 - p, 3);
        setVal(Math.round(ease * target));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [target, duration]);
  return [val, ref];
};

// ── Violation counter (starts immediately when rendered) ───────
const ViolationCount = ({ target, duration = 1400 }) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min((now - start) / duration, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(ease * target));
      if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, []);
  return <span>{val}</span>;
};

// ── Simulated typing hook ──────────────────────────────────────
const useTyping = (text, delay = 900) => {
  const [typed, setTyped] = React.useState("");
  const [active, setActive] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting || active) return;
      setActive(true);
      obs.disconnect();
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  React.useEffect(() => {
    if (!active) return;
    const t = setTimeout(() => {
      let i = 0;
      const iv = setInterval(() => {
        i++;
        setTyped(text.slice(0, i));
        if (i >= text.length) clearInterval(iv);
      }, 55);
      return () => clearInterval(iv);
    }, delay);
    return () => clearTimeout(t);
  }, [active, text, delay]);
  return [typed, ref];
};

// ── Landing ────────────────────────────────────────────────────
const Landing = ({ query, onQuery, onSearch, go }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [heroVisible, setHeroVisible] = React.useState(false);
  const [quoteStep, setQuoteStep] = React.useState(0);
  const [featureStep, setFeatureStep] = React.useState(0);
  const [scanStep, setScanStep] = React.useState(0); // 0=idle 1=scanning 2=done
  const [activeTestimonial, setActiveTestimonial] = React.useState(0);
  const featureSectionRef = React.useRef(null);
  const testimonialRefs = [React.useRef(null), React.useRef(null), React.useRef(null)];

  // Hero fade-in on mount
  React.useEffect(() => {
    const t = setTimeout(() => setHeroVisible(true), 80);
    return () => clearTimeout(t);
  }, []);

  React.useEffect(() => {
    const heroBg = document.querySelector(".lp-hero-bg");
    const onScrollParallax = () => {
      const sy = window.scrollY;
      if (heroBg) {
        // parallax + slight zoom on scroll
        const zoom = 1 + Math.min(sy / 2000, 0.08);
        heroBg.style.transform = `translateY(${sy * 0.28}px) scale(${zoom})`;
      }
      setScrolled(sy > 60);
    };
    window.addEventListener("scroll", onScrollParallax, { passive: true });
    return () => window.removeEventListener("scroll", onScrollParallax);
  }, []);

  // Scroll-reveal (general)
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("lp-visible"); observer.unobserve(e.target); }
      }),
      { threshold: 0.12 }
    );
    document.querySelectorAll(".lp-reveal").forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  // Pull-quote step reveal
  React.useEffect(() => {
    const el = document.querySelector(".lp-quote-section");
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      obs.disconnect();
      setQuoteStep(1);
      setTimeout(() => setQuoteStep(2), 500);
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  // Feature sticky scroll — drive featureStep by scroll position
  React.useEffect(() => {
    const section = featureSectionRef.current;
    if (!section) return;
    const onScroll = () => {
      const { top, height } = section.getBoundingClientRect();
      const progress = -top / (height - window.innerHeight);
      if (progress < 0.33) setFeatureStep(0);
      else if (progress < 0.66) setFeatureStep(1);
      else setFeatureStep(2);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // How-it-works typing + scan simulation
  const [typedAddr, addrRef] = useTyping("253 W 47th St, Manhattan", 600);
  React.useEffect(() => {
    if (typedAddr.length > 10 && scanStep === 0) setScanStep(1);
    if (typedAddr.length >= 23 && scanStep === 1) {
      const t = setTimeout(() => setScanStep(2), 1200);
      return () => clearTimeout(t);
    }
  }, [typedAddr, scanStep]);

  // Testimonial auto-advance
  React.useEffect(() => {
    const iv = setInterval(() => setActiveTestimonial(p => (p + 1) % 3), 4000);
    return () => clearInterval(iv);
  }, []);

  const TESTIMONIALS = [
    { text: "Found 14 open violations I never would have seen. Saved me from a nightmare lease.", attr: "Renter", loc: "Brooklyn" },
    { text: "We don't list a building without running this first. It's standard in our process now.", attr: "Licensed Broker", loc: "Manhattan" },
    { text: "Checked it before signing. The building had 3 active C-class violations. I walked.", attr: "Tenant", loc: "Queens" },
  ];

  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", background: "#EDE4D0" }}>

      {/* ── NAV ─────────────────────────────────────────────── */}
      <header style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
        display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center",
        padding: scrolled ? "18px 64px" : "34px 64px",
        background: scrolled ? "rgba(237,228,208,0.94)" : "transparent",
        backdropFilter: scrolled ? "blur(20px) saturate(180%)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(20px) saturate(180%)" : "none",
        borderBottom: scrolled ? "1px solid rgba(200,149,42,0.22)" : "1px solid transparent",
        boxShadow: scrolled ? "0 4px 32px rgba(42,31,20,0.09)" : "none",
        transition: "padding 300ms cubic-bezier(0.16,1,0.3,1), background 300ms cubic-bezier(0.16,1,0.3,1), box-shadow 300ms cubic-bezier(0.16,1,0.3,1), border-color 300ms cubic-bezier(0.16,1,0.3,1)",
      }} className="lp-nav-header">
        {/* Logo — left column */}
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 12,
          fontSize: 24, fontWeight: 800, letterSpacing: "-0.025em", color: "#2A1F14",
          userSelect: "none", cursor: "pointer", justifySelf: "start",
        }}>
          <Logo size={44}/><span>Housing<span style={{ color: "#C8952A" }}>Pulse</span></span>
        </span>

        {/* Center nav links — middle column */}
        <nav style={{ display: "flex", gap: 0, alignItems: "center" }} className="lp-nav-links">
          {[
            { label: "Map Search", action: () => go && go("map") },
            { label: "Dashboard",  action: () => go && go("dashboard") },
            { label: "Saved",      action: () => go && go("preview") },
          ].map(({ label, action }) => (
            <a key={label}
              onClick={action}
              style={{
                fontSize: 16, color: "#4A3520", cursor: "pointer",
                textDecoration: "none", padding: "10px 32px",
                letterSpacing: "0.01em",
                fontWeight: 600, whiteSpace: "nowrap",
                position: "relative",
                transition: "color 180ms ease",
              }}
              onMouseEnter={e => {
                e.currentTarget.style.color = "#C8952A";
                const line = e.currentTarget.querySelector(".nav-line");
                if (line) { line.style.transform = "scaleX(1)"; line.style.opacity = "1"; }
              }}
              onMouseLeave={e => {
                e.currentTarget.style.color = "#4A3520";
                const line = e.currentTarget.querySelector(".nav-line");
                if (line) { line.style.transform = "scaleX(0)"; line.style.opacity = "0"; }
              }}>
              {label}
              <span className="nav-line" style={{
                position: "absolute", bottom: 4, left: 32, right: 32, height: 1.5,
                background: "#C8952A", borderRadius: 1,
                transform: "scaleX(0)", opacity: 0,
                transition: "transform 200ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease",
                transformOrigin: "center",
              }}/>
            </a>
          ))}
        </nav>

        {/* Right — Download App only */}
        <div style={{ justifySelf: "end", display: "flex", alignItems: "center" }}>
          <a
            href="https://apps.apple.com/us/app/housingpulse/id6763149818"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "#2A1F14", color: "#EDE4D0",
              borderRadius: 8, padding: "11px 26px",
              fontSize: 15, fontWeight: 700,
              letterSpacing: "0.005em", textDecoration: "none",
              border: "1.5px solid rgba(200,149,42,0.35)",
              transition: "background 150ms ease, border-color 150ms ease",
            }}
            onMouseEnter={e => { e.currentTarget.style.background = "#3D2B1F"; e.currentTarget.style.borderColor = "rgba(200,149,42,0.7)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "#2A1F14"; e.currentTarget.style.borderColor = "rgba(200,149,42,0.35)"; }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
            Download App
          </a>
        </div>
      </header>

      {/* ── HERO — street sketch ─────────────────────────────── */}
      <section style={{
        minHeight: "100vh", position: "relative", overflow: "hidden",
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center",
        textAlign: "center", padding: "clamp(120px,14vh,160px) 24px 100px",
        background: "#EDE4D0",
      }}>
        {/* Street sketch — Empire State + brownstones */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(assets/street.jpeg)",
          backgroundSize: "cover", backgroundPosition: "center 20%",
          opacity: 0.52,
          willChange: "transform",
        }} className="lp-hero-bg"/>
        {/* Parchment vignette — heavier at bottom so text is readable */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(237,228,208,0.38) 0%, rgba(237,228,208,0.10) 35%, rgba(237,228,208,0.90) 100%)",
        }}/>
        {/* Soft side fade */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(90deg, rgba(237,228,208,0.50) 0%, transparent 22%, transparent 78%, rgba(237,228,208,0.50) 100%)",
        }}/>

        {/* Content */}
        <div style={{
          position: "relative", zIndex: 1, maxWidth: 820,
          opacity: heroVisible ? 1 : 0,
          transform: heroVisible ? "translateY(0)" : "translateY(22px)",
          transition: "opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1)",
        }}>

          {/* Live badge */}
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 36,
            padding: "9px 22px 9px 16px",
            background: "rgba(200,149,42,0.16)",
            border: "1.5px solid rgba(200,149,42,0.55)",
            borderRadius: 999,
            boxShadow: "0 2px 12px rgba(200,149,42,0.15)",
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: "50%", background: "#C8952A",
              boxShadow: "0 0 0 3px rgba(200,149,42,0.28)", flexShrink: 0,
            }}/>
            <span style={{
              fontFamily: "var(--hp-font-sans)", fontSize: 15, fontWeight: 600,
              color: "#2A1F14", letterSpacing: "0.005em",
            }}>
              Live data &nbsp;·&nbsp; 1.1M buildings &nbsp;·&nbsp; All 5 boroughs
            </span>
          </div>

          {/* Headline — Instrument Serif italic, the anti-AI-vibe move */}
          <h1 style={{
            fontFamily: "var(--hp-font-serif)",
            fontSize: "clamp(50px, 8.5vw, 100px)",
            fontWeight: 400, fontStyle: "italic",
            letterSpacing: "-0.022em", lineHeight: 0.93,
            color: "#2A1F14", marginBottom: 30,
          }}>
            The record behind<br/>
            every{" "}
            <span style={{ color: "#C8952A" }}>NYC building.</span>
          </h1>

          <p style={{
            fontSize: "clamp(17px, 1.8vw, 21px)", color: "#7A5C3A",
            maxWidth: 540, margin: "0 auto 12px", lineHeight: 1.55, fontWeight: 400,
          }}>
            Violations, complaints, ownership, permits — pulled into one clear report from 70+ official city sources.
          </p>

          <div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}>
            <SearchBar query={query} onQuery={onQuery} onSearch={onSearch} size="lg"/>
          </div>


        </div>

      </section>

      {/* ── STATS BAR ───────────────────────────────────────── */}
      <section style={{
        background: "#2A1F14",
        padding: "0 52px",
        position: "relative", overflow: "hidden",
      }}>
        {/* Skyline silhouette — very subtle behind the dark band */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(assets/skyline.jpeg)",
          backgroundSize: "cover", backgroundPosition: "center 40%",
          opacity: 0.07, mixBlendMode: "luminosity",
        }}/>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4,1fr)",
        }} className="lp-stats-grid">
          {[
            { n: "1.1M",   lbl: "NYC buildings indexed" },
            { n: "70+",    lbl: "City data sources" },
            { n: "100K+",   lbl: "Reports generated" },
            { n: "< 30 sec", lbl: "Full building report" },
          ].map((s, i, arr) => (
            <div key={s.n} style={{
              textAlign: "center", padding: "38px 28px",
              borderRight: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.08)" : "none",
            }}>
              <div style={{
                fontFamily: "var(--hp-font-mono)",
                fontSize: "clamp(24px, 3.5vw, 40px)",
                fontWeight: 800, color: "#C8952A",
                letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 7,
              }}>{s.n}</div>
              <div style={{ fontSize: 16, fontFamily: "var(--hp-font-sans)", color: "rgba(237,228,208,0.6)", letterSpacing: "0.01em", fontWeight: 500 }}>{s.lbl}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── PULL QUOTE — zoning map sketch ──────────────────── */}
      <section className="lp-quote-section" style={{
        position: "relative", overflow: "hidden",
        minHeight: 480,
        display: "flex", alignItems: "center", justifyContent: "center",
        background: "#EDE4D0",
      }}>
        {/* Zoning map — R6, R7B, R8 districts — directly illustrates the product */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(assets/map.jpeg)",
          backgroundSize: "cover", backgroundPosition: "center 30%",
          opacity: 0.28,
        }}/>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(to right, rgba(237,228,208,0.85) 0%, rgba(237,228,208,0.55) 50%, rgba(237,228,208,0.85) 100%)",
        }}/>
        <div style={{
          position: "relative", zIndex: 1,
          padding: "80px 52px", maxWidth: 860, textAlign: "center",
        }}>
          <div style={{
            fontFamily: "var(--hp-font-mono)", fontSize: 16, fontWeight: 700,
            letterSpacing: "0.12em", textTransform: "uppercase",
            color: "#C8952A", marginBottom: 28,
            display: "flex", alignItems: "center", justifyContent: "center", gap: 12,
          }}>
            <span style={{ display: "inline-block", width: 32, height: 1.5, background: "#C8952A", borderRadius: 1 }}/>
            The reality of NYC real estate
            <span style={{ display: "inline-block", width: 32, height: 1.5, background: "#C8952A", borderRadius: 1 }}/>
          </div>
          <p style={{
            fontFamily: "var(--hp-font-serif)",
            fontSize: "clamp(28px, 4.5vw, 60px)", fontWeight: 400, fontStyle: "italic",
            letterSpacing: "-0.01em", lineHeight: 1.1,
            color: quoteStep >= 1 ? "rgba(42,31,20,0.32)" : "rgba(42,31,20,0)",
            margin: "0 0 12px",
            transition: "color 0.7s cubic-bezier(0.16,1,0.3,1)",
          }}>
            Most people look at photos.
          </p>
          <p style={{
            fontFamily: "var(--hp-font-serif)",
            fontSize: "clamp(28px, 4.5vw, 60px)", fontWeight: 400, fontStyle: "italic",
            letterSpacing: "-0.01em", lineHeight: 1.1,
            color: "#2A1F14",
            opacity: quoteStep >= 2 ? 1 : 0,
            transform: quoteStep >= 2 ? "translateY(0)" : "translateY(16px)",
            margin: 0,
            transition: "opacity 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s, transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s",
          }}>
            Smart people check the building.
          </p>
          <div style={{
            width: 48, height: 2, background: "#C8952A",
            margin: "28px auto 0", borderRadius: 1,
            opacity: quoteStep >= 2 ? 1 : 0,
            transition: "opacity 0.5s ease 0.6s",
          }}/>
        </div>
      </section>

      {/* ── WHAT YOU GET — sticky feature demo ───────────────── */}
      <div ref={featureSectionRef} style={{ height: "300vh", position: "relative" }}>
        <div style={{
          position: "sticky", top: 0, height: "100vh", overflow: "hidden",
          background: "#F0E8D4",
          display: "flex", alignItems: "stretch",
        }}>
          {/* Left — fixed heading */}
          <div style={{
            width: "42%", padding: "0 52px", display: "flex",
            flexDirection: "column", justifyContent: "center",
            borderRight: "1px solid #D4C4A0",
          }}>
            <Label gold>What you get</Label>
            <h2 style={{
              fontFamily: "var(--hp-font-serif)",
              fontSize: "clamp(28px, 3.5vw, 48px)", fontWeight: 400,
              letterSpacing: "-0.015em", lineHeight: 1.08, color: "#2A1F14",
              marginBottom: 28,
            }}>
              Everything filed<br/>against this building.
            </h2>
            <p style={{ fontSize: 15, color: "#7A5C3A", lineHeight: 1.7, maxWidth: 340 }}>
              Pulled from 70+ city sources and structured into one clear record.
            </p>
            {/* Step dots */}
            <div style={{ display: "flex", gap: 10, marginTop: 40 }}>
              {[0, 1, 2].map(i => (
                <div key={i} style={{
                  width: featureStep === i ? 28 : 8, height: 8, borderRadius: 4,
                  background: featureStep === i ? "#C8952A" : "rgba(200,149,42,0.25)",
                  transition: "width 400ms cubic-bezier(0.16,1,0.3,1), background 300ms ease",
                }}/>
              ))}
            </div>
          </div>

          {/* Right — scrolling panels */}
          <div style={{
            flex: 1, padding: "0 52px", display: "flex",
            flexDirection: "column", justifyContent: "center", overflow: "hidden",
          }}>
            {/* Panel 0: Violations count-up */}
            <div style={{
              opacity: featureStep === 0 ? 1 : 0,
              transform: featureStep === 0 ? "translateY(0)" : featureStep < 0 ? "translateY(40px)" : "translateY(-40px)",
              transition: "opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1)",
              position: "absolute",
            }}>
              <div style={{ fontFamily: "var(--hp-font-mono)", fontSize: 14, color: "#C8952A", letterSpacing: "0.12em", marginBottom: 14 }}>01 — VIOLATIONS</div>
              <div style={{ fontFamily: "var(--hp-font-mono)", fontSize: "clamp(56px,8vw,100px)", fontWeight: 800, color: "#2A1F14", lineHeight: 1, marginBottom: 8 }}>
                {featureStep === 0 ? <ViolationCount target={14}/> : "14"}
              </div>
              <div style={{ fontSize: 16, color: "#7A5C3A", maxWidth: 360, lineHeight: 1.65 }}>
                Open HPD violations — including 3 class C (immediately hazardous). Filed in the last 18 months.
              </div>
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 8 }}>
                {["Heat / hot water failure", "Mold — bathroom, 4th floor", "Elevator out of service"].map((v, i) => (
                  <div key={v} style={{
                    display: "flex", alignItems: "center", gap: 12,
                    padding: "10px 16px", background: "#FAF5EB",
                    border: "1px solid #D4C4A0", borderRadius: 8,
                    opacity: featureStep === 0 ? 1 : 0,
                    transform: featureStep === 0 ? "translateX(0)" : "translateX(20px)",
                    transition: `opacity 0.5s ease ${0.2 + i * 0.1}s, transform 0.5s cubic-bezier(0.16,1,0.3,1) ${0.2 + i * 0.1}s`,
                  }}>
                    <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#C8952A", flexShrink: 0 }}/>
                    <span style={{ fontSize: 13, color: "#2A1F14", fontWeight: 500 }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Panel 1: Complaints */}
            <div style={{
              opacity: featureStep === 1 ? 1 : 0,
              transform: featureStep === 1 ? "translateY(0)" : featureStep < 1 ? "translateY(40px)" : "translateY(-40px)",
              transition: "opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1)",
              position: "absolute",
            }}>
              <div style={{ fontFamily: "var(--hp-font-mono)", fontSize: 14, color: "#C8952A", letterSpacing: "0.12em", marginBottom: 14 }}>02 — 311 COMPLAINTS</div>
              <div style={{ fontFamily: "var(--hp-font-mono)", fontSize: "clamp(56px,8vw,100px)", fontWeight: 800, color: "#2A1F14", lineHeight: 1, marginBottom: 8 }}>
                {featureStep === 1 ? <ViolationCount target={31} duration={1000}/> : "31"}
              </div>
              <div style={{ fontSize: 16, color: "#7A5C3A", maxWidth: 360, lineHeight: 1.65 }}>
                Resident complaints filed over 24 months. Noise, heat, pests, structural.
              </div>
              {/* Complaint dots */}
              <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 6, maxWidth: 380 }}>
                {Array.from({ length: 31 }).map((_, i) => (
                  <div key={i} style={{
                    width: 10, height: 10, borderRadius: "50%",
                    background: i < 8 ? "#C8952A" : i < 20 ? "rgba(200,149,42,0.45)" : "rgba(200,149,42,0.18)",
                    opacity: featureStep === 1 ? 1 : 0,
                    transform: featureStep === 1 ? "scale(1)" : "scale(0)",
                    transition: `opacity 0.3s ease ${i * 0.03}s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1) ${i * 0.03}s`,
                  }}/>
                ))}
              </div>
            </div>

            {/* Panel 2: Ownership timeline */}
            <div style={{
              opacity: featureStep === 2 ? 1 : 0,
              transform: featureStep === 2 ? "translateY(0)" : "translateY(40px)",
              transition: "opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1)",
              position: "absolute",
            }}>
              <div style={{ fontFamily: "var(--hp-font-mono)", fontSize: 14, color: "#C8952A", letterSpacing: "0.12em", marginBottom: 14 }}>03 — OWNERSHIP &amp; PERMITS</div>
              <div style={{ fontSize: 16, color: "#7A5C3A", maxWidth: 380, lineHeight: 1.65, marginBottom: 28 }}>
                Full ACRIS ownership history and DOB permit record. Who owned it, what was filed, when.
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 0, position: "relative", paddingLeft: 28 }}>
                <div style={{ position: "absolute", left: 8, top: 8, bottom: 8, width: 1, background: "rgba(200,149,42,0.3)" }}/>
                {[
                  { yr: "2024", ev: "3 DOB permits — plumbing, electrical" },
                  { yr: "2019", ev: "Ownership transfer — LLC formed" },
                  { yr: "2015", ev: "Major capital improvement filed" },
                  { yr: "2011", ev: "Original owner — individual deed" },
                ].map(({ yr, ev }, i) => (
                  <div key={yr} style={{
                    display: "flex", gap: 16, paddingBottom: 22, alignItems: "flex-start",
                    opacity: featureStep === 2 ? 1 : 0,
                    transform: featureStep === 2 ? "translateX(0)" : "translateX(16px)",
                    transition: `opacity 0.5s ease ${0.1 + i * 0.12}s, transform 0.5s cubic-bezier(0.16,1,0.3,1) ${0.1 + i * 0.12}s`,
                  }}>
                    <div style={{ width: 14, height: 14, borderRadius: "50%", background: "#C8952A", flexShrink: 0, marginTop: 2, position: "relative", zIndex: 1 }}/>
                    <div>
                      <div style={{ fontFamily: "var(--hp-font-mono)", fontSize: 12, color: "#C8952A", fontWeight: 700, marginBottom: 3 }}>{yr}</div>
                      <div style={{ fontSize: 14, color: "#2A1F14" }}>{ev}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── DATA SOURCES ─────────────────────────────────────── */}
      <section style={{
        background: "#2A1F14",
        padding: "0 52px",
        position: "relative", overflow: "hidden",
      }}>
        {/* Aerial city view — subtle behind dark strip */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(assets/view.jpeg)",
          backgroundSize: "cover", backgroundPosition: "center 45%",
          opacity: 0.06, mixBlendMode: "luminosity",
        }}/>
        <div>
          <p style={{
            fontFamily: "var(--hp-font-mono)", fontSize: 13,
            color: "rgba(200,149,42,0.55)", letterSpacing: "0.16em",
            marginBottom: 0, paddingTop: 28, textTransform: "uppercase", textAlign: "center",
          }}>LIVE DATA FROM</p>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(9, 1fr)",
          }} className="lp-sources-grid">
            {["NYC HPD", "NYC DOB", "ACRIS", "MapPLUTO", "311", "DOF", "OATH", "LPC", "ECB"].map((src, i, arr) => (
              <div key={src} style={{
                textAlign: "center",
                padding: "28px 12px",
                borderRight: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.07)" : "none",
              }}>
                <div style={{
                  fontFamily: "var(--hp-font-mono)",
                  fontSize: "clamp(14px, 1.5vw, 20px)",
                  fontWeight: 700, color: "#C8952A",
                  letterSpacing: "-0.01em", lineHeight: 1, marginBottom: 6,
                }}>{src}</div>
                <div style={{
                  fontFamily: "var(--hp-font-sans)", fontSize: 11,
                  color: "rgba(237,228,208,0.35)", letterSpacing: "0.01em",
                }}>agency</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS — simulated search ──────────────────── */}
      <section style={{ background: "#EDE4D0", padding: "96px 52px", position: "relative", overflow: "hidden" }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(assets/bridge.jpeg)",
          backgroundSize: "cover", backgroundPosition: "center 30%",
          opacity: 0.09,
        }}/>
        <div style={{ maxWidth: 760, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 64 }} className="lp-reveal">
            <Label>How it works</Label>
            <h2 style={{
              fontFamily: "var(--hp-font-serif)",
              fontSize: "clamp(30px, 4vw, 52px)", fontWeight: 400,
              letterSpacing: "-0.01em", color: "#2A1F14", lineHeight: 1.05,
            }}>
              One search.<br/>Full record.
            </h2>
          </div>

          {/* Simulated search UI */}
          <div ref={addrRef} style={{
            background: "#FAF5EB", border: "1.5px solid #D4C4A0",
            borderRadius: 14, padding: "32px 32px 28px",
            boxShadow: "0 8px 40px rgba(42,31,20,0.10)",
          }}>
            {/* Step 1: address input */}
            <div style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "16px 20px",
              background: "#fff", border: "1.5px solid #C8952A",
              borderRadius: 10, marginBottom: 24,
            }}>
              <Icon.Search size={16} style={{ color: "#9B7A52", flexShrink: 0 }}/>
              <span style={{
                fontFamily: "var(--hp-font-sans)", fontSize: 16, color: "#2A1F14", flex: 1,
              }}>
                {typedAddr}
                <span style={{
                  display: "inline-block", width: 2, height: 16, background: "#C8952A",
                  marginLeft: 1, verticalAlign: "middle",
                  animation: typedAddr.length >= 23 ? "none" : "lp-blink 0.8s step-start infinite",
                  opacity: typedAddr.length >= 23 ? 0 : 1,
                }}/>
              </span>
            </div>

            {/* Step 2: scanning */}
            <div style={{
              opacity: scanStep >= 1 ? 1 : 0,
              transform: scanStep >= 1 ? "translateY(0)" : "translateY(10px)",
              transition: "opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1)",
            }}>
              <div style={{
                display: "flex", alignItems: "center", gap: 10, marginBottom: 16,
                fontFamily: "var(--hp-font-mono)", fontSize: 11,
                color: "#9B7A52", letterSpacing: "0.1em",
              }}>
                <div style={{
                  width: 8, height: 8, borderRadius: "50%", background: "#C8952A",
                  animation: scanStep === 1 ? "lp-pulse 1s ease infinite" : "none",
                  boxShadow: scanStep === 1 ? "0 0 0 4px rgba(200,149,42,0.2)" : "none",
                }}/>
                {scanStep === 1 ? "SCANNING NYC RECORDS…" : "SCAN COMPLETE"}
              </div>
              {/* Data source scan bars */}
              {["HPD violations", "DOB permits", "311 complaints", "ACRIS ownership"].map((src, i) => (
                <div key={src} style={{
                  display: "flex", alignItems: "center", gap: 12, marginBottom: 8,
                  opacity: scanStep >= 1 ? 1 : 0,
                  transition: `opacity 0.4s ease ${i * 0.15}s`,
                }}>
                  <div style={{ fontFamily: "var(--hp-font-mono)", fontSize: 11, color: "#9B7A52", width: 120 }}>{src}</div>
                  <div style={{ flex: 1, height: 4, background: "#EDE4D0", borderRadius: 2, overflow: "hidden" }}>
                    <div style={{
                      height: "100%", background: "#C8952A", borderRadius: 2,
                      width: scanStep >= 2 ? "100%" : scanStep === 1 ? `${40 + i * 15}%` : "0%",
                      transition: `width ${0.8 + i * 0.2}s cubic-bezier(0.16,1,0.3,1) ${i * 0.1}s`,
                    }}/>
                  </div>
                  <div style={{
                    fontFamily: "var(--hp-font-mono)", fontSize: 11,
                    color: scanStep >= 2 ? "#C8952A" : "#9B7A52",
                    transition: "color 0.3s ease",
                  }}>
                    {scanStep >= 2 ? "✓" : "…"}
                  </div>
                </div>
              ))}
            </div>

            {/* Step 3: result loaded */}
            <div style={{
              marginTop: 20,
              opacity: scanStep >= 2 ? 1 : 0,
              transform: scanStep >= 2 ? "translateY(0)" : "translateY(12px)",
              transition: "opacity 0.6s ease 0.3s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.3s",
            }}>
              <div style={{ height: 1, background: "#D4C4A0", marginBottom: 20 }}/>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                {[
                  { label: "Risk Score", value: "74/100", hi: true },
                  { label: "Violations", value: "14 open" },
                  { label: "Complaints", value: "31 filed" },
                  { label: "Owner", value: "LLC — 2019" },
                ].map(c => (
                  <div key={c.label} style={{
                    padding: "12px 18px", borderRadius: 8,
                    background: c.hi ? "#2A1F14" : "#F0E8D4",
                    border: c.hi ? "none" : "1px solid #D4C4A0",
                    flex: "1 1 auto",
                  }}>
                    <div style={{ fontSize: 11, color: c.hi ? "rgba(200,149,42,0.7)" : "#9B7A52", marginBottom: 4, fontFamily: "var(--hp-font-mono)", letterSpacing: "0.08em" }}>{c.label}</div>
                    <div style={{ fontSize: 16, fontWeight: 800, color: c.hi ? "#C8952A" : "#2A1F14", fontFamily: "var(--hp-font-mono)" }}>{c.value}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── WHO IT'S FOR ─────────────────────────────────────── */}
      <section style={{
        background: "#F0E8D4",
        borderTop: "1px solid #D4C4A0",
        padding: "88px 52px",
        position: "relative", overflow: "hidden",
      }}>
        {/* Times Square energy — diversity of NYC users */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(assets/timesquare.jpeg)",
          backgroundSize: "cover", backgroundPosition: "center 20%",
          opacity: 0.07,
        }}/>
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 56 }} className="lp-reveal">
            <Label>Built for</Label>
            <h2 style={{
              fontFamily: "var(--hp-font-serif)",
              fontSize: "clamp(26px, 3.5vw, 46px)", fontWeight: 400,
              letterSpacing: "-0.01em", color: "#2A1F14",
            }}>For anyone making a decision about a building.</h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }} className="lp-cases-grid lp-reveal lp-reveal-delay-1">
            {[
              {
                img: "assets/icon-renting.png", dark: false,
                label: "Renting",
                desc: "Check what's filed before you move in.",
              },
              {
                img: "assets/icon-buying.png", dark: false,
                label: "Buying",
                desc: "See liens, violations, and filing patterns before closing.",
              },
              {
                img: "assets/icon-broker.png", dark: true,
                label: "Brokers",
                desc: "Run building due diligence in seconds. We don't list without it.",
              },
              {
                img: "assets/icon-checking.png", dark: true,
                label: "Owners",
                desc: "Know what's on record before it becomes a problem.",
              },
            ].map((c) => (
              <div key={c.label} className="lp-case-card" style={{
                padding: "28px 22px 30px",
                background: c.dark ? "#2A1F14" : "#FAF5EB",
                border: c.dark ? "1px solid rgba(200,149,42,0.25)" : "1px solid #D4C4A0",
                borderRadius: 12,
                transition: "border-color 180ms ease, box-shadow 180ms ease",
              }}>
                <div style={{
                  width: 80, height: 80, marginBottom: 18,
                  borderRadius: "50%",
                  overflow: "hidden",
                  background: c.dark ? "#1A120A" : "#F0E8D4",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <img src={c.img} alt={c.label} style={{
                    width: "100%", height: "100%",
                    objectFit: "cover",
                    mixBlendMode: c.dark ? "screen" : "multiply",
                  }}/>
                </div>
                <div style={{
                  fontFamily: "var(--hp-font-serif)",
                  fontSize: 22, fontWeight: 400,
                  color: c.dark ? "#EDE4D0" : "#2A1F14",
                  marginBottom: 10, lineHeight: 1.25,
                }}>{c.label}</div>
                <div style={{ fontSize: 15, color: c.dark ? "rgba(237,228,208,0.52)" : "#7A5C3A", lineHeight: 1.65 }}>{c.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS — one at a time over building ────────── */}
      <section style={{ background: "#2A1F14", padding: "88px 52px", position: "relative", overflow: "hidden" }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(assets/building.jpeg)",
          backgroundSize: "cover", backgroundPosition: "center 30%",
          opacity: 0.12, filter: "blur(2px)",
        }}/>
        <div style={{ maxWidth: 760, margin: "0 auto", position: "relative", zIndex: 1 }}>
          <div style={{ textAlign: "center", marginBottom: 56 }} className="lp-reveal">
            <div style={{ fontFamily: "var(--hp-font-mono)", fontSize: 16, color: "rgba(200,149,42,0.6)", letterSpacing: "0.14em", marginBottom: 0 }}>WHAT NEW YORKERS SAY</div>
          </div>

          {/* Quote display */}
          <div style={{ position: "relative", minHeight: 200, textAlign: "center" }}>
            {TESTIMONIALS.map((q, i) => (
              <div key={i} style={{
                position: i === 0 ? "relative" : "absolute",
                top: 0, left: 0, right: 0,
                opacity: activeTestimonial === i ? 1 : 0,
                transform: activeTestimonial === i ? "translateY(0)" : activeTestimonial > i ? "translateY(-20px)" : "translateY(20px)",
                transition: "opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1)",
                pointerEvents: activeTestimonial === i ? "auto" : "none",
              }}>
                <div style={{
                  fontSize: 72, lineHeight: 0.7, color: "#C8952A", opacity: 0.35,
                  fontFamily: "Georgia, serif", marginBottom: 20,
                }}>"</div>
                <p style={{
                  fontFamily: "var(--hp-font-serif)",
                  fontSize: "clamp(20px, 2.8vw, 32px)", fontWeight: 400, fontStyle: "italic",
                  letterSpacing: "-0.01em", lineHeight: 1.35,
                  color: "#EDE4D0", margin: "0 0 28px",
                }}>{q.text}</p>
                <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: "50%",
                    background: "rgba(200,149,42,0.2)", border: "1px solid rgba(200,149,42,0.5)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 13, fontWeight: 800, color: "#C8952A",
                  }}>{q.attr[0]}</div>
                  <span style={{ fontFamily: "var(--hp-font-sans)", fontSize: 13, color: "rgba(237,228,208,0.6)" }}>{q.attr} · {q.loc}</span>
                </div>
              </div>
            ))}
          </div>

          {/* Dot nav */}
          <div style={{ display: "flex", justifyContent: "center", gap: 10, marginTop: 48 }}>
            {TESTIMONIALS.map((_, i) => (
              <button key={i} onClick={() => setActiveTestimonial(i)} style={{
                all: "unset", cursor: "pointer",
                width: activeTestimonial === i ? 28 : 8, height: 8, borderRadius: 4,
                background: activeTestimonial === i ? "#C8952A" : "rgba(200,149,42,0.3)",
                transition: "width 300ms ease, background 300ms ease",
              }}/>
            ))}
          </div>
        </div>
      </section>

      {/* ── BOTTOM CTA — tension build ─────────────────────── */}
      <section style={{
        position: "relative", overflow: "hidden",
        minHeight: 580,
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center",
        textAlign: "center", padding: "100px 44px",
        background: "#1A120A",
      }}>
        {/* Dark building overlay — creates tension */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(assets/building.jpeg)",
          backgroundSize: "cover", backgroundPosition: "center 30%",
          opacity: 0.18, filter: "grayscale(60%)",
        }}/>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(26,18,10,0.6) 0%, rgba(26,18,10,0.3) 40%, rgba(26,18,10,0.8) 100%)",
        }}/>

        <div style={{ position: "relative", zIndex: 1, maxWidth: 760 }} className="lp-reveal">
          <Label>Available on iPhone</Label>
          <h2 style={{
            fontFamily: "var(--hp-font-serif)",
            fontSize: "clamp(38px, 6.5vw, 80px)", fontWeight: 400, fontStyle: "italic",
            letterSpacing: "-0.015em", color: "#EDE4D0",
            marginBottom: 18, lineHeight: 0.96,
          }}>
            Run the building.<br/>
            <span style={{ color: "#C8952A" }}>Pull the record.</span>
          </h2>
          <p style={{
            fontFamily: "var(--hp-font-sans)",
            fontSize: "clamp(16px, 1.8vw, 19px)", color: "rgba(237,228,208,0.55)",
            marginBottom: 36, lineHeight: 1.55,
          }}>
            Free on the App Store. Search any NYC building from your phone.
          </p>
          {/* Blinking cursor CTA */}
          {/* 3 options: Map Search | QR | App Store */}
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "center", gap: 32, flexWrap: "wrap", marginTop: 48 }}>

            {/* Option 1: Map Search */}
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
              <button onClick={() => go && go("map")} style={{
                display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                gap: 14, width: 160, height: 160,
                background: "rgba(237,228,208,0.06)", border: "1.5px solid rgba(200,149,42,0.35)",
                borderRadius: 14, cursor: "pointer", backdropFilter: "blur(8px)",
                color: "#EDE4D0", fontFamily: "var(--hp-font-sans)", fontSize: 15, fontWeight: 600,
                transition: "background 150ms ease, border-color 150ms ease",
              }}
              onMouseEnter={e => { e.currentTarget.style.background = "rgba(200,149,42,0.12)"; e.currentTarget.style.borderColor = "rgba(200,149,42,0.7)"; }}
              onMouseLeave={e => { e.currentTarget.style.background = "rgba(237,228,208,0.06)"; e.currentTarget.style.borderColor = "rgba(200,149,42,0.35)"; }}>
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#C8952A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
                Map Search
              </button>
              <span style={{ fontFamily: "var(--hp-font-mono)", fontSize: 11, color: "#9B7A52", letterSpacing: "0.08em" }}>BROWSE ON WEB</span>
            </div>

            {/* Option 2: QR code */}
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
              <AppQR size={160}/>
              <span style={{ fontFamily: "var(--hp-font-mono)", fontSize: 11, color: "#9B7A52", letterSpacing: "0.08em" }}>SCAN TO DOWNLOAD</span>
            </div>

            {/* Option 3: App Store */}
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
              <a
                href="https://apps.apple.com/us/app/housingpulse/id6763149818"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                  gap: 14, width: 160, height: 160,
                  background: "rgba(237,228,208,0.06)", border: "1.5px solid rgba(200,149,42,0.35)",
                  borderRadius: 14, textDecoration: "none",
                  transition: "background 150ms ease, border-color 150ms ease",
                }}
                onMouseEnter={e => { e.currentTarget.style.background = "rgba(200,149,42,0.12)"; e.currentTarget.style.borderColor = "rgba(200,149,42,0.7)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "rgba(237,228,208,0.06)"; e.currentTarget.style.borderColor = "rgba(200,149,42,0.35)"; }}>
                <svg width="30" height="30" viewBox="0 0 24 24" fill="#FAF5EB"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
                <div style={{ fontFamily: "var(--hp-font-sans)", color: "#EDE4D0", textAlign: "center" }}>
                  <div style={{ fontSize: 11, fontWeight: 500, opacity: 0.65, letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 4 }}>Download on the</div>
                  <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1 }}>App Store</div>
                </div>
              </a>
              <span style={{ fontFamily: "var(--hp-font-mono)", fontSize: 11, color: "#9B7A52", letterSpacing: "0.08em" }}>iOS 26.2+</span>
            </div>

          </div>
        </div>
      </section>

      {/* ── FOOTER ───────────────────────────────────────────── */}
      <footer style={{
        padding: "36px 52px", background: "#2A1F14",
        display: "flex", flexDirection: "column", alignItems: "center",
        gap: 20, textAlign: "center",
      }} className="lp-footer">
        {/* Single row: logo + nav links + download */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 36, flexWrap: "wrap", width: "100%" }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            fontSize: 20, fontWeight: 800, letterSpacing: "-0.02em", color: "rgba(237,228,208,0.85)",
          }}>
            <Logo size={28}/><span>Housing<span style={{ color: "#C8952A" }}>Pulse</span></span>
          </span>
          <span style={{ color: "rgba(237,228,208,0.15)", fontSize: 18 }}>·</span>
          <span style={{ fontFamily: "var(--hp-font-sans)", fontSize: 14, color: "rgba(237,228,208,0.4)" }}>Public NYC data · Not affiliated with any government agency</span>
          <span style={{ color: "rgba(237,228,208,0.15)", fontSize: 18 }}>·</span>
          {[{label:"Privacy",href:"/privacy.html"},{label:"Terms",href:"/terms.html"}].map(({label,href}) => (
            <a key={label} href={href} style={{
              fontFamily: "var(--hp-font-sans)", fontSize: 14,
              color: "rgba(237,228,208,0.4)", cursor: "pointer", textDecoration: "none",
              transition: "color 150ms",
            }}
            onMouseEnter={e => e.currentTarget.style.color = "rgba(237,228,208,0.75)"}
            onMouseLeave={e => e.currentTarget.style.color = "rgba(237,228,208,0.4)"}>{label}</a>
          ))}
        </div>
        {/* © on its own centered line */}
        <p style={{
          fontFamily: "var(--hp-font-mono)", fontSize: 12,
          color: "rgba(237,228,208,0.2)", margin: 0, letterSpacing: "0.04em",
        }}>
          © 2026 HousingPulse
        </p>
      </footer>

      <style>{`
        @keyframes lp-bob {
          0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
          50% { transform: translateX(-50%) translateY(8px); opacity: 0.3; }
        }
        @keyframes lp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        @keyframes lp-pulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(200,149,42,0.4); }
          50% { box-shadow: 0 0 0 6px rgba(200,149,42,0); }
        }
        @keyframes lp-spin { to { transform: rotate(360deg); } }
        .lp-value-card:hover {
          box-shadow: 0 8px 32px rgba(42,31,20,0.10);
          transform: translateY(-3px);
        }
        .lp-case-card:hover {
          border-color: #C8952A !important;
          box-shadow: 0 4px 20px rgba(200,149,42,0.12);
        }
        /* ── Scroll-reveal ───────────────────────────────────── */
        .lp-reveal {
          opacity: 0;
          transform: translateY(32px);
          transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);
        }
        .lp-reveal.lp-visible { opacity: 1; transform: translateY(0); }
        .lp-reveal-delay-1 { transition-delay: 0.12s; }
        .lp-reveal-delay-2 { transition-delay: 0.24s; }
        /* ── Nav scroll glass ──────────────────────────────────── */
        .lp-nav-header { -webkit-backdrop-filter: blur(20px) saturate(180%); }
        @media (max-width: 960px) {
          .lp-value-grid { grid-template-columns: 1fr !important; }
          .lp-cases-grid { grid-template-columns: 1fr 1fr !important; }
          .lp-quotes-grid { grid-template-columns: 1fr !important; }
          .lp-stats-grid { grid-template-columns: 1fr 1fr !important; }
          .lp-sources-grid { grid-template-columns: repeat(3, 1fr) !important; }
          .lp-nav-links { display: none !important; }
          .lp-nav-header { padding: 20px 28px !important; }
        }
        @media (max-width: 540px) {
          .lp-cases-grid { grid-template-columns: 1fr !important; }
          .lp-footer { padding: 32px 20px !important; }
        }
      `}</style>
    </div>
  );
};

window.Landing = Landing;