// UI primitives: Logo, Icon, ThemeToggle, LangToggle, Marquee, ImagePlaceholder

const Logo = ({ height = 36 }) => {
  const { theme } = useI18n();
  return (
    <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <img
        src="assets/cespro-logo.jpg"
        alt="CESPRO Facility Management"
        style={{
          height,
          width: "auto",
          mixBlendMode: theme === "dark" ? "screen" : "multiply",
        }}
      />
    </a>
  );
};

const Icon = ({ name, size = 20, stroke = 1.6, color = "currentColor", flip = false }) => {
  const c = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: color, strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round",
    className: flip ? "icon-flip" : "",
  };
  switch (name) {
    case "ac":         return <svg {...c}><rect x="3" y="5" width="18" height="9" rx="1.5"/><path d="M6 9h12M6 12h12M12 14v6M9 18l3 2 3-2M9 22l3-2 3 2"/></svg>;
    case "plumbing":   return <svg {...c}><path d="M4 6h6v4H4zM14 14h6v4h-6z"/><path d="M10 8h4v6M7 10v3M17 14v-3"/></svg>;
    case "electrical": return <svg {...c}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg>;
    case "pest":       return <svg {...c}><ellipse cx="12" cy="13" rx="5" ry="7"/><path d="M12 6V3M9 5l-2-2M15 5l2-2M7 11H4M20 11h-3M7 16H4M20 16h-3M7 21l-2 1M17 21l2 1"/></svg>;
    case "cleaning":   return <svg {...c}><path d="M14 3l4 4-9 9H5v-4z"/><path d="M11 6l4 4M3 21h18"/></svg>;
    case "handyman":   return <svg {...c}><path d="M14 4l6 6-3 3-6-6z"/><path d="M11 7L4 14l3 3 7-7"/><path d="M7 17l-4 4"/></svg>;
    case "civil":      return <svg {...c}><path d="M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6M9 11h.01M15 11h.01"/></svg>;
    case "landscape":  return <svg {...c}><path d="M12 3v18M7 9c0-3 5-5 5-5s5 2 5 5-5 5-5 5-5-2-5-5z"/><path d="M3 21h18"/></svg>;
    case "shield":     return <svg {...c}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>;
    case "bolt":       return <svg {...c}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg>;
    case "phone":      return <svg {...c}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>;
    case "arrow":      return <svg {...c}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "arrow-up-right":return <svg {...c}><path d="M7 17L17 7M8 7h9v9"/></svg>;
    case "check":      return <svg {...c}><path d="M5 12l5 5L20 7"/></svg>;
    case "chevron":    return <svg {...c}><path d="M9 18l6-6-6-6"/></svg>;
    case "plus":       return <svg {...c}><path d="M12 5v14M5 12h14"/></svg>;
    case "minus":      return <svg {...c}><path d="M5 12h14"/></svg>;
    case "star":       return <svg {...c} fill={color}><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>;
    case "clock":      return <svg {...c}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "pin":        return <svg {...c}><path d="M12 22s7-7 7-13a7 7 0 10-14 0c0 6 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case "calendar":   return <svg {...c}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case "home":       return <svg {...c}><path d="M3 11l9-7 9 7v9a2 2 0 01-2 2h-4v-7h-6v7H5a2 2 0 01-2-2z"/></svg>;
    case "menu":       return <svg {...c}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case "x":          return <svg {...c}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "chat":       return <svg {...c}><path d="M21 12a8 8 0 11-3.6-6.7L21 4l-1.2 4.1A8 8 0 0121 12z"/><path d="M8 12h.01M12 12h.01M16 12h.01"/></svg>;
    case "download":   return <svg {...c}><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>;
    case "sun":        return <svg {...c}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></svg>;
    case "moon":       return <svg {...c}><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>;
    case "globe":      return <svg {...c}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>;
    default: return null;
  }
};

const Logomark = ({ size = 32 }) => (
  <svg viewBox="0 0 100 100" width={size} height={size} aria-hidden style={{ display: "block" }}>
    <defs>
      <linearGradient id="lmg" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="#ff5e54"/>
        <stop offset="1" stopColor="#ff3a2e"/>
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100" height="100" rx="22" fill="url(#lmg)"/>
    <rect x="22" y="28" width="56" height="8" rx="2" fill="#fff"/>
    <rect x="22" y="46" width="36" height="8" rx="2" fill="#fff"/>
    <rect x="22" y="64" width="56" height="8" rx="2" fill="#fff"/>
  </svg>
);

const ThemeToggle = () => {
  const { theme, setTheme } = useI18n();
  const isDark = theme === "dark";
  return (
    <button
      onClick={() => setTheme(isDark ? "light" : "dark")}
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      style={{
        width: 36, height: 36, borderRadius: 999,
        background: "var(--btn-glass-bg)",
        border: "1px solid var(--btn-glass-border)",
        color: "var(--ink)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
        boxShadow: "inset 0 1px 0 var(--glass-highlight)",
        transition: "background .2s ease",
      }}
    >
      <Icon name={isDark ? "sun" : "moon"} size={16} stroke={1.8} />
    </button>
  );
};

const LangToggle = () => {
  const { lang, setLang } = useI18n();
  const next = lang === "en" ? "ar" : "en";
  return (
    <button
      onClick={() => setLang(next)}
      aria-label={`Switch to ${next === "ar" ? "Arabic" : "English"}`}
      style={{
        height: 36, padding: "0 14px", borderRadius: 999,
        background: "var(--btn-glass-bg)",
        border: "1px solid var(--btn-glass-border)",
        color: "var(--ink)",
        display: "inline-flex", alignItems: "center", gap: 8,
        fontFamily: "var(--mono)", fontSize: 12, fontWeight: 600,
        backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
        boxShadow: "inset 0 1px 0 var(--glass-highlight)",
        letterSpacing: ".05em",
      }}
    >
      <Icon name="globe" size={14} stroke={1.8} />
      {lang === "en" ? "العربية" : "EN"}
    </button>
  );
};

const Marquee = ({ children, speed = 50 }) => {
  const { dir } = useI18n();
  return (
    <div style={{
      overflow: "hidden",
      maskImage: "linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)",
    }}>
      <div style={{
        display: "inline-flex", gap: 64, paddingInlineEnd: 64,
        animation: `${dir === "rtl" ? "mq-rtl" : "mq-ltr"} ${speed}s linear infinite`,
        whiteSpace: "nowrap",
      }}>
        {children}{children}
      </div>
      <style>{`
        @keyframes mq-ltr { from { transform: translateX(0) } to { transform: translateX(-50%) } }
        @keyframes mq-rtl { from { transform: translateX(0) } to { transform: translateX(50%) } }
      `}</style>
    </div>
  );
};

const ImagePlaceholder = ({ label = "image", height = 240, style }) => (
  <div className="imgph" style={{ height, borderRadius: 16, position: "relative", overflow: "hidden", ...style }}>
    <span style={{
      position: "absolute", insetInlineStart: 12, bottom: 12,
      fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".04em",
      textTransform: "uppercase", color: "var(--ink-3)",
      background: "var(--btn-glass-bg)", padding: "6px 10px",
      border: "1px solid var(--btn-glass-border)", borderRadius: 999,
      backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
    }}>{label}</span>
  </div>
);

// SectionHead is theme-aware
const SectionHead = ({ eyebrow, titleA, titleB, accentPart, right }) => (
  <div style={{
    display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end",
  }} className="sh-grid">
    <div>
      <span className="eyebrow">{eyebrow}</span>
      <h2 className="display" style={{
        fontSize: "clamp(36px, 5vw, 64px)",
        margin: "16px 0 0", color: "var(--ink)",
      }}>
        {titleA}
        {titleB && (<><br/>{accentPart ? <span className="serif-italic" style={{ color: "var(--ink-2)" }}>{accentPart}</span> : null}{titleB}</>)}
      </h2>
    </div>
    {right && <p style={{
      fontSize: 16.5, lineHeight: 1.55, color: "var(--ink-2)",
      margin: 0, maxWidth: 480, textWrap: "pretty",
    }}>{right}</p>}
    <style>{`@media (max-width: 880px) { .sh-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
  </div>
);

Object.assign(window, {
  Logo, Logomark, Icon, ThemeToggle, LangToggle, Marquee, ImagePlaceholder, SectionHead,
});