import React, { useState, useEffect } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { ChevronDown, Wrench, Battery, Cog, Cpu } from "lucide-react";
const HERRAMIENTAS = [
{
modelo: "ASM 18-3 PC",
codigo: "7 112 77 60 00 0",
formato: "Pistola",
torqueMin: 0.5,
torqueMax: 3,
speedMin: 250,
speedMax: 1000,
encastre: '1/4" Hex',
dimensiones: "245 x 58 x 175 mm",
peso: 0.8,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASM_18-3_PC.png"
},
{
modelo: "ASM 18-8 PC",
codigo: "7 112 78 60 00 0",
formato: "Pistola",
torqueMin: 1,
torqueMax: 8,
speedMin: 250,
speedMax: 900,
encastre: '1/4" Hex',
dimensiones: "250 x 60 x 180 mm",
peso: 0.85,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASM_18-8_PC.png"
},
{
modelo: "ASM 18-12 PC",
codigo: "7 112 79 60 00 0",
formato: "Pistola",
torqueMin: 4,
torqueMax: 12,
speedMin: 200,
speedMax: 850,
encastre: '1/4" Hex',
dimensiones: "255 x 62 x 180 mm",
peso: 0.9,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASM18-12_71127960000.jpeg"
},
{
modelo: "ASW 18-6 PC",
codigo: "7 112 66 60 00 0",
formato: "Angular",
torqueMin: 1.2,
torqueMax: 6,
speedMin: 200,
speedMax: 800,
encastre: '1/4" Cuadrado',
dimensiones: "390 x 60 x 85 mm",
peso: 1.1,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASW_18-6_PC.png"
},
{
modelo: "ASW 18-12 PC",
codigo: "7 112 68 60 00 0",
formato: "Angular",
torqueMin: 3,
torqueMax: 12,
speedMin: 150,
speedMax: 750,
encastre: '1/4" Cuadrado',
dimensiones: "400 x 60 x 90 mm",
peso: 1.2,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASW_18-12_PC_Angular_ACCUTECH_Imagen_420x420.png"
},
{
modelo: "ASW 18-18 PC",
codigo: "7 112 70 60 00 0",
formato: "Angular",
torqueMin: 6,
torqueMax: 18,
speedMin: 130,
speedMax: 600,
encastre: '1/4" Cuadrado',
dimensiones: "410 x 65 x 95 mm",
peso: 1.3,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASW_18-18_PC.png"
},
{
modelo: "ASW 18-30 PC",
codigo: "7 112 62 60 00 0",
formato: "Angular",
torqueMin: 12,
torqueMax: 30,
speedMin: 100,
speedMax: 450,
encastre: '3/8" Cuadrado',
dimensiones: "425 x 70 x 95 mm",
peso: 1.4,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASW_18-30_PC_Angular_ACCUTECH_Imagen_420x420.png"
},
{
modelo: "ASW 18-45 PC",
codigo: "7 112 63 60 00 0",
formato: "Angular",
torqueMin: 20,
torqueMax: 45,
speedMin: 80,
speedMax: 350,
encastre: '3/8" Cuadrado',
dimensiones: "430 x 70 x 100 mm",
peso: 1.45,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASW_18-45_PC.png"
},
{
modelo: "ASW 18-60 PC",
codigo: "7 112 64 60 00 0",
formato: "Angular",
torqueMin: 25,
torqueMax: 60,
speedMin: 60,
speedMax: 300,
encastre: '1/2" Cuadrado',
dimensiones: "440 x 75 x 105 mm",
peso: 1.5,
origen: "Alemania",
ncm: "84671190",
hs: "84671110",
img: "/images/FEIN_ASW_18-60_PC.png"
}
];
export default function DemoCatalogoFEIN() {
const [tab, setTab] = useState("herramientas");
const [expanded, setExpanded] = useState(null);
// Self-tests simples para prevenir regresiones
useEffect(() => {
console.assert(Array.isArray(HERRAMIENTAS) && HERRAMIENTAS.length > 0, "HERRAMIENTAS no debe estar vacío");
const torqueOk = HERRAMIENTAS.every(h => h.torqueMin <= h.torqueMax);
console.assert(torqueOk, "Torque Min debe ser <= Torque Max");
const rpmOk = HERRAMIENTAS.every(h => h.speedMin <= h.speedMax);
console.assert(rpmOk, "RPM Min debe ser <= RPM Max");
const encOk = HERRAMIENTAS.every(h => typeof h.encastre === 'string');
console.assert(encOk, "Encastre debe ser string");
}, []);
const tabData = [
{ id: "herramientas", label: "Herramientas", icon: <Wrench className="w-4 h-4" /> },
{ id: "accesorios", label: "Accesorios", icon: <Battery className="w-4 h-4" /> },
{ id: "repuestos", label: "Repuestos", icon: <Cog className="w-4 h-4" /> },
{ id: "software", label: "Software", icon: <Cpu className="w-4 h-4" /> }
];
return (
<div className="min-h-screen bg-neutral-50">
<section className="px-6 md:px-10 py-10 md:py-14 bg-gradient-to-b from-orange-500 to-orange-400 text-white">
<div className="max-w-6xl mx-auto">
<h1 className="text-3xl md:text-5xl font-bold leading-tight">FEIN AccuTec – Catálogo Interactivo</h1>
<p className="mt-3 text-white/90 md:text-lg max-w-3xl">
Herramientas de atornillado de precisión industrial. Elegí una categoría para explorar los modelos.
</p>
</div>
</section>
<section className="px-6 md:px-10 py-10">
<div className="max-w-6xl mx-auto">
<Tabs value={tab} onValueChange={setTab}>
<TabsList className="flex justify-between bg-white shadow-md border rounded-2xl p-2 mb-8 overflow-x-auto">
{tabData.map((t) => (
<TabsTrigger
key={t.id}
value={t.id}
className={`flex items-center gap-2 px-5 py-3 rounded-xl transition-all duration-200 text-sm font-semibold ${
tab === t.id
? "bg-orange-500 text-white shadow-md scale-105"
: "bg-neutral-100 text-neutral-600 hover:bg-orange-100 hover:text-orange-600"
}`}
>
{t.icon}
{t.label}
</TabsTrigger>
))}
</TabsList>
<TabsContent value="herramientas">
<div className="overflow-x-auto border rounded-xl bg-white shadow-sm">
<table className="min-w-full text-left border-collapse">
<thead className="bg-orange-500 text-white text-sm uppercase">
<tr>
<th className="py-3 px-4">Dibujo</th>
<th className="py-3 px-4">Modelo</th>
<th className="py-3 px-4">Código</th>
<th className="py-3 px-4">Formato</th>
<th className="py-3 px-4">Torque Mín. (Nm)</th>
<th className="py-3 px-4">Torque Máx. (Nm)</th>
<th className="py-3 px-4">Velocidad (RPM)</th>
<th className="py-3 px-4">Peso (kg)</th>
</tr>
</thead>
<tbody>
{HERRAMIENTAS.map((tool, i) => (
<React.Fragment key={i}>
<tr
className="border-b hover:bg-orange-50 cursor-pointer transition-all"
onClick={() => setExpanded(expanded === i ? null : i)}
>
<td className="py-3 px-4">
<img src={tool.img} alt={tool.modelo} className="w-16 h-auto mx-auto" />
</td>
<td className="py-3 px-4 font-semibold text-neutral-800">{tool.modelo}</td>
<td className="py-3 px-4 text-neutral-600">{tool.codigo}</td>
<td className="py-3 px-4">{tool.formato}</td>
<td className="py-3 px-4">{tool.torqueMin}</td>
<td className="py-3 px-4">{tool.torqueMax}</td>
<td className="py-3 px-4">{tool.speedMin}–{tool.speedMax}</td>
<td className="py-3 px-4">{tool.peso}</td>
</tr>
{expanded === i && (
<tr className="bg-orange-50 border-b">
<td colSpan="8" className="p-4 text-sm text-neutral-700">
<div className="flex flex-col md:flex-row gap-4 items-start">
<img src={tool.img} alt={tool.modelo} className="w-40 h-auto rounded-lg shadow-md" />
<div>
<h3 className="font-semibold text-lg mb-2 text-neutral-800">{tool.modelo}</h3>
<p><strong>Formato:</strong> {tool.formato}</p>
<p><strong>Torque:</strong> {tool.torqueMin}–{tool.torqueMax} Nm</p>
<p><strong>Velocidad:</strong> {tool.speedMin}–{tool.speedMax} RPM</p>
<p><strong>Tipo de encastre:</strong> {tool.encastre}</p>
<p><strong>Dimensiones:</strong> {tool.dimensiones}</p>
<p><strong>Peso:</strong> {tool.peso} kg</p>
<p><strong>Origen:</strong> {tool.origen}</p>
<p><strong>NCM:</strong> {tool.ncm} · <strong>HS Code:</strong> {tool.hs}</p>
<p className="mt-2 text-neutral-600">
Estas herramientas están diseñadas para precisión industrial y cumplen estándares ISO 5393 y VDI 2647.
</p>
</div>
</div>
</td>
</tr>
)}
</React.Fragment>
))}
</tbody>
</table>
</div>
</TabsContent>
<TabsContent value="accesorios">
<p className="text-neutral-600 text-center py-10">Próximamente: accesorios y baterías disponibles.</p>
</TabsContent>
<TabsContent value="repuestos">
<p className="text-neutral-600 text-center py-10">Próximamente: repuestos y cargadores FEIN.</p>
</TabsContent>
<TabsContent value="software">
<p className="text-neutral-600 text-center py-10">Próximamente: software AccuTec ParameterControl.</p>
</TabsContent>
</Tabs>
</div>
</section>
</div>
);
}
