/* ============================================================
   Guero's Group — Brand marks + Sahel-inspired generated art
   ============================================================ */

/* ---------- Sahel scene palette ---------- */
let __ssid = 0;
const SAHEL_TONES = {
  dawn: { s0: "#F8E8C6", s1: "#ECB877", sun: "#F0A24E", d: ["#E7C78D", "#D7AD6A", "#C0934F"], sil: "#5A4632", grd: "#CCA063" },
  day:  { s0: "#E9ECE2", s1: "#EAD8AE", sun: "#F4E6B6", d: ["#E3C78C", "#D1A967", "#BA8F4F"], sil: "#5A4632", grd: "#CB9C60" },
  dusk: { s0: "#F4D2A0", s1: "#C75E2C", sun: "#EA7A38", d: ["#CA8B53", "#B1713D", "#8F5A2F"], sil: "#3A2C1E", grd: "#9F6F3D" },
};
function rng(seed) { let s = seed * 9301 + 49297; return () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; }

/* Flat-topped acacia silhouette */
function Acacia({ x, y, s, fill }) {
  return (
    <g transform={`translate(${x} ${y}) scale(${s})`} fill={fill}>
      <path d="M-1.2 0 L-2.4 -14 Q-2.6 -17 -5 -18 Q-1 -17.5 -0.6 -20 Q0 -17.5 4 -18 Q1.4 -17 1.2 -14 L1.2 0 Z" />
      <path d="M-13 -18 Q0 -24 13 -18 Q9 -19.6 0 -19.4 Q-9 -19.6 -13 -18 Z" />
      <ellipse cx="0" cy="-18.6" rx="13" ry="2.4" />
    </g>
  );
}

/* Vehicle side silhouettes (approx) */
function VehicleSil({ type, color }) {
  const v = {
    sedan: "M30 52 Q34 40 46 38 L70 24 Q80 18 96 18 L150 18 Q170 18 184 30 L214 38 Q230 42 234 52 Z",
    suv: "M28 54 L32 36 Q34 26 50 24 L70 22 Q78 14 100 14 L160 14 Q182 14 190 26 L214 34 Q232 38 236 54 Z",
    van: "M26 56 L28 24 Q30 14 48 13 L186 13 Q210 13 214 30 L232 40 Q238 46 238 56 Z",
    pickup: "M22 54 L26 34 Q28 24 44 22 L74 22 Q82 14 104 14 L138 14 Q150 14 152 24 L152 42 L238 42 L238 54 Z",
    truck: "M20 56 L22 22 Q24 14 40 14 L96 14 L100 40 L150 40 L160 22 Q164 16 182 16 L214 16 Q236 18 238 40 L238 56 Z",
  }[type] || "M30 52 Q34 40 46 38 L70 24 Q80 18 96 18 L150 18 Q170 18 184 30 L214 38 Q230 42 234 52 Z";
  return (
    <g>
      <path d={v} fill={color} transform="translate(0 0)" />
      <circle cx="74" cy="54" r="13" fill={color} /><circle cx="74" cy="54" r="5.5" fill="rgba(255,255,255,.5)" />
      <circle cx="190" cy="54" r="13" fill={color} /><circle cx="190" cy="54" r="5.5" fill="rgba(255,255,255,.5)" />
    </g>
  );
}

/* Minaret + low-rise Niamey skyline */
function Skyline({ color }) {
  return (
    <g fill={color}>
      <rect x="40" y="120" width="42" height="40" />
      <rect x="92" y="110" width="30" height="50" />
      <rect x="150" y="126" width="54" height="34" />
      <rect x="232" y="116" width="34" height="44" />
      <rect x="296" y="122" width="46" height="38" />
      {/* minaret */}
      <rect x="208" y="92" width="14" height="68" />
      <path d="M208 92 Q215 80 222 92 Z" />
      <circle cx="215" cy="80" r="3" />
    </g>
  );
}

function SahelScene({ variant = "dunes", seed = 1, subject = null, style, className = "" }) {
  const id = useRef("ss" + (++__ssid)).current;
  const r = rng(seed + 1);
  const toneKey = ["dawn", "day", "dusk"][Math.floor(r() * 3)];
  const p = SAHEL_TONES[toneKey];
  const sunX = 60 + Math.floor(r() * 280);
  const showSky = true;
  return (
    <svg viewBox="0 0 400 260" preserveAspectRatio="xMidYMid slice" className={"ph-svg " + className}
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block", ...style }}>
      <defs>
        <linearGradient id={id + "sky"} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={p.s0} /><stop offset="1" stopColor={p.s1} />
        </linearGradient>
        <radialGradient id={id + "sun"} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor={p.sun} stopOpacity="0.95" /><stop offset="1" stopColor={p.sun} stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="400" height="260" fill={`url(#${id}sky)`} />
      <circle cx={sunX} cy="92" r="64" fill={`url(#${id}sun)`} />
      <circle cx={sunX} cy="92" r="24" fill={p.sun} opacity="0.9" />
      {/* dust haze */}
      <rect y="150" width="400" height="110" fill={p.s1} opacity="0.25" />
      {variant === "town" && <Skyline color={p.d[2]} />}
      {/* dunes */}
      <path d="M0 168 Q120 138 240 166 Q330 186 400 160 L400 260 L0 260 Z" fill={p.d[0]} />
      <path d="M0 196 Q140 170 270 196 Q340 210 400 192 L400 260 L0 260 Z" fill={p.d[1]} />
      <path d="M0 224 Q160 206 300 226 Q360 234 400 222 L400 260 L0 260 Z" fill={p.d[2]} />
      {/* acacias */}
      {variant !== "town" && <>
        <Acacia x={40 + r() * 30} y={196} s={1.5 + r()} fill={p.sil} />
        <Acacia x={330 - r() * 40} y={188} s={1.1 + r() * 0.8} fill={p.sil} />
        {r() > 0.5 && <Acacia x={200 + r() * 60} y={204} s={0.9} fill={p.sil} />}
      </>}
      {/* road for fleet/road variants */}
      {(variant === "road" || subject) && <>
        <path d="M150 260 L186 196 L214 196 L250 260 Z" fill={p.sil} opacity="0.35" />
        <path d="M200 256 L200 244 M200 232 L200 222 M200 212 L200 204" stroke={p.s0} strokeWidth="3" opacity="0.7" />
      </>}
      {subject && <g transform="translate(76 150) scale(0.62)"><VehicleSil type={subject} color={p.sil} /></g>}
      <rect y="244" width="400" height="16" fill={p.grd} />
    </svg>
  );
}

/* ---------- Part tile (warm gradient + category icon) ---------- */
function PartTile({ icon = "box", seed = 1, style, className = "" }) {
  const id = useRef("pt" + (++__ssid)).current;
  const tones = [["#F0D9B8", "#E0A86A"], ["#EAD3AE", "#D69256"], ["#EFC9A0", "#D98A52"], ["#E8D2B0", "#CDA063"]];
  const c = tones[seed % tones.length];
  return (
    <div className={"ph-svg " + className} style={{ position: "absolute", inset: 0, ...style }}>
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
        <defs><linearGradient id={id} x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor={c[0]} /><stop offset="1" stopColor={c[1]} /></linearGradient></defs>
        <rect width="400" height="300" fill={`url(#${id})`} />
        <g opacity="0.13" stroke="#3A2C1E" strokeWidth="1">
          {Array.from({ length: 9 }).map((_, i) => <line key={i} x1={i * 50} y1="0" x2={i * 50} y2="300" />)}
        </g>
        <circle cx="200" cy="150" r="86" fill="rgba(255,255,255,0.18)" />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", color: "rgba(58,40,24,0.6)" }}>
        <Icon name={icon} size={64} stroke={1.4} />
      </div>
    </div>
  );
}

Object.assign(window, { SahelScene, PartTile, VehicleSil });