import React, { useMemo, useState } from "react"; import { motion } from "framer-motion"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Pipette, RotateCcw, Copy, Check } from "lucide-react"; const parts = [ { id: "center", label: "Center Spine", defaultColor: "#111827" }, { id: "left", label: "Left Side Panel", defaultColor: "#2d2d2d" }, { id: "right", label: "Right Side Panel", defaultColor: "#2d2d2d" }, { id: "vents", label: "Vent Inserts", defaultColor: "#b91c1c" }, { id: "rails", label: "Outer Rails", defaultColor: "#d4af37" }, { id: "lettering", label: "Raised Lettering", defaultColor: "#facc15" }, { id: "bolts", label: "Bolt Accents", defaultColor: "#c0c0c0" }, ]; const palettes = [ { name: "Carbon Flash", color: "#161616" }, { name: "Gloss Black", color: "#050505" }, { name: "Competition Yellow", color: "#ffd400" }, { name: "Red Mist", color: "#8b111d" }, { name: "Edge Red", color: "#c40018" }, { name: "Torch Red", color: "#e10600" }, { name: "Silver Chrome", color: "#c7c7c7" }, { name: "Black Chrome", color: "#343434" }, { name: "Rapid Blue", color: "#0072ce" }, { name: "Arctic White", color: "#f6f6f1" }, { name: "Hypersonic Gray", color: "#60666d" }, { name: "Transparent Red", color: "#a20d1d" }, ]; function contrastText(hex) { const clean = hex.replace("#", ""); const r = parseInt(clean.substring(0, 2), 16); const g = parseInt(clean.substring(2, 4), 16); const b = parseInt(clean.substring(4, 6), 16); const yiq = (r * 299 + g * 587 + b * 114) / 1000; return yiq >= 140 ? "#111827" : "#ffffff"; } export default function C8EngineCoverColorSelector() { const defaultColors = useMemo( () => Object.fromEntries(parts.map((part) => [part.id, part.defaultColor])), [] ); const [selectedPart, setSelectedPart] = useState("center"); const [colors, setColors] = useState(defaultColors); const [copied, setCopied] = useState(false); const selected = parts.find((part) => part.id === selectedPart); const setPartColor = (color) => { setColors((current) => ({ ...current, [selectedPart]: color })); }; const reset = () => { setColors(defaultColors); setSelectedPart("center"); setCopied(false); }; const buildSummary = () => parts.map((part) => `${part.label}: ${colors[part.id]}`).join("\n"); const copySummary = async () => { try { await navigator.clipboard.writeText(buildSummary()); setCopied(true); setTimeout(() => setCopied(false), 1600); } catch { setCopied(false); } }; const ZoneButton = ({ id, className, style, label }) => ( setSelectedPart(id)} whileHover={{ scale: 1.015 }} whileTap={{ scale: 0.985 }} className={`absolute border-2 transition-all duration-200 ${className} ${ selectedPart === id ? "border-white ring-4 ring-yellow-300/80 shadow-2xl z-20" : "border-white/35 shadow-lg z-10" }`} style={{ background: colors[id], ...style }} aria-label={label} title={label} /> ); return (

C8 Corvette

Engine Cover Color Studio

Pick a part, choose a finish, and build a custom C8 engine bay color layout before painting, wrapping, hydro-dipping, or making dress-up panels.

Click a zone to customize it

Selected part

{selected?.label}

{palettes.map((finish) => ( ))}

Build Sheet

{parts.map((part) => ( ))}
); }
top of page

@2026 BY PD WEB DESIGNS & CRCP

bottom of page