/* ===========================================================
   Home page
   =========================================================== */
function HomeSearch() {
  const [q, setQ] = useState("");
  const { navigate } = useRouter();
  const submit = (e) => { e.preventDefault(); navigate("/search?q=" + encodeURIComponent(q.trim() || "108391")); };
  return React.createElement("form", { className: "hero-search", onSubmit: submit },
    React.createElement("div", { className: "bigsearch" },
      React.createElement("input", { value: q, onChange: e => setQ(e.target.value), placeholder: "Enter a part #, e.g. 108391-25 or 4707Q", "aria-label": "Search by part number" }),
      React.createElement("button", { type: "submit" }, React.createElement(Icon, { name: "search", size: 18 }), "Search")
    ),
    React.createElement("div", { className: "bigsearch-hint" },
      "Search by ", React.createElement("b", null, "D&W SKU"), ", ", React.createElement("b", null, "OEM"), ", or ", React.createElement("b", null, "competitor / interchange"), " number.")
  );
}

/* shared hero content blocks */
function HeroSince(props) {
  const { t } = useT();
  return React.createElement("div", { className: "hero-since" }, React.createElement("span", { className: "rule" }), t.heroEyebrow || "Baltimore, MD · Since 1980");
}
function HeroCtas() {
  return React.createElement("div", { className: "hero-cta" },
    React.createElement(Link, { to: "/c/heavy-duty-clutches", className: "btn btn-primary btn-lg" }, React.createElement(Icon, { name: "wrench", size: 18 }), "Browse catalog"),
    React.createElement(Link, { to: "/quote", className: "btn btn-ink btn-lg" }, React.createElement(Icon, { name: "quote", size: 18 }), "Build a quote"));
}
const HERO_HEADLINE = ["Shift to ", "quality.", "Heavy-duty parts, done right."];
const HERO_LEAD = "Clutches, brakes, flywheels and kingpins — manufactured, remanufactured and relined for the trucking industry. Now searchable by any part number you've got.";

/* Clean light hero with full-bleed truck photo (handed to Claude Code) */
function Hero() {
  return React.createElement("section", { className: "hero hero-light" },
    React.createElement("img", { src: "assets/hero.png", alt: "Heavy-duty Class-8 truck on the highway", className: "hero-photo", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }),
    React.createElement("div", { className: "hero-scrim" }),
    React.createElement("div", { className: "wrap hero-light-inner" },
      React.createElement("div", { className: "hero-col" },
        React.createElement(HeroSince, null),
        React.createElement("h1", null, HERO_HEADLINE[0], React.createElement("span", { className: "accent" }, HERO_HEADLINE[1]), React.createElement("br", null), HERO_HEADLINE[2]),
        React.createElement("p", { className: "hero-lead" }, HERO_LEAD),
        React.createElement(HomeSearch, null),
        React.createElement(HeroCtas, null)
      )
    )
  );
}

function TrustStrip() {
  const { t } = useT();
  const [open, setOpen] = usePersist("dwt_trust_open", true);
  if (t.showTrustBar === false) return null;
  const items = [
    { icon: "phone", a: "410-235-8829", b: "Mon–Fri 8–5 ET" },
    { icon: "pin", a: "2601 Sisson St", b: "Baltimore, MD 21211" },
    { icon: "spark", a: "OEM + Reman", b: "core bank & exchange" },
    { icon: "truck", a: "Freight-prepaid", b: "on qualifying orders" },
  ];
  return React.createElement("div", { className: "trust" + (open ? " open" : " collapsed") },
    React.createElement("div", { className: "wrap trust-bar" },
      React.createElement("div", { className: "trust-summary" },
        React.createElement(Icon, { name: "phone", size: 16 }),
        React.createElement("span", null, "Contact, hours & store info")),
      React.createElement("div", { className: "trust-items", id: "trust-items", "aria-hidden": !open },
        items.map((it, i) => React.createElement(React.Fragment, { key: i },
          i > 0 ? React.createElement("span", { className: "trust-sep hide-on-mobile" }) : null,
          React.createElement("div", { className: "trust-item" },
            React.createElement(Icon, { name: it.icon, size: 20 }),
            React.createElement("span", null, React.createElement("b", null, it.a), " · ", it.b))
        ))),
      React.createElement("button", {
        className: "trust-toggle", onClick: () => setOpen(o => !o),
        "aria-expanded": open, "aria-controls": "trust-items",
        title: open ? "Collapse info bar" : "Expand info bar"
      },
        React.createElement("span", { className: "tt-label" }, open ? "Hide" : "Show info"),
        React.createElement(Icon, { name: "chevdown", size: 16, className: "tt-chev" }))
    )
  );
}

function CategoryTiles() {
  const cats = window.DATA.categories;
  return React.createElement("section", { className: "section" },
    React.createElement("div", { className: "wrap" },
      React.createElement(Reveal, { className: "section-head" },
        React.createElement("div", null,
          React.createElement("span", { className: "eyebrow" }, "The catalog"),
          React.createElement("h2", null, "Shop by category"),
          React.createElement("p", { className: "sh-sub" }, "Twelve product lines, built around the driveline and the brakes.")),
        React.createElement(Link, { to: "/c/heavy-duty-clutches", className: "seeall" }, "View all parts", React.createElement(Icon, { name: "arrow", size: 16 }))
      ),
      React.createElement("div", { className: "tiles" },
        cats.map((c, i) => React.createElement(Reveal, { key: c.id, delay: (i % 4) * 50 },
          React.createElement(Link, { to: "/c/" + c.slug, className: "tile" },
            React.createElement("div", null,
              React.createElement("span", { className: "tile-num mono" }, String(i + 1).padStart(2, "0")),
              React.createElement("h3", null, c.name)),
            React.createElement("p", { className: "tile-blurb" }, c.blurb),
            React.createElement(Icon, { name: "arrow", size: 18, className: "tile-go" })
          )
        ))
      )
    )
  );
}

function FeaturedRail() {
  const featured = window.DATA.products.filter(p => p.featured);
  return React.createElement("section", { className: "section", style: { background: "var(--surface-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" } },
    React.createElement("div", { className: "wrap" },
      React.createElement(Reveal, { className: "section-head" },
        React.createElement("div", null,
          React.createElement("span", { className: "eyebrow" }, "Moving fast"),
          React.createElement("h2", null, "Featured & new arrivals")),
        React.createElement(Link, { to: "/c/heavy-duty-clutches", className: "seeall" }, "See clutches", React.createElement(Icon, { name: "arrow", size: 16 }))
      ),
      React.createElement("div", { className: "pgrid" },
        featured.map((p, i) => React.createElement(Reveal, { key: p.id, delay: (i % 4) * 60 }, React.createElement(ProductCard, { product: p })))
      )
    )
  );
}

function QuotePromo() {
  return React.createElement("section", { className: "section" },
    React.createElement("div", { className: "wrap" },
      React.createElement(Reveal, { className: "promo" },
        React.createElement("div", { className: "promo-left" },
          React.createElement("span", { className: "eyebrow", style: { color: "#8ecbf2" } }, "Flagship tool"),
          React.createElement("h2", null, "Not sure of the exact part? Build a quote."),
          React.createElement("p", null, "Add catalog parts and free-text custom items, then email yourself a formatted quote. Our shop gets a copy and follows up with pricing and freight — even on quote-only items."),
          React.createElement("div", { className: "promo-cta" },
            React.createElement(Link, { to: "/quote", className: "btn btn-purple btn-lg" }, React.createElement(Icon, { name: "quote", size: 18 }), "Open Quote Builder"),
            React.createElement("a", { href: "tel:4102358829", className: "btn btn-ghost btn-lg promo-call" }, React.createElement(Icon, { name: "phone", size: 18 }), "410-235-8829"))
        ),
        React.createElement("div", { className: "promo-right" },
          React.createElement("div", { className: "promo-card" },
            ["15.5\" Easy-Pedal Clutch · DW-108391-25R", "Diamond Drive Shoe Set · DW-DT-4707Q", "Custom: pilot bearing for DD15 ×2"].map((t, i) =>
              React.createElement("div", { key: i, className: "promo-line" },
                React.createElement("span", { className: "promo-tick" }, React.createElement(Icon, { name: "check", size: 13 })),
                React.createElement("span", { className: "mono", style: { fontSize: 12.5 } }, t))),
            React.createElement("div", { className: "promo-foot" }, React.createElement("span", null, "Emailed to you + the shop"), React.createElement("span", { className: "chip" }, "Quote #Q-2041")))
        )
      )
    )
  );
}

function VideosTeaser() {
  return React.createElement("section", { className: "section-sm" },
    React.createElement("div", { className: "wrap videos-teaser" },
      React.createElement("div", null,
        React.createElement("span", { className: "eyebrow" }, "On the bench"),
        React.createElement("h2", { style: { fontSize: 26 } }, "Install & tech videos"),
        React.createElement("p", { className: "muted", style: { marginTop: 6 } }, "Watch clutch installs and brake relining walk-throughs from our shop.")),
      React.createElement(Link, { to: "/videos", className: "btn btn-ghost" }, "Watch on YouTube", React.createElement(Icon, { name: "arrow", size: 16 }))
    )
  );
}

function HomePage() {
  return React.createElement("div", null,
    React.createElement(Hero, null),
    React.createElement(TrustStrip, null),
    React.createElement(CategoryTiles, null),
    React.createElement(FeaturedRail, null),
    React.createElement(QuotePromo, null),
    React.createElement(VideosTeaser, null)
  );
}
Object.assign(window, { HomePage });