// Products, Pricing, Compare, About pages

function PageHead({ n, eyebrow, title, sub }) {
  return (
    <section className="page-head">
      <div className="container">
        <Eyebrow n={n}>{eyebrow}</Eyebrow>
        <h1 style={{ fontSize: "clamp(40px, 5.4vw, 72px)" }}>{title}</h1>
        {sub && <p className="lead mt-3">{sub}</p>}
      </div>
    </section>
  );
}

// ─────────────────────────── PRODUCTS ───────────────────────────
function Products({ data }) {
  return (
    <>
      <Nav active="products" />
      <PageHead
        n={1}
        eyebrow="Products"
        title={["Four products. ", <em key="e" style={{ fontStyle: "normal", color: "var(--accent)" }}>They stand alone.</em>]}
        sub="They also work together — bundle any storefront build with any data subscription and the data sub gets 20% off for the lifetime of the contract."
      />

      {/* DATA */}
      <section className="product-section" id="data">
        <div className="container">
          <div className="product-detail">
            <div>
              <Eyebrow n={2}>The main thing</Eyebrow>
              <h2>Data Subscriptions</h2>
              <p className="mono mt-2" style={{ color: "var(--accent)" }}>$499 – $5,000 / month</p>
              <p style={{ color: "var(--fg-2)", marginTop: 16, fontSize: 15 }}>
                Cleaned, normalized, fitment-mapped catalog data with daily-to-realtime MAP and inventory updates across 30 to {data?.counts?.combined?.brands ?? 573}+ brands. This is what we are. Everything else exists to make this useful.
              </p>
              <ul className="feature-list mt-3">
                <li>30 to {data?.counts?.combined?.brands ?? 573}+ brands — pick what you carry, we deliver clean specs.</li>
                <li>MAP refresh from daily to realtime — never accidentally undercut.</li>
                <li>Inventory feed (Growth and up) — daily to realtime quantity sync.</li>
                <li>Supplier contacts — open accounts on demand, when you make your first sale.</li>
                <li>Storefront integration in every tier — we plug it in for you.</li>
                <li>Read-only API access on Pro and Enterprise — scope per customer.</li>
                <li>Lifestyle imagery on Pro and Enterprise.</li>
                <li>Realtime catalog and priority requests on Enterprise.</li>
              </ul>
              <a href="pricing.html" className="btn btn-primary btn-arrow mt-4" style={{ alignSelf: "flex-start" }}>See all four tiers</a>
            </div>
            <div>
              <RefreshViz />
            </div>
          </div>
        </div>
      </section>

      {/* STOREFRONTS */}
      <section className="product-section" id="storefronts">
        <div className="container">
          <div className="product-detail">
            <div>
              <Eyebrow n={3}>For new entrants</Eyebrow>
              <h2>Storefront Builds</h2>
              <p className="mono mt-2" style={{ color: "var(--accent)" }}>$5,000 – $7,500 flat · Enterprise contact us</p>
              <p style={{ color: "var(--fg-2)", marginTop: 16, fontSize: 15 }}>
                Productized data delivery, not generic agency work. Custom Shopify themes that ship pre-loaded with our catalog and fitment engine. Three tiers: Starter, Pro, and Shopify Plus Enterprise.
              </p>

              <div className="row row-3 mt-4" style={{ gap: 16 }}>
                {[
                  { name: "Starter", price: "$5,000 flat", items: ["Custom Shopify theme", "Homepage", "3 product templates", "Cart, checkout, blog", "Mobile responsive"] },
                  { name: "Pro", price: "$7,500 flat", items: ["Up to 5 product templates", "Custom configurator", "Fitment Engine integrated", "Custom CRM tool", "Tracking Setup included"], pop: true },
                  { name: "Enterprise", price: "Contact us", items: ["Shopify Plus B2B", "Dealer-wholesaler portal", "Tier pricing for accounts", "Multi-storefront", "Scoped per quote"] },
                ].map((t, i) => (
                  <div key={i} className={`card ${t.pop ? "popular" : ""}`} style={t.pop ? { outline: "2px solid var(--accent)", outlineOffset: -2 } : {}}>
                    <div className="mono" style={{ color: "var(--fg-3)" }}>{t.name}</div>
                    <div style={{ fontSize: 18, fontWeight: 600, marginTop: 8 }}>{t.price}</div>
                    <ul className="feature-list mt-3" style={{ fontSize: 13 }}>
                      {t.items.map((x, j) => <li key={j}>{x}</li>)}
                    </ul>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="placeholder" style={{ aspectRatio: "4 / 3" }}>
                <span>STOREFRONT / SHOPIFY THEME</span>
              </div>
              <div className="mono mt-3" style={{ color: "var(--fg-3)" }}>
                Bundle any build with any data subscription = 20% off the data sub for the contract lifetime.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FITMENT */}
      <section className="product-section" id="fitment">
        <div className="container">
          <div className="product-detail">
            <div>
              <Eyebrow n={4}>The shopper-facing piece</Eyebrow>
              <h2>Fitment Engine</h2>
              <p className="mono mt-2" style={{ color: "var(--accent)" }}>$500/mo · or $5,000/yr (≈$417/mo, 17% off)</p>
              <p style={{ color: "var(--fg-2)", marginTop: 16, fontSize: 15 }}>
                A fully managed YMMS widget that tells shoppers which wheels and tires fit their vehicle and routes them into the right collection. Shopify at launch; WooCommerce, BigCommerce, and custom platforms in development.
              </p>
              <ul className="feature-list mt-3">
                <li>Brand-matched colors, fonts, layout, and copy.</li>
                <li>Homepage YMMS capture → routes into filtered collection.</li>
                <li>Product-page "will this fit?" widget on every wheel and tire.</li>
                <li>Fully managed — we deploy, we maintain, we update. You don't touch code.</li>
                <li>Independent of the data subscription — works with our catalog or yours.</li>
              </ul>
              <p className="mt-3 mono" style={{ color: "var(--fg-3)" }}>
                NOTE: actual fitment data is your responsibility, or buy through us. We recommend DriveRightData or Fitment Group.
              </p>
            </div>
            <div>
              <YmmsWidget embedded />
            </div>
          </div>
        </div>
      </section>

      {/* TRACKING */}
      <section className="product-section" id="tracking">
        <div className="container">
          <div className="product-detail">
            <div>
              <Eyebrow n={5}>The boring necessary one</Eyebrow>
              <h2>Tracking Setup</h2>
              <p className="mono mt-2" style={{ color: "var(--accent)" }}>$300 one-time · free with Pro Storefront</p>
              <p style={{ color: "var(--fg-2)", marginTop: 16, fontSize: 15 }}>
                Full multi-platform conversion tracking. Done right, once, so you can actually trust your ad spend numbers.
              </p>
              <div className="track-grid mt-4">
                {["Google Ads", "GA4", "Meta", "TikTok", "Snapchat", "Pinterest", "Reddit", "X"].map((p, i) => (
                  <div key={i} className="track-cell">{p}</div>
                ))}
              </div>
            </div>
            <div>
              <div className="placeholder" style={{ aspectRatio: "16 / 10" }}>
                <span>DASHBOARD / CONVERSION FUNNEL</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

// ─────────────────────────── PRICING ───────────────────────────
function Pricing({ tweaks, data }) {
  return (
    <>
      <Nav active="pricing" />
      <PageHead
        n={1}
        eyebrow="Pricing"
        title={["Four data tiers. ", <em key="e" style={{ fontStyle: "normal", color: "var(--accent)" }}>One business model.</em>]}
        sub="Subscribe to clean catalog data. Optionally bundle a storefront build, the fitment widget, or tracking. Bundling earns you 20% off the data sub for the lifetime of the contract."
      />

      <section className="section">
        <div className="container">
          <PricingGrid display={tweaks.priceDisplay || "both"} />
          <div className="mono mt-3" style={{ color: "var(--fg-3)", textAlign: "center" }}>
            All tiers are 12-month commitments. Annual prepay = ~8% off (one month free). Auto-renews on the same plan unless you give 30-day notice. Upgrade anytime; downgrades wait for renewal.
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="row row-2" style={{ gap: 64, marginBottom: 32 }}>
            <div>
              <Eyebrow n={2}>How many brands</Eyebrow>
              <h2>Slide it. We'll show you the tier.</h2>
            </div>
            <p className="lead">
              Most retailers carry between 30 and 250 brands. Pick the count you actually need — Starter for 30, Growth for 75, Pro for 250, Enterprise for the whole catalog.
            </p>
          </div>
          <BrandSlider />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="row row-2" style={{ gap: 64, marginBottom: 32 }}>
            <div>
              <Eyebrow n={3}>Bundle calculator</Eyebrow>
              <h2>What's it cost altogether?</h2>
            </div>
            <p className="lead">
              Toggle products to see year-1 cost. Bundling any storefront with any data sub triggers the 20% lifetime discount on the recurring data sub.
            </p>
          </div>
          <BundleCalc />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Eyebrow n={4}>Frequently and bluntly asked</Eyebrow>
          <h2>Questions we keep getting.</h2>
          <div className="faq mt-4">
            {[
              ["Why a 12-month commit?",
                "Because cleaned data has a fixed cost to keep clean. Month-to-month customers churn before the catalog stabilizes for them. We'd rather price for retailers who plan to actually run a business."],
              ["What happens if I cancel mid-term?",
                "Remaining months bill as early termination. We do not litigate this — we'd rather let you go. But the contract is the contract."],
              ["Can I upgrade tiers mid-contract?",
                "Yes, anytime. Downgrades wait until renewal so we don't gut your catalog mid-quarter."],
              ["Do you handle manufacturer relationships?",
                "No. You manage your manufacturer accounts. We hand you the supplier contacts and the catalog blueprint so you can open accounts when you make your first sale."],
              ["Where does fitment data come from?",
                "Our catalog has wheel/tire specs and bolt patterns. Vehicle fitment data (which wheel fits which truck) is your responsibility — we recommend DriveRightData or Fitment Group, or we can quote you a buy-through."],
              ["Is this just for new entrants?",
                "No. Starter and Growth are sized for new entrants. Pro and Enterprise are for retailers doing seven and eight figures who want to stop running their own data team."],
            ].map(([q, a], i) => (
              <details key={i} className="faq-item">
                <summary>
                  <span className="mono" style={{ color: "var(--accent)", marginRight: 12 }}>Q.{String(i + 1).padStart(2, "0")}</span>
                  {q}
                </summary>
                <p>{a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

// ─────────────────────────── COMPARE ───────────────────────────
function Compare() {
  return (
    <>
      <Nav active="compare" />
      <PageHead
        n={1}
        eyebrow="Comparison · honest"
        title={["Where we sit, ", <em key="e" style={{ fontStyle: "normal", color: "var(--accent)" }}>against the alternatives.</em>]}
        sub="The wheel-and-tire data world breaks into three buckets: legacy data co-ops (mature, expensive, manufacturer-approval-gated), OEM-gated parts platforms (legacy enterprise contracts), and DIY scraping (engineering salary or 6-18 months of founder time). We sit beside all three. The information below is based on publicly available pricing and product positioning; if anything is incorrect, email hello@wysync.com and we'll fix it."
      />

      <section className="section">
        <div className="container">
          <CompareTable />
          <div className="compare-callout mt-4">
            <div className="mono" style={{ color: "var(--accent)" }}>TL;DR</div>
            <div>
              Legacy data co-ops and OEM-gated parts platforms are mature options aimed at the parts ecosystem broadly — their pricing reflects scale, and access to many brands is gated on manufacturer approval. Both are viable for established retailers with budget and patience. <strong>WySync is for the operator who wants to launch in 12-14 days at SMB pricing without asking 40 brands for permission first</strong>, on the understanding that they'll open their own manufacturer accounts when they make their first sale.
            </div>
            <div className="mono" style={{ color: "var(--fg-3)", textAlign: "right" }}>v.04.30.26</div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Eyebrow n={2}>The tradeoffs</Eyebrow>
          <h2>What you give up choosing us — and what you get back.</h2>
          <div className="row row-2 mt-4" style={{ gap: 32 }}>
            <div className="card-hairline">
              <div className="mono" style={{ color: "var(--fg-3)" }}>WHAT YOU GIVE UP</div>
              <ul className="feature-list mt-3" style={{ "--accent": "var(--bad)" }}>
                <li>Manufacturer-approved catalog access — you open your own accounts as you grow.</li>
                <li>An exhaustive parts taxonomy — we are wheels and tires only, on purpose.</li>
                <li>Multi-vertical support — we don't do auto body, suspension, lighting.</li>
                <li>White-glove enterprise sales motion at SMB tiers — Starter and Growth are self-serve.</li>
              </ul>
            </div>
            <div className="card-hairline" style={{ borderColor: "var(--accent)" }}>
              <div className="mono" style={{ color: "var(--accent)" }}>WHAT YOU GET</div>
              <ul className="feature-list mt-3">
                <li>Days-not-months time-to-launch.</li>
                <li>SMB-friendly pricing that doesn't grow per-brand or per-feature.</li>
                <li>Modern API delivery — JSON, scoped tokens, daily-to-realtime.</li>
                <li>The cleanest wheel-and-tire-specific catalog in the US.</li>
                <li>A platform built and run by people who actually ship wheels.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

// ─────────────────────────── ABOUT ───────────────────────────
function About({ data }) {
  const totalBrands = data?.counts?.combined?.brands ?? 573;
  const totalSkus   = data?.counts?.combined?.skus ?? 285455;
  return (
    <>
      <Nav active="about" />
      <PageHead
        n={1}
        eyebrow="About"
        title={["We ship wheels for a living. ", <em key="e" style={{ fontStyle: "normal", color: "var(--accent)" }}>That's not a tagline.</em>]}
        sub="WySync was built inside a wheel-and-tire retailer. Every painful step in our founders' first 18 months — scraping manufacturer sites, normalizing specs, chasing MAP, opening supplier accounts, integrating fitment — we did the hard way. Then we productized the result."
      />

      <section className="section">
        <div className="container">
          <div className="about-stats">
            <div className="about-stat">
              <div className="kpi-num">{totalBrands}<span className="unit">+</span></div>
              <div className="kpi-label mt-2">Brands cleaned</div>
            </div>
            <div className="about-stat">
              <div className="kpi-num">{(totalSkus/1000).toFixed(0)}<span className="unit">k</span></div>
              <div className="kpi-label mt-2">SKUs in catalog</div>
            </div>
            <div className="about-stat">
              <div className="kpi-num">18<span className="unit">mo</span></div>
              <div className="kpi-label mt-2">We burned, so you don't</div>
            </div>
            <div className="about-stat">
              <div className="kpi-num">12-14<span className="unit">d</span></div>
              <div className="kpi-label mt-2">From signup to live</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="row row-2" style={{ gap: 64 }}>
            <div>
              <Eyebrow n={2}>The story</Eyebrow>
              <h2 style={{ maxWidth: "16ch" }}>Built backwards from the loading dock.</h2>
            </div>
            <div className="timeline">
              {[
                { date: "2019", title: "We opened our first wheel shop.", body: "Drop-shipped from 12 brands. Spent every Saturday morning scraping pricing sheets." },
                { date: "2021", title: "Built our first internal catalog tool.", body: "Three brands at a time, cleaned by hand, fitment mapped against DriveRightData. Saturday mornings became Friday afternoons." },
                { date: "2023", title: "Other retailers started asking to buy access.", body: "We said yes to the first six. Charged a flat $400/mo. Realized we had a product." },
                { date: "2024", title: "Spun WySync out as a separate company.", body: "Hired engineers. Rewrote the pipeline. Got our first paying retailers (3-5) without a salesperson." },
                { date: "2026", title: `${totalBrands}+ brands cleaned. ${(totalSkus/1000).toFixed(0)}k+ SKUs live.`, body: "Four products. Same operators. Still ship wheels every day." },
              ].map((t, i) => (
                <div key={i} className="tl-item">
                  <div className="tl-date">{t.date}</div>
                  <div className="tl-title">{t.title}</div>
                  <div style={{ color: "var(--fg-2)", fontSize: 14 }}>{t.body}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Eyebrow n={3}>Operating principles</Eyebrow>
          <h2 style={{ maxWidth: "20ch" }}>Things we believe, written down so customers can hold us to them.</h2>
          <div className="row row-3 mt-4">
            {[
              { n: "01", t: "Catalog is the product.", b: "Storefronts, fitment, tracking — all exist to make the catalog usable. We will never ship a product that doesn't make the catalog more useful." },
              { n: "02", t: "We don't gate on brand approval.", b: "You manage your manufacturer accounts. We hand you the blueprint and supplier contacts. This means we'll never tell you a brand is 'unavailable for your tier.'" },
              { n: "03", t: "Pricing is on the website.", b: "$499 to $5,000. No per-brand fees. No per-feature unlocks. No 'contact sales' for SMB tiers." },
              { n: "04", t: "API-first or it doesn't ship.", b: "Every feature has a documented endpoint. If our own UI uses it, you can use it." },
              { n: "05", t: "Built by retailers, run by retailers.", b: "Half the company has worked a wheel shop floor. Founders still ship. We test every product on our own store first." },
              { n: "06", t: "When we screw up, we fix it for free.", b: "No data correction fees. No 'priority support tier.' If our catalog is wrong, that's our problem to fix." },
            ].map(p => (
              <div key={p.n} className="card-hairline">
                <div className="mono" style={{ color: "var(--accent)" }}>{p.n}</div>
                <h3 className="mt-2" style={{ fontSize: 19 }}>{p.t}</h3>
                <p style={{ color: "var(--fg-2)", marginTop: 10, fontSize: 14 }}>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

Object.assign(window, { Products, Pricing, Compare, About });