export default function LuxuryMobileConcept() {
  return (
    <div className="min-h-screen bg-zinc-950 text-white overflow-x-hidden">
      <header className="sticky top-0 z-50 backdrop-blur-md bg-zinc-950/80 border-b border-white/10 px-5 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-yellow-700" />
          <span className="font-semibold tracking-wide text-lg">LUXURY</span>
        </div>

        <button className="w-11 h-11 rounded-full bg-white/10 flex items-center justify-center text-2xl">
          ☰
        </button>
      </header>

      <main className="pb-20">
        {[1, 2, 3].map((section) => (
          <section key={section} className="mt-8">
            <h2 className="text-xl font-semibold px-5 mb-4 tracking-wide text-zinc-200">
              Carrusel {section}
            </h2>

            <div className="flex gap-4 overflow-x-auto snap-x snap-mandatory px-5 pb-4 scrollbar-hide">
              {[
                {
                  title: 'Power',
                  text: 'Texto trasero de la tarjeta. Aquí puedes poner una descripción más larga.',
                  gradient: 'from-neutral-900 via-zinc-800 to-amber-900',
                },
                {
                  title: 'Success',
                  text: 'Contenido de ejemplo para la parte trasera.',
                  gradient: 'from-black via-zinc-800 to-yellow-700',
                },
                {
                  title: 'Luxury',
                  text: 'Texto editable para cualquier card.',
                  gradient: 'from-zinc-950 via-stone-800 to-amber-700',
                },
              ].map((card, index) => (
                <FlipCard key={index} card={card} />
              ))}
            </div>
          </section>
        ))}
      </main>
    </div>
  )
}

function FlipCard({ card }) {
  return (
    <div className="snap-center shrink-0 w-[88vw] h-[68vh] perspective cursor-pointer group">
      <div className="relative w-full h-full duration-700 transform-style-preserve-3d group-active:rotate-y-180">
        <div
          className={`absolute inset-0 rounded-[34px] bg-gradient-to-br ${card.gradient} p-8 shadow-2xl backface-hidden border border-white/10 flex items-end`}
        >
          <h3 className="text-4xl font-bold tracking-wide">
            {card.title}
          </h3>
        </div>

        <div className="absolute inset-0 rounded-[34px] bg-zinc-900 border border-white/10 p-8 rotate-y-180 backface-hidden flex items-center justify-center text-center">
          <p className="text-zinc-300 leading-relaxed text-lg">
            {card.text}
          </p>
        </div>
      </div>
    </div>
  )
}