const PIPELINE_CODE = [
"pipeline.create({",
' source: "stripe.payment",',
" transform: (e) => ({",
" amount: e.data / 100,",
' status: "processed"',
" }),",
' destination: "postgres"',
"})"
].join("\n")

function Step2Visual({ active }) {
const [chars, setChars] = useState(0)
const [showDiagram, setShowDiagram] = useState(false)

useEffect(() => {
if (!active) { setChars(0); setShowDiagram(false); return }
let i = 0
const t = setInterval(() => {
i = Math.min(i + 1, PIPELINE_CODE.length)
setChars(i)
if (i >= PIPELINE_CODE.length) {
clearInterval(t)
setTimeout(() => setShowDiagram(true), 400)
}
}, 22)
return () => clearInterval(t)
}, [active])

function highlight(line) {
return line
.replace(/(pipeline.create|transform|source|destination)/g, '$1')
.replace(/(".*?")/g, '$1')
.replace(/(=>)/g, '$1')
.replace(/\b(\d+)\b/g, '$1')
}

const displayed = PIPELINE_CODE.slice(0, chars)

return (
<div style={{ padding: "28px 28px 20px" }}>
{/* Code block */}
<div style={{
background: "#0D0D1A",
border: 1px solid ${C.border},
borderRadius: 8,
padding: "16px 18px",
fontFamily: MONO, fontSize: 11.5,
lineHeight: 1.75, color: C.white,
minHeight: 148,
}}>
{displayed.split("\n").map((line, i) => (
<div key={i} dangerouslySetInnerHTML={{ __html: highlight(line) || " " }} />
))}
<span style={{
display: "inline-block", width: 1.5, height: 13,
background: C.accent, marginLeft: 1,
animation: "blink 1s step-end infinite",
}} />

{/* Pipeline diagram */} <div style={{ marginTop: 16, display: "flex", alignItems: "center", opacity: showDiagram ? 1 : 0, transform: showDiagram ? "translateY(0)" : "translateY(8px)", transition: "all 0.5s ease", }}> {[ { label: "Source", sub: "stripe.payment", color: "#635BFF" }, null, { label: "Transform", sub: "amount / 100", color: C.accent }, null, { label: "Destination", sub: "postgres", color: "#336791" }, ].map((node, i) => node === null ? ( <div key={i} style={{ flex: 1, height: 1.5, background: `linear-gradient(90deg, ${C.accent}55, ${C.accent}22)` }} /> ) : ( <div key={i} style={{ padding: "7px 12px", background: node.color + "15", border: `1px solid ${node.color}33`, borderRadius: 6, textAlign: "center", flexShrink: 0, }}> <div style={{ fontFamily: MONO, fontSize: 9, color: node.color, fontWeight: 700 }}>{node.label}</div> <div style={{ fontFamily: MONO, fontSize: 8, color: C.dim, marginTop: 2 }}>{node.sub}</div> </div> ))} </div> <style>{`@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }`}</style> </div>

)
}