// ============================================================
// Visual placeholders for project cards — Apple-style with glow
// ============================================================

// Helper: convert hex to rgba with low opacity for subtle backgrounds
const hexToRgba = (hex, alpha) => {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r},${g},${b},${alpha})`;
};

const ProjectVisual = ({ kind, accent = "#007AFF", size = "wide" }) => {
  switch (kind) {
    case "observability":  return <VObservability accent={accent} />;
    case "sre":            return <VSRE accent={accent} />;
    case "platform":       return <VPlatform accent={accent} />;
    case "java":           return <VJava accent={accent} />;
    case "whitehat":       return <VWhitehat accent={accent} />;
    case "devrel":         return <VDevrel accent={accent} />;
    case "api":            return <VApi accent={accent} />;
    case "arch":           return <VArch accent={accent} />;
    case "payments":       return <VPayments accent={accent} />;
    case "finprod":        return <VFinProd accent={accent} />;
    default:               return <VObservability accent={accent} />;
  }
};

// --- Observability: live chart + traces ---
const VObservability = ({ accent }) => (
  <div className="vis vis--observability" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.04)}, ${hexToRgba(accent, 0.01)})` }}>
    <div className="vis__glow" style={{ background: accent, top: '20%', left: '10%' }} />
    <div className="vis__frame">
      <div className="vis__frame-head">
        <div className="vis__traffic"><span/><span/><span/></div>
        <div className="vis__tabtitle mono">metrics.prod.grafana</div>
        <div/>
      </div>
      <div className="vis__chart-area">
        <svg viewBox="0 0 400 140" preserveAspectRatio="none" width="100%" height="100%">
          <defs>
            <linearGradient id="og" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={accent} stopOpacity="0.4" />
              <stop offset="100%" stopColor={accent} stopOpacity="0" />
            </linearGradient>
          </defs>
          {[30, 55, 80, 105].map((y, i) => (
            <line key={i} x1="0" x2="400" y1={y} y2={y} stroke="currentColor" strokeOpacity="0.06" />
          ))}
          <path
            d="M0,95 Q25,90 50,70 T100,60 T150,80 T200,40 T250,50 T300,25 T350,35 T400,20 L400,140 L0,140 Z"
            fill="url(#og)"
          />
          <path
            d="M0,95 Q25,90 50,70 T100,60 T150,80 T200,40 T250,50 T300,25 T350,35 T400,20"
            fill="none" stroke={accent} strokeWidth="2.5" strokeLinecap="round"
          />
          <circle cx="400" cy="20" r="4" fill={accent}>
            <animate attributeName="r" values="4;7;4" dur="1.8s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="1;0.6;1" dur="1.8s" repeatCount="indefinite" />
          </circle>
          <circle cx="400" cy="20" r="12" fill={accent} opacity="0.15">
            <animate attributeName="r" values="12;20;12" dur="1.8s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.15;0;0.15" dur="1.8s" repeatCount="indefinite" />
          </circle>
        </svg>
      </div>
      <div className="vis__stats-row">
        <div className="vis__stat-item">
          <div className="vis__stat-val mono" style={{ color: accent }}>99.99%</div>
          <div className="vis__stat-key">uptime</div>
        </div>
        <div className="vis__stat-item">
          <div className="vis__stat-val mono">42ms</div>
          <div className="vis__stat-key">p99</div>
        </div>
        <div className="vis__stat-item">
          <div className="vis__stat-val mono">2.4k</div>
          <div className="vis__stat-key">rps</div>
        </div>
      </div>
    </div>
  </div>
);

// --- SRE: error budget & SLO dial ---
const VSRE = ({ accent }) => {
  const pct = 78;
  const r = 58;
  const c = 2 * Math.PI * r;
  return (
    <div className="vis" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.03)}, transparent)` }}>
      <div className="vis__glow" style={{ background: accent, top: '30%', left: '20%' }} />
      <div className="vis__dial">
        <svg viewBox="0 0 160 160" width="180" height="180">
          <circle cx="80" cy="80" r={r} stroke="currentColor" strokeOpacity="0.08" strokeWidth="10" fill="none" />
          <circle cx="80" cy="80" r={r} stroke={accent} strokeWidth="10" fill="none"
                  strokeDasharray={c} strokeDashoffset={c - (c * pct / 100)}
                  strokeLinecap="round" transform="rotate(-90 80 80)" />
          <circle cx="80" cy="80" r={r} stroke={accent} strokeWidth="16" fill="none"
                  strokeDasharray={c} strokeDashoffset={c - (c * pct / 100)}
                  strokeLinecap="round" transform="rotate(-90 80 80)"
                  opacity="0.12" />
        </svg>
        <div className="vis__dial-center">
          <div className="vis__dial-num mono">{pct}%</div>
          <div className="vis__dial-lab">error budget</div>
        </div>
      </div>
      <div className="vis__slo-list">
        <div className="vis__slo mono"><span className="dot green"/>checkout.latency<em>ok</em></div>
        <div className="vis__slo mono"><span className="dot green"/>auth.availability<em>ok</em></div>
        <div className="vis__slo mono"><span className="dot amber"/>payments.p99<em>warn</em></div>
      </div>
    </div>
  );
};

// --- Platform: golden-path pipeline ---
const VPlatform = ({ accent }) => (
  <div className="vis" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.03)}, transparent)` }}>
    <div className="vis__glow" style={{ background: accent, bottom: '10%', left: '30%' }} />
    <div className="vis__pipeline">
      {["repo", "ci", "build", "deploy", "live"].map((s, i) => (
        <React.Fragment key={s}>
          <div className="vis__node" style={{ animationDelay: `${i * 0.2}s` }}>
            <div className="vis__node-dot" style={{
              background: i === 4 ? accent : "var(--fill-primary)",
              boxShadow: i === 4 ? `0 0 0 3px var(--bg-primary), 0 0 12px ${hexToRgba(accent, 0.4)}` : "0 0 0 3px var(--bg-primary)"
            }}/>
            <div className="vis__node-lab mono">{s}</div>
          </div>
          {i < 4 && <div className="vis__pipe"><div className="vis__pipe-fill" style={{ background: accent, animationDelay: `${i * 0.2}s` }}/></div>}
        </React.Fragment>
      ))}
    </div>
    <div className="vis__terminal">
      <div className="mono" style={{ color: accent }}>$ scaffold service --name orders</div>
      <div className="mono" style={{ color: "var(--label-tertiary)" }}>→ repo created · pipeline wired · secrets synced · deployed to prod</div>
      <div className="mono" style={{ color: "var(--sys-green)" }}>✓ live in 4m 12s</div>
    </div>
  </div>
);

// --- Java: floating code window ---
const VJava = ({ accent }) => (
  <div className="vis" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.03)}, transparent)` }}>
    <div className="vis__glow" style={{ background: accent, top: '20%', right: '10%' }} />
    <div className="vis__code">
      <div className="vis__code-head mono">OrderService.java</div>
      <pre className="mono vis__code-body">
{`try (var scope = new StructuredTaskScope
                   .ShutdownOnFailure()) {
  var user  = scope.fork(() -> loadUser(id));
  var cart  = scope.fork(() -> loadCart(id));
  scope.join().throwIfFailed();
  return new Order(user.get(), cart.get());
}`}
      </pre>
    </div>
  </div>
);

// --- Whitehat: dark terminal ---
const VWhitehat = ({ accent }) => (
  <div className="vis vis--dark" style={{ background: "#0A0A0C" }}>
    <div className="vis__glow" style={{ background: "#8FFF8F", top: '30%', left: '20%', opacity: 0.06 }} />
    <div className="vis__term-window">
      <div className="vis__frame-head"><div className="vis__traffic"><span/><span/><span/></div><div className="mono vis__tabtitle" style={{color:"#666"}}>~/labs/recon</div><div/></div>
      <pre className="mono" style={{margin:0, padding:"14px 18px", fontSize:11, color:"#8FFF8F", lineHeight:1.5}}>
{`$ nmap -sV -A target.lab
Starting Nmap 7.94SVN
22/tcp  open  ssh     OpenSSH 9.6
80/tcp  open  http    nginx 1.25
443/tcp open  https   nginx 1.25`}
        <span style={{color: accent}}>
{`
# running custom probe...
[+] auth bypass detected → reporting
`}
        </span>
        <span style={{color:"#8FFF8F"}}>$ █</span>
      </pre>
    </div>
  </div>
);

// --- Devrel: network graph ---
const VDevrel = ({ accent }) => {
  const nodes = [
    [80, 40], [140, 60], [50, 90], [120, 110], [180, 95],
    [90, 140], [170, 150], [60, 170], [140, 180], [200, 50],
    [30, 140], [110, 75]
  ];
  const edges = [[0,1],[0,2],[1,3],[1,4],[2,5],[3,5],[3,6],[4,6],[5,7],[5,8],[6,8],[9,1],[10,7],[11,0],[11,3]];
  return (
    <div className="vis" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.03)}, transparent)` }}>
      <div className="vis__network-glow" style={{ background: accent }} />
      <svg viewBox="0 0 230 220" width="100%" height="100%" style={{maxWidth:320, position:'relative', zIndex:1}}>
        <defs>
          <filter id="nodeGlow">
            <feGaussianBlur stdDeviation="3" result="blur"/>
            <feMerge>
              <feMergeNode in="blur"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
        </defs>
        {edges.map(([a,b], i) => (
          <line key={i} x1={nodes[a][0]} y1={nodes[a][1]} x2={nodes[b][0]} y2={nodes[b][1]}
                stroke={accent} strokeOpacity="0.2" strokeWidth="1" />
        ))}
        {nodes.map(([x,y], i) => (
          <g key={i}>
            <circle cx={x} cy={y} r={i === 0 ? 12 : 7}
                    fill={i === 0 ? accent : "currentColor"}
                    fillOpacity={i === 0 ? 1 : 0.6}
                    filter={i === 0 ? "url(#nodeGlow)" : undefined} />
            {i === 0 && <circle cx={x} cy={y} r="16" fill="none" stroke={accent} strokeWidth="1.5" opacity="0.4">
              <animate attributeName="r" values="16;26;16" dur="2.8s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.4;0;0.4" dur="2.8s" repeatCount="indefinite" />
            </circle>}
          </g>
        ))}
      </svg>
    </div>
  );
};

// --- API / Developer Experience: endpoint tree ---
const VApi = ({ accent }) => (
  <div className="vis" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.03)}, transparent)` }}>
    <div className="vis__glow" style={{ background: accent, top: '20%', right: '15%' }} />
    <div className="vis__frame">
      <div className="vis__frame-head">
        <div className="vis__traffic"><span/><span/><span/></div>
        <div className="vis__tabtitle mono">api.docs.dev</div>
        <div/>
      </div>
      <div style={{ padding: "16px 18px", fontSize: 11, lineHeight: 1.7 }} className="mono">
        <div style={{ color: accent, fontWeight: 600, marginBottom: 6 }}>REST API v2</div>
        <div style={{ color: "var(--label-tertiary)", marginBottom: 4 }}>
          <span style={{ color: "var(--sys-green)", fontWeight: 600 }}>GET</span> /partners
        </div>
        <div style={{ color: "var(--label-tertiary)", marginBottom: 4 }}>
          <span style={{ color: accent, fontWeight: 600 }}>POST</span> /partners/onboard
        </div>
        <div style={{ color: "var(--label-tertiary)", marginBottom: 4 }}>
          <span style={{ color: "var(--sys-green)", fontWeight: 600 }}>GET</span> /journeys/:id
        </div>
        <div style={{ color: "var(--label-tertiary)" }}>
          <span style={{ color: "#FF9500", fontWeight: 600 }}>PUT</span> /journeys/:id/complete
        </div>
      </div>
    </div>
  </div>
);

// --- Payments: payment rails flow ---
const VPayments = ({ accent }) => (
  <div className="vis" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.03)}, transparent)` }}>
    <div className="vis__glow" style={{ background: accent, top: '30%', left: '20%' }} />
    <svg viewBox="0 0 320 180" width="100%" height="100%" style={{ maxWidth: 400, position: 'relative', zIndex: 1 }}>
      {/* Three payment rails */}
      {[["Pix", 40], ["TED/STR", 90], ["SLC", 140]].map(([label, y], i) => (
        <g key={i}>
          <rect x="20" y={y - 14} width="60" height="28" rx="6" fill={accent} fillOpacity={0.08 + i * 0.04} stroke={accent} strokeOpacity="0.3" strokeWidth="1" />
          <text x="50" y={y + 4} textAnchor="middle" fill={accent} fontSize="9" fontWeight="600" fontFamily="-apple-system, sans-serif">{label}</text>
          <line x1="80" y1={y} x2="180" y2={y} stroke={accent} strokeOpacity="0.2" strokeWidth="1.5" strokeDasharray="4 3" />
          <circle cx="180" cy={y} r="4" fill={accent} fillOpacity="0.3" />
        </g>
      ))}
      {/* Central hub */}
      <rect x="180" y="26" width="100" height="128" rx="10" fill="none" stroke={accent} strokeOpacity="0.15" strokeWidth="1.5" />
      <text x="230" y="80" textAnchor="middle" fill={accent} fontSize="8" fontWeight="600" fontFamily="-apple-system, sans-serif" letterSpacing="0.08em">PAYMENTS</text>
      <text x="230" y="95" textAnchor="middle" fill="currentColor" fillOpacity="0.3" fontSize="7" fontFamily="-apple-system, sans-serif" letterSpacing="0.06em">CORE</text>
      {/* Status dots */}
      {[40, 90, 140].map((y, i) => (
        <g key={`s${i}`}>
          <circle cx="230" cy={y} r="3" fill="var(--sys-green)" />
          <text x="244" y={y + 3} fill="currentColor" fillOpacity="0.4" fontSize="7" fontFamily="-apple-system, sans-serif">live</text>
        </g>
      ))}
    </svg>
  </div>
);

// --- Financial Products: compliance shield + product grid ---
const VFinProd = ({ accent }) => (
  <div className="vis" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.03)}, transparent)` }}>
    <div className="vis__glow" style={{ background: accent, top: '20%', right: '15%' }} />
    <svg viewBox="0 0 300 190" width="100%" height="100%" style={{ maxWidth: 380, position: 'relative', zIndex: 1 }}>
      {/* Product tiles */}
      {[
        ["KYC", 20, 20], ["KYB", 95, 20], ["AML", 170, 20],
        ["Cards", 20, 75], ["Boleto", 95, 75], ["Fraud", 170, 75],
      ].map(([label, x, y], i) => (
        <g key={i}>
          <rect x={x} y={y} width="65" height="42" rx="6" fill={accent} fillOpacity={0.05 + (i % 3) * 0.02} stroke={accent} strokeOpacity="0.2" strokeWidth="1" />
          <text x={x + 32.5} y={y + 25} textAnchor="middle" fill={accent} fontSize="9" fontWeight="600" fontFamily="-apple-system, sans-serif">{label}</text>
        </g>
      ))}
      {/* Compliance bar */}
      <rect x="20" y="135" width="215" height="36" rx="8" fill="none" stroke={accent} strokeOpacity="0.15" strokeWidth="1.5" />
      <text x="127.5" y="155" textAnchor="middle" fill={accent} fillOpacity="0.6" fontSize="7" fontWeight="600" fontFamily="-apple-system, sans-serif" letterSpacing="0.1em">COMPLIANCE · AUDIT · REGULATORY</text>
      {/* Shield icon */}
      <path d="M260 30 L260 70 Q260 95 240 105 Q260 95 260 70" fill="none" stroke={accent} strokeOpacity="0.2" strokeWidth="1.5" />
      <path d="M260 25 L240 35 L240 65 Q240 82 260 92 Q280 82 280 65 L280 35 Z" fill={accent} fillOpacity="0.06" stroke={accent} strokeOpacity="0.25" strokeWidth="1" />
      <path d="M252 58 L258 64 L270 52" fill="none" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  </div>
);

// --- Architecture: hexagonal layers + ADR nodes ---
const VArch = ({ accent }) => (
  <div className="vis" style={{ background: `linear-gradient(145deg, ${hexToRgba(accent, 0.03)}, transparent)` }}>
    <div className="vis__glow" style={{ background: accent, top: '25%', left: '15%' }} />
    <svg viewBox="0 0 280 200" width="100%" height="100%" style={{ maxWidth: 360, position: 'relative', zIndex: 1 }}>
      {/* Outer hexagon */}
      <polygon points="140,20 230,55 230,125 140,160 50,125 50,55" fill="none" stroke="currentColor" strokeOpacity="0.1" strokeWidth="1.5" />
      {/* Middle hexagon */}
      <polygon points="140,45 200,68 200,112 140,135 80,112 80,68" fill="none" stroke={accent} strokeOpacity="0.3" strokeWidth="1.5" />
      {/* Inner hexagon */}
      <polygon points="140,65 170,78 170,102 140,115 110,102 110,78" fill={accent} fillOpacity="0.08" stroke={accent} strokeWidth="2" />
      {/* Center label */}
      <text x="140" y="94" textAnchor="middle" fill={accent} fontSize="9" fontWeight="600" fontFamily="-apple-system, sans-serif" letterSpacing="0.08em">DOMAIN</text>
      {/* Connection nodes — ADR markers */}
      {[[50, 55], [230, 55], [230, 125], [50, 125]].map(([x, y], i) => (
        <g key={i}>
          <circle cx={x} cy={y} r="5" fill="currentColor" fillOpacity="0.15" stroke="currentColor" strokeOpacity="0.3" strokeWidth="1" />
          <circle cx={x} cy={y} r="2" fill={accent} />
        </g>
      ))}
      {/* ADR labels */}
      <text x="140" y="180" textAnchor="middle" fill="currentColor" fillOpacity="0.3" fontSize="8" fontFamily="-apple-system, sans-serif" letterSpacing="0.1em">ADR · DDD · FITNESS FUNCTIONS</text>
    </svg>
  </div>
);

window.ProjectVisual = ProjectVisual;