// Nav.jsx — sticky translucent top nav + slim "connects to" trust strip
const navLinks = [
  { label: "Our Work", href: "#showcase" },
  { label: "Services", href: "#workers" },
  { label: "How it works", href: "#how" },
  { label: "Testimonials", href: "#proof" },
  { label: "Pricing", href: "#review" },
];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [onLight, setOnLight] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      const lights = document.querySelectorAll(".section--light");
      let light = false;
      lights.forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top <= 37 && r.bottom >= 37) light = true;
      });
      setOnLight(light);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const linkColor = onLight ? "#3A3A42" : "var(--fg2)";
  const linkHover = onLight ? "#0E0E10" : "var(--fg1)";
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      transition: "background .3s, border-color .3s, backdrop-filter .3s",
      background: onLight ? "rgba(245,245,247,0.82)" : (scrolled ? "rgba(14,14,16,0.74)" : "transparent"),
      backdropFilter: (scrolled || onLight) ? "blur(16px)" : "none",
      WebkitBackdropFilter: (scrolled || onLight) ? "blur(16px)" : "none",
      borderBottom: `1px solid ${onLight ? "rgba(0,0,0,0.08)" : (scrolled ? "var(--border-subtle)" : "transparent")}`,
    }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 74 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
          <span className="nav-load-logo" style={{ display: "inline-flex" }}><Logo height={24} dark={onLight} /></span>
          <span className="nav-byline" style={{ fontFamily: "var(--font-ui)", fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: onLight ? "rgba(0,0,0,0.42)" : "var(--fg3)", paddingLeft: 12, borderLeft: `1px solid ${onLight ? "rgba(0,0,0,0.14)" : "var(--border-default)"}`, transition: "color .3s, border-color .3s" }}>
            by Taurist
          </span>
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 34 }} className="nav-links">
          {navLinks.map((l, i) => (
            <a key={l.label} href={l.href} className="nav-load-link" style={{
              fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 500,
              color: linkColor, textDecoration: "none", transition: "color .15s",
              animationDelay: `${(0.46 + i * 0.05).toFixed(2)}s`,
            }}
              onMouseEnter={(e) => (e.currentTarget.style.color = linkHover)}
              onMouseLeave={(e) => (e.currentTarget.style.color = linkColor)}
            >{l.label}</a>
          ))}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }} className="nav-cta-group">
          <a href="#cta" className="btn btn-primary btn-sm nav-load-cta nav-primary-cta" style={{ animationDelay: ".58s" }}>Request a prototype</a>
        </div>
      </div>
    </nav>
  );
}

// client logo wall — single scrolling row of brands we've built for
function TrustStrip() {
  // lg = larger emphasis. order curated so wide wordmarks and emphasis logos distribute evenly.
  const clients = [
    { s: "sunrun", a: "Sunrun", lg: true },
    { s: "francines", a: "Francine's Travel" },
    { s: "perspective", a: "Perspective", lg: true },
    { s: "hihealth", a: "hi-health" },
    { s: "doubleai", a: "doubleAI", lg: true },
    { s: "crew", a: "Crew Supply Co." },
    { s: "phasev", a: "Phase V", lg: true },
    { s: "carny", a: "Carny" },
    { s: "moonshot", a: "Moonshot AI", lg: true },
    { s: "zenzap", a: "Zenzap" },
    { s: "vimi", a: "Vimi", lg: true },
    { s: "allrify", a: "Allrify" },
    { s: "violaventures", a: "Viola Ventures", lg: true },
    { s: "conquer", a: "Conquer" },
    { s: "lwf", a: "LWF", lg: true },
    { s: "airtop", a: "airtop" },
    { s: "ezraider", a: "EZ Raider", lg: true },
    { s: "bilecki", a: "Bilecki Law Group" },
    { s: "scorebuddy", a: "ScoreBuddy" },
    { s: "aspenmotor", a: "Aspen Motor Company" },
    { s: "bragabrothers", a: "Braga Brothers" },
    { s: "emerix", a: "Emerix" },
    { s: "enso", a: "Enso" },
    { s: "hastings", a: "Hastings Bath Collection" },
    { s: "bluegrid", a: "BlueGrid" },
    { s: "impala", a: "Impala" },
    { s: "visionon", a: "VisionOn" },
    { s: "scout", a: "Scout" },
    { s: "powerchord", a: "PowerChord" },
    { s: "tonic", a: "Tonic" },
  ];
  const metrics = [
    { to: 7,   suffix: " years", label: "Website and conversion experience", short: "Conversion experience" },
    { to: 127, suffix: "+",      label: "Websites and pages launched",       short: "Pages launched" },
    { to: 24,  suffix: " hours", label: "Homepage prototype before we meet",    short: "Prototype before we meet" },
    { to: 5,   suffix: "-star",  label: "Reviewed by satisfied clients",      short: "Reviewed by clients" },
  ];
  // 3 vertical columns scrolling (alt. direction): the MIDDLE column holds the 9
  // emphasis logos in full colour (dark-mode tuned); the side columns are white silhouettes.
  const emphasis = clients.filter((c) => c.lg);
  const others = clients.filter((c) => !c.lg);
  const columns = [
    { items: others.slice(0, 11), color: false, dir: "ttv-down", dur: 36 },
    { items: emphasis,            color: true,  dir: "ttv-up",   dur: 30 },
    { items: others.slice(11),    color: false, dir: "ttv-down", dur: 40 },
  ];
  const ref = useReveal();
  return (
    <div className="tools-band">
      <div ref={ref} className="reveal wrap proof-banner">
        {/* left — copy + single-line metrics */}
        <div className="proof-banner__left">
          <p className="proof-banner__text">Built on real website and conversion experience.</p>
          <div className="bn-metrics">
            {metrics.map((m, i) => (
              <div className="bn-metric" key={i}>
                <div className="bn-metric__num"><CountUp to={m.to} /><span className="bn-metric__suffix">{m.suffix}</span></div>
                <div className="bn-metric__label"><span className="lbl-full">{m.label}</span><span className="lbl-short">{m.short}</span></div>
              </div>
            ))}
          </div>
        </div>
        {/* right — 3 vertical logo columns */}
        <div className="proof-cols" aria-hidden="true">
          {columns.map((col, ci) => {
            const loop = [...col.items, ...col.items];
            return (
              <div className="proof-col" key={ci}>
                <div className={"proof-col-track " + col.dir} style={{ animationDuration: `${col.dur}s` }}>
                  {loop.map((c, k) => (
                    <div className={"proof-tile" + (col.color ? " proof-tile--color" : "")} key={k}>
                      <img src={assetUrl(`assets/clients${col.color ? "-dark" : ""}/${c.s}.png`)} alt={c.a} loading="lazy" />
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// counts 0 → `to` once it scrolls into view
function CountUp({ to, dur = 1500 }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  const done = useRef(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setN(to); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !done.current) {
          done.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / dur);
            const eased = 1 - Math.pow(1 - t, 3);
            setN(Math.round(eased * to));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, dur]);
  return <span ref={ref}>{n}</span>;
}

Object.assign(window, { Nav, TrustStrip, CountUp });