Accordion Hover

import { useState } from "react";

const items = [
  { title: "Design", desc: "Modern, responsive layouts built with Tailwind CSS utility classes for rapid prototyping." },
  { title: "Development", desc: "Clean React components with TypeScript. No external dependencies beyond React and Tailwind." },
  { title: "Deployment", desc: "Optimized for Vercel, Netlify, and static hosting. Zero configuration needed for deployment." },
  { title: "Analytics", desc: "Built-in analytics integration with privacy-first tracking and real-time dashboard." },
];

export function AccordionHover() {
  const [hovered, setHovered] = useState<number>(0);

  return (
    <div className="max-w-2xl mx-auto py-16 px-4 text-center">
      <h2 className="text-3xl font-bold text-gray-900 mb-2">Hover to Explore</h2>
      <p className="text-gray-500 mb-10 text-sm">Hover over each item to expand</p>
      <div className="flex gap-2 h-80">
        {items.map((item, i) => {
          const isOpen = hovered === i;
          return (
            <div
              key={i}
              className={`relative flex-1 rounded-2xl overflow-hidden cursor-pointer transition-all duration-500 ${isOpen ? 'flex-[3]' : 'flex-1'}`}
              onMouseEnter={() => setHovered(i)}
              style={{ backgroundColor: isOpen ? '#eef2ff' : '#f8fafc' }}
            >
              <div className="absolute inset-0 flex items-center justify-center">
                <div className={`transition-all duration-500 ${isOpen ? 'scale-100 opacity-100' : 'scale-100 opacity-100'}`}>
                  <div className={`px-4 transition-all duration-500 ${isOpen ? '' : 'rotate-0'}`}>
                    {!isOpen && (
                      <span className="text-sm font-semibold text-gray-700 [writing-mode:vertical-lr] tracking-wider">{item.title}</span>
                    )}
                  </div>
                  {isOpen && (
                    <div className="p-6 text-left max-w-xs">
                      <h3 className="text-xl font-bold text-gray-900 mb-3">{item.title}</h3>
                      <p className="text-gray-600 text-sm leading-relaxed">{item.desc}</p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}