import { useState, useEffect, useRef } from "react";
const parts = [
// Outer Body
{ id: 1, category: "Outer Body", categoryIcon: "🏠", name: "Top Panel", emoji: "⬜", color: "#1a1a2e", accent: "#e94560", description: "The top panel is the uppermost structural cover of the refrigerator. It protects internal wiring and components from dust and moisture, while providing a flat surface for placing items on top of the unit.", image: "https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=600&q=80" },
{ id: 2, category: "Outer Body", categoryIcon: "🏠", name: "Side Panel", emoji: "▭", color: "#16213e", accent: "#0f3460", description: "Side panels form the outer walls of the refrigerator cabinet. Made from steel or aluminum, they provide structural rigidity and house the insulation layer that keeps cold air inside.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
{ id: 3, category: "Outer Body", categoryIcon: "🏠", name: "Back Panel", emoji: "◻", color: "#1a1a2e", accent: "#533483", description: "The back panel covers the rear of the refrigerator, protecting the compressor, condenser coils, and all rear-mounted components. It allows ventilation while shielding electrical parts.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 4, category: "Outer Body", categoryIcon: "🏠", name: "Front Door", emoji: "🚪", color: "#0d0d0d", accent: "#f5a623", description: "The front door is the primary access point to the refrigerator compartment. It contains multiple storage shelves and a thick insulated core sealed by a magnetic gasket to maintain cold temperatures.", image: "https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=600&q=80" },
{ id: 5, category: "Outer Body", categoryIcon: "🏠", name: "Door Handle", emoji: "🤝", color: "#1c1c1c", accent: "#c0c0c0", description: "The door handle is an ergonomic grip attached to the refrigerator door. Made from stainless steel, plastic, or chrome, it allows easy opening and withstands thousands of daily pulls without loosening.", image: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80" },
{ id: 6, category: "Outer Body", categoryIcon: "🏠", name: "Door Gasket / Rubber Seal", emoji: "🔄", color: "#1a1a2e", accent: "#00b4d8", description: "The door gasket is a flexible magnetic rubber strip lining the door perimeter. It creates an airtight seal when closed, preventing warm air infiltration and maintaining energy efficiency. Worn gaskets lead to frost buildup and energy waste.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
{ id: 7, category: "Outer Body", categoryIcon: "🏠", name: "Door Hinge", emoji: "🔩", color: "#0d1117", accent: "#58a6ff", description: "Door hinges are pivot mechanisms that allow smooth opening and closing of the refrigerator door. Heavy-duty hinges support the full door weight and must be properly aligned to ensure the gasket seals completely.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 8, category: "Outer Body", categoryIcon: "🏠", name: "Adjustable Legs", emoji: "📐", color: "#1a1a1a", accent: "#4caf50", description: "Adjustable legs at the base allow leveling the refrigerator on uneven floors. Proper leveling ensures the door swings and seals correctly, and prevents compressor oil from pooling in the wrong direction.", image: "https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=600&q=80" },
// Cooling System
{ id: 9, category: "Cooling System", categoryIcon: "❄️", name: "Compressor", emoji: "⚙️", color: "#0a0a1a", accent: "#00d4ff", description: "The compressor is the heart of the refrigeration system. It compresses refrigerant gas, raising its temperature and pressure so it can release heat through the condenser. Modern inverter compressors vary speed for energy savings.", image: "https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=600&q=80" },
{ id: 10, category: "Cooling System", categoryIcon: "❄️", name: "Condenser Coil", emoji: "〰️", color: "#0a1628", accent: "#ff6b35", description: "The condenser coil is a set of tubes located at the back or bottom of the refrigerator. Hot compressed refrigerant flows through these coils, releasing heat into the surrounding air before it enters the expansion device.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 11, category: "Cooling System", categoryIcon: "❄️", name: "Evaporator Coil", emoji: "❄️", color: "#0a1628", accent: "#74b9ff", description: "Located inside the freezer or fresh food section, the evaporator coil absorbs heat from the interior air as cold liquid refrigerant evaporates into a gas. This is where actual cooling happens inside your refrigerator.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
{ id: 12, category: "Cooling System", categoryIcon: "❄️", name: "Condenser Fan", emoji: "🌀", color: "#0d1117", accent: "#f9ca24", description: "The condenser fan draws air over the condenser coils to dissipate heat more effectively. Without proper airflow, the condenser cannot release heat efficiently, causing the compressor to overheat and the refrigerator to not cool properly.", image: "https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=600&q=80" },
{ id: 13, category: "Cooling System", categoryIcon: "❄️", name: "Evaporator Fan", emoji: "💨", color: "#0a0a1a", accent: "#a29bfe", description: "The evaporator fan circulates cold air from the evaporator coil throughout the refrigerator and freezer compartments. A failed evaporator fan motor causes uneven temperatures and frost accumulation.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 14, category: "Cooling System", categoryIcon: "❄️", name: "Capillary Tube", emoji: "〰", color: "#0a1628", accent: "#fd79a8", description: "The capillary tube is a thin, long copper tube that acts as a metering device, restricting refrigerant flow and causing a pressure drop. This pressure reduction causes the refrigerant to cool before entering the evaporator coil.", image: "https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=600&q=80" },
{ id: 15, category: "Cooling System", categoryIcon: "❄️", name: "Filter Drier", emoji: "🔵", color: "#0d1117", accent: "#00cec9", description: "The filter drier removes moisture and contaminants from the refrigerant. Moisture in a refrigeration system can cause ice blockages in the capillary tube or chemical breakdown of the compressor oil, leading to system failure.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 16, category: "Cooling System", categoryIcon: "❄️", name: "Refrigerant Gas (R600a)", emoji: "💧", color: "#0a0a1a", accent: "#55efc4", description: "Refrigerant is the working fluid that cycles through the system, absorbing and releasing heat. Modern refrigerators use eco-friendly R600a (isobutane) or R290 (propane), which have very low global warming potential compared to older R134a gas.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
// Electrical Parts
{ id: 17, category: "Electrical", categoryIcon: "⚡", name: "Thermostat", emoji: "🌡️", color: "#1a0a0a", accent: "#ff4757", description: "The thermostat monitors the internal temperature and signals the compressor to start or stop cooling. Mechanical thermostats use a temperature-sensitive bellows; electronic ones use sensors for precise control down to ±0.5°C.", image: "https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=600&q=80" },
{ id: 18, category: "Electrical", categoryIcon: "⚡", name: "Main PCB Board", emoji: "🖥️", color: "#0a0a1a", accent: "#1e90ff", description: "The main printed circuit board is the brain of modern refrigerators. It processes temperature sensor data, controls the compressor, fans, defrost heater, and display. A faulty PCB can cause a complete refrigerator failure.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
{ id: 19, category: "Electrical", categoryIcon: "⚡", name: "Defrost Heater", emoji: "🔥", color: "#1a0a0a", accent: "#ff6348", description: "The defrost heater is an electric heating element wrapped around the evaporator coil. It activates periodically to melt frost buildup on the coil, maintaining efficient heat exchange. Typically runs for 20-30 minutes every 6-12 hours.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 20, category: "Electrical", categoryIcon: "⚡", name: "Defrost Timer", emoji: "⏲️", color: "#0a1628", accent: "#ffa502", description: "The defrost timer controls how often and how long the defrost heater operates. Mechanical timers use a rotating cam; electronic models use the main PCB. A stuck defrost timer can cause excessive frost buildup or a constantly running heater.", image: "https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=600&q=80" },
{ id: 21, category: "Electrical", categoryIcon: "⚡", name: "Temperature Sensor", emoji: "📡", color: "#0d1117", accent: "#7bed9f", description: "Temperature sensors (thermistors) provide real-time temperature readings to the PCB. Refrigerators typically have sensors in the fridge section, freezer, and near the evaporator. Accurate sensors ensure food safety and energy efficiency.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
{ id: 22, category: "Electrical", categoryIcon: "⚡", name: "Inverter Board", emoji: "⚡", color: "#0a0a1a", accent: "#eccc68", description: "The inverter board converts AC power to DC and varies the speed of the compressor motor. Inverter technology allows the compressor to run at different speeds — slow for maintenance cooling and fast for rapid temperature recovery — saving up to 40% energy.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
{ id: 23, category: "Electrical", categoryIcon: "⚡", name: "Door Switch", emoji: "🔘", color: "#1a1a1a", accent: "#dfe6e9", description: "The door switch detects when the door is opened or closed. When activated, it turns on the interior light and may pause the evaporator fan to prevent frost formation. A faulty door switch keeps the light on, generating heat inside.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 24, category: "Electrical", categoryIcon: "⚡", name: "Interior LED Light", emoji: "💡", color: "#0a0a1a", accent: "#fdcb6e", description: "Modern refrigerators use LED lighting for bright, energy-efficient illumination. LEDs last far longer than incandescent bulbs, produce less heat that could warm the interior, and provide instant full brightness without warm-up time.", image: "https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=600&q=80" },
{ id: 25, category: "Electrical", categoryIcon: "⚡", name: "Thermal Fuse", emoji: "🔌", color: "#1a0a0a", accent: "#e17055", description: "The thermal fuse is a one-time safety device that permanently opens if temperatures exceed a safe limit, cutting power to prevent fire or damage. Located near the defrost heater, it must be replaced after triggering to restore functionality.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
// Freezer Section
{ id: 26, category: "Freezer", categoryIcon: "🧊", name: "Freezer Door", emoji: "🚪", color: "#0a1628", accent: "#74b9ff", description: "The freezer door provides access to the freezer compartment. It has extra-thick insulation to maintain sub-zero temperatures and a heavy-duty magnetic gasket seal. Many modern designs feature a separate door for easy access without opening the main fridge.", image: "https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=600&q=80" },
{ id: 27, category: "Freezer", categoryIcon: "🧊", name: "Ice Maker", emoji: "🧊", color: "#0a1628", accent: "#00b4d8", description: "The ice maker automatically produces ice cubes using water from the connected supply line. It includes a water valve, ice mold, ejector arm, and storage bin. When full, a sensor stops production. Output is typically 3-4 kg of ice per day.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
{ id: 28, category: "Freezer", categoryIcon: "🧊", name: "Ice Tray", emoji: "🫙", color: "#0d1117", accent: "#a29bfe", description: "The ice tray is a molded container used to make ice cubes by filling with water and placing in the freezer. Modern trays are made from flexible silicone for easy cube release. Twist-type plastic trays are used in manual defrost models.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 29, category: "Freezer", categoryIcon: "🧊", name: "Freezer Drawer", emoji: "📦", color: "#0a0a1a", accent: "#55efc4", description: "Freezer drawers are pull-out storage compartments in the freezer section. They organize frozen foods by category and allow easy access without having to move items around. Deep drawers can hold large items like whole chickens or ice cream tubs.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
// Refrigerator Compartment
{ id: 30, category: "Fridge Compartment", categoryIcon: "🥦", name: "Glass Shelf", emoji: "🪟", color: "#0a1a0a", accent: "#00b894", description: "Tempered glass shelves provide strong, hygienic storage surfaces inside the refrigerator. Tempered glass is 5x stronger than regular glass and won't shatter into sharp pieces if broken. Spill-safe versions have raised edges to contain liquid spills.", image: "https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=600&q=80" },
{ id: 31, category: "Fridge Compartment", categoryIcon: "🥦", name: "Vegetable Crisper", emoji: "🥬", color: "#0a1a0a", accent: "#55efc4", description: "The vegetable crisper is a sealed drawer at the bottom of the refrigerator that maintains higher humidity for fresh produce. The controlled environment slows moisture loss from vegetables and fruits, extending their freshness by several days.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
{ id: 32, category: "Fridge Compartment", categoryIcon: "🥦", name: "Door Shelf", emoji: "📚", color: "#0a1a0a", accent: "#81ecec", description: "Door shelves are molded storage pockets built into the inner face of the refrigerator door. They hold bottles, condiments, and small containers. Being on the door means they experience the most temperature fluctuation when the door opens.", image: "https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=600&q=80" },
{ id: 33, category: "Fridge Compartment", categoryIcon: "🥦", name: "Egg Tray", emoji: "🥚", color: "#1a1a0a", accent: "#fdcb6e", description: "The egg tray is a dedicated holder designed to store eggs safely. It holds eggs with the pointed end down, which keeps the air cell stable and extends freshness. Most hold 6-12 eggs and can be located on a door shelf or main shelf.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 34, category: "Fridge Compartment", categoryIcon: "🥦", name: "Water Filter", emoji: "💧", color: "#0a1628", accent: "#74b9ff", description: "The water filter removes impurities, chlorine, lead, and bacteria from the water supply before it reaches the ice maker or water dispenser. Activated carbon filters should be replaced every 6 months for optimal performance.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
{ id: 35, category: "Fridge Compartment", categoryIcon: "🥦", name: "Bottle Rack", emoji: "🍶", color: "#0a1a0a", accent: "#a29bfe", description: "The bottle rack is a specially designed holder for storing wine bottles, beverages, or large containers horizontally. It prevents bottles from rolling and keeps them at consistent cool temperatures for optimal preservation.", image: "https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=600&q=80" },
// Airflow
{ id: 36, category: "Air Flow", categoryIcon: "🌬️", name: "Air Damper", emoji: "🎛️", color: "#0a0a1a", accent: "#74b9ff", description: "The air damper is a motorized or thermostat-controlled flap that regulates cold air flow between the freezer and fresh food sections. By opening and closing, it maintains precise temperatures in each zone without running the compressor constantly.", image: "https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=600&q=80" },
{ id: 37, category: "Air Flow", categoryIcon: "🌬️", name: "Air Duct", emoji: "🌀", color: "#0a1628", accent: "#00cec9", description: "Air ducts are internal channels that direct cold air from the evaporator to all parts of the refrigerator. Proper duct design ensures uniform temperature distribution, eliminating warm spots that can lead to premature food spoilage.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 38, category: "Air Flow", categoryIcon: "🌬️", name: "Vent Grill", emoji: "▦", color: "#0d1117", accent: "#dfe6e9", description: "Vent grills are perforated covers over air outlets and inlets inside the refrigerator. They allow cold air to flow while preventing food items from blocking the air pathways. Blocked vents are a common cause of poor cooling performance.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
// Drain & Defrost
{ id: 39, category: "Drain & Defrost", categoryIcon: "💧", name: "Drain Hole", emoji: "🕳️", color: "#0a1a0a", accent: "#00b894", description: "The drain hole is a small opening at the bottom of the freezer section that allows defrost water to drain away from the evaporator area. A clogged drain hole causes water to pool in the freezer or leak onto the floor.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
{ id: 40, category: "Drain & Defrost", categoryIcon: "💧", name: "Drain Pan", emoji: "🫙", color: "#0a1628", accent: "#81ecec", description: "The drain pan sits beneath the refrigerator and collects defrost water that drains through the drain pipe. In most refrigerators, this water evaporates naturally due to heat from the compressor — so the pan rarely needs manual emptying.", image: "https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=600&q=80" },
{ id: 41, category: "Drain & Defrost", categoryIcon: "💧", name: "Drain Pipe", emoji: "🔧", color: "#0a1a0a", accent: "#55efc4", description: "The drain pipe carries meltwater from the evaporator tray through the refrigerator body down to the drain pan. A cracked or kinked drain pipe can cause water leaks inside the refrigerator or on the kitchen floor.", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" },
// Smart Parts
{ id: 42, category: "Smart Parts", categoryIcon: "📱", name: "Wi-Fi Module", emoji: "📶", color: "#0a0a2a", accent: "#6c5ce7", description: "The Wi-Fi module connects the refrigerator to your home network, enabling smartphone control and monitoring. You can receive door-open alerts, adjust temperatures remotely, get filter replacement reminders, and run diagnostics from anywhere.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
{ id: 43, category: "Smart Parts", categoryIcon: "📱", name: "Touch Display", emoji: "📱", color: "#0a0a2a", accent: "#a29bfe", description: "The touch display is an interactive screen on smart refrigerators for controlling settings, viewing inside camera feeds, browsing recipes, creating shopping lists, and streaming media. Some models feature 21-inch HD screens with Android-based interfaces.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
{ id: 44, category: "Smart Parts", categoryIcon: "📱", name: "Camera Module", emoji: "📷", color: "#0a0a1a", accent: "#fd79a8", description: "Interior cameras let you see what's in your refrigerator from your smartphone while grocery shopping. Wide-angle cameras capture the full interior, helping reduce food waste by keeping track of what you have and what's expiring soon.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
// Inverter Parts
{ id: 45, category: "Inverter", categoryIcon: "🔋", name: "Inverter Compressor", emoji: "⚙️", color: "#0a1a0a", accent: "#00b894", description: "An inverter compressor varies its motor speed continuously rather than cycling on/off. It runs slowly when little cooling is needed and ramps up when temperatures rise. This eliminates the energy spikes of traditional compressors and can reduce electricity use by up to 40%.", image: "https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=600&q=80" },
{ id: 46, category: "Inverter", categoryIcon: "🔋", name: "Inverter PCB", emoji: "🖥️", color: "#0a1628", accent: "#74b9ff", description: "The inverter PCB controls the speed of the inverter compressor by varying the frequency and voltage of AC power delivered to the motor. It responds to temperature sensor data in real time to maintain optimal cooling with minimal energy consumption.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
{ id: 47, category: "Inverter", categoryIcon: "🔋", name: "Voltage Stabilizer Circuit", emoji: "⚡", color: "#1a0a0a", accent: "#e17055", description: "The voltage stabilizer circuit protects the refrigerator from voltage fluctuations in the power supply. It ensures the compressor and electronics receive steady voltage, preventing damage from surges or drops common in areas with unstable power grids.", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" },
];
const categoryColors = {
"Outer Body": { bg: "#1a1a2e", accent: "#e94560", gradient: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)" },
"Cooling System": { bg: "#0a1628", accent: "#00d4ff", gradient: "linear-gradient(135deg, #0a1628 0%, #0d2137 100%)" },
"Electrical": { bg: "#1a0a0a", accent: "#ff4757", gradient: "linear-gradient(135deg, #1a0a0a 0%, #2d0a0a 100%)" },
"Freezer": { bg: "#0a1628", accent: "#74b9ff", gradient: "linear-gradient(135deg, #0a1628 0%, #0a1f3d 100%)" },
"Fridge Compartment": { bg: "#0a1a0a", accent: "#00b894", gradient: "linear-gradient(135deg, #0a1a0a 0%, #0a2e0a 100%)" },
"Air Flow": { bg: "#0a0a1a", accent: "#a29bfe", gradient: "linear-gradient(135deg, #0a0a1a 0%, #12123a 100%)" },
"Drain & Defrost": { bg: "#0a1a1a", accent: "#81ecec", gradient: "linear-gradient(135deg, #0a1a1a 0%, #0a2e2e 100%)" },
"Smart Parts": { bg: "#0a0a2a", accent: "#6c5ce7", gradient: "linear-gradient(135deg, #0a0a2a 0%, #1a0a3a 100%)" },
"Inverter": { bg: "#0a1a0a", accent: "#00b894", gradient: "linear-gradient(135deg, #0a1a0a 0%, #0f2c0f 100%)" },
};
export default function FridgePartsApp() {
const [currentIndex, setCurrentIndex] = useState(0);
const [animating, setAnimating] = useState(false);
const [direction, setDirection] = useState("next");
const [imgLoaded, setImgLoaded] = useState(false);
const [showSplash, setShowSplash] = useState(true);
const [showAllParts, setShowAllParts] = useState(false);
const imgRef = useRef(null);
const part = parts[currentIndex];
const catTheme = categoryColors[part.category] || { bg: "#111", accent: "#fff", gradient: "linear-gradient(135deg, #111, #222)" };
const progress = ((currentIndex + 1) / parts.length) * 100;
useEffect(() => {
setImgLoaded(false);
}, [currentIndex]);
const navigate = (dir) => {
if (animating) return;
setDirection(dir);
setAnimating(true);
setTimeout(() => {
if (dir === "next" && currentIndex < parts.length - 1) setCurrentIndex(i => i + 1);
if (dir === "prev" && currentIndex > 0) setCurrentIndex(i => i - 1);
setAnimating(false);
}, 320);
};
if (showSplash) {
return (
{/* Animated background particles */}
{[...Array(20)].map((_, i) => (
))}
🧊
Refrigerator Parts Guide
Professional training tool for refrigerator technicians
setImgLoaded(true)}
style={{
width: "100%", height: "100%", objectFit: "cover",
display: imgLoaded ? "block" : "none",
transition: "opacity 0.4s"
}}
/>
{/* Gradient overlay */}
{/* Part number badge */}