/* ============================================================
   visuals3.jsx — Chat preview · Course outline · Founder portrait · Avatars
   ============================================================ */

/* ---------- Member avatar — initials on subtle cream/graphite swatch ---------- */
function Avatar({ initials = "MM", size = 32, tone = "cream", style = {} }) {
  const palette = {
    cream: { bg: "#222220", fg: window.CREAM, ring: "rgba(255,250,238,0.18)" },
    gold: { bg: "#2a2410", fg: window.GOLD, ring: "rgba(235,207,0,0.45)" },
    graphite: { bg: "#1a1a1a", fg: "rgba(255,250,238,0.84)", ring: "rgba(255,250,238,0.14)" }
  }[tone] || {};
  return (
    <span style={{
      width: size, height: size,
      borderRadius: "50%",
      background: palette.bg,
      border: `1px solid ${palette.ring}`,
      color: palette.fg,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-text)",
      fontWeight: 600,
      fontSize: size * 0.36,
      lineHeight: 1,
      letterSpacing: "0.04em",
      textTransform: "uppercase",
      paddingTop: size * 0.04,
      flex: "0 0 auto",
      ...style
    }}>{initials}</span>);

}

/* ---------- Chat preview (live community) ---------- */
function ChatPreview({ preview = false } = {}) {
  // Moderator avatar — black circle, gold initial with a small "Mod" label,
  // matching the in-app moderator badge style.
  const ModAvatar = ({ size = 32, letter = "M" }) =>
    <span style={{
      position: "relative",
      width: size, height: size, borderRadius: "50%",
      background: "#0a0a0a",
      border: "1px solid rgba(235,207,0,0.32)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      flex: "0 0 auto", overflow: "hidden"
    }}>
      <span style={{
        fontFamily: "var(--font-display)", fontWeight: 700,
        fontSize: size * 0.5, lineHeight: 1, color: window.GOLD,
        letterSpacing: "-0.02em",
        transform: `translateY(${-size * 0.07}px)`
      }}>{letter}</span>
      <span style={{
        position: "absolute", left: 0, right: 0, bottom: size * 0.08,
        textAlign: "center",
        fontFamily: "var(--font-display)", fontStyle: "italic",
        fontSize: size * 0.24, lineHeight: 1,
        color: "rgba(235,207,0,0.92)"
      }}>Mod</span>
    </span>;

  // Reaction strip — mirrors the attached screenshot: a moderator "V" tile,
  // a solid black tile, two member photos, plus letter/emoji reactions.
  const reactions = [
    { tone: "#0a0a0a", img: "assets/mod-v.jpg", emoji: "❤" },
    { tone: "#0a0a0a", fg: window.CREAM, emoji: "🔥" },
    { tone: "#1c1c1c", fg: window.CREAM, photo: "ski", emoji: "❤" },
    { tone: "#d11f4a", fg: "#ffffff",    letter: "O", emoji: "🔥" },
    { tone: "#0a0a0a", logo: true, emoji: "💯" },
    { tone: "#6b7785", fg: "#ffffff",    letter: "A", emoji: "❤" },
    { tone: "#2f4f7a", fg: window.CREAM, photo: "man", emoji: "❤" },
  ];

  // Reply thread
  const replies = [
    {
      name: "Ollie", time: "2 min ago",
      initial: "O", tone: "#c83a4a",
      body: "GOAT 🐐",
      heart: 1
    },
    {
      name: "Ahmed", time: "1 min ago",
      initial: "A", tone: "#c83a4a",
      body: "thats the best feeling, no longer waiting for caps buys and trusting yourself",
      heart: 1
    },
    {
      name: "Mitchell", time: "1 min ago",
      moderator: true,
      initial: "M", tone: "#1a1a1a",
      body: "Thank you Kyle and great to see. You've been putting in the work and its well deserved",
      heart: 2
    }
  ];

  // The post author — Kyle Knaus, with his green crest avatar.
  const KyleAvatar = ({ size = 40 }) =>
    <span style={{
      width: size, height: size, borderRadius: "50%",
      background: "#0a0a0a",
      border: "1px solid rgba(255,250,238,0.10)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      flex: "0 0 auto", overflow: "hidden"
    }}>
      <img src="assets/kyle-avatar.png" alt="Kyle Knaus"
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </span>;

  return (
    <div style={{
      display: "flex", flexDirection: "column", gap: 0,
      fontFamily: "var(--font-text)",
      color: window.CREAM
    }}>
      {/* === Post header === */}
      <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
        <KyleAvatar size={40} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
            <span style={{ fontWeight: 700, fontSize: 14.5 }}>Kyle Knaus</span>
          </div>
          <div style={{ color: window.CREAM_FAINT, fontSize: 11.5, marginTop: 2, fontFamily: "var(--font-mono)" }}>
            May 22, 2026 · 4:09 PM
          </div>
        </div>
      </div>

      {/* post body */}
      <div style={{ marginTop: 12, fontSize: 14.5, lineHeight: 1.55, color: "rgba(255,250,238,0.92)" }}>
        Cap and mods, thank you for all the educational material here by the way. I'm at the point
        here where I've been able to add three positions in the last month not covered in the group
        and do all the work for fundamentals &amp; technicals and make money on them. The little
        bird has finally been able to leave the nest.
      </div>

      {/* reactions strip */}
      <div style={{
        marginTop: 14, paddingTop: 12, paddingBottom: 12,
        borderTop: "1px solid rgba(255,250,238,0.06)",
        borderBottom: "1px solid rgba(255,250,238,0.06)",
        display: "flex", alignItems: "center", gap: 4, overflow: "hidden"
      }}>
        {reactions.map((r, i) =>
          <div key={i} style={{ position: "relative", flex: "0 0 auto" }}>
            {r.photo
              ? <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: r.photo === "ski"
                    ? "linear-gradient(160deg,#d3dde7 0%,#8ea3b6 55%,#607486 100%)"
                    : "linear-gradient(160deg,#3f648f 0%,#26425f 100%)",
                  border: "1px solid rgba(255,250,238,0.10)",
                  display: "inline-flex", alignItems: "flex-end", justifyContent: "center",
                  overflow: "hidden"
                }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="rgba(0,0,0,0.32)">
                    <circle cx="12" cy="9" r="3.4"/>
                    <path d="M5 21c0-3.9 3.1-7 7-7s7 3.1 7 7z"/>
                  </svg>
                </span>
              : r.img
              ? <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: "#0a0a0a",
                  border: "1px solid rgba(235,207,0,0.30)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  overflow: "hidden", flex: "0 0 auto"
                }}>
                  <img src={r.img} alt="Moderator"
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </span>
              : r.logo
              ? <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: "#0a0a0a",
                  border: "1px solid rgba(235,207,0,0.30)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  overflow: "hidden", flex: "0 0 auto"
                }}>
                  <img src="assets/tli-symbol.svg" alt="TLI"
                    style={{ width: "62%", height: "62%", objectFit: "contain", display: "block" }} />
                </span>
              : <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: r.tone, color: r.fg,
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontWeight: 700, fontSize: r.glyph && r.glyph.length > 1 ? 8 : 12,
                  letterSpacing: "0.02em",
                  border: "1px solid rgba(255,250,238,0.08)"
                }}>{r.letter || r.glyph}</span>
            }
            {r.badge &&
              <span style={{
                position: "absolute", left: -2, bottom: -3,
                fontSize: 7, letterSpacing: "0.08em",
                color: window.CREAM_FAINT,
                fontFamily: "var(--font-mono)",
                background: "#0a0a0a",
                padding: "0 2px",
                borderRadius: 2
              }}>{r.badge}</span>
            }
            {r.emoji &&
              <span style={{
                position: "absolute", right: -3, bottom: -3,
                width: 14, height: 14, borderRadius: "50%",
                background: "#0a0a0a",
                border: "1px solid rgba(255,250,238,0.12)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 8
              }}>{r.emoji}</span>
            }
          </div>
        )}
      </div>

      {/* replies header */}
      {!preview && <React.Fragment>
      <div style={{
        marginTop: 14, marginBottom: 10,
        fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase",
        color: window.GOLD, fontWeight: 600
      }}>8 replies</div>

      {/* replies list */}
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {replies.map((r, i) =>
          <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
            {r.moderator
              ? <span style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: "#0a0a0a",
                  border: "1px solid rgba(235,207,0,0.30)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  overflow: "hidden", flex: "0 0 auto"
                }}>
                  <img src="assets/mod-m.jpg" alt="Mitchell — Moderator"
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </span>
              : <span style={{
                  width: 32, height: 32, borderRadius: "50%",
                  background: r.tone, color: window.CREAM,
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontWeight: 700, fontSize: 13,
                  border: "1px solid rgba(255,250,238,0.10)",
                  flex: "0 0 auto"
                }}>{r.initial}</span>
            }
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
                <span style={{ fontWeight: 600, fontSize: 13, color: window.CREAM }}>{r.name}</span>
                {r.moderator &&
                  <span style={{ fontSize: 8.5, letterSpacing: "0.14em", textTransform: "uppercase",
                    color: "rgba(255,250,238,0.94)", fontWeight: 700,
                    background: "rgba(255,250,238,0.16)",
                    padding: "2px 6px", borderRadius: 4 }}>Moderator</span>
                }
                <span style={{ color: window.CREAM_FAINT, fontSize: 11, fontFamily: "var(--font-mono)" }}>· {r.time}</span>
              </div>
              <div style={{
                marginTop: 4,
                display: "inline-block",
                background: "rgba(255,250,238,0.04)",
                border: "1px solid rgba(255,250,238,0.06)",
                borderRadius: 8,
                padding: "8px 12px",
                fontSize: 13.5, lineHeight: 1.5,
                color: "rgba(255,250,238,0.88)",
                maxWidth: "100%"
              }}>{r.body}</div>
              {r.heart > 0 &&
                <div style={{
                  marginTop: 6,
                  display: "inline-flex", alignItems: "center", gap: 4,
                  background: "rgba(255,250,238,0.04)",
                  border: "1px solid rgba(255,250,238,0.06)",
                  borderRadius: 999,
                  padding: "2px 8px 2px 6px",
                  fontSize: 11, color: window.CREAM_FAINT
                }}>
                  <span style={{ fontSize: 11 }}>❤</span>
                  {r.heart > 1 && <span>{r.heart}</span>}
                </div>
              }
            </div>
          </div>
        )}
      </div>
      </React.Fragment>}
    </div>);

}

/* ---------- Course outline (Elliott Wave) ---------- */
function CourseOutline() {
  return (
    <div style={{
      width: "100%", height: "100%",
      display: "flex", alignItems: "center", justifyContent: "center",
      overflow: "hidden"
    }}>
      <img
        src="assets/edu-collections.png"
        alt="TLI Education collections — Safe Haven, Elliott Wave Theory Course, The Learning Centre, Lessons"
        style={{
          display: "block",
          maxWidth: "100%",
          maxHeight: "100%",
          width: "auto",
          height: "auto",
          objectFit: "contain",
          borderRadius: 2
        }} />
    </div>);
}

function _CourseOutlineUNUSED() {
  const chapters = [
  ["01", "Foundations: impulse vs corrective"],
  ["02", "Counting the five-wave structure"],
  ["03", "Corrections: zigzags, flats, triangles"],
  ["04", "Fibonacci ratios in practice"],
  ["05", "Invalidation: when the count is wrong"],
  ["06", "Live application on real tickers"]];

  return (
    <div style={{ fontFamily: "var(--font-text)", color: window.CREAM }}>
      <div style={{
        fontSize: 10.5, fontWeight: 600,
        letterSpacing: "0.28em", color: window.GOLD,
        marginBottom: 12
      }}>ELLIOTT WAVE COURSE</div>
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 500,
        fontSize: 28, lineHeight: 1.08,
        marginBottom: 14
      }}>The framework, end to end.</div>
      <div style={{
        height: 2, width: 56,
        background: window.GOLD,
        marginBottom: 24
      }} />

      <div style={{ display: "flex", flexDirection: "column" }}>
        {chapters.map(([n, t], i) =>
        <div key={n} style={{
          display: "grid",
          gridTemplateColumns: "44px 1fr auto",
          alignItems: "center",
          padding: "13px 0",
          gap: 12,
          borderTop: i === 0 ? "1px solid rgba(255,250,238,0.10)" : "none",
          borderBottom: "1px solid rgba(255,250,238,0.10)"
        }}>
            <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11, color: window.GOLD,
            letterSpacing: "0.04em"
          }}>{n}</span>
            <span style={{ fontSize: 14, color: window.CREAM }}>{t}</span>
            <span style={{
            fontSize: 11, color: window.CREAM_FAINT,
            fontFamily: "var(--font-mono)"
          }}>{[20, 32, 28, 24, 36, 60][i]} min</span>
          </div>
        )}
      </div>

      <div style={{
        display: "flex", justifyContent: "space-between",
        marginTop: 16,
        fontSize: 11, letterSpacing: "0.16em",
        textTransform: "uppercase",
        color: window.CREAM_FAINT
      }}>
        <span>12 lessons · 3h 40m</span>
        <span>SELF-PACED</span>
      </div>
    </div>);

}

/* ---------- Founder portrait placeholder ---------- */
function FounderPortrait() {
  // SVG silhouette portrait — restrained, photo-like placeholder
  return (
    <div style={{
      width: "100%",
      aspectRatio: "4/5",
      background:
      "radial-gradient(120% 80% at 30% 0%, #2a2620 0%, #14110d 60%, #0a0907 100%)",
      border: "1px solid rgba(255,250,238,0.10)",
      borderRadius: 4,
      position: "relative",
      overflow: "hidden"
    }}>
      <svg viewBox="0 0 320 400" preserveAspectRatio="xMidYMax meet"
      style={{ width: "100%", height: "100%", display: "block" }}>
        {/* very subtle paper grain via dot pattern */}
        <defs>
          <pattern id="grain" width="3" height="3" patternUnits="userSpaceOnUse">
            <rect width="3" height="3" fill="transparent" />
            <circle cx="1.5" cy="1.5" r="0.4" fill="rgba(255,250,238,0.03)" />
          </pattern>
        </defs>
        <rect width="320" height="400" fill="url(#grain)" />

        {/* shoulders */}
        <path d="M 30 400 C 60 320 110 290 160 290 C 210 290 260 320 290 400 Z"
        fill="#1a1814" />
        {/* shirt collar */}
        <path d="M 130 310 L 160 340 L 190 310 L 200 360 L 120 360 Z"
        fill="#272320" stroke="rgba(255,250,238,0.06)" />
        {/* neck */}
        <path d="M 140 290 L 180 290 L 178 270 L 142 270 Z"
        fill="#322a22" />
        {/* head shape */}
        <ellipse cx="160" cy="200" rx="68" ry="80" fill="#3a3027" />
        {/* hair */}
        <path d="M 92 192 C 92 132 120 110 160 110 C 200 110 228 134 228 192 C 222 168 212 152 196 144 C 200 134 188 122 168 124 C 152 108 124 118 116 138 C 100 148 92 168 92 192 Z"
        fill="#1d1812" />
        {/* light side */}
        <ellipse cx="180" cy="200" rx="38" ry="66" fill="#473a2d" opacity="0.6" />
        {/* shadow side */}
        <ellipse cx="138" cy="208" rx="34" ry="62" fill="#241e16" opacity="0.65" />
        {/* cheekbone highlight */}
        <ellipse cx="186" cy="220" rx="14" ry="22" fill="rgba(255,228,180,0.10)" />
        {/* eye sockets — kept dim */}
        <ellipse cx="142" cy="194" rx="9" ry="4" fill="#0c0a07" />
        <ellipse cx="180" cy="194" rx="9" ry="4" fill="#0c0a07" />
        {/* nose shadow */}
        <path d="M 161 200 L 158 232 L 167 232 Z" fill="#241e16" />
        {/* mouth */}
        <path d="M 148 252 Q 162 260 178 252" fill="none" stroke="#1a140d" strokeWidth="2.2" strokeLinecap="round" />
        {/* jaw shadow */}
        <path d="M 100 250 Q 160 320 222 250 L 220 270 Q 160 330 102 270 Z"
        fill="#1a140d" opacity="0.55" />
      </svg>

      {/* corner caption */}
      <div style={{
        position: "absolute", bottom: 12, left: 14,
        fontSize: 10, letterSpacing: "0.22em",
        textTransform: "uppercase",
        color: "rgba(255,250,238,0.55)",
        fontFamily: "var(--font-text)"
      }}>FOUNDER · TLI</div>
    </div>);

}

window.Avatar = Avatar;
window.ChatPreview = ChatPreview;
window.CourseOutline = CourseOutline;
window.FounderPortrait = FounderPortrait;