mintel.me/apps/web/src/components/PerformanceChart.tsx

"use client";

import React from 'react';
import { cn } from "../utils/cn";
import { ComponentShareButton } from './ComponentShareButton';
import { Reveal } from './Reveal';

const data = [
    { time: 1, conversion: 100, label: "Ideal" },
    { time: 2, conversion: 93, label: "Gut" },
    { time: 3, conversion: 82, label: "Okay" },
    { time: 4, conversion: 65, label: "Kritisch" },
    { time: 5, conversion: 45, label: "Schlecht" },
    { time: 6, conversion: 30, label: "Verlust" },
    { time: 7, conversion: 20, label: "Verlust" },
    { time: 8, conversion: 12, label: "Verlust" },
];

export function PerformanceChart() {
    const shareId = "performance-curve-v1";

    return (
        <Reveal direction="up" delay={0.1}>
            <div id={shareId} className="w-full max-w-2xl mx-auto my-16 group relative transition-all duration-500 ease-out z-10 font-sans">
                {/* Ambient Glow matching the homepage feel */}
                <div className="absolute -inset-1 bg-gradient-to-r from-blue-100/30 to-indigo-100/30 rounded-[2rem] blur opacity-20 group-hover:opacity-40 transition duration-1000 -z-10" />

                <div className="glass bg-white/80 backdrop-blur-xl border border-slate-100 rounded-2xl shadow-sm group-hover:shadow-md group-hover:border-slate-200 transition-all duration-500 overflow-hidden relative">

                    {/* Subtle top shine */}
                    <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white to-transparent opacity-80" />

                    {/* Header */}
                    <div className="border-b border-slate-100 px-6 py-5 flex justify-between items-center relative">
                        <div className="flex items-center gap-3">
                            <span className="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.6)] animate-pulse" />
                            <h4 className="text-sm font-bold tracking-widest text-slate-800 uppercase m-0">
                                Conversion Curve
                            </h4>
                        </div>

                        <div className="flex items-center gap-4">
                            <div className="font-mono text-[10px] text-slate-400 bg-slate-50 px-2 py-0.5 rounded border border-slate-100">
                                MODEL_ALPHA_V3
                            </div>
                            <div className="md:opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                                <ComponentShareButton targetId={shareId} title="Performance & Conversion Curve" />
                            </div>
                        </div>
                    </div>

                    {/* Technical Chart Area */}
                    <div className="relative h-[340px] w-full p-8 flex flex-col justify-end bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGg0MHY0MEgwVjB6bTIwIDIwaDIwdjIwSDIweiIgZmlsbD0iI2Y4ZmFmYyIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==')]">

                        {/* Critical Line */}
                        <div className="absolute top-8 bottom-16 left-[31.25%] w-[0.5px] border-l border-dashed border-red-200 z-0">
                            <div className="absolute top-0 -left-1 transform -translate-x-full text-[9px] font-bold text-red-400 uppercase tracking-widest whitespace-nowrap pr-3">
                                Kritische Schwelle &gt; 2.5s
                            </div>
                        </div>

                        <div className="flex items-end justify-between h-[240px] w-full gap-4 z-10 border-b border-slate-100 relative pb-px">
                            {data.map((d) => {
                                const isCritical = d.time > 2.5;
                                return (
                                    <div key={d.time} className="flex-1 flex flex-col items-center justify-end relative h-full group/bar">

                                        {/* Tooltip */}
                                        <div className="absolute -top-12 opacity-0 group-hover/bar:opacity-100 transition-all duration-300 translate-y-2 group-hover/bar:translate-y-0 bg-white border border-slate-100 shadow-xl px-2.5 py-1.5 flex flex-col items-center pointer-events-none z-20 rounded-lg">
                                            <span className="text-[11px] font-black text-slate-800 tracking-tighter">{d.conversion}% <span className="text-[9px] text-slate-400 font-medium">CVR</span></span>
                                        </div>

                                        {/* Value Line */}
                                        <div className="w-full relative flex justify-center h-full items-end">
                                            <div
                                                className={cn(
                                                    "w-[1.5px] transition-all duration-500 relative",
                                                    isCritical ? "bg-red-400 group-hover/bar:bg-red-500" : "bg-slate-800 group-hover/bar:bg-blue-600"
                                                )}
                                                style={{ height: `${(d.conversion / 100) * 100}%` }}
                                            >
                                                <div className={cn("absolute -top-1.5 -left-1.5 w-3 h-3 rounded-full border-2 bg-white transition-all duration-300 group-hover/bar:scale-125 z-30",
                                                    isCritical ? "border-red-400 group-hover/bar:border-red-500" : "border-slate-800 group-hover/bar:border-blue-600"
                                                )}></div>

                                                {/* Glow for high values */}
                                                {!isCritical && d.conversion > 80 && (
                                                    <div className="absolute -top-4 -left-4 w-8 h-8 rounded-full bg-blue-400/10 blur-md group-hover/bar:bg-blue-400/20 -z-10 transition-colors" />
                                                )}
                                            </div>
                                        </div>

                                        {/* X-Axis */}
                                        <div className="absolute -bottom-8 flex flex-col items-center">
                                            <span className="text-[10px] font-mono font-bold text-slate-400 group-hover/bar:text-slate-900 transition-colors">
                                                {d.time}s
                                            </span>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>
            </div>
        </Reveal>
    );
}