// components.jsx — Shared UI primitives for Little Care Fund.
// Progress bar, pill, campaign card, stat block, etc.

const LOGO_URL = "uploads/newlogo.png";

// Strip near-white pixels from the logo PNG at runtime so transparency works everywhere
let _processedLogoPromise = null;
function getProcessedLogo() {
  if (!_processedLogoPromise) {
    _processedLogoPromise = new Promise(resolve => {
      const img = new Image();
      img.onload = () => {
        try {
          const c = document.createElement('canvas');
          c.width = img.naturalWidth; c.height = img.naturalHeight;
          const ctx = c.getContext('2d');
          ctx.drawImage(img, 0, 0);
          const id = ctx.getImageData(0, 0, c.width, c.height);
          const d = id.data;
          for (let i = 0; i < d.length; i += 4) {
            if (d[i] > 220 && d[i+1] > 220 && d[i+2] > 220) d[i+3] = 0;
          }
          ctx.putImageData(id, 0, 0);
          resolve(c.toDataURL('image/png'));
        } catch(e) { resolve(LOGO_URL); }
      };
      img.onerror = () => resolve(LOGO_URL);
      img.src = LOGO_URL;
    });
  }
  return _processedLogoPromise;
}

function useLogoSrc() {
  const [src, setSrc] = React.useState(LOGO_URL);
  React.useEffect(() => { getProcessedLogo().then(setSrc); }, []);
  return src;
}

function ProgressBar({ value, max, height = 8, showLabel = false }) {
  const pct = Math.min(100, Math.round(value / max * 100));
  return (
    <div style={{ width: "100%" }}>
      <div style={{
        width: "100%", height, borderRadius: 999,
        background: "rgba(86,52,64,0.10)", overflow: "hidden"
      }}>
        <div style={{
          width: `${pct}%`, height: "100%", borderRadius: 999,
          background: "linear-gradient(90deg, var(--ink-mid), var(--ink-deep))",
          transition: "width 0.6s cubic-bezier(.2,.8,.2,1)"
        }} />
      </div>
      {showLabel &&
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-deep)" }}>{pct}% funded</span>
        </div>
      }
    </div>);

}

function Pill({ children, variant = "default", icon }) {
  const styles = {
    default: { bg: "rgba(86,52,64,0.08)", fg: "var(--ink-deep)" },
    soft: { bg: "rgba(154,135,157,0.18)", fg: "var(--ink-deep)" },
    urgent: { bg: "rgba(122,59,105,0.12)", fg: "var(--ink-mid)" },
    success: { bg: "rgba(127,162,132,0.20)", fg: "#26452A" },
    light: { bg: "rgba(255,255,255,0.7)", fg: "var(--ink-deep)" }
  };

  const s = styles[variant] || styles.default;

  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      background: "rgb(215, 222, 220)", color: s.fg, padding: "5px 10px",
      borderRadius: 999, fontSize: 11.5, fontWeight: 600, letterSpacing: "0.01em",
      whiteSpace: "nowrap", opacity: "1"
    }}>
      {icon}
      {children}
    </span>);

}

const VerifiedIcon = ({ size = 12, color = "currentColor" }) =>
<svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M8 1.5l1.6 1.2 2-.2.6 1.9 1.7 1.1-.7 1.9.7 1.9-1.7 1.1-.6 1.9-2-.2L8 11.3 6.4 12.5l-2-.2-.6-1.9L2.1 9.3 2.8 7.4 2.1 5.5l1.7-1.1.6-1.9 2 .2L8 1.5z" fill={color} opacity="0.18" />
    <path d="M5.5 8l1.8 1.8 3.5-3.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;

function peso(n) {
  const usd = Math.round(n / 57);
  const aud = Math.round(n / 37);
  return `US$${usd.toLocaleString()} / A$${aud.toLocaleString()}`;
}

function CampaignCard({ c, onOpen, compact = false }) {
  const pct = Math.round(c.raised / c.goal * 100);

  return (
    <div
      className="card"
      style={{
        display: "flex", flexDirection: "column", overflow: "hidden",
        cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease"
      }}
      onClick={onOpen}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = "translateY(-2px)";
        e.currentTarget.style.boxShadow = "var(--shadow-2)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = "translateY(0)";
        e.currentTarget.style.boxShadow = "var(--shadow-1)";
      }}>
      
      <div style={{ position: "relative", width: "100%", aspectRatio: "16 / 11", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0 }}>
          <ChildPhoto name={c.name} palette={c.palette} kind={c.kind} slotId={`card-${c.id}`} shape="rect" img={c.img} />
        </div>

        <div style={{ position: "absolute", top: 12, left: 12 }}>
          <Pill variant={c.tag === "Urgent" ? "urgent" : c.tag === "Almost there" ? "success" : "light"}>
            {c.tag === "Urgent" && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ink-mid)" }} />}
            {c.tag}
          </Pill>
        </div>
      </div>

      <div style={{
        padding: compact ? "14px 16px 16px" : "16px 18px 18px",
        display: "flex", flexDirection: "column", gap: 10
      }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }}>
          <h3 style={{
            margin: 0, fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 500,
            color: "var(--ink-deep)", letterSpacing: "-0.01em", lineHeight: 1.15
          }}>
            {c.name}, {c.age}
          </h3>
          <span style={{ fontSize: 12, color: "var(--ink-mute)" }}>{c.location}</span>
        </div>

        <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-mid)", letterSpacing: "0.01em" }}>
          {c.need}
        </div>

        {!compact &&
        <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-mute)" }}>
            {c.summary}
          </p>
        }

        <ProgressBar value={c.raised} max={c.goal} />

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div>
            <div style={{ fontSize: 15, fontWeight: 700, color: "var(--ink-deep)" }}>{peso(c.raised)}</div>
            <div style={{ fontSize: 11.5, color: "var(--ink-mute)" }}>raised of {peso(c.goal)}</div>
          </div>

          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: "var(--ink-deep)" }}>{pct}%</div>
            <div style={{ fontSize: 11.5, color: "var(--ink-mute)" }}>{c.days} days left</div>
          </div>
        </div>

        <button
          className="btn btn--primary btn--sm"
          style={{ marginTop: 4 }}
          onClick={(e) => {
            e.stopPropagation();
            onOpen && onOpen();
          }}>
          
          Support {c.name}
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
            <path d="M3 8h10m-4-4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>

        <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: -2 }}>
          <VerifiedIcon size={12} color="var(--ink-mid)" />
          <span style={{ fontSize: 11, color: "var(--ink-mute)" }}>{c.verified}</span>
        </div>
      </div>
    </div>);

}

function TopBar({ onMenu, onBack, title }) {
  const logoSrc = useLogoSrc();
  return (
    <div
      className="mobile-topbar"
      style={{
        position: "sticky", top: 0, zIndex: 10,
        background: "rgba(215,222,220,0.85)",
        backdropFilter: "blur(14px) saturate(140%)",
        WebkitBackdropFilter: "blur(14px) saturate(140%)",
        borderBottom: "1px solid var(--line)",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "0 16px", height: 78, overflow: "visible"
      }}>
      {onBack ?
      <button
        onClick={onBack}
        aria-label="Back"
        style={{
          width: 36, height: 36, borderRadius: 999, border: 0, background: "rgba(255,255,255,0.7)",
          display: "grid", placeItems: "center", cursor: "pointer"
        }}>

          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M10 3l-5 5 5 5" stroke="var(--ink-deep)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button> :

      <img
        src={logoSrc}
        alt="LittleCareFund"
        style={{ display: "block", height: 101, width: "auto" }}
      />
      }

      {title &&
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 500,
        color: "var(--ink-deep)", letterSpacing: "-0.01em"
      }}>
          {title}
        </div>
      }

      <button
        onClick={onMenu}
        aria-label="Menu"
        style={{
          width: 36, height: 36, borderRadius: 999, border: 0, background: "rgba(255,255,255,0.7)",
          display: "grid", placeItems: "center", cursor: "pointer"
        }}>
        
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M2 5h12M2 11h12" stroke="var(--ink-deep)" strokeWidth="1.8" strokeLinecap="round" />
        </svg>
      </button>
    </div>);

}

function LogoMark({ variant = "brand", color = "var(--ink-mid)", accent = "#FBF7F4", size = 28 }) {
  const fill = color;

  if (variant === "brand") {
    return (
      <img
        src={LOGO_URL}
        width={size * 3}
        height={size}
        alt="LittleCareFund"
        style={{
          display: "block",
          objectFit: "contain",
          background: "transparent"
        }} />);


  }

  if (variant === "__brand_svg") {
    const ring = "#9A879D";
    const hand = "#9A879D";
    const heart = "#7A3B69";

    return (
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true">
        <circle cx="32" cy="32" r="28.5" stroke={ring} strokeWidth="2.4" fill="none" />
        <path d="M 11.2 28 C 10 36, 14 46, 24 50 C 27 51.2, 30 51.5, 31.6 51.5 L 31.6 47 C 27 46.5, 23 44.5, 20.5 41 C 18 37.5, 17 33.5, 17.6 29.5 C 18 26.8, 19 24.5, 20.4 22.5 C 18 22.5, 15.6 23.6, 13.8 25.4 C 12.4 26.2, 11.5 27, 11.2 28 Z" fill={hand} />
        <path d="M 52.8 28 C 54 36, 50 46, 40 50 C 37 51.2, 34 51.5, 32.4 51.5 L 32.4 47 C 37 46.5, 41 44.5, 43.5 41 C 46 37.5, 47 33.5, 46.4 29.5 C 46 26.8, 45 24.5, 43.6 22.5 C 46 22.5, 48.4 23.6, 50.2 25.4 C 51.6 26.2, 52.5 27, 52.8 28 Z" fill={hand} />
        <path d="M 32 38.4 C 24.5 33, 19.5 28.6, 19.5 23.5 C 19.5 19.4, 22.6 16.4, 26.4 16.4 C 28.8 16.4, 30.9 17.6, 32 19.4 C 33.1 17.6, 35.2 16.4, 37.6 16.4 C 41.4 16.4, 44.5 19.4, 44.5 23.5 C 44.5 28.6, 39.5 33, 32 38.4 Z" fill={heart} />
      </svg>);

  }

  const Heart = ({ cx = 16, cy = 12, s = 1, fillColor = fill }) => {
    const w = 5.5 * s,h = 5 * s;
    const tipY = cy + 5 * s;
    const lobeY = cy - h * 0.55;
    const d = `M${cx} ${tipY} C ${cx - w * 0.95} ${cy + 1.3 * s}, ${cx - w * 1.15} ${cy - 1.3 * s}, ${cx - w * 1.15} ${lobeY} C ${cx - w * 1.15} ${cy - h}, ${cx - w * 0.4} ${cy - h * 1.05}, ${cx} ${cy - h * 0.35} C ${cx + w * 0.4} ${cy - h * 1.05}, ${cx + w * 1.15} ${cy - h}, ${cx + w * 1.15} ${lobeY} C ${cx + w * 1.15} ${cy - 1.3 * s}, ${cx + w * 0.95} ${cy + 1.3 * s}, ${cx} ${tipY} Z`;
    return <path d={d} fill={fillColor} />;
  };

  if (variant === "bowl") {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        <Heart cx={16} cy={11} s={1} />
        <circle cx="13.8" cy="9.5" r="1" fill={accent} opacity="0.85" />
        <path d="M4.5 18 C 4.5 24.5, 10 28, 16 28 C 22 28, 27.5 24.5, 27.5 18" stroke={fill} strokeWidth="2.6" strokeLinecap="round" fill="none" />
      </svg>);

  }

  if (variant === "palms") {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        <Heart cx={16} cy={11} s={0.95} />
        <circle cx="13.9" cy="9.5" r="1" fill={accent} opacity="0.85" />
        <path d="M3.5 18 C 4.5 23.5, 9 26.5, 15.2 26.5 L 15.2 21.5 C 12 21.5, 9 19.5, 8 17" fill={fill} opacity="0.92" />
        <path d="M28.5 18 C 27.5 23.5, 23 26.5, 16.8 26.5 L 16.8 21.5 C 20 21.5, 23 19.5, 24 17" fill={fill} opacity="0.92" />
        <path d="M11.5 22 L 11.5 25.5 M 14 22.7 L 14 26.3 M 18 22.7 L 18 26.3 M 20.5 22 L 20.5 25.5" stroke={accent} strokeWidth="0.8" strokeLinecap="round" opacity="0.55" />
      </svg>);

  }

  if (variant === "lift") {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        <Heart cx={16} cy={13} s={1.05} />
        <circle cx="13.8" cy="11.5" r="1.1" fill={accent} opacity="0.85" />
        <path d="M2.5 26 C 5 19, 9 16, 14 17 C 14.6 18.6, 14.3 20.6, 13 21.8 C 11.2 23.4, 7.5 24.5, 5 27 Z" fill={fill} />
        <path d="M29.5 26 C 27 19, 23 16, 18 17 C 17.4 18.6, 17.7 20.6, 19 21.8 C 20.8 23.4, 24.5 24.5, 27 27 Z" fill={fill} />
      </svg>);

  }

  if (variant === "nest") {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        <Heart cx={16} cy={15} s={1.1} />
        <circle cx="13.7" cy="13.3" r="1.1" fill={accent} opacity="0.85" />
        <path d="M5 27 C 3 22, 3.5 17, 6 14 C 7.5 13, 9.2 13.5, 9.5 15 C 9.8 17, 8.5 19, 8 22 C 7.7 24, 8 26, 9 27.5 Z" fill={fill} />
        <path d="M27 27 C 29 22, 28.5 17, 26 14 C 24.5 13, 22.8 13.5, 22.5 15 C 22.2 17, 23.5 19, 24 22 C 24.3 24, 24 26, 23 27.5 Z" fill={fill} />
        <path d="M9 27.5 L 23 27.5" stroke={fill} strokeWidth="2.2" strokeLinecap="round" />
      </svg>);

  }

  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <Heart cx={16} cy={13} s={1} />
      <circle cx="13.8" cy="11.5" r="1.05" fill={accent} opacity="0.9" />
      <path d="M3 17 C 4 23, 9 27, 16 27 L 16 21.5 C 12 21, 8.5 19, 7.5 16 Z" fill={fill} />
      <path d="M29 17 C 28 23, 23 27, 16 27 L 16 21.5 C 20 21, 23.5 19, 24.5 16 Z" fill={fill} />
      <path d="M16 21.5 L 16 27" stroke={accent} strokeWidth="0.8" opacity="0.4" />
      <path d="M9 21 L 9.6 24 M 12 22.5 L 12.3 25.6 M 20 22.5 L 19.7 25.6 M 23 21 L 22.4 24" stroke={accent} strokeWidth="0.7" strokeLinecap="round" opacity="0.55" />
    </svg>);

}

function Logo({ color = "var(--ink-deep)", size = 1, variant, tagline = false, onDark = false }) {
  const v = variant || typeof window !== "undefined" && window.__logoVariant || "brand";
  const isBrand = v === "brand";
  const logoSrc = useLogoSrc();

  if (isBrand) {
    return (
      <img
        src={logoSrc}
        alt={
        tagline ?
        "LittleCareFund — Medical support for children" :
        "LittleCareFund"
        }
        style={{
            display: "block",
            height: (tagline ? 78 : 54) * size,
            width: "auto",
            maxWidth: "100%",
            objectFit: "contain",
          }} />);


  }

  const isOnDark = onDark || color === "#FBF7F4";
  const markColor = color === "var(--ink-deep)" ? "var(--ink-mid)" : color;

  const cLittle = isOnDark ? "#D6BFC6" : "var(--ink-mid)";
  const cCare = isOnDark ? "#FBF7F4" : "var(--ink-deep)";
  const cFund = isOnDark ? "#9A879D" : "var(--ink-soft)";
  const cTag = isOnDark ? "#9A879D" : "#9A879D";

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <LogoMark variant={v} color={markColor} accent={isOnDark ? "var(--ink-deep)" : "#FBF7F4"} size={32 * size} />
      <div style={{ display: "flex", flexDirection: "column", gap: 2, lineHeight: 1 }}>
        <span style={{
          fontFamily: "var(--font-sans)",
          fontSize: 17 * size,
          fontWeight: 600,
          letterSpacing: "-0.015em",
          lineHeight: 1
        }}>
          <span style={{ color: cLittle }}>Little</span>
          <span style={{ color: cCare }}>Care</span>
          <span style={{ color: cFund }}>Fund</span>
        </span>

        {tagline &&
        <span style={{
          fontFamily: "var(--font-sans)",
          fontSize: 9.5 * size,
          fontWeight: 500,
          color: cTag,
          letterSpacing: "0.04em",
          textTransform: "none"
        }}>
            Medical support for children
          </span>
        }
      </div>
    </div>);

}

function NavMenu({ open, onClose, onNavigate }) {
  const items = [
  { id: "home", label: "Home" },
  { id: "find", label: "Find a child" },
  { id: "stories", label: "Stories" },
  { id: "about", label: "About" },
  { id: "faq", label: "FAQ" }];


  return (
    <div
      className="mobile-nav-menu"
      style={{ position: "fixed", inset: 0, zIndex: 100, pointerEvents: open ? "auto" : "none" }}>
      
      <div
        onClick={onClose}
        style={{
          position: "absolute", inset: 0, background: "rgba(30,18,24,0.45)",
          opacity: open ? 1 : 0, transition: "opacity 0.25s ease"
        }} />
      

      <div style={{
        position: "absolute", top: 0, right: 0, bottom: 0, width: "84%",
        background: "var(--bg-1)",
        transform: open ? "translateX(0)" : "translateX(100%)",
        transition: "transform 0.32s cubic-bezier(.2,.8,.2,1)",
        display: "flex", flexDirection: "column", padding: "20px 22px",
        boxShadow: "-20px 0 60px rgba(0,0,0,0.18)"
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
          <Logo size={1.875} />

          <button
            onClick={onClose}
            aria-label="Close"
            style={{
              width: 36, height: 36, borderRadius: 999, border: 0, background: "rgba(255,255,255,0.7)",
              display: "grid", placeItems: "center", cursor: "pointer"
            }}>
            
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M3 3l10 10M13 3L3 13" stroke="var(--ink-deep)" strokeWidth="1.8" strokeLinecap="round" />
            </svg>
          </button>
        </div>

        <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {items.map((item, i) =>
          <button
            key={item.id}
            onClick={() => {
              onNavigate && onNavigate(item.id);
              onClose();
            }}
            style={{
              textAlign: "left", padding: "14px 0",
              background: "transparent", border: 0, cursor: "pointer",
              fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500,
              color: "var(--ink-deep)", letterSpacing: "-0.02em",
              borderBottom: i < items.length - 1 ? "1px solid var(--line)" : "none"
            }}>
            
              {item.label}
            </button>
          )}
        </nav>

        <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 10 }}>
          <button
            className="btn btn--primary btn--lg"
            onClick={() => {
              onNavigate && onNavigate("donate");
              onClose();
            }}>
            
            Donate now
          </button>

        </div>
      </div>
    </div>);

}

function Section({ children, bg, pad = 24, style = {} }) {
  return (
    <section style={{ padding: `${pad + 8}px ${pad}px`, background: bg || "transparent", ...style }}>
      {children}
    </section>);

}

function Footer({ onNavigate }) {
  const groups = [
  { title: "Help us", links: [["Donate", "donate"], ["Find a child", "find"]] },
  { title: "Trust", links: [["How it works", "how"], ["Verification process", "how"], ["Where every dollar goes", "how"]] },
  { title: "Org", links: [["About", "about"], ["Success stories", "stories"], ["FAQ", "faq"], ["Contact", "contact"]] }];


  return (
    <footer style={{ background: "var(--ink-deep)", color: "#EFE4E8", padding: "32px 24px 24px" }}>

      {/* logo + description — stacked row */}
      <div style={{ marginBottom: 28 }}>
        <div style={{ display: "inline-flex", background: "rgba(255,255,255,0.94)", borderRadius: 10, padding: "2px 6px", marginBottom: 14 }}>
          <Logo size={2.0} />
        </div>
        <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: "#D6BFC6" }}>
          littlecarefund.org is a childrens medical support initiative aimed at creating a reliable, trustworthy bridge between people who need help and people who want to give it.
        </p>
      </div>

      {/* 3-column link grid */}
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 28 }}>
        {groups.map((g) =>
          <div key={g.title}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", marginBottom: 8 }}>
              {g.title}
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 7 }}>
              {g.links.map(([label, id]) =>
                <li key={label}>
                  <button onClick={() => onNavigate && onNavigate(id)} style={{ background: "transparent", border: 0, padding: 0, cursor: "pointer", color: "#FBF7F4", fontSize: 13.5, fontFamily: "inherit", fontWeight: 500, textAlign: "left" }}>
                    {label}
                  </button>
                </li>
              )}
            </ul>
          </div>
        )}
      </div>

      <div style={{ paddingTop: 14, borderTop: "1px solid rgba(255,255,255,0.12)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 4 }}>
        <span style={{ fontSize: 12, color: "rgba(255,255,255,0.45)" }}>© 2026 littlecarefund.org</span>
        <span style={{ fontSize: 12, color: "rgba(255,255,255,0.45)" }}>Manila · Cebu · Davao</span>
      </div>
    </footer>);

}

Object.assign(window, {
  ProgressBar, Pill, VerifiedIcon, peso,
  CampaignCard, TopBar, NavMenu, Section, Footer, Logo, LogoMark
});