/* Samantha Seitz Interiors — core primitives
   Exports to window for cross-file use. No `const styles` globals. */

function Button({ variant = "primary", children, onClick, ...rest }) {
  const cls = {
    primary: "btn btn-primary",
    ghost: "btn btn-ghost",
    ghostLight: "btn btn-ghost-light",
  }[variant] || "btn btn-primary";
  return (
    <button className={cls} onClick={onClick} {...rest}>{children}</button>
  );
}

function LinkButton({ children, onClick }) {
  return <button className="linkbtn" onClick={onClick}>{children}</button>;
}

function Kicker({ children }) {
  return <div className="kicker">{children}</div>;
}

function SecLabel({ children }) {
  return <span className="seclabel">{children}</span>;
}

function Tape({ center = false }) {
  return <div className={"tape" + (center ? " tape-center" : "")}></div>;
}

/* A framed interior-photo placeholder. Real photography drops in here. */
function Frame({ caption = "Interior", label = "Photography", height, className = "", onClick, src, pos, alt }) {
  return (
    <div className={"frame " + className} style={height ? { height } : null} onClick={onClick}>
      {src
        ? <img src={src} alt={alt !== undefined ? alt : caption} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: pos || "center", display: "block", position: "absolute", top: 0, left: 0 }} />
        : null}
      <div className="ph" style={src ? { opacity: 0 } : null}>
        <div className="pl">{label}</div>
        <div className="cap">{caption}</div>
      </div>
    </div>
  );
}

function SectionHead({ label, title, sub }) {
  return (
    <div className="section-head">
      {label && <SecLabel>{label}</SecLabel>}
      <h2>{title}</h2>
      {sub && <div className="sub">{sub}</div>}
    </div>
  );
}

Object.assign(window, { Button, LinkButton, Kicker, SecLabel, Tape, Frame, SectionHead });