// Shared atoms: logo, marquee, markers, icons, placeholder
const { useState, useEffect, useRef, useMemo } = React;

// Logo using the real SVG asset. Variants:
//   "auto" — uses the gold SVG (works on any bg)
//   "mark" — small logomark only
const Logo = ({ height = 38, variant = "full", invert = false }) => {
  if (variant === "mark") {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", height }}>
        <svg height={height} viewBox="0 0 261 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="MaxWealth">
          <defs>
            <linearGradient id="mwMarkGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor="#FFD249"/>
              <stop offset="0.5" stopColor="#E8B321"/>
              <stop offset="1" stopColor="#B17129"/>
            </linearGradient>
          </defs>
          <path d="M29.32 156.251V173.001H0V131.211L29.32 156.251Z" fill="url(#mwMarkGrad)"/>
          <path d="M233.359 173H204.039V157.47L204.129 157.4L233.359 132.4V173Z" fill="url(#mwMarkGrad)"/>
          <path d="M240.14 56.26L231.22 46.13L230.74 45.58L230.51 45.32L230.13 45.65L141 121.09L155.11 133.09L233.36 66.85V106.78L233.27 106.85L155.11 173.02L117.41 141.11L79.71 173.02L0 105.55V65.55L79.71 133.02L94.03 120.9L0.0300293 41.31V1.38L117.65 100.93L210.02 22.74L210.42 22.4L210.29 22.27L197.39 9.42999L260.11 0L240.14 56.26Z" fill="url(#mwMarkGrad)"/>
        </svg>
      </div>
    );
  }
  return (
    <img
      src={`${window.__BASE || ""}assets/maxwealth-logo.svg`}
      alt="MaxWealth Investments"
      style={{
        height,
        width: "auto",
        display: "block",
        filter: invert ? "drop-shadow(0 0 0 transparent)" : undefined
      }}
    />
  );
};

const ArrowIcon = ({ size = 14, style }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none" style={style}>
    <path d="M3 11 L11 3 M11 3 H5 M11 3 V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
  </svg>
);

const Marker = ({ index, total, label }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
    <span className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--gold-500)" }}>
      {String(index).padStart(2, "0")} <span style={{ opacity: 0.45 }}>/ {String(total).padStart(2, "0")}</span>
    </span>
    <span style={{ width: 36, height: 1, background: "var(--gold-500)", opacity: 0.5 }}/>
    <span className="eyebrow" style={{ color: "inherit", opacity: 0.7 }}>{label}</span>
  </div>
);

// Ticker / marquee
const Marquee = ({ items, speed = 50, dark = false }) => {
  const arr = [...items, ...items, ...items];
  return (
    <div style={{ overflow: "hidden", borderTop: dark ? "1px solid var(--hairline-light)" : "1px solid var(--hairline)", borderBottom: dark ? "1px solid var(--hairline-light)" : "1px solid var(--hairline)", padding: "18px 0", background: dark ? "var(--green-900)" : "var(--cream)" }}>
      <div style={{ display: "flex", gap: 60, whiteSpace: "nowrap", animation: `mq ${speed}s linear infinite` }}>
        {arr.map((it, i) => (
          <span key={i} className="mono" style={{ fontSize: 12, letterSpacing: "0.14em", color: dark ? "var(--cream)" : "var(--ink)", opacity: 0.7, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 20 }}>
            {it} <span style={{ color: "var(--gold-500)" }}>✦</span>
          </span>
        ))}
      </div>
      <style>{`@keyframes mq { from { transform: translateX(0) } to { transform: translateX(-33.333%) } }`}</style>
    </div>
  );
};

// Placeholder image — supports either a real photo (with brand-tint overlay) or a striped fallback
const Placeholder = ({ aspect = "4 / 5", label, tone = "green", style = {}, image, imagePos = "center" }) => {
  const palettes = {
    green: { bg: "var(--green-700)", fg: "var(--gold-300)", stripe: "rgba(255,210,73,0.08)", tint: "rgba(10,58,42,0.55)" },
    "green-dark": { bg: "var(--green-900)", fg: "var(--gold-300)", stripe: "rgba(255,210,73,0.06)", tint: "rgba(5,36,26,0.65)" },
    cream: { bg: "var(--cream-2)", fg: "var(--green-800)", stripe: "rgba(10,58,42,0.06)", tint: "rgba(232,179,33,0.25)" },
    ink: { bg: "var(--ink)", fg: "var(--gold-300)", stripe: "rgba(255,210,73,0.06)", tint: "rgba(11,31,24,0.65)" },
  };
  const p = palettes[tone] || palettes.green;

  if (image) {
    return (
      <div style={{
        aspectRatio: aspect, width: "100%", position: "relative", overflow: "hidden",
        background: p.bg,
        ...style
      }}>
        <img src={image} alt={label || ""} loading="lazy"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: imagePos }}/>
        {/* Brand-color tint */}
        <div style={{
          position: "absolute", inset: 0,
          background: `linear-gradient(135deg, ${p.tint} 0%, ${p.tint.replace(/[\d.]+\)$/, "0.25)")} 100%)`,
          mixBlendMode: "multiply"
        }}/>
        {label && (
          <span className="mono" style={{
            position: "absolute", left: 18, bottom: 16,
            fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
            color: "rgba(255,255,255,0.85)", opacity: 0.9
          }}>{label}</span>
        )}
      </div>
    );
  }

  return (
    <div style={{
      aspectRatio: aspect, width: "100%", background: p.bg,
      backgroundImage: `repeating-linear-gradient(135deg, ${p.stripe} 0 1px, transparent 1px 14px)`,
      display: "flex", alignItems: "flex-end", padding: 18, color: p.fg,
      ...style
    }}>
      <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.85 }}>{label}</span>
    </div>
  );
};

Object.assign(window, { Logo, ArrowIcon, Marker, Marquee, Placeholder });