import { motion } from 'motion/react';
import Science3D from '@/src/components/Science3D';
import { Microscope, Atom, Zap, Globe } from 'lucide-react';

export default function Infographic() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="text-center mb-16 border-b-4 border-[#1a1a1a] pb-8">
        <h1 className="text-6xl font-black text-[#1a1a1a] mb-4">INFOGRAFÍA 3D: EL ÁTOMO</h1>
        <p className="text-sm italic text-[#1a1a1a]/60 tracking-widest uppercase">
          Visualización interactiva de la estructura fundamental de la materia
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        {/* Main 3D Section */}
        <div className="lg:col-span-8">
          <Science3D />
          
          <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="border-2 border-[#1a1a1a] p-6 bg-white shadow-[8px_8px_0px_0px_rgba(26,26,26,1)]">
              <h3 className="text-xl font-black mb-4 flex items-center gap-2">
                <Atom className="w-6 h-6" /> EL NÚCLEO
              </h3>
              <p className="text-sm leading-relaxed text-justify drop-cap">
                Compuesto por protones y neutrones, el núcleo concentra casi toda la masa del átomo. 
                A pesar de su tamaño ínfimo en comparación con el volumen total, es la fuente de la 
                fuerza nuclear fuerte que mantiene unido el universo.
              </p>
            </div>
            <div className="border-2 border-[#1a1a1a] p-6 bg-white shadow-[8px_8px_0px_0px_rgba(26,26,26,1)]">
              <h3 className="text-xl font-black mb-4 flex items-center gap-2">
                <Zap className="w-6 h-6" /> LOS ELECTRONES
              </h3>
              <p className="text-sm leading-relaxed text-justify drop-cap">
                Partículas de carga negativa que orbitan el núcleo en niveles de energía específicos. 
                Su comportamiento cuántico define las propiedades químicas de los elementos y permite 
                la existencia de la electricidad tal como la conocemos.
              </p>
            </div>
          </div>
        </div>

        {/* Sidebar Section */}
        <div className="lg:col-span-4 space-y-10">
          <div className="border-4 border-double border-[#1a1a1a] p-8 bg-white">
            <h4 className="text-xs font-black uppercase tracking-widest mb-6 border-b border-[#1a1a1a] pb-2">
              DATOS CURIOSOS
            </h4>
            <ul className="space-y-6">
              {[
                { title: "Vacío Absoluto", text: "Si un átomo fuera del tamaño de un estadio, el núcleo sería como una canica en el centro." },
                { title: "Velocidad Extrema", text: "Los electrones se mueven a velocidades cercanas a los 2,200 km/s." },
                { title: "Identidad Única", text: "El número de protones define qué elemento es el átomo en la tabla periódica." }
              ].map((item, i) => (
                <li key={i} className="border-b border-dotted border-[#1a1a1a]/40 pb-4 last:border-0">
                  <h5 className="text-sm font-black uppercase mb-1">{item.title}</h5>
                  <p className="text-xs italic text-[#1a1a1a]/80">{item.text}</p>
                </li>
              ))}
            </ul>
          </div>

          <div className="bg-[#1a1a1a] text-[#f4f1ea] p-8">
            <Microscope className="w-12 h-12 mb-6 opacity-50" />
            <h4 className="text-2xl font-black mb-4 leading-none">¿CÓMO LO VEMOS?</h4>
            <p className="text-sm leading-relaxed italic opacity-80">
              "Los microscopios de efecto túnel nos permiten hoy 'ver' y manipular átomos individuales, 
              abriendo la puerta a la nanotecnología y la computación cuántica."
            </p>
          </div>
        </div>
      </div>

      {/* Bottom Banner */}
      <div className="mt-20 border-t-2 border-[#1a1a1a] pt-10 flex flex-wrap justify-center gap-10">
        <div className="flex items-center gap-3 text-xs font-black uppercase tracking-widest">
          <Globe className="w-5 h-5" /> Educación Universal
        </div>
        <div className="flex items-center gap-3 text-xs font-black uppercase tracking-widest">
          <Atom className="w-5 h-5" /> Ciencia para Todos
        </div>
      </div>
    </div>
  );
}