/* Hometown Anchor — shared brand primitives (Town Line rev 5)
   HomesMark · Roofline · Button · Eyebrow · Lockup. Exported to window. */

// ---- Three-homes mark (inline SVG, colorable) ----
function HomesMark({ variant = "full", width = 46 }) {
  const h = (width / 168) * 74;
  if (variant === "full") {
    return (
      <svg width={width} height={h} viewBox="0 0 168 74" aria-hidden="true" style={{ display: "block" }}>
        <g fill="#0d2b49">
          <polygon points="16,42 34,24 52,42" /><rect x="21" y="42" width="26" height="22" />
          <polygon points="116,44 134,28 152,44" /><rect x="121" y="44" width="26" height="20" />
        </g>
        <g fill="#9c3a2a">
          <polygon points="52,36 84,10 116,36" /><rect x="60" y="36" width="48" height="28" />
        </g>
      </svg>
    );
  }
  const fill = variant === "reversed" ? "#f4efe6" : "#0d2b49";
  return (
    <svg width={width} height={h} viewBox="0 0 168 74" aria-hidden="true" style={{ display: "block" }}>
      <g fill={fill}>
        <polygon points="16,42 34,24 52,42" /><rect x="21" y="42" width="26" height="22" />
        <polygon points="52,36 84,10 116,36" /><rect x="60" y="36" width="48" height="28" />
        <polygon points="116,44 134,28 152,44" /><rect x="121" y="44" width="26" height="20" />
      </g>
    </svg>
  );
}

// ---- Wordmark lockup: homes ABOVE wordmark (or beside in header) ----
function Wordmark({ onDark = true, size = "1.05rem" }) {
  return (
    <span style={{
      fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase",
      letterSpacing: ".03em", fontSize: size, lineHeight: .95,
      color: onDark ? "#f4efe6" : "#0d2b49",
    }}>Hometown<br />Anchor</span>
  );
}

// ---- Roofline divider (repeating peaks) ----
function Roofline({ color = "#9c3a2a", height = 10, width = "100%", stroke = 1.5 }) {
  const pts = [];
  for (let x = 0; x <= 200; x += 8) pts.push(`${x},${(x / 8) % 2 === 0 ? height : 2}`);
  return (
    <svg width={width} height={height} viewBox={`0 0 200 ${height}`} preserveAspectRatio="none" style={{ display: "block" }} aria-hidden="true">
      <polyline points={pts.join(" ")} fill="none" stroke={color} strokeWidth={stroke} />
    </svg>
  );
}

// ---- Buttons ----
function Button({ children, variant = "primary", onDark = false, size = "md", onClick, href, type = "button", style = {} }) {
  const [hover, setHover] = React.useState(false);
  const [active, setActive] = React.useState(false);
  const pad = size === "lg" ? "15px 28px" : size === "sm" ? "9px 16px" : "13px 22px";
  const fs = size === "lg" ? ".95rem" : size === "sm" ? ".75rem" : ".85rem";
  const base = {
    fontFamily: "var(--font-display)", fontWeight: 600, fontSize: fs, letterSpacing: ".05em",
    textTransform: "uppercase", borderRadius: 8, padding: pad, cursor: "pointer", whiteSpace: "nowrap",
    textDecoration: "none", display: "inline-block",
    transition: "background var(--duration-base) var(--easing-standard), color var(--duration-base)",
    border: 0, ...style,
  };
  let s;
  if (variant === "primary") {
    s = { ...base, background: active ? "#6c2718" : hover ? "#83301f" : "#9c3a2a", color: "#fff" };
  } else {
    const c = onDark ? "#f4efe6" : "#0d2b49";
    s = { ...base, background: hover ? (onDark ? "rgba(244,239,230,.12)" : "#eef2f6") : "transparent", color: c, border: `1.5px solid ${c}` };
  }
  const handlers = {
    onMouseEnter: () => setHover(true), onMouseLeave: () => { setHover(false); setActive(false); },
    onMouseDown: () => setActive(true), onMouseUp: () => setActive(false),
  };
  if (href) return <a href={href} onClick={onClick} style={s} {...handlers}>{children}</a>;
  return <button type={type} onClick={onClick} style={s} {...handlers}>{children}</button>;
}

// ---- Eyebrow label ----
function Eyebrow({ children, onDark = false, style = {} }) {
  return <p style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: ".72rem", letterSpacing: ".16em", textTransform: "uppercase", color: onDark ? "#6f8aa6" : "#6b6453", margin: "0 0 14px", ...style }}>{children}</p>;
}

Object.assign(window, { HomesMark, Wordmark, Roofline, Button, Eyebrow });