// Welcome / hero landing page — dismissed on click, scroll, or key press

function WelcomeOverlay({ onDismiss }) {
  const [leaving, setLeaving] = useState(false);
  const dismissed = useRef(false);
  const [authed, setAuthed] = useState(!!window.OCMS_USER);

  useEffect(() => {
    if (authed) return;
    const handler = () => setAuthed(true);
    window.addEventListener('ocms:user-ready', handler);
    return () => window.removeEventListener('ocms:user-ready', handler);
  }, []);

  const dismiss = () => {
    if (!authed) return;
    if (dismissed.current) return;
    dismissed.current = true;
    setLeaving(true);
    setTimeout(onDismiss, 480);
  };

  useEffect(() => {
    const onKey = (e) => {
      if (["Escape", " ", "Enter", "ArrowDown", "PageDown"].includes(e.key)) dismiss();
    };
    const onWheel = (e) => { if (Math.abs(e.deltaY) > 4) dismiss(); };
    const onTouch = () => dismiss();
    window.addEventListener("keydown", onKey);
    window.addEventListener("wheel", onWheel, { passive: true });
    window.addEventListener("touchmove", onTouch, { passive: true });
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("wheel", onWheel);
      window.removeEventListener("touchmove", onTouch);
    };
  }, []);

  return (
    <div
      onClick={dismiss}
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        background: "#0B1E33",
        color: "#e6edf5",
        overflow: "hidden",
        cursor: authed ? "pointer" : "default",
        opacity: leaving ? 0 : 1,
        transform: leaving ? "scale(1.02)" : "scale(1)",
        transition: "opacity 0.45s ease, transform 0.45s ease",
        fontFamily: "'Maersk Text', sans-serif",
      }}
    >
      {/* Background — grid + gradient + grain */}
      <BackgroundLayer />
      {/* Animated abstract APA terminal map */}
      <TerminalMap />

      {/* Top bar */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0,
        padding: "22px 36px",
        display: "flex", alignItems: "center",
        animation: "wFadeDown 0.7s ease 0.15s both",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{
            width: 36, height: 36,
            display: "grid", placeItems: "center",
          }}>
            <img src="favicon.ico" alt="TCS" width="28" height="28" style={{ objectFit: "contain" }} />
          </div>
          <div style={{ lineHeight: 1.1 }}>
            <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: 0.02 }}>TCS</div>
            <div style={{ fontSize: 10, color: "#7ea0c0", fontFamily: "'Maersk Text', sans-serif", letterSpacing: 0.1, textTransform: "uppercase" }}>Ocean Procurement</div>
          </div>
        </div>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 22, fontSize: 11, color: "#7ea0c0", fontFamily: "'Maersk Text', sans-serif", letterSpacing: 0.08, textTransform: "uppercase" }}>
          <span>v1.1.0</span>
          <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: 50, background: "#5fd99b", animation: "wPulseDot 1.6s ease-in-out infinite" }} />
            Live · {new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
          </span>
          <span>Confidential</span>
        </div>
      </div>

      {/* Body — split left content / right map */}
      <div style={{
        position: "absolute",
        inset: "88px 36px 88px 36px",
        display: "grid",
        gridTemplateColumns: "1.1fr 0.9fr",
        gap: 60,
        alignItems: "center",
      }}>
        {/* LEFT — copy */}
        <div>
          {/* Title */}
          <h1 style={{
            fontFamily: "'Maersk Headline', sans-serif",
            fontWeight: 400,
            fontSize: "clamp(40px, 5.6vw, 76px)",
            letterSpacing: "-0.025em",
            lineHeight: 1.02,
            margin: "0 0 18px",
            color: "#f0f4f8",
          }}>
            <span style={{ display: "block", animation: "wFadeUp 0.85s ease 0.45s both" }}>
              Terminal Cost
            </span>
            <span style={{
              display: "block",
              background: "linear-gradient(90deg, #cfe0f2 0%, #80d1de 70%, #5fd1a8 100%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              animation: "wFadeUp 0.85s ease 0.6s both",
            }}>
              Simulation System
            </span>
          </h1>

          <p style={{
            maxWidth: 520,
            fontSize: 17,
            lineHeight: 1.55,
            color: "#9fb5cc",
            fontWeight: 300,
            margin: "0 0 36px",
            animation: "wFadeUp 0.85s ease 0.85s both",
          }}>
            As part of our standardization and simplification initiative, we are pleased
            to roll out the new Terminal Cost Simulation system. Built on CYB and CYM
            data from Rateflow, it serves as the single source of truth for terminal
            contracts and rates — enhancing data consistency and accuracy across APA.
          </p>

          {/* Module illustration row */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 14,
            paddingTop: 24,
            borderTop: "1px solid rgba(159, 181, 204, 0.18)",
            animation: "wFadeUp 0.85s ease 1.05s both",
          }}>
            <ModuleGlyph label="Contract Filing"  delay={0}>{glyphContract}</ModuleGlyph>
            <ModuleGlyph label="Rate Calculator" delay={120}>{glyphCalculator}</ModuleGlyph>
            <ModuleGlyph label="Rate Health"     delay={240}>{glyphHealth}</ModuleGlyph>
            <ModuleGlyph label="TCO Analysis"    delay={360}>{glyphTCO}</ModuleGlyph>
          </div>

        </div>

        {/* RIGHT — visual hero */}
        <div style={{ position: "relative", height: "100%", animation: "wFadeIn 1.4s ease 0.6s both" }} />
      </div>

      {/* Bottom CTA */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0,
        padding: "26px 36px",
        display: "flex",
        alignItems: "center",
        animation: "wFadeUp 0.7s ease 1.45s both",
      }}>
        {authed ? (
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <div style={{
              width: 38, height: 38, borderRadius: 50,
              border: "1.5px solid rgba(207, 224, 242, 0.5)",
              display: "grid", placeItems: "center",
              animation: "wPulse 2.4s ease-in-out infinite",
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#cfe0f2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 5v14M5 12l7 7 7-7" />
              </svg>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500, color: "#e6edf5" }}>Click, scroll, or press any key to enter</div>
              <div style={{ fontSize: 11, color: "#7ea0c0", fontFamily: "'Maersk Text', sans-serif", letterSpacing: 0.08, marginTop: 2 }}>Authenticated via Maersk SSO · session 8h</div>
            </div>
          </div>
        ) : (
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{
              width: 7, height: 7, borderRadius: "50%", flexShrink: 0,
              background: "#14a3bd",
              animation: "wPulseDot 1.2s ease-in-out infinite",
            }} />
            <span style={{ fontSize: 13, color: "#7ea0c0", fontFamily: "'Maersk Text', sans-serif", letterSpacing: "0.04em" }}>
              Authenticating via Maersk SSO…
            </span>
          </div>
        )}

      </div>

      {/* Keyframes */}
      <style>{`
        @keyframes wFadeUp {
          from { opacity: 0; transform: translateY(14px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes wFadeDown {
          from { opacity: 0; transform: translateY(-8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes wFadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes wPulse {
          0%, 100% { transform: scale(1); opacity: 0.85; }
          50% { transform: scale(1.08); opacity: 1; }
        }
        @keyframes wPulseDot {
          0%, 100% { opacity: 0.45; box-shadow: 0 0 0 0 rgba(95, 217, 155, 0.6); }
          50% { opacity: 1; box-shadow: 0 0 0 6px rgba(95, 217, 155, 0); }
        }
        @keyframes wDrawArc {
          from { stroke-dashoffset: 1000; opacity: 0; }
          20% { opacity: 0.7; }
          to { stroke-dashoffset: 0; opacity: 0; }
        }
        @keyframes wDotPop {
          from { opacity: 0; transform: scale(0); }
          to { opacity: 1; transform: scale(1); }
        }
        @keyframes wDotPulse {
          0%, 100% { r: 3; opacity: 0.85; }
          50% { r: 4.5; opacity: 1; }
        }
        @keyframes wTickerScroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        @keyframes wDrawIn {
          from { opacity: 0; transform: scale(0.94); }
          to { opacity: 1; transform: scale(1); }
        }
      `}</style>
    </div>
  );
}

function BackgroundLayer() {
  return (
    <>
      {/* Radial gradient */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 80% 60% at 78% 50%, rgba(20, 163, 189, 0.14), transparent 60%), radial-gradient(ellipse 60% 40% at 15% 100%, rgba(31, 111, 92, 0.10), transparent 60%)",
        pointerEvents: "none",
      }} />
      {/* Grid */}
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.08, pointerEvents: "none" }}>
        <defs>
          <pattern id="welcomeGrid" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M 48 0 L 0 0 0 48" fill="none" stroke="#a8bdd2" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#welcomeGrid)" />
      </svg>
      {/* Subtle horizon line */}
      <div style={{
        position: "absolute", left: 0, right: 0, top: "50%",
        height: 1, background: "linear-gradient(90deg, transparent, rgba(159, 181, 204, 0.15), transparent)",
        pointerEvents: "none",
      }} />
    </>
  );
}

// Abstract APA terminal map — animated dots + connecting arcs
function TerminalMap() {
  // Pseudo-coords (right-half of viewport)
  const dots = [
    { x: 78, y: 18, l: "CNTSN", region: "NA" },   // Tianjin
    { x: 82, y: 24, l: "CNSHA", region: "NA" },   // Shanghai
    { x: 80, y: 28, l: "CNNGB", region: "NA" },   // Ningbo
    { x: 86, y: 33, l: "CNTAO", region: "NA" },   // (offset)
    { x: 92, y: 22, l: "JPYOK", region: "NA" },   // Yokohama
    { x: 89, y: 17, l: "KRPUS", region: "NA" },   // Busan
    { x: 88, y: 39, l: "HKHKG", region: "NA" },   // Hong Kong
    { x: 84, y: 42, l: "CNYTN", region: "NA" },   // Shenzhen
    { x: 75, y: 56, l: "VNSGN", region: "SEA" },  // Ho Chi Minh
    { x: 70, y: 62, l: "MYPKG", region: "SEA" },  // Port Klang
    { x: 78, y: 68, l: "SGSIN", region: "SEA" },  // Singapore
    { x: 80, y: 73, l: "IDJKT", region: "SEA" },  // Jakarta
    { x: 60, y: 50, l: "INNSA", region: "SA" },   // India
    { x: 56, y: 56, l: "INMUN", region: "SA" },   // Mundra
    { x: 88, y: 86, l: "AUSYD", region: "OCE" },  // Sydney
    { x: 84, y: 84, l: "AUMEL", region: "OCE" },  // Melbourne
    { x: 96, y: 88, l: "NZAKL", region: "OCE" },  // Auckland
  ];

  const regionColor = {
    NA:  "#14a3bd",
    SEA: "#5fd1a8",
    SA:  "#d8a83a",
    OCE: "#b07cd4",
  };

  // Arcs to animate (pairs of indices)
  const arcs = [
    [1, 10], [2, 8], [10, 14], [12, 1], [5, 10], [1, 14],
    [8, 12], [4, 9], [0, 6], [11, 14], [13, 11],
  ];

  return (
    <svg
      viewBox="0 0 100 100"
      preserveAspectRatio="xMaxYMid meet"
      style={{
        position: "absolute",
        right: 0, top: 0, bottom: 0,
        width: "60%", height: "100%",
        pointerEvents: "none",
      }}
    >
      {/* Faint outline contours suggesting coastline */}
      <g opacity="0.18">
        <path
          d="M 50 10 Q 60 18 70 16 T 90 22 Q 98 30 96 42 Q 92 56 86 64 T 82 80 Q 90 90 96 92"
          fill="none" stroke="#9fb5cc" strokeWidth="0.18" strokeDasharray="0.6 0.4"
        />
        <path
          d="M 52 48 Q 58 52 62 56 T 68 64 Q 70 72 76 78"
          fill="none" stroke="#9fb5cc" strokeWidth="0.18" strokeDasharray="0.6 0.4"
        />
      </g>

      {/* Animated arcs (great-circle-ish curves between dots) */}
      {arcs.map(([a, b], i) => {
        const A = dots[a], B = dots[b];
        const mx = (A.x + B.x) / 2;
        const my = (A.y + B.y) / 2;
        // Lift control point perpendicular to AB
        const dx = B.x - A.x, dy = B.y - A.y;
        const len = Math.hypot(dx, dy);
        const ox = -dy / len * len * 0.18;
        const oy =  dx / len * len * 0.18;
        const cx = mx + ox, cy = my - Math.abs(oy);
        return (
          <path
            key={i}
            d={`M ${A.x} ${A.y} Q ${cx} ${cy} ${B.x} ${B.y}`}
            fill="none"
            stroke={regionColor[A.region]}
            strokeWidth="0.22"
            strokeLinecap="round"
            strokeDasharray="100 100"
            opacity="0"
            style={{
              animation: `wDrawArc 4.5s ease-in-out ${1.4 + i * 0.45}s infinite`,
            }}
          />
        );
      })}

      {/* Dots with subtle pulse */}
      {dots.map((d, i) => (
        <g key={i} style={{
          transformOrigin: `${d.x}px ${d.y}px`,
          animation: `wDotPop 0.6s ease ${1.2 + i * 0.05}s both`,
        }}>
          <circle cx={d.x} cy={d.y} r="1.2" fill={regionColor[d.region]} opacity="0.25">
            <animate attributeName="r" values="1.2;2.6;1.2" dur={`${2.4 + (i % 5) * 0.4}s`} repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.35;0;0.35" dur={`${2.4 + (i % 5) * 0.4}s`} repeatCount="indefinite" />
          </circle>
          <circle cx={d.x} cy={d.y} r="0.7" fill={regionColor[d.region]} />
        </g>
      ))}
    </svg>
  );
}

function ModuleGlyph({ label, delay, children }) {
  return (
    <div style={{
      display: "flex", flexDirection: "column", gap: 10,
      animation: `wFadeUp 0.7s ease ${1.15 + delay / 1000}s both`,
    }}>
      <div style={{
        position: "relative",
        height: 92,
        borderRadius: 8,
        background: "linear-gradient(180deg, rgba(20, 163, 189, 0.06), rgba(20, 163, 189, 0.02))",
        border: "1px solid rgba(159, 181, 204, 0.14)",
        overflow: "hidden",
        display: "grid",
        placeItems: "center",
      }}>
        {children}
      </div>
      <div style={{
        fontSize: 10.5,
        fontFamily: "'Maersk Text', sans-serif",
        letterSpacing: 0.08,
        textTransform: "uppercase",
        color: "#9fb5cc",
        textAlign: "center",
      }}>{label}</div>
    </div>
  );
}

// ============== MODULE GLYPHS ==============
const glyphStroke = "#cfe0f2";
const glyphAccent = "#80d1de";
const glyphMint   = "#5fd1a8";

// Contract Management — a document with a clause underline + stamp seal
const glyphContract = (
  <svg viewBox="0 0 100 70" width="80" height="56" fill="none">
    <rect x="16" y="8" width="44" height="56" rx="2"
      fill="rgba(207, 224, 242, 0.04)"
      stroke={glyphStroke} strokeWidth="1.2"
      style={{ animation: "wDrawIn 1.2s ease both" }}
    />
    <path d="M 50 8 L 60 18 L 50 18 Z" fill="rgba(207, 224, 242, 0.12)" stroke={glyphStroke} strokeWidth="1" />
    <line x1="22" y1="22" x2="44" y2="22" stroke={glyphStroke} strokeWidth="1" strokeLinecap="round" opacity="0.55" />
    <line x1="22" y1="28" x2="52" y2="28" stroke={glyphStroke} strokeWidth="1" strokeLinecap="round" opacity="0.55" />
    <line x1="22" y1="34" x2="40" y2="34" stroke={glyphStroke} strokeWidth="1" strokeLinecap="round" opacity="0.55" />
    <rect x="21" y="40" width="34" height="5" fill={glyphAccent} opacity="0.18" rx="1">
      <animate attributeName="opacity" values="0.05;0.32;0.05" dur="3.2s" repeatCount="indefinite" />
    </rect>
    <line x1="22" y1="42.5" x2="50" y2="42.5" stroke={glyphAccent} strokeWidth="1.4" strokeLinecap="round" />
    <line x1="22" y1="50" x2="48" y2="50" stroke={glyphStroke} strokeWidth="1" strokeLinecap="round" opacity="0.55" />
    <line x1="22" y1="56" x2="36" y2="56" stroke={glyphStroke} strokeWidth="1" strokeLinecap="round" opacity="0.55" />
    <g transform="translate(74 44)">
      <circle r="11" fill="none" stroke={glyphMint} strokeWidth="1.2" strokeDasharray="2 1.4" opacity="0.85">
        <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="14s" repeatCount="indefinite" />
      </circle>
      <circle r="7" fill="none" stroke={glyphMint} strokeWidth="1" opacity="0.7" />
      <path d="M -3.5 0 L -1 2.5 L 4 -2.5" stroke={glyphMint} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </g>
  </svg>
);

// Calculator — keypad grid with active key + result tape
const glyphCalculator = (
  <svg viewBox="0 0 100 70" width="80" height="56" fill="none">
    <rect x="22" y="6" width="44" height="58" rx="4"
      fill="rgba(207, 224, 242, 0.04)"
      stroke={glyphStroke} strokeWidth="1.2"
    />
    <rect x="26" y="10" width="36" height="12" rx="1.5" fill="rgba(20, 163, 189, 0.18)" stroke={glyphAccent} strokeWidth="0.8" />
    <g fontFamily="'Maersk Text', sans-serif" fontSize="6.5" fill={glyphAccent} textAnchor="end">
      <text x="59" y="19">
        <tspan>$ </tspan>
        <tspan>
          1,
          <animate attributeName="opacity" values="0;1;1;0" dur="3.6s" repeatCount="indefinite" keyTimes="0;0.2;0.8;1" />
        </tspan>
        <tspan>284</tspan>
      </text>
    </g>
    {Array.from({ length: 4 }).map((_, r) =>
      Array.from({ length: 3 }).map((_, c) => {
        const active = (r === 2 && c === 1);
        return (
          <rect key={`${r}-${c}`}
            x={27 + c * 11.2}
            y={26 + r * 9}
            width="9.4" height="7.2" rx="1"
            fill={active ? glyphAccent : "rgba(207, 224, 242, 0.08)"}
            stroke={glyphStroke} strokeWidth="0.6"
            opacity={active ? 1 : 0.85}>
            {active && <animate attributeName="opacity" values="0.4;1;0.4" dur="1.6s" repeatCount="indefinite" />}
          </rect>
        );
      })
    )}
    <circle cx="74" cy="46" r="2.6" fill={glyphMint}>
      <animate attributeName="r" values="2;3.4;2" dur="1.8s" repeatCount="indefinite" />
    </circle>
    <path d="M 16 16 l 4 0 M 16 20 l 4 0" stroke={glyphStroke} strokeWidth="1" strokeLinecap="round" opacity="0.5" />
  </svg>
);

// Rate Health — shield outline + EKG pulse line + status dots
const glyphHealth = (
  <svg viewBox="0 0 100 70" width="80" height="56" fill="none">
    {/* Shield */}
    <path
      d="M50 8 L72 18 L72 38 C72 52 50 62 50 62 C50 62 28 52 28 38 L28 18 Z"
      fill="rgba(128, 209, 222, 0.07)"
      stroke={glyphAccent} strokeWidth="1.3" strokeLinejoin="round"
      strokeDasharray="120" strokeDashoffset="120"
    >
      <animate attributeName="stroke-dashoffset" from="120" to="0" dur="1.1s" begin="0.1s" fill="freeze" />
    </path>
    {/* EKG pulse line across shield */}
    <polyline
      points="30,38 37,38 40,30 44,46 48,26 52,50 56,38 70,38"
      fill="none" stroke={glyphMint} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
      strokeDasharray="80" strokeDashoffset="80"
    >
      <animate attributeName="stroke-dashoffset" from="80" to="0" dur="1.2s" begin="0.9s" fill="freeze" />
    </polyline>
    {/* Pulsing dot at end of line */}
    <circle cx="70" cy="38" r="2" fill={glyphMint} opacity="0">
      <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="2s" fill="freeze" />
      <animate attributeName="r" values="2;3.5;2" dur="1.8s" begin="2.1s" repeatCount="indefinite" />
    </circle>
    {/* Status dots — present / expiring / missing */}
    <circle cx="20" cy="20" r="3.5" fill={glyphMint} opacity="0">
      <animate attributeName="opacity" from="0" to="0.9" dur="0.4s" begin="1.6s" fill="freeze" />
    </circle>
    <circle cx="20" cy="32" r="3.5" fill="#f0c040" opacity="0">
      <animate attributeName="opacity" from="0" to="0.85" dur="0.4s" begin="1.8s" fill="freeze" />
    </circle>
    <circle cx="20" cy="44" r="3.5" fill="#e05c5c" opacity="0">
      <animate attributeName="opacity" from="0" to="0.75" dur="0.4s" begin="2.0s" fill="freeze" />
    </circle>
  </svg>
);

// Volume Monitor — stacked bar chart with rising bar
const glyphVolume = (
  <svg viewBox="0 0 100 70" width="80" height="56" fill="none">
    <line x1="14" y1="58" x2="86" y2="58" stroke={glyphStroke} strokeWidth="1" opacity="0.5" />
    <line x1="14" y1="10" x2="14" y2="58" stroke={glyphStroke} strokeWidth="1" opacity="0.5" />
    {[20, 32, 44].map(y => (
      <line key={y} x1="14" y1={y} x2="86" y2={y} stroke={glyphStroke} strokeWidth="0.4" strokeDasharray="1 2" opacity="0.3" />
    ))}
    {[
      { x: 22, h1: 14, h2: 8 },
      { x: 34, h1: 18, h2: 6 },
      { x: 46, h1: 12, h2: 10 },
      { x: 58, h1: 22, h2: 8 },
      { x: 70, h1: 16, h2: 16 },
    ].map((b, i) => (
      <g key={i}>
        <rect x={b.x} y={58 - b.h1} width="8" height={b.h1} fill={glyphAccent} opacity="0.65">
          <animate attributeName="height" from="0" to={b.h1} dur="0.9s" begin={`${0.1 + i * 0.12}s`} fill="freeze" />
          <animate attributeName="y" from="58" to={58 - b.h1} dur="0.9s" begin={`${0.1 + i * 0.12}s`} fill="freeze" />
        </rect>
        <rect x={b.x} y={58 - b.h1 - b.h2} width="8" height={b.h2} fill={glyphMint} opacity="0.85">
          <animate attributeName="height" from="0" to={b.h2} dur="0.9s" begin={`${0.4 + i * 0.12}s`} fill="freeze" />
          <animate attributeName="y" from={58 - b.h1} to={58 - b.h1 - b.h2} dur="0.9s" begin={`${0.4 + i * 0.12}s`} fill="freeze" />
        </rect>
      </g>
    ))}
    <polyline
      points="26,42 38,36 50,40 62,30 74,28"
      fill="none" stroke="#f0f4f8" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"
      strokeDasharray="60" strokeDashoffset="60"
    >
      <animate attributeName="stroke-dashoffset" from="60" to="0" dur="1.4s" begin="1.2s" fill="freeze" />
    </polyline>
    <circle cx="74" cy="28" r="2" fill="#f0f4f8" opacity="0">
      <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="2.4s" fill="freeze" />
      <animate attributeName="r" values="2;3.4;2" dur="1.8s" begin="2.6s" repeatCount="indefinite" />
    </circle>
  </svg>
);

// TCO Analysis — waterfall + delta arrow
const glyphTCO = (
  <svg viewBox="0 0 100 70" width="80" height="56" fill="none">
    <line x1="10" y1="58" x2="90" y2="58" stroke={glyphStroke} strokeWidth="1" opacity="0.5" />
    <rect x="14" y="36" width="12" height="22" fill={glyphAccent} opacity="0.55">
      <animate attributeName="height" from="0" to="22" dur="0.8s" begin="0.1s" fill="freeze" />
      <animate attributeName="y" from="58" to="36" dur="0.8s" begin="0.1s" fill="freeze" />
    </rect>
    <rect x="28" y="28" width="12" height="8" fill={glyphAccent} opacity="0.8">
      <animate attributeName="height" from="0" to="8" dur="0.6s" begin="0.5s" fill="freeze" />
      <animate attributeName="y" from="36" to="28" dur="0.6s" begin="0.5s" fill="freeze" />
    </rect>
    <rect x="42" y="22" width="12" height="6" fill={glyphAccent} opacity="0.95">
      <animate attributeName="height" from="0" to="6" dur="0.5s" begin="0.85s" fill="freeze" />
      <animate attributeName="y" from="28" to="22" dur="0.5s" begin="0.85s" fill="freeze" />
    </rect>
    <rect x="56" y="22" width="12" height="10" fill={glyphMint} opacity="0.9">
      <animate attributeName="height" from="0" to="10" dur="0.6s" begin="1.2s" fill="freeze" />
    </rect>
    <rect x="70" y="32" width="12" height="26" fill="#f0f4f8" opacity="0.92">
      <animate attributeName="height" from="0" to="26" dur="0.7s" begin="1.6s" fill="freeze" />
      <animate attributeName="y" from="58" to="32" dur="0.7s" begin="1.6s" fill="freeze" />
    </rect>
    <g stroke={glyphStroke} strokeWidth="0.7" strokeDasharray="1.5 1.5" opacity="0.5" fill="none">
      <line x1="26" y1="36" x2="28" y2="36" />
      <line x1="40" y1="28" x2="42" y2="28" />
      <line x1="54" y1="22" x2="56" y2="22" />
      <line x1="68" y1="32" x2="70" y2="32" />
    </g>
    <path d="M 62 14 L 62 19 M 60 17 L 62 19 L 64 17"
      stroke={glyphMint} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" fill="none">
      <animate attributeName="opacity" values="0;1;1" dur="1s" begin="1.2s" fill="freeze" />
    </path>
  </svg>
);

Object.assign(window, { WelcomeOverlay });
