// Home page composition
const { useState: useHState, useEffect: useHEffect } = React;

function Home({ tweaks, data }) {
  const variants = buildHeadlineVariants(data);
  const v = variants[tweaks.headline] || variants.catalog;
  const heroLayout = tweaks.heroLayout || "split";
  const density = tweaks.brandDensity || "medium";

  const wallSource = (data?.brand_wall && data.brand_wall.length) ? data.brand_wall : BRANDS;
  const visibleBrands = density === "sparse" ? 24 : density === "dense" ? wallSource.length : 36;

  const totalBrands = data?.counts?.combined?.brands ?? 573;
  const totalSkus   = data?.counts?.combined?.skus ?? 285455;
  const skusFmt     = totalSkus.toLocaleString();

  return (
    <>
      <Nav active="home" />

      {/* HERO */}
      <section className="hero">
        <div className="hero-grid-bg" />
        <div className="container hero-inner">
          {heroLayout === "split" && (
            <div className="hero-split">
              <div className="hero-copy">
                <Pill>API live · {skusFmt}+ SKUs in catalog</Pill>
                <Eyebrow n={1}>{v.eyebrow}</Eyebrow>
                <h1>{v.h1}</h1>
                <p className="lead mt-3">{v.sub}</p>
                <div className="flex flex-gap mt-4 fwrap">
                  <a href="pricing.html" className="btn btn-primary btn-arrow">See pricing</a>
                  <a href="products.html" className="btn btn-arrow">How it works</a>
                </div>
                <div className="hero-stats mt-5">
                  <div className="kpi"><div className="kpi-num">{totalBrands}<span className="unit">+</span></div><div className="kpi-label">Brands cleaned</div></div>
                  <div className="kpi"><div className="kpi-num">{(totalSkus/1000).toFixed(0)}<span className="unit">k</span></div><div className="kpi-label">SKUs in catalog</div></div>
                  <div className="kpi"><div className="kpi-num">12-14<span className="unit">d</span></div><div className="kpi-label">From signup to live</div></div>
                </div>
              </div>
              <div className="hero-visual">
                <CatalogBrowser />
              </div>
            </div>
          )}
          {heroLayout === "centered" && (
            <div className="hero-centered">
              <Pill>API live · {skusFmt}+ SKUs in catalog</Pill>
              <Eyebrow n={1}>{v.eyebrow}</Eyebrow>
              <h1 style={{ textAlign: "center", maxWidth: "16ch", margin: "0 auto" }}>{v.h1}</h1>
              <p className="lead" style={{ margin: "20px auto 0", textAlign: "center" }}>{v.sub}</p>
              <div className="flex flex-gap mt-4 fwrap" style={{ justifyContent: "center" }}>
                <a href="pricing.html" className="btn btn-primary btn-arrow">See pricing</a>
                <a href="products.html" className="btn btn-arrow">How it works</a>
              </div>
              <div className="mt-5"><CatalogBrowser /></div>
            </div>
          )}
          {heroLayout === "fullbleed" && (
            <div className="hero-fullbleed">
              <Eyebrow n={1}>{v.eyebrow}</Eyebrow>
              <h1 className="hero-mega">{v.h1}</h1>
              <div className="hero-fb-grid mt-4">
                <p className="lead">{v.sub}</p>
                <div className="flex flex-gap fwrap items-end">
                  <a href="pricing.html" className="btn btn-primary btn-arrow">See pricing</a>
                  <a href="products.html" className="btn btn-arrow">How it works</a>
                </div>
              </div>
              <div className="mt-5"><CatalogBrowser /></div>
            </div>
          )}
        </div>
      </section>

      {/* BRAND WALL */}
      <section className="section-tight">
        <div className="container">
          <div className="flex justify-between items-end fwrap" style={{ marginBottom: 32, gap: 16 }}>
            <div>
              <Eyebrow n={2}>Brand coverage</Eyebrow>
              <h2 style={{ maxWidth: "20ch" }}>Every brand a serious wheel-and-tire shop carries.</h2>
            </div>
            <div className="mono" style={{ color: "var(--fg-3)", maxWidth: 320, textAlign: "right" }}>
              Sample of {Math.min(visibleBrands, wallSource.length)} of {totalBrands}+ supported. Pick the ones you want; we deliver clean specs, MAP, and inventory.
            </div>
          </div>
          <div className="brand-wall">
            {wallSource.slice(0, visibleBrands).map((b, i) => (
              <div key={i} className="brand-cell">{b}</div>
            ))}
          </div>
        </div>
      </section>

      {/* PROBLEM / SOLUTION */}
      <section className="section">
        <div className="container">
          <div className="row row-2" style={{ gap: 80 }}>
            <div>
              <Eyebrow n={3}>The painful part</Eyebrow>
              <h2>Six to eighteen months of work, before you sell a single wheel.</h2>
            </div>
            <div className="problem-list">
              {[
                { k: "Scraping 30+ manufacturer sites", v: "Each one different. Each one breaks weekly." },
                { k: "Normalizing inconsistent specs", v: "Bolt patterns, offsets, finishes — every brand uses its own grammar." },
                { k: "Chasing MAP changes", v: "Get this wrong and a brand pulls your account." },
                { k: "Stitching fitment data", v: "YMMS to bolt-pattern lookups across 30,000+ SKUs." },
                { k: "Opening manufacturer accounts", v: "Cold emails to people who don't know you exist yet." },
              ].map((it, i) => (
                <div key={i} className="problem-row">
                  <div className="mono" style={{ color: "var(--accent)", minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</div>
                  <div>
                    <div style={{ fontWeight: 600 }}>{it.k}</div>
                    <div style={{ color: "var(--fg-2)", fontSize: 14, marginTop: 4 }}>{it.v}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="solution-bar mt-5 mono">
            <span>WE DID THIS PART.</span>
            <span style={{ color: "var(--accent)" }}>→ subscribe and skip to the part where you sell wheels.</span>
          </div>
        </div>
      </section>

      {/* REFRESH VIZ */}
      <section className="section">
        <div className="container">
          <div className="row row-2" style={{ gap: 64, marginBottom: 40 }}>
            <div>
              <Eyebrow n={4}>Sync cadence</Eyebrow>
              <h2 style={{ maxWidth: "16ch" }}>Daily. Hourly. Realtime. Pick your speed.</h2>
            </div>
            <div>
              <p className="lead">
                MAP and inventory drift kills margin. Our pipeline pushes the catalog at the cadence your tier guarantees — no batched overnight CSV nonsense, no stale rows.
              </p>
            </div>
          </div>
          <RefreshViz />
        </div>
      </section>

      {/* FITMENT WIDGET */}
      <section className="section">
        <div className="container">
          <div className="row row-2" style={{ gap: 64, marginBottom: 32 }}>
            <div>
              <Eyebrow n={5}>Live demo · Fitment Engine</Eyebrow>
              <h2>The widget your shoppers will use to find wheels that fit.</h2>
            </div>
            <p className="lead">
              Drop it on your homepage and product pages. YMMS in, fitting wheels out. Brand-matched colors, copy, and routing. We deploy and maintain — you don't touch code.
            </p>
          </div>
          <div className="fake-browser">
            <div className="fake-browser-bar">
              <div className="fake-dots"><i /><i /><i /></div>
              <div className="fake-url">your-shop.com/wheels</div>
              <div style={{ minWidth: 50 }} />
            </div>
            <div style={{ padding: 28, background: "var(--bg)" }}>
              <YmmsWidget embedded />
            </div>
          </div>
          <div className="mt-3 mono" style={{ color: "var(--fg-3)" }}>
            * Sample data. Real deployments use your fitment data (DriveRightData / Fitment Group recommended) and our {skusFmt}+ SKU catalog.
          </div>
        </div>
      </section>

      {/* PRODUCT QUICK GRID */}
      <section className="section">
        <div className="container">
          <Eyebrow n={6}>Four products. They stand alone.</Eyebrow>
          <h2 style={{ maxWidth: "20ch" }}>Pick what you need. Bundle for 20% off the data sub.</h2>
          <div className="row row-4 mt-4">
            {[
              { tag: "DATA", name: "Data Subscriptions", price: "$499 – $5,000/mo", desc: `Cleaned catalog, daily-to-realtime MAP and inventory across 30 to ${totalBrands}+ brands.` },
              { tag: "BUILD", name: "Storefront Builds", price: "$5,000 – $7,500 flat", desc: "Custom Shopify themes, pre-loaded with our catalog and fitment engine." },
              { tag: "FIT", name: "Fitment Engine", price: "$500/mo or $5,000/yr", desc: "Managed YMMS widget that routes shoppers into the right collection." },
              { tag: "TRACK", name: "Tracking Setup", price: "$300 once", desc: "Multi-platform conversion tracking — Google, GA4, Meta, TikTok, and 4 more." },
            ].map((p, i) => (
              <a href="products.html" key={i} className="prod-card">
                <div className="mono" style={{ color: "var(--accent)" }}>{p.tag}</div>
                <h3 style={{ marginTop: 14 }}>{p.name}</h3>
                <div className="mono" style={{ color: "var(--fg-3)", marginTop: 8 }}>{p.price}</div>
                <p style={{ color: "var(--fg-2)", marginTop: 14, fontSize: 14 }}>{p.desc}</p>
                <div className="mono prod-link">Read more →</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* COMPARE TEASER */}
      <section className="section">
        <div className="container">
          <Eyebrow n={7}>Where we sit</Eyebrow>
          <h2 style={{ maxWidth: "22ch" }}>
            Between legacy data co-ops (slow, expensive, gated) and DIY scraping (slow, painful).
          </h2>
          <div className="mt-4">
            <CompareTable />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="container">
          <div className="cta-block">
            <Eyebrow n={8}>Ready to stop scraping?</Eyebrow>
            <h2 style={{ maxWidth: "20ch" }}>Subscribe today. Live store in 12-14 days.</h2>
            <div className="flex flex-gap mt-4 fwrap">
              <a href="pricing.html" className="btn btn-primary btn-arrow">See pricing</a>
              <a href="#" className="btn btn-arrow">Book a 20-min call</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

window.Home = Home;