/* ============================================================
   visuals2.jsx — more branded mockups
   PDF cover · Risk corridor · Chat preview · Course outline · Founder portrait
   ============================================================ */

/* ---------- Deep-Dive PDF cover ---------- */
function DeepDivePDF() {
  return (
    <div style={{
      width: "100%",
      maxWidth: 380,
      background: "transparent",
      position: "relative"
    }}>
      <img
        src="assets/dd-nvo-cover.png"
        alt="TLI Deep Dive — Novo Nordisk ($NVO) cover"
        style={{
          width: "100%", height: "auto",
          display: "block",
          filter: "drop-shadow(0 18px 32px rgba(0,0,0,0.55))", objectFit: "cover"
        }} />
      
    </div>);

}

/* ---------- $SOFI Valuation Analysis ---------- */
function RiskCorridor() {
  return (
    <div style={{
      width: "100%",
      maxWidth: 380,
      background: "transparent",
      position: "relative"
    }}>
      <img
        src="assets/va-sofi-cover.png"
        alt="TLI Valuation Analysis — SoFi Technologies ($SOFI) cover"
        style={{
          width: "100%", height: "auto",
          display: "block",
          filter: "drop-shadow(0 18px 32px rgba(0,0,0,0.55))"
        }} />
    </div>);
}

function _RiskCorridorUNUSED() {
  const W = 560,H = 320;
  const pad = { l: 44, r: 70, t: 18, b: 36 };
  const yMin = 0,yMax = 100;
  const y = (v) => pad.t + (yMax - v) / (yMax - yMin) * (H - pad.t - pad.b);
  const N = 26;
  const x = (i) => pad.l + i / (N - 1) * (W - pad.r - pad.l);

  // Market price zigzag
  const market = [22, 25, 28, 26, 32, 38, 36, 42, 48, 52, 50, 56, 60, 58, 64, 70, 68, 72, 76, 74, 78, 82, 80, 84, 88, 86];
  // Fair value (smoothed)
  const fair = [18, 20, 22, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54, 57, 60, 62, 64, 66, 68, 70, 72, 74, 75, 76, 76];
  // Risk band (above fair line)
  const riskTop = fair.map((v) => v + 12);
  const riskBot = fair.map((v) => v + 4);

  const path = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)},${y(v)}`).join(" ");
  const bandPath = `${path(riskTop)} L${x(N - 1)},${y(riskBot[N - 1])} ${riskBot.map((v, i) => `L${x(N - 1 - i)},${y(riskBot[N - 1 - i])}`).join(" ")} Z`;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" preserveAspectRatio="xMidYMid meet" style={{ display: "block" }}>
      {[20, 40, 60, 80].map((t) =>
      <g key={t}>
          <line x1={pad.l} x2={W - pad.r} y1={y(t)} y2={y(t)} stroke="rgba(255,250,238,0.05)" />
          <text x={pad.l - 8} y={y(t) + 3} fontSize="9" fill={window.CREAM_FAINT}
        textAnchor="end" fontFamily="Acumin Pro, sans-serif">{`$${t}`}</text>
        </g>
      )}
      <line x1={pad.l} x2={W - pad.r} y1={H - pad.b} y2={H - pad.b} stroke="rgba(255,250,238,0.12)" />

      {/* Risk band */}
      <path d={bandPath} fill="rgba(201,59,59,0.18)" stroke="rgba(201,59,59,0.45)" strokeWidth="0.8" />

      {/* Fair value line — blue */}
      <path d={path(fair)} fill="none" stroke="#5b8dff" strokeWidth="1.5" />

      {/* Market price — cream */}
      <path d={path(market)} fill="none" stroke={window.CREAM} strokeWidth="1.6" />

      {/* Target hit marker (last point) */}
      <circle cx={x(N - 1)} cy={y(market[N - 1])} r="4" fill={window.GOLD} />
      <line x1={x(N - 1)} x2={x(N - 1) + 24} y1={y(market[N - 1])} y2={y(market[N - 1])} stroke={window.GOLD} strokeDasharray="2 2" />
      <text x={x(N - 1) + 28} y={y(market[N - 1]) - 4}
      fontSize="9.5" fill={window.GOLD} fontFamily="var(--font-text)"
      fontWeight="600" letterSpacing="0.12em">TARGET HIT</text>
      <text x={x(N - 1) + 28} y={y(market[N - 1]) + 8}
      fontSize="8.5" fill={window.CREAM_DIM} fontFamily="Acumin Pro, sans-serif">Dec 2025</text>

      {/* Series legend */}
      <g transform={`translate(${pad.l + 8}, ${pad.t + 4})`}>
        <g>
          <line x1="0" x2="16" y1="6" y2="6" stroke={window.CREAM} strokeWidth="1.6" />
          <text x="22" y="9" fontSize="9.5" fill={window.CREAM_DIM} fontFamily="var(--font-text)">Market price</text>
        </g>
        <g transform="translate(110,0)">
          <rect x="0" y="2" width="16" height="8" fill="rgba(201,59,59,0.32)" stroke="rgba(201,59,59,0.6)" strokeWidth="0.8" />
          <text x="22" y="9" fontSize="9.5" fill={window.CREAM_DIM} fontFamily="var(--font-text)">Risk band</text>
        </g>
        <g transform="translate(208,0)">
          <line x1="0" x2="16" y1="6" y2="6" stroke="#5b8dff" strokeWidth="1.6" />
          <text x="22" y="9" fontSize="9.5" fill={window.CREAM_DIM} fontFamily="var(--font-text)">Fair value</text>
        </g>
      </g>

      {/* x labels */}
      {[0, 6, 12, 18, 25].map((i, k) =>
      <text key={k} x={x(i)} y={H - pad.b + 14}
      fontSize="9" fill={window.CREAM_FAINT}
      fontFamily="Acumin Pro, sans-serif" textAnchor="middle">
          {["Apr '25", "Jun", "Aug", "Oct", "Dec '25"][k]}
        </text>
      )}
    </svg>);

}

window.DeepDivePDF = DeepDivePDF;
window.RiskCorridor = RiskCorridor;