/* Home — hero with the "Tailored, Timeless, Transformative." triad. */
function Home({ go }) {
  const DS = window.OcaInteriorsDesignSystem_2c041d;
  const P = window.OcaPlaceholders;
  const { NavBar } = DS;
  return (
    <div style={{ background: "var(--surface-page)", minHeight: "100%" }}>
      <NavBar active="" items={navItems(go)} />

      <div
        style={{
          maxWidth: "var(--max-content)",
          margin: "0 auto",
          padding: "48px 40px 72px",
          display: "grid",
          gridTemplateColumns: "1fr 1.05fr",
          gap: 64,
          alignItems: "start",
        }}
      >
        <div style={{ paddingTop: 24 }}>
          <h1
            data-edit="home.heroTitle"
            data-edit-html="true"
            style={{
              margin: 0,
              fontFamily: "var(--font-display)",
              fontWeight: 400,
              fontSize: 72,
              lineHeight: 1.04,
              letterSpacing: "-0.01em",
              color: "var(--text-heading)",
            }}
          >
            Tailored, Timeless,<br />Transformative.
          </h1>
          <div style={{ maxWidth: 440, marginTop: 40 }}>
            <p data-edit="home.intro1" style={pStyle}>
              Oca is a full-service design firm dedicated to transforming your house
              into your unique, functional home.
            </p>
            <p data-edit="home.intro2" style={{ ...pStyle, marginTop: 18 }}>
              From new builds or full-scale remodels to room restyling, we help you
              curate architectural details and selections, furnishing, fabrics and
              accessories to enhance your living experience.
            </p>
          </div>
          </span>
        </div>

        <div
          style={{
            height: 620,
            borderRadius: "var(--radius-card)",
            backgroundImage: P.bg("dining"),
            backgroundSize: "cover",
            backgroundPosition: "center",
            boxShadow: "var(--shadow-md)",
          }}
        />
      </div>

      <window.Footer />
    </div>
  );
}

const pStyle = {
  margin: 0,
  fontFamily: "var(--font-body)",
  fontSize: 19,
  lineHeight: 1.6,
  color: "var(--text-body)",
};

function navItems(go) {
  return [
    { label: "About", href: "#", onClick: (e) => { e.preventDefault(); go("about"); } },
    { label: "Services", href: "#", onClick: (e) => { e.preventDefault(); go("services"); } },
    { label: "Projects", href: "#", onClick: (e) => { e.preventDefault(); go("projects"); } },
    { label: "Gallery", href: "#", onClick: (e) => { e.preventDefault(); go("gallery"); } },
    { label: "Contact", href: "#", onClick: (e) => { e.preventDefault(); go("contact"); } },
  ];
}

window.Home = Home;
window.ocaNavItems = navItems;
window.ocaPStyle = pStyle;