// Shared chrome — Nav, Footer, primitives. Used by every page.
const { useState, useEffect, useRef, useMemo } = React;

function Brand({ size = 16 }) {
  return (
    <a href="index.html" className="brand" style={{ fontSize: size }}>
      <span className="brand-mark" />
      <span className="brand-name">Wy<span>Sync</span></span>
    </a>
  );
}

function Nav({ active }) {
  const links = [
    { id: "products", label: "Products", href: "products.html" },
    { id: "pricing", label: "Pricing", href: "pricing.html" },
    { id: "compare", label: "Compare", href: "compare.html" },
    { id: "about", label: "About", href: "about.html" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <Brand />
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id} href={l.href} className={active === l.id ? "active" : ""}>{l.label}</a>
          ))}
        </div>
        <div className="nav-cta">
          <a href="pricing.html" className="btn btn-ghost btn-sm">Sign in</a>
          <a href="pricing.html" className="btn btn-primary btn-sm btn-arrow">Get access</a>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <Brand />
            <p style={{ color: "var(--fg-3)", fontSize: 13, marginTop: 14, maxWidth: 320 }}>
              The cleaned wheel-and-tire catalog the aftermarket should have had ten years ago. Built by operators who actually ship wheels.
            </p>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="products.html">Data subscriptions</a></li>
              <li><a href="products.html#storefronts">Storefront builds</a></li>
              <li><a href="products.html#fitment">Fitment engine</a></li>
              <li><a href="products.html#tracking">Tracking setup</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="compare.html">vs. the alternatives</a></li>
              <li><a href="pricing.html">Pricing</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="mailto:hello@wysync.com">hello@wysync.com</a></li>
              <li><a href="mailto:sales@wysync.com">sales@wysync.com</a></li>
              <li><a href="#">Book a discovery call</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 WySync · A Pound Pixel LLC brand</span>
          <span>sync ok</span>
        </div>
      </div>
    </footer>
  );
}

function Eyebrow({ children, n }) {
  return (
    <div className="eyebrow">
      {n != null && <span style={{ color: "var(--accent)" }}>[{String(n).padStart(2, "0")}]</span>}
      <span>{children}</span>
    </div>
  );
}

function Pill({ children, dot = true }) {
  return (
    <span className="pill">
      {dot && <span className="dot" />}
      {children}
    </span>
  );
}

// shared accent + theme application from tweaks
function applyDesignTokens({ accent, theme }) {
  const root = document.documentElement;
  if (accent) root.style.setProperty("--accent", accent);
  if (theme) root.setAttribute("data-theme", theme);
}

// hero layout + headline copy variants — accepts live data from data.json
function buildHeadlineVariants(data) {
  const brands = data?.counts?.combined?.brands || 573;
  const skus   = data?.counts?.combined?.skus || 285455;
  const skusFmt = skus.toLocaleString();
  return {
    catalog: {
      eyebrow: "The largest cleaned wheel-and-tire catalog in the US",
      h1: ["The catalog you ", <em key="e" style={{ fontStyle: "normal", color: "var(--accent)" }}>shouldn't have to build</em>, " yourself."],
      sub: `${brands}+ brands. ${skusFmt}+ SKUs. Cleaned, normalized, fitment-mapped. Daily-to-realtime MAP and inventory. Plug it into your storefront on day one — skip the 6 to 18 months of scraping.`
    },
    shipped: {
      eyebrow: "Built by people who actually ship wheels",
      h1: ["We did the painful part.", <br key="br" />, "You go ", <em key="e" style={{ fontStyle: "normal", color: "var(--accent)" }}>sell wheels</em>, "."],
      sub: "Every retailer entering this industry burns 6 to 18 months scraping manufacturer sites and chasing MAP changes. We've already done it. Subscribe to the catalog and launch tomorrow."
    },
    speed: {
      eyebrow: "Day-one launch capability",
      h1: ["From signup to live store in", <em key="e" style={{ fontStyle: "normal", color: "var(--accent)" }}> 12-14 days</em>, "."],
      sub: "Cleaned catalog, fitment data, MAP enforcement, and a Shopify theme — productized. Stop stitching. Start shipping."
    },
  };
}

Object.assign(window, {
  Brand, Nav, Footer, Eyebrow, Pill, applyDesignTokens, buildHeadlineVariants
});