(function(){
const { Breadcrumb, Button, Badge, SectionHeading, ProductCard } = window.HatchSanitaryDesignSystem_c15e1f;

function ProductDetailScreen({ go, product }) {
  const D = window.HATCH;
  const p = product || D.products[0];
  const [finish, setFinish] = React.useState("Chrome");
  const related = D.products.filter((x) => x.category === p.category && x.id !== p.id).slice(0, 4);
  const finishes = [["Chrome", "#c9ced0"], ["Matte Black", "#1c1f20"], ["Brushed Gold", "#c9a86a"]];

  return (
    <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "32px var(--gutter) clamp(72px,9vw,120px)" }}>
      <Breadcrumb items={[{ label: "Home", href: "#" }, { label: "Products", href: "#" }, { label: p.category, href: "#" }, { label: p.name }]} />

      <div style={{ marginTop: "30px", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "64px", alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
          <div style={{ aspectRatio: "1/1", background: "var(--bg-subtle)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)", display: "grid", placeItems: "center", padding: "48px" }}>
            <img src={p.image} alt={p.name} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", mixBlendMode: "multiply" }} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "12px" }}>
            {[0, 1, 2, 3].map((i) => (
              <div key={i} style={{ aspectRatio: "1/1", background: "var(--bg-subtle)", border: `1px solid ${i === 0 ? "var(--ink)" : "var(--border-subtle)"}`, borderRadius: "var(--radius-sm)", display: "grid", placeItems: "center", padding: "14px", cursor: "pointer" }}>
                <img src={p.image} alt="" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", mixBlendMode: "multiply", opacity: i === 0 ? 1 : 0.55 }} />
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "20px", position: "sticky", top: "92px" }}>
          <div style={{ display: "flex", gap: "8px" }}>
            <Badge tone="outline">{p.category}</Badge>
            {p.badge && <Badge tone="new">{p.badge}</Badge>}
          </div>
          <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "38px", lineHeight: 1.08, letterSpacing: "-0.02em", textTransform: "uppercase", color: "var(--ink)" }}>{p.name}</h1>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "14px", color: "var(--text-muted)" }}>Model {p.model}</span>
          <p style={{ margin: 0, fontSize: "17px", lineHeight: 1.7, color: "var(--text-secondary)", fontWeight: 300 }}>Precision-engineered from solid brass with a corrosion-resistant finish. Water-efficient ceramic cartridge rated for over 500,000 cycles — built for a lifetime of dependable, elegant use.</p>

          <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-secondary)" }}>Finish · {finish}</span>
            <div style={{ display: "flex", gap: "10px" }}>
              {finishes.map(([name, col]) => (
                <button key={name} onClick={() => setFinish(name)} title={name} style={{ width: "40px", height: "40px", borderRadius: "var(--radius-circle)", background: col, cursor: "pointer", border: `2px solid ${finish === name ? "var(--accent)" : "var(--border-strong)"}`, outline: finish === name ? "2px solid var(--accent-100)" : "none", outlineOffset: "1px" }} />
              ))}
            </div>
          </div>

          <div style={{ display: "flex", gap: "12px", marginTop: "6px" }}>
            <Button variant="primary" size="lg">Request a quote</Button>
            <Button variant="secondary" size="lg">Download spec</Button>
          </div>

          <div style={{ marginTop: "10px", borderTop: "1px solid var(--border-subtle)" }}>
            {[["Material", "Solid brass"], ["Finish options", "Chrome · Matte Black · Brushed Gold"], ["Warranty", "10 years"], ["Standards", "CE · WRAS certified"]].map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: "20px", padding: "13px 0", borderBottom: "1px solid var(--border-subtle)", fontSize: "14.5px" }}>
                <span style={{ color: "var(--text-muted)" }}>{k}</span>
                <span style={{ color: "var(--text-primary)", textAlign: "right" }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {related.length > 0 && (
        <section style={{ marginTop: "clamp(56px,7vw,96px)" }}>
          <SectionHeading overline="You may also like" title={`More in ${p.category}`} />
          <div style={{ marginTop: "32px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "16px" }}>
            {related.map((r) => <ProductCard key={r.id} image={r.image} name={r.name} model={r.model} category={r.category} badge={r.badge} onClick={(e) => { e.preventDefault(); go("detail", r); }} />)}
          </div>
        </section>
      )}
    </div>
  );
}
window.ProductDetailScreen = ProductDetailScreen;
})();