import React, { useState, useEffect } from 'react';

// Dados mockados para simular os perfis de produto da JwG.
// Contém campos para o estado QX (visíveis) e QA (ocultos/borrados).
const productsData = [
  {
    id: 1,
    name: "ONYX Harness - Mister B",
    bio: "Resistente como teus segredos. Flexível como tua noite. Este harness não é acessório, é ritual. Cada fivela é um convite ao excesso. E, quando você veste, o jogo muda: você não está mais olhando o catálogo, você é o catálogo.",
    image: "https://placehold.co/600x600/1C1C1C/FFFFFF?text=ONYX%20Harness",
    location: "Berlim",
    tribes: ["Fetish", "Leather", "Queer Excess"],
    status: "Disponível para quem ousar",
    interests: ["Dominação suave", "exposição", "noites longas"],
    looking_for: "Corpos que saibam que pertencimento nasce do risco.",
    qa_images: [
      "https://placehold.co/800x600/292929/FFFFFF?text=Detalhe%20das%20Fivelas",
      "https://placehold.co/800x600/3B3B3B/FFFFFF?text=Foto%20Editorial%20com%20Modelo",
      "https://placehold.co/800x600/4D4D4D/FFFFFF?text=Bastidores%20no%20Clube",
    ],
    qa_video: "https://placehold.co/800x450/111111/FFFFFF?text=Mini%20Vídeo%20Teaser%20(Apenas%20QA)",
    qa_reviews: [
      "Um dos meus favoritos. A qualidade do couro é incomparável e a sensação de 'pertencimento' é instantânea. - Alex",
      "Senti que a bio me encontrou. O harness é a materialização do que a gente vive na noite. - Leo",
    ],
    qa_badges: ["Membro Original", "Oráculo"],
  },
  {
    id: 2,
    name: "Sublime Collar - Venus V",
    bio: "Um sussurro de seda e aço. Este colar não aprisiona, ele liberta a sua voz. Para quem entende que o limite é um ponto de partida.",
    image: "https://placehold.co/600x600/212121/FFFFFF?text=Sublime%20Collar",
    location: "Paris",
    tribes: ["BDSM", "Elegance", "Queer Excess"],
    status: "Edição Limitada",
    interests: ["Voz ativa", "submissão consensual", "descoberta"],
    looking_for: "Pescoços que não se importam em ser adornados.",
    qa_images: [
      "https://placehold.co/800x600/404040/FFFFFF?text=Detalhes%20da%20Seda",
      "https://placehold.co/800x600/505050/FFFFFF?text=Campanha%20Teatral",
    ],
    qa_video: null,
    qa_reviews: ["A leveza do tecido é divina.", "O detalhe do fecho é uma obra de arte."],
    qa_badges: ["Conhecedor", "Líder de Tribo"],
  },
  {
    id: 3,
    name: "Cosmic Spikes - Orion",
    bio: "Um campo de estrelas na sua pele. Cada espinho é uma constelação, um mapa para o seu prazer. Para aqueles que exploram o desconhecido com os próprios dedos.",
    image: "https://placehold.co/600x600/262626/FFFFFF?text=Cosmic%20Spikes",
    location: "Los Angeles",
    tribes: ["Punk", "Futuristic", "Queer Excess"],
    status: "Em Foco",
    interests: ["Ficção científica", "punk rock", "exploração"],
    looking_for: "Mãos que queiram sentir o cosmos.",
    qa_images: [
      "https://placehold.co/800x600/555555/FFFFFF?text=Brilho%20noturno%20dos%20espinhos",
      "https://placehold.co/800x600/666666/FFFFFF?text=Aplicação%20em%20diferentes%20corpos",
    ],
    qa_video: "https://placehold.co/800x450/222222/FFFFFF?text=Vídeo%20com%20luzes%20estroboscópicas",
    qa_reviews: ["Simplesmente transformador. A sensação é indescritível.", "Me senti uma estrela."],
    qa_badges: ["Guia", "Curador"],
  },
  {
    id: 4,
    name: "Obsidian Mask - Shadow",
    bio: "O anonimato é uma forma de liberdade. Esta máscara não esconde quem você é, ela revela quem você pode ser. Para os amantes da noite e do mistério.",
    image: "https://placehold.co/600x600/2D2D2D/FFFFFF?text=Obsidian%20Mask",
    location: "Londres",
    tribes: ["Goth", "Erotic", "Queer Excess"],
    status: "Últimas unidades",
    interests: ["Teatro", "anonimato", "mistério"],
    looking_for: "Rostos que desejam ser vistos na escuridão.",
    qa_images: [
      "https://placehold.co/800x600/777777/FFFFFF?text=Detalhes%20do%20tecido",
      "https://placehold.co/800x600/888888/FFFFFF?text=Modelos%20usando%20a%20máscara",
    ],
    qa_video: null,
    qa_reviews: ["Perfeita para a minha performance.", "Me senti completamente seguro para explorar."],
    qa_badges: ["Iniciado", "Explorador"],
  },
  {
    id: 5,
    name: "Chromium Cuffs - Pulse",
    bio: "Uma pulsação metálica em seus pulsos. Cada elo é uma batida, um ritmo que guia a sua noite. Para quem entende que restrição é a porta para a euforia.",
    image: "https://placehold.co/600x600/353535/FFFFFF?text=Chromium%20Cuffs",
    location: "Tóquio",
    tribes: ["Industrial", "Fetish", "Queer Excess"],
    status: "Disponível",
    interests: ["Música industrial", "dança", "euforia"],
    looking_for: "Pulsos que desejam sentir o ritmo da noite.",
    qa_images: [
      "https://placehold.co/800x600/999999/FFFFFF?text=Foto%20com%20luzes%20neon",
      "https://placehold.co/800x600/AAAAAA/FFFFFF?text=Uso%20em%20dupla",
    ],
    qa_video: "https://placehold.co/800x450/333333/FFFFFF?text=Vídeo%20com%20movimento%20e%20som",
    qa_reviews: ["O som que elas fazem é tão sexy!", "O design é futurista e elegante."],
    qa_badges: ["Ritmo", "Condutor"],
  },
  {
    id: 6,
    name: "Rebel Ring - Anarchy",
    bio: "Um anel para selar o pacto com sua própria rebeldia. Este não é um acessório, é um grito silencioso. Para aqueles que carregam a anarquia no dedo.",
    image: "https://placehold.co/600x600/3D3D3D/FFFFFF?text=Rebel%20Ring",
    location: "Nova York",
    tribes: ["Anarquista", "Punk", "Queer Excess"],
    status: "Edição Limitada",
    interests: ["Rebeldia", "protesto", "arte de rua"],
    looking_for: "Dedos que assinam a liberdade.",
    qa_images: [
      "https://placehold.co/800x600/BBBBBB/FFFFFF?text=Detalhes%20da%20gravação",
      "https://placehold.co/800x600/CCCCCC/FFFFFF?text=Anel%20em%20diferentes%20mãos",
    ],
    qa_video: null,
    qa_reviews: ["A peça é super minimalista mas a mensagem é enorme.", "Me sinto forte com ele."],
    qa_badges: ["Rebelde", "Guardião"],
  },
  // Adicionando mais alguns perfis para o grid
  {
    id: 7,
    name: "Velvet Rope - Ritual",
    bio: "Uma linha de veludo que separa o profano do sagrado. Para quem entende que o limite é um convite.",
    image: "https://placehold.co/600x600/454545/FFFFFF?text=Velvet%20Rope",
    location: "Amsterdam",
    tribes: ["Erotic", "Ritual", "Queer Excess"],
    status: "Disponível",
    interests: ["Limites", "rituais", "mistério"],
    looking_for: "Corpos que desejam atravessar.",
    qa_images: [
      "https://placehold.co/800x600/DDDDDD/FFFFFF?text=Detalhes%20do%20veludo",
      "https://placehold.co/800x600/EEEEEE/FFFFFF?text=Cena%20com%20iluminação%20de%20clube",
    ],
    qa_video: null,
    qa_reviews: ["A suavidade do veludo é surreal.", "Adorei a estética de 'ritual'."],
    qa_badges: ["Guardião do Templo"],
  },
  {
    id: 8,
    name: "Chain Link - Labyrinth",
    bio: "Um labirinto para a pele. Cada elo é uma escolha. Para quem se perde para se encontrar.",
    image: "https://placehold.co/600x600/4D4D4D/FFFFFF?text=Chain%20Link",
    location: "Berlim",
    tribes: ["Fetish", "Industrial", "Queer Excess"],
    status: "Em destaque",
    interests: ["Exploração", "descoberta", "caminhos"],
    looking_for: "Corpos que não temem o labirinto.",
    qa_images: [
      "https://placehold.co/800x600/3A3A3A/FFFFFF?text=Close%20no%20elo",
      "https://placehold.co/800x600/4B4B4B/FFFFFF?text=Foto%20com%20flash",
    ],
    qa_video: null,
    qa_reviews: ["Pesado e perfeito.", "O design é único."],
    qa_badges: ["Caminhante"],
  },
  // Mais 12 perfis para atingir a meta de 15-20
  { id: 9, name: "Neon Glider - Cyber", bio: "Um rastro de luz na escuridão. Para quem dança no futuro.", image: "https://placehold.co/600x600/101010/FFFFFF?text=Neon%20Glider", qa_images: ["https://placehold.co/800x600/151515/FFFFFF?text=Detalhe%20dos%20LEDs"] },
  { id: 10, name: "Ego Armor - Skin", bio: "Uma segunda pele de látex. Para quem veste a própria audácia.", image: "https://placehold.co/600x600/131313/FFFFFF?text=Ego%20Armor", qa_images: ["https://placehold.co/800x600/181818/FFFFFF?text=Textura%20do%20látex"] },
  { id: 11, name: "Feather Fan - Whispers", bio: "Um sopro de mistério. Para quem fala sem palavras.", image: "https://placehold.co/600x600/161616/FFFFFF?text=Feather%20Fan", qa_images: ["https://placehold.co/800x600/202020/FFFFFF?text=Movimento%20elegante"] },
  { id: 12, name: "Serpent Choker - Venom", bio: "Uma mordida sutil. Para quem gosta do veneno da sedução.", image: "https://placehold.co/600x600/191919/FFFFFF?text=Serpent%20Choker", qa_images: ["https://placehold.co/800x600/252525/FFFFFF?text=Detalhe%20da%20serpente"] },
  { id: 13, name: "Steel Cage - Pulse", bio: "Um abraço frio. Para quem se sente em casa na estrutura.", image: "https://placehold.co/600x600/1A1A1A/FFFFFF?text=Steel%20Cage", qa_images: ["https://placehold.co/800x600/2A2A2A/FFFFFF?text=Iluminação%20de%20palco"] },
  { id: 14, name: "Lace Veil - Ghost", bio: "A beleza do que não é totalmente visto. Para quem flerta com o invisível.", image: "https://placehold.co/600x600/1D1D1D/FFFFFF?text=Lace%20Veil", qa_images: ["https://placehold.co/800x600/2D2D2D/FFFFFF?text=Véu%20em%20diferentes%20ângulos"] },
  { id: 15, name: "Leather Crop - Silence", bio: "Uma promessa de silêncio. Para quem prefere a linguagem do corpo.", image: "https://placehold.co/600x600/1F1F1F/FFFFFF?text=Leather%20Crop", qa_images: ["https://placehold.co/800x600/303030/FFFFFF?text=Close%20no%20couro%20e%20costura"] },
  { id: 16, name: "Garter Belt - Secret", bio: "O segredo por baixo da roupa. Para quem sabe que a diversão está no que se esconde.", image: "https://placehold.co/600x600/212121/FFFFFF?text=Garter%20Belt", qa_images: ["https://placehold.co/800x600/353535/FFFFFF?text=Combinações%20com%20outros%20itens"] },
  { id: 17, name: "Spiked Collar - Rebel", bio: "A rebeldia na garganta. Para quem não se cala.", image: "https://placehold.co/600x600/232323/FFFFFF?text=Spiked%20Collar", qa_images: ["https://placehold.co/800x600/383838/FFFFFF?text=Detalhe%20dos%20espinhos"] },
  { id: 18, name: "Latex Gloves - Touch", bio: "O toque amplificado. Para quem quer sentir a pele de forma diferente.", image: "https://placehold.co/600x600/252525/FFFFFF?text=Latex%20Gloves", qa_images: ["https://placehold.co/800x600/404040/FFFFFF?text=Textura%20brilhante"] },
  { id: 19, name: "Corset - Embrace", bio: "O abraço que molda. Para quem se encontra na forma.", image: "https://placehold.co/600x600/272727/FFFFFF?text=Corset", qa_images: ["https://placehold.co/800x600/454545/FFFFFF?text=Foto%20em%20movimento"] },
  { id: 20, name: "Body Harness - Web", bio: "Uma teia que envolve e protege. Para quem gosta de ser a aranha.", image: "https://placehold.co/600x600/292929/FFFFFF?text=Body%20Harness", qa_images: ["https://placehold.co/800x600/505050/FFFFFF?text=Detalhes%20da%20teia"] },
];

// Componente para um único perfil de produto
const ProductProfile = ({ product, isQA }) => {
  const [showFullBio, setShowFullBio] = useState(false);

  return (
    <div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4 flex flex-col items-center text-center max-w-sm mx-auto shadow-lg hover:shadow-2xl transition-shadow duration-300">
      {/* Foto Principal do Produto (Visível para todos) */}
      <img
        src={product.image}
        alt={product.name}
        className="rounded-lg w-full h-auto object-cover mb-4"
      />
      {/* Nome e Bio do Produto */}
      <h3 className="text-xl md:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 font-inter mb-2">
        {product.name}
      </h3>
      <p className="text-zinc-400 text-sm mb-4">
        {product.bio}
      </p>

      {/* Seção QA (visível apenas com acesso ou com placeholders para QX) */}
      <div className="w-full">
        <h4 className="text-lg font-semibold text-zinc-300 mt-4 mb-2">
          Galerias e Segredos
        </h4>
        <div className="grid grid-cols-2 gap-2 w-full">
          {product.qa_images && product.qa_images.map((image, index) => (
            <div key={index} className="relative aspect-square rounded-md overflow-hidden">
              {isQA ? (
                // Se QA, mostra a imagem real
                <img
                  src={image}
                  alt={`Foto adicional ${index + 1}`}
                  className="w-full h-full object-cover"
                />
              ) : (
                // Se QX, mostra o placeholder borrado e provocativo
                <div className="relative w-full h-full bg-zinc-800 flex items-center justify-center">
                  <div className="absolute inset-0 bg-cover bg-center filter blur-lg opacity-50" style={{ backgroundImage: `url(${image})` }}></div>
                  <span className="text-zinc-500 text-center text-xs font-bold z-10 p-2">
                    Nem tudo se revela a todos.
                  </span>
                </div>
              )}
            </div>
          ))}
          {product.qa_video && (
            <div className="relative col-span-2 aspect-video rounded-md overflow-hidden">
              {isQA ? (
                <img
                  src={product.qa_video}
                  alt="Teaser"
                  className="w-full h-full object-cover"
                />
              ) : (
                <div className="relative w-full h-full bg-zinc-800 flex items-center justify-center">
                  <div className="absolute inset-0 bg-cover bg-center filter blur-lg opacity-50" style={{ backgroundImage: `url(${product.qa_video})` }}></div>
                  <span className="text-zinc-500 text-center text-xs font-bold z-10 p-2">
                    O movimento é um segredo.
                  </span>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Reviews íntimos (visíveis apenas para QA) */}
        {product.qa_reviews && product.qa_reviews.length > 0 && (
          <div className="mt-4 w-full">
            <h5 className="text-sm font-semibold text-zinc-400">Reviews da Comunidade</h5>
            {isQA ? (
              <div className="text-left mt-2 space-y-2">
                {product.qa_reviews.map((review, index) => (
                  <p key={index} className="text-zinc-500 italic text-xs">
                    "{review}"
                  </p>
                ))}
              </div>
            ) : (
              <div className="mt-2 p-2 bg-zinc-800 rounded-lg text-zinc-500 text-xs italic text-center">
                <span className="opacity-50">Depoimentos...</span>
                <p className="mt-1">
                  <span className="font-bold"></span>
                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-pink-600">Este conteúdo é reservado.</span>
                </p>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

// Componente principal da aplicação
const App = () => {
  // Estado para controlar se o usuário tem "Acesso QA"
  const [isQA, setIsQA] = useState(false);

  // Função para simular a mudança de estado
  const toggleAccess = () => {
    setIsQA(!isQA);
  };

  return (
    <div className="min-h-screen bg-zinc-950 text-white font-inter p-4 sm:p-8">
      {/* Botão de toggle para simular a jornada de acesso */}
      <div className="flex justify-center items-center p-4 mb-8">
        <span className="text-sm text-zinc-400 mr-4">
          Estado Atual:{" "}
          <span className={`font-bold ${isQA ? "text-green-400" : "text-purple-400"}`}>
            {isQA ? "QA (Acesso)" : "QX (Excesso)"}
          </span>
        </span>
        <button
          onClick={toggleAccess}
          className={`px-6 py-3 rounded-full text-sm font-semibold transition-all duration-300 ease-in-out transform hover:scale-105 shadow-lg
            ${isQA
              ? 'bg-gradient-to-r from-red-600 to-purple-600 hover:from-red-700 hover:to-purple-700 text-white'
              : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white'
            }`}
        >
          {isQA ? "Voltar ao Excesso" : "Atravessar para o Acesso"}
        </button>
      </div>

      {/* Grid de Perfis de Produto */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {productsData.map((product) => (
          <ProductProfile key={product.id} product={product} isQA={isQA} />
        ))}
      </div>
    </div>
  );
};

export default App;