sample.jsx

import { useState, useEffect, useRef } from "react";

const FONT_URL = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap";

// ── Terminal data cascade lines ───────────────────────────────────────────────
const TERMINAL_LINES = [
    "INIT SEQUENCE 0x4F2A...",
    "AUTH TOKEN: ██████████████",
    "SCAN FREQ   847.221 MHz",
    "SECTOR      [CLASSIFIED]",
    "NODE_ID     NX-9912-DELTA",
    "TIMESTAMP   2025.03.06",
    "CLEARANCE   LEVEL-OMEGA",
    "STATUS      AUTHORIZED",
    "PAYLOAD     ENCRYPTED",
    "UPLINK      ACTIVE",
    "SIGNAL      ████░░░░ 61%",
    "VERIFY      SHA256:c0d3f",
    "MATRIX      7×7 LATTICE",
    "HASH        0xDEADBEEF",
    "PING        12.4ms OK",
    "TRACE       DISABLED",
    "VAULT       SEALED",
    "PROTOCOL    OMEGA-9",
    "ENTROPY     HIGH",
    "FRAME       #00441",
    "BUFFER      FLUSHED",
    "CIPHER      AES-256",
    "RELAY       PROXIED",
    "ECHO        SILENT",
    "LOCK        ENGAGED",
    "GRID REF    44.0N 76.2W",
    "KERNEL      3.14.159",
    "DAEMON      RUNNING",
    "WATCHDOG    ARMED",
    "ROUTE       OBFUSCATED",
];

function useAnimFrame(cb) {
    const ref = useRef();
    useEffect(() => {
        let id;
        const loop = (t) => { cb(t); id = requestAnimationFrame(loop); };
        id = requestAnimationFrame(loop);
        return () => cancelAnimationFrame(id);
    }, [cb]);
}

// ── Noise / grain canvas ──────────────────────────────────────────────────────
function GrainOverlay({ strength = 0.18 }) {
    const canvasRef = useRef();
    const tick = useRef(0);

    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;
        const ctx = canvas.getContext("2d");
        let raf;

        const draw = () => {
            tick.current++;
            if (tick.current % 2 !== 0) { raf = requestAnimationFrame(draw); return; }
            const { width, height } = canvas;
            const img = ctx.createImageData(width, height);
            const d = img.data;
            for (let i = 0; i < d.length; i += 4) {
                const px = i / 4;
                const x = px % width;
                const y = Math.floor(px / width);
                // Vignette factor — stronger at edges
                const cx = x / width - 0.5, cy = y / height - 0.5;
                const dist = Math.sqrt(cx * cx + cy * cy);
                const vignette = Math.min(1, dist * 2.2);
                const noise = (Math.random() - 0.5) * 255 * (strength + vignette * 0.18);
                d[i] = d[i + 1] = d[i + 2] = 128 + noise;
                d[i + 3] = Math.floor(18 + vignette * 30);
            }
            ctx.putImageData(img, 0, 0);
            raf = requestAnimationFrame(draw);
        };

        const resize = () => {
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
        };
        resize();
        draw();
        window.addEventListener("resize", resize);
        return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
    }, [strength]);

    return (
        <canvas
            ref={canvasRef}
            style={{
                position: "absolute", inset: 0, width: "100%", height: "100%",
                pointerEvents: "none", mixBlendMode: "overlay", zIndex: 10,
            }}
        />
    );
}

// ── SVG geometric overlay ─────────────────────────────────────────────────────
function GeometricOverlay() {
    return (
        <svg
            viewBox="0 0 480 860"
            style={{
                position: "absolute", inset: 0, width: "100%", height: "100%",
                pointerEvents: "none", zIndex: 5, opacity: 0.12,
            }}
            preserveAspectRatio="none"
        >
            {/* Corner triangles */}
            <polygon points="0,0 72,0 0,72" fill="none" stroke="white" strokeWidth="0.8" />
            <polygon points="480,0 408,0 480,72" fill="none" stroke="white" strokeWidth="0.8" />
            <polygon points="0,860 72,860 0,788" fill="none" stroke="white" strokeWidth="0.8" />
            <polygon points="480,860 408,860 480,788" fill="none" stroke="white" strokeWidth="0.8" />
            {/* Subtle grid lines */}
            {[0.2, 0.4, 0.6, 0.8].map((t) => (
                <line key={t} x1={480 * t} y1="0" x2={480 * t} y2="860" stroke="white" strokeWidth="0.4" />
            ))}
            {[0.25, 0.5, 0.75].map((t) => (
                <line key={t} x1="0" y1={860 * t} x2="480" y2={860 * t} stroke="white" strokeWidth="0.4" />
            ))}
            {/* Radiating accent lines from center */}
            <line x1="240" y1="430" x2="0" y2="0" stroke="white" strokeWidth="0.3" />
            <line x1="240" y1="430" x2="480" y2="0" stroke="white" strokeWidth="0.3" />
            <line x1="240" y1="430" x2="0" y2="860" stroke="white" strokeWidth="0.3" />
            <line x1="240" y1="430" x2="480" y2="860" stroke="white" strokeWidth="0.3" />
            {/* Center circle accent */}
            <circle cx="240" cy="430" r="200" fill="none" stroke="white" strokeWidth="0.5" />
            <circle cx="240" cy="430" r="198" fill="none" stroke="white" strokeWidth="0.2" />
        </svg>
    );
}

// ── Terminal code cascade ─────────────────────────────────────────────────────
function TerminalMask() {
    const [offset, setOffset] = useState(0);
    const [glitch, setGlitch] = useState({ row: -1, px: 0 });

    useEffect(() => {
        const iv = setInterval(() => {
            setOffset((o) => (o + 1) % TERMINAL_LINES.length);
        }, 120);
        const gv = setInterval(() => {
            setGlitch({ row: Math.floor(Math.random() * 18), px: (Math.random() - 0.5) * 8 });
            setTimeout(() => setGlitch({ row: -1, px: 0 }), 80);
        }, 900);
        return () => { clearInterval(iv); clearInterval(gv); };
    }, []);

    const visible = Array.from({ length: 20 }, (_, i) =>
        TERMINAL_LINES[(offset + i) % TERMINAL_LINES.length]
    );

    return (
        <div
            style={{
                width: "100%", height: "100%",
                background: "#000",
                borderRadius: "50%",
                overflow: "hidden",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                padding: "18px 14px",
                gap: 0,
                position: "relative",
            }}
        >
            {/* inner vignette */}
            <div style={{
                position: "absolute", inset: 0, borderRadius: "50%",
                background: "radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.72) 100%)",
                zIndex: 2, pointerEvents: "none",
            }} />
            {visible.map((line, i) => (
                <div
                    key={i}
                    style={{
                        fontFamily: "'IBM Plex Mono', monospace",
                        fontSize: "9.5px",
                        fontWeight: i === 0 ? 700 : 400,
                        letterSpacing: "0.08em",
                        color: i === 0 ? "#FFFFFF" : i < 3 ? "#D8D8D8" : "#888",
                        lineHeight: "1.55",
                        opacity: i === 0 ? 1 : Math.max(0.18, 1 - i * 0.045),
                        transform: glitch.row === i ? `translateX(${glitch.px}px)` : "none",
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        transition: "transform 0.04s",
                        position: "relative",
                        zIndex: 3,
                    }}
                >
                    {i === 0 ? "▶ " : "  "}{line}
                </div>
            ))}
        </div>
    );
}

// ── Barcode SVG ───────────────────────────────────────────────────────────────
function Barcode() {
    const bars = Array.from({ length: 60 }, (_, i) => {
        const w = [1, 1, 2, 1, 3, 1, 2, 1, 1, 2][i % 10];
        return { w, gap: [2, 1, 2, 3, 1, 2, 1, 2, 3, 1][i % 10] };
    });
    return (
        <svg width="160" height="36" viewBox="0 0 160 36">
            {bars.reduce((acc, bar, i) => {
                const x = acc.x;
                acc.elements.push(
                    <rect key={i} x={x} y={2} width={bar.w} height={28} fill="white" />
                );
                acc.x += bar.w + bar.gap;
                return acc;
            }, { x: 2, elements: [] }).elements}
        </svg>
    );
}

// ── Tear line ─────────────────────────────────────────────────────────────────
function TearLine() {
    return (
        <div style={{ display: "flex", alignItems: "center", gap: 0, margin: "0 -32px" }}>
            <div style={{
                width: 22, height: 22, borderRadius: "50%",
                background: "#0A0A0A", border: "1px solid #2a2a2a", flexShrink: 0,
            }} />
            <div style={{
                flex: 1, height: 1,
                backgroundImage: "repeating-linear-gradient(90deg, #333 0, #333 6px, transparent 6px, transparent 12px)",
            }} />
            <div style={{
                width: 22, height: 22, borderRadius: "50%",
                background: "#0A0A0A", border: "1px solid #2a2a2a", flexShrink: 0,
            }} />
        </div>
    );
}

// ── Main component ────────────────────────────────────────────────────────────
export default function CyberTicket() {
    const [pulse, setPulse] = useState(false);

    useEffect(() => {
        // inject font
        if (!document.getElementById("ibm-plex-mono")) {
            const link = document.createElement("link");
            link.id = "ibm-plex-mono";
            link.rel = "stylesheet";
            link.href = FONT_URL;
            document.head.appendChild(link);
        }
        const iv = setInterval(() => setPulse((p) => !p), 1400);
        return () => clearInterval(iv);
    }, []);

    return (
        <div
            style={{
                minHeight: "100vh",
                background: "#0A0A0A",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                padding: "40px 16px",
                fontFamily: "'IBM Plex Mono', monospace",
                position: "relative",
                overflow: "hidden",
            }}
        >
            {/* full-page grain */}
            <GrainOverlay strength={0.14} />

            {/* Ticket card */}
            <div
                style={{
                    width: "100%",
                    maxWidth: 420,
                    background: "#0A0A0A",
                    border: "1px solid #222",
                    borderRadius: 18,
                    overflow: "hidden",
                    position: "relative",
                    transform: "perspective(900px) rotateX(2.5deg) rotateY(-1.5deg)",
                    boxShadow: "0 32px 80px rgba(0,0,0,0.92), 0 2px 0 #333 inset",
                }}
            >
                <GrainOverlay strength={0.22} />
                <GeometricOverlay />

                {/* 1 ── TOP HEADER BAR */}
                <div
                    style={{
                        background: "#111",
                        borderBottom: "1px solid #222",
                        padding: "12px 20px",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        position: "relative",
                        zIndex: 20,
                    }}
                >
                    <div>
                        <div style={{
                            fontSize: 9, fontWeight: 700, letterSpacing: "0.32em",
                            color: "#FFF", textTransform: "uppercase",
                        }}>NEXUS PROTOCOL</div>
                        <div style={{ fontSize: 7.5, color: "#666", letterSpacing: "0.18em", marginTop: 1 }}>
                            CLASSIFIED ACCESS DOCUMENT
                        </div>
                    </div>
                    <div style={{ textAlign: "right" }}>
                        <div style={{ fontSize: 9, color: "#555", letterSpacing: "0.1em" }}>Ω-09</div>
                        <div style={{ fontSize: 7, color: "#3a3a3a", marginTop: 1 }}>© 2025</div>
                    </div>
                </div>

                {/* 2 ── BRANDING BLOCK */}
                <div style={{ padding: "24px 28px 16px", position: "relative", zIndex: 20 }}>
                    <div style={{
                        display: "flex", alignItems: "center", gap: 12, marginBottom: 6,
                    }}>
                        {/* Wave/neural icon */}
                        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
                            <circle cx="14" cy="14" r="13" stroke="white" strokeWidth="1" />
                            <path d="M4 14 Q7 8 10 14 Q13 20 16 14 Q19 8 22 14 Q24 18 24 14"
                                stroke="white" strokeWidth="1.2" fill="none" strokeLinecap="round" />
                            <circle cx="14" cy="14" r="2" fill="white" />
                        </svg>
                        <div>
                            <div style={{
                                fontSize: 22, fontWeight: 700, letterSpacing: "0.18em",
                                color: "#FFF", textTransform: "uppercase", lineHeight: 1,
                            }}>NEURAL</div>
                            <div style={{
                                fontSize: 22, fontWeight: 400, letterSpacing: "0.34em",
                                color: "#888", textTransform: "uppercase", lineHeight: 1, marginTop: 2,
                            }}>ACCESS</div>
                        </div>
                    </div>
                    <div style={{
                        fontSize: 8, color: "#444", letterSpacing: "0.22em", textTransform: "uppercase",
                    }}>
                        HIGH-CLEARANCE ADMISSION DOCUMENT — SERIES 9 — OMEGA TIER
                    </div>
                </div>

                {/* 3 ── VISUAL CENTERPIECE — Terminal circle */}
                <div style={{
                    padding: "0 28px", position: "relative", zIndex: 20,
                    display: "flex", justifyContent: "center",
                }}>
                    <div style={{
                        width: 260, height: 260,
                        borderRadius: "50%",
                        border: "1px solid #333",
                        overflow: "hidden",
                        position: "relative",
                        boxShadow: "0 0 0 6px #111, 0 0 0 7px #222",
                    }}>
                        <TerminalMask />
                        <GrainOverlay strength={0.26} />
                    </div>
                </div>

                {/* scan status pill */}
                <div style={{
                    display: "flex", justifyContent: "center", marginTop: 12,
                    position: "relative", zIndex: 20,
                }}>
                    <div style={{
                        display: "flex", alignItems: "center", gap: 6,
                        border: "1px solid #2a2a2a", borderRadius: 999,
                        padding: "4px 14px",
                        background: "#0f0f0f",
                    }}>
                        <div style={{
                            width: 5, height: 5, borderRadius: "50%",
                            background: pulse ? "#FFF" : "#444",
                            transition: "background 0.4s",
                        }} />
                        <span style={{ fontSize: 8, letterSpacing: "0.2em", color: "#888", textTransform: "uppercase" }}>
                            SIGNAL {pulse ? "ACTIVE" : "PINGING"}
                        </span>
                    </div>
                </div>

                {/* 4 ── INFORMATION BLOCK */}
                <div style={{
                    padding: "22px 28px 0",
                    position: "relative", zIndex: 20,
                    display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px 12px",
                }}>
                    {[
                        { label: "BEARER", value: "AGENT_NX-44" },
                        { label: "ISSUED", value: "2025.03.06" },
                        { label: "CLEARANCE", value: "OMEGA / Ω" },
                        { label: "EXPIRES", value: "2025.12.31" },
                        { label: "SECTOR", value: "DELTA-9" },
                        { label: "NODE", value: "0xDEAD·BF9" },
                    ].map(({ label, value }) => (
                        <div key={label}>
                            <div style={{
                                fontSize: 7.5, color: "#444", letterSpacing: "0.24em",
                                textTransform: "uppercase", marginBottom: 3,
                            }}>{label}</div>
                            <div style={{
                                fontSize: 11, color: "#DEDEDE", letterSpacing: "0.1em",
                                fontWeight: 600,
                            }}>{value}</div>
                        </div>
                    ))}
                </div>

                {/* divider row */}
                <div style={{
                    padding: "20px 28px 0", position: "relative", zIndex: 20,
                }}>
                    <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                        {Array.from({ length: 3 }).map((_, i) => (
                            <div key={i} style={{
                                flex: 1, height: 1,
                                background: i === 1 ? "#2a2a2a" : "#1a1a1a",
                            }} />
                        ))}
                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{ opacity: 0.4 }}>
                            <polygon points="5,0 10,10 0,10" stroke="white" strokeWidth="1" fill="none" />
                        </svg>
                        {Array.from({ length: 3 }).map((_, i) => (
                            <div key={i} style={{
                                flex: 1, height: 1,
                                background: i === 1 ? "#2a2a2a" : "#1a1a1a",
                            }} />
                        ))}
                    </div>
                </div>

                {/* 5 ── TEAR LINE */}
                <div style={{ padding: "18px 10px 14px", position: "relative", zIndex: 20 }}>
                    <TearLine />
                </div>

                {/* 5 ── FOOTER STRIP */}
                <div style={{
                    padding: "8px 28px 22px",
                    position: "relative", zIndex: 20,
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                }}>
                    {/* Barcode */}
                    <div>
                        <Barcode />
                        <div style={{ fontSize: 7, color: "#333", letterSpacing: "0.16em", marginTop: 3 }}>
                            NX-9912-DELTA-44-0x2F
                        </div>
                    </div>
                    {/* Footer icons & stamp */}
                    <div style={{ textAlign: "right" }}>
                        <div style={{ display: "flex", gap: 6, justifyContent: "flex-end", marginBottom: 6 }}>
                            {["★", "◈", "▲"].map((icon, i) => (
                                <span key={i} style={{
                                    fontSize: i === 0 ? 11 : 9, color: "#444",
                                    fontFamily: "monospace",
                                }}>{icon}</span>
                            ))}
                        </div>
                        <div style={{
                            fontSize: 7, color: "#3a3a3a", letterSpacing: "0.2em",
                            textTransform: "uppercase", lineHeight: 1.6,
                        }}>
                            ADMIT<br />ONE
                        </div>
                    </div>
                </div>

                {/* subtle bottom vignette */}
                <div style={{
                    position: "absolute", bottom: 0, left: 0, right: 0, height: 80,
                    background: "linear-gradient(to top, rgba(0,0,0,0.55), transparent)",
                    pointerEvents: "none", zIndex: 8,
                }} />
            </div>

            {/* ambient page label */}
            <div style={{
                position: "absolute", bottom: 18, left: "50%", transform: "translateX(-50%)",
                fontSize: 8, letterSpacing: "0.3em", color: "#2a2a2a",
                fontFamily: "'IBM Plex Mono', monospace", textTransform: "uppercase",
                zIndex: 20,
            }}>
                NEXUS PROTOCOL — DOCUMENT RENDER v9.1 — CLASSIFIED
            </div>
        </div>
    );
}