// Manufacturer / partner badge wordmarks + "brands we build with" strip.
// Tasteful monochrome wordmarks (not exact logo art) — swap for official
// logo files whenever you have them: drop a PNG in assets/ and set `img`.

function Wordmark({ brand }) {
  // Each brand gets a small distinguishing glyph + styled wordmark so the
  // row reads like a logo lineup rather than plain text.
  const common = { display: "inline-flex", alignItems: "center", gap: 9, color: NP.textL2, transition: "color .18s ease, opacity .18s ease", opacity: 0.78 };
  const arc =
  <svg width="20" height="14" viewBox="0 0 20 14" fill="none"><path d="M2 12 A8 8 0 0 1 18 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /><path d="M10 12 V3 M5 12 V6 M15 12 V6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /></svg>;

  const leaf =
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1 C3 4 3 11 8 15 C13 11 13 4 8 1 Z" stroke="currentColor" strokeWidth="1.4" /><path d="M8 3 V13" stroke="currentColor" strokeWidth="1.1" /></svg>;

  const acorn =
  <svg width="15" height="16" viewBox="0 0 15 16" fill="none"><path d="M2.5 6 H12.5 M7.5 2 V6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /><path d="M3.5 6 C3.5 11 5 14 7.5 14 C10 14 11.5 11 11.5 6 Z" stroke="currentColor" strokeWidth="1.3" /></svg>;

  const map = {
    alumawood: { img: "assets/img/logo-alumawood.png", h: 26 },
    fourseasons: { img: "assets/img/logo-four-seasons.png", h: 28 },
    cedarwood: { glyph: leaf, text: "Cedarwood", style: { fontFamily: FONT.body, fontWeight: 700, fontSize: 20, letterSpacing: "0.02em" } },
    alumicover: { img: "assets/img/logo-alumicover.png", h: 34 },
    solara: { img: "assets/img/logo-solara.png", h: 32 },
    acorn: { glyph: acorn, text: "Acorn Finance", style: { fontFamily: FONT.body, fontWeight: 700, fontSize: 19, letterSpacing: "0.005em" } }
  };
  const b = map[brand];
  if (b.img) {
    const off = "grayscale(1) invert(1) brightness(0.82)";
    const on = "grayscale(1) invert(1) brightness(1.05)";
    return (
      <span style={{ display: "inline-flex", alignItems: "center" }}
      onMouseEnter={(e) => {const im = e.currentTarget.firstChild;im.style.filter = on;im.style.opacity = 1;}}
      onMouseLeave={(e) => {const im = e.currentTarget.firstChild;im.style.filter = off;im.style.opacity = 0.78;}}>
        <img src={b.img} alt={brand} style={{ height: b.h, width: "auto", display: "block",
          filter: off, opacity: 0.78, transition: "filter .18s ease, opacity .18s ease" }} />
      </span>);

  }
  return (
    <span style={common}
    onMouseEnter={(e) => {e.currentTarget.style.color = NP.gold;e.currentTarget.style.opacity = 1;}}
    onMouseLeave={(e) => {e.currentTarget.style.color = NP.textL2;e.currentTarget.style.opacity = 0.78;}}>
      {b.glyph}
      <span style={b.style}>{b.text}</span>
    </span>);

}

function BrandStrip({ hidden }) {
  if (hidden) return null;
  const brands = ["alumawood", "fourseasons", "alumicover", "solara"];
  return (
    <div style={{ background: NP.ink, borderBottom: `1px solid ${NP.lineL}` }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "flex", flexDirection: "column", alignItems: "center", gap: 28, padding: "40px 20px" }}>
        <span style={{ fontFamily: FONT.body, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: NP.gold, whiteSpace: "nowrap", fontSize: "16px" }}>
          Built with trusted brands
        </span>
        <div style={{ display: "flex", alignItems: "center", gap: 48, flexWrap: "wrap", justifyContent: "center" }}>
          {brands.map((b) => <Wordmark key={b} brand={b} />)}
        </div>
      </div>
    </div>);

}

Object.assign(window, { Wordmark, BrandStrip });