/* Save Our Family Farms — campaign brand marks.
   Built from Hometown Anchor "Town Line" DNA: gable/roofline geometry,
   navy structure (#0d2b49), one barn-red accent (#9c3a2a), Overpass 800.
   The campaign runs warmer/louder than the umbrella but never breaks the
   palette or the "no red on navy" contrast rule.
   Exports to window for cross-file use. */

const NAVY = "#0d2b49";
const RED = "#9c3a2a";
const CREAM = "#f4efe6";

/* ============================================================
   DIRECTION A — "BARN & SILO"  (the iconic workhorse glyph)
   barn-red barn (the emotional hero) + navy silo + navy roof/door.
   tone: "light" (on cream) | "inverse" (one-color cream, on navy/photo)
   ============================================================ */
function BarnSilo({ width = 148, tone = "light" }) {
  const h = (width / 148) * 104;
  if (tone === "inverse") {
    return (
      <svg width={width} height={h} viewBox="0 0 148 104" aria-hidden="true" style={{ display: "block" }}>
        <g fill={CREAM}>
          <path d="M16,40 A12,16 0 0 1 40,40 Z" />
          <rect x="16" y="40" width="24" height="52" />
          <polygon points="54,54 72,39 98,28 124,39 142,54" />
          <rect x="58" y="54" width="80" height="38" />
        </g>
      </svg>
    );
  }
  return (
    <svg width={width} height={h} viewBox="0 0 148 104" aria-hidden="true" style={{ display: "block" }}>
      {/* silo — navy */}
      <g fill={NAVY}>
        <path d="M16,40 A12,16 0 0 1 40,40 Z" />
        <rect x="16" y="40" width="24" height="52" />
      </g>
      {/* barn body — barn red */}
      <rect x="58" y="54" width="80" height="38" fill={RED} />
      {/* roof — navy */}
      <polygon points="54,54 72,39 98,28 124,39 142,54" fill={NAVY} />
      {/* door — navy on red (legal contrast) */}
      <rect x="90" y="64" width="16" height="28" fill={NAVY} />
    </svg>
  );
}

/* ============================================================
   DIRECTION B — "ROOFLINE RIDGE"  (a row of farmsteads on the land)
   Evolves the three-homes mark into a community of farms; the center
   barn is barn-red (echoes the umbrella's red center home).
   ============================================================ */
function RidgeRow({ width = 200, tone = "light" }) {
  const h = (width / 200) * 96;
  const struct = tone === "inverse" ? CREAM : NAVY;
  const accent = tone === "inverse" ? CREAM : RED;
  return (
    <svg width={width} height={h} viewBox="0 0 200 96" aria-hidden="true" style={{ display: "block" }}>
      <g fill={struct}>
        {/* land baseline */}
        <rect x="8" y="84" width="184" height="4" />
        {/* outer-left */}
        <polygon points="22,70 40,57 58,70" />
        <rect x="27" y="70" width="26" height="14" />
        {/* inner-left */}
        <polygon points="50,66 70,50 90,66" />
        <rect x="57" y="66" width="26" height="18" />
        {/* inner-right */}
        <polygon points="110,66 130,50 150,66" />
        <rect x="117" y="66" width="26" height="18" />
        {/* outer-right */}
        <polygon points="142,70 160,57 178,70" />
        <rect x="147" y="70" width="26" height="14" />
      </g>
      {/* center barn — barn red, drawn last (in front) */}
      <rect x="80" y="56" width="40" height="28" fill={accent} />
      <polygon points="74,56 86,44 100,36 114,44 126,56" fill={accent} />
      {/* door — struct color on the red barn */}
      <rect x="94" y="66" width="12" height="18" fill={struct} />
    </svg>
  );
}

/* ============================================================
   ROOFLINE RULE — repeating peaks divider (brand motif)
   ============================================================ */
function Roofline({ color = RED, height = 9, width = "100%", stroke = 1.6, filled = false, period = 26 }) {
  if (filled) {
    // Solid sawtooth cap: peaks point UP to the top edge (y=0), red fills
    // down to a flat baseline (y=height). The triangular notches between
    // peaks stay transparent so the surface behind shows through — making
    // the roofline read as the literal top edge of the card.
    const w = 200;
    let d = `M0,${height} `;
    for (let x = 0; x < w; x += period) {
      d += `L${x + period / 2},0 L${x + period},${height} `;
    }
    d += "Z";
    return (
      <svg width={width} height={height} viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none" style={{ display: "block" }} aria-hidden="true">
        <path d={d} fill={color} />
      </svg>
    );
  }
  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>
  );
}

/* ============================================================
   WORDMARK — "SAVE OUR / FAMILY FARMS"  (Overpass 800 uppercase)
   align: "center" | "left"; tone: "light" | "inverse"
   ============================================================ */
function Wordmark({ scale = 1, align = "center", tone = "light", showTagline = false }) {
  const onDark = tone === "inverse";
  const main = onDark ? CREAM : NAVY;
  const muted = onDark ? "#a9b8c6" : "#6b6453";
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: align === "center" ? "center" : "flex-start", lineHeight: 1, fontFamily: "var(--font-display)" }}>
      <div style={{ fontWeight: 800, textTransform: "uppercase", letterSpacing: ".07em", fontSize: `${1.04 * scale}rem`, color: muted, marginBottom: 2 * scale, lineHeight: .96 }}>Save Our</div>
      <div style={{ fontWeight: 800, textTransform: "uppercase", letterSpacing: ".005em", fontSize: `${1.74 * scale}rem`, color: main, lineHeight: .92 }}>Family Farms</div>
      {showTagline && (
        <div style={{ fontWeight: 700, textTransform: "uppercase", letterSpacing: ".1em", fontSize: `${0.52 * scale}rem`, color: RED, marginTop: 6 * scale }}>#SaveOurFamilyFarms</div>
      )}
    </div>
  );
}

/* ============================================================
   PRIMARY LOGO LOCKUP used across the site.
   Direction A glyph + wordmark, horizontal.
   ============================================================ */
function SiteLogo({ tone = "light", scale = 1, onClick }) {
  return (
    <div onClick={onClick} style={{ display: "flex", alignItems: "center", gap: 14 * scale, cursor: onClick ? "pointer" : "default" }}>
      <BarnSilo width={52 * scale} tone={tone} />
      <Wordmark scale={0.82 * scale} align="left" tone={tone} />
    </div>
  );
}

Object.assign(window, { BarnSilo, RidgeRow, Roofline, Wordmark, SiteLogo, NAVY, RED, CREAM });