(function(){
const { SectionHeading, Button, Input } = window.HatchSanitaryDesignSystem_c15e1f;

function AboutScreen({ go }) {
  return (
    <div>
      <section style={{ background: "var(--bg-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "clamp(64px,9vw,120px) var(--gutter)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "56px", 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)" }}>About Hatch</span>
            <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--fs-h1)", lineHeight: 1.05, letterSpacing: "-0.02em", textTransform: "uppercase", color: "var(--ink)" }}>Revolutionizing personal spaces</h1>
            <p style={{ margin: 0, fontSize: "19px", lineHeight: 1.7, color: "var(--text-secondary)", fontWeight: 300, maxWidth: "460px" }}>At Hatch, we always seek to revolutionize personal spaces with our commitment to quality and exceptional design — providing durable, eco-friendly and aesthetically pleasing products worldwide.</p>
            <div style={{ display: "flex", gap: "12px" }}><Button variant="primary" onClick={() => go("products")}>Explore products</Button><Button variant="secondary">Contact us</Button></div>
          </div>
          <div style={{ aspectRatio: "4/3", borderRadius: "var(--radius-sm)", overflow: "hidden", background: "var(--neutral-200)" }}>
            <img src="https://dev.hatchsanitary.com/assets/hatch-slider/webwallbanner2.webp" alt="Hatch bathroom" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
      </section>

      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "clamp(56px,8vw,104px) var(--gutter)" }}>
        <SectionHeading overline="What drives us" title="Our values" align="center" />
        <div style={{ marginTop: "48px", display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1px", background: "var(--border-subtle)", border: "1px solid var(--border-subtle)" }}>
          {[["Quality first", "Every fixture is engineered from solid materials and tested to endure a lifetime of daily use."], ["Sustainable by design", "Water-efficient technology and eco-conscious manufacturing reduce impact without compromise."], ["Distinctly minimal", "Clean, functional forms that bring calm and clarity to any bathroom."]].map(([t, d], i) => (
            <div key={t} style={{ background: "var(--white)", padding: "40px 34px", display: "flex", flexDirection: "column", gap: "14px" }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "38px", color: "var(--accent)", lineHeight: 1 }}>{String(i + 1).padStart(2, "0")}</span>
              <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "20px", textTransform: "uppercase", letterSpacing: "-0.01em", color: "var(--ink)" }}>{t}</h3>
              <p style={{ margin: 0, fontSize: "15px", lineHeight: 1.7, color: "var(--text-secondary)", fontWeight: 300 }}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: "var(--ink)", color: "var(--white)" }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "clamp(56px,7vw,96px) var(--gutter)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "56px", alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
            <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--fs-h2)", lineHeight: 1.12, textTransform: "uppercase", letterSpacing: "-0.01em" }}>Let's build something better</h2>
            <p style={{ margin: 0, fontSize: "17px", lineHeight: 1.7, color: "rgba(255,255,255,.7)", fontWeight: 300, maxWidth: "420px" }}>Request our latest catalogue or talk to our team about specifying Hatch for your next project.</p>
          </div>
          <div style={{ display: "flex", gap: "12px", alignItems: "flex-end" }}>
            <div style={{ flex: 1 }}><Input label="Work email" placeholder="you@company.com" /></div>
            <Button variant="accent" size="lg">Get catalogue</Button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.AboutScreen = AboutScreen;
})();