/* Shared components */

const Placeholder = ({ label, size, tone = "", className = "", style = {} }) => (
  <div className={`ph ${tone} ${className}`} style={style}>
    <div className="ph-ticks" />
    <div className="ph-label">
      {label}
      {size && <span className="ph-size">{size}</span>}
    </div>
  </div>
);

// Crest used in hero (bigger) and nav (small)
const Crest = ({ size = 40, style = {} }) => (
  <div
    className="monogram-crest"
    style={{
      width: size,
      height: size,
      borderRadius: "50%",
      border: "1px solid currentColor",
      display: "grid",
      placeItems: "center",
      position: "relative",
      fontFamily: "var(--font-display)",
      fontStyle: "italic",
      fontSize: size * 0.5,
      letterSpacing: "-0.02em",
      lineHeight: 1,
      ...style,
    }}
  >
    <span>CV</span>
  </div>
);

// Hero background — ranch gate at sunset
const HeroBackground = () => (
  <div className="hero-bg" aria-hidden>
    <img
      className="hero-bg-img"
      src="assets/chula-vista-hero-bg.jpg"
      srcSet="assets/chula-vista-hero-bg-1280.webp 1280w, assets/chula-vista-hero-bg.webp 2400w"
      sizes="100vw"
      fetchpriority="high"
      alt=""
    />
  </div>
);

// Texas Lone Star — small decorative element
const Star = ({ size = 12, style = {}, fill = "currentColor" }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    style={{ display: "inline-block", verticalAlign: "middle", ...style }}
    aria-hidden
  >
    <path
      d="M12 1.5 L14.6 9.3 L22.8 9.3 L16.1 14.1 L18.7 21.9 L12 17.1 L5.3 21.9 L7.9 14.1 L1.2 9.3 L9.4 9.3 Z"
      fill={fill}
    />
  </svg>
);

Object.assign(window, {
  Placeholder,
  Crest,
  HeroBackground,
  Star,
});