(function(){
const { HeroSlider, SectionHeading, CategoryCard, ProductCard, Button } = window.HatchSanitaryDesignSystem_c15e1f;

function MissionStrip() {
  return (
    <section style={{ background: "var(--ink)", color: "var(--white)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "clamp(56px,8vw,104px) var(--gutter)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "64px", alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "22px" }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "12px", letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--accent-300)" }}>Our Mission</span>
          <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--fs-h2)", lineHeight: 1.12, letterSpacing: "-0.01em", textTransform: "uppercase" }}>Raising the standard of sanitary ware</h2>
          <p style={{ margin: 0, fontSize: "18px", lineHeight: 1.7, color: "rgba(255,255,255,.7)", fontWeight: 300, maxWidth: "440px" }}>Distinct, innovative solutions that enhance daily life — enabling functional, aesthetically pleasing spaces for homes and businesses worldwide.</p>
          <div style={{ marginTop: "8px" }}><Button variant="accent">Read more</Button></div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1px", background: "var(--border-inverse)", border: "1px solid var(--border-inverse)" }}>
          {[["12+", "Years of expertise"], ["7", "Product families"], ["200+", "SKUs in catalogue"], ["30+", "Markets served"]].map(([n, l]) => (
            <div key={l} style={{ background: "var(--ink)", padding: "32px 26px", display: "flex", flexDirection: "column", gap: "6px" }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "42px", lineHeight: 1, color: "var(--white)" }}>{n}</span>
              <span style={{ fontSize: "13px", color: "rgba(255,255,255,.6)" }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeScreen({ go }) {
  const D = window.HATCH;
  return (
    <div>
      <HeroSlider slides={D.slides} />

      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "clamp(56px,8vw,104px) var(--gutter)" }}>
        <SectionHeading overline="Explore" title="Shop by category" description="Seven families of premium sanitary ware, engineered for modern living." action={<Button variant="ghost" onClick={() => go("products")}>View all</Button>} />
        <div style={{ marginTop: "40px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "16px" }}>
          {D.categories.slice(0, 4).map((c) => <CategoryCard key={c.id} image={c.image} name={c.name} count={c.count} onClick={(e) => { e.preventDefault(); go("products", c.name); }} />)}
        </div>
        <div style={{ marginTop: "16px", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "16px" }}>
          {D.categories.slice(4).map((c) => <CategoryCard key={c.id} image={c.image} name={c.name} count={c.count} onClick={(e) => { e.preventDefault(); go("products", c.name); }} />)}
        </div>
      </section>

      <MissionStrip />

      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "clamp(56px,8vw,104px) var(--gutter)" }}>
        <SectionHeading overline="Just landed" title="Recent products" action={<Button variant="ghost" onClick={() => go("products")}>View all</Button>} />
        <div style={{ marginTop: "40px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "16px" }}>
          {D.products.slice(0, 8).map((p) => <ProductCard key={p.id} image={p.image} name={p.name} model={p.model} category={p.category} badge={p.badge} onClick={(e) => { e.preventDefault(); go("detail", p); }} />)}
        </div>
      </section>
    </div>
  );
}
window.HomeScreen = HomeScreen;
})();