src/components/LotomaniaFeatures.tsx

import React, { useState } from 'react';
import { 
  Shuffle, 
  Repeat, 
  Target, 
  DollarSign,
  Calendar,
  Users,
  Award
} from 'lucide-react';

const LotomaniaFeatures: React.FC = () => {
  const [selectedFeature, setSelectedFeature] = useState<string>('estrategia');

  const features = [
    {
      id: 'estrategia',
      name: 'Estratégia Sistemática',
      icon: Target,
      description: 'Nossa estratégia avançada cobre todos os padrões possíveis',
      content: (
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-800">Como Funciona Nossa Estratégia</h3>
          <div className="bg-blue-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">🎯 Cobertura Completa</h4>
            <p className="text-sm text-gray-700">
              Nossa estratégia gera exatamente <strong>504 jogos únicos</strong> (252 verticais + 252 horizontais) 
              que cobrem sistematicamente todas as combinações de 5 colunas/linhas consecutivas possíveis.
            </p>
          </div>
          <div className="bg-green-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">💰 Investimento</h4>
            <p className="text-sm text-gray-700">
              Investimento total: <strong>R$ 1.512,00</strong> (504 jogos × R$ 3,00)
            </p>
          </div>
          <div className="bg-purple-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">📊 Probabilidades</h4>
            <p className="text-sm text-gray-700">
              Cobertura de 50% dos números da Lotomania em cada jogo, maximizando as chances 
              de acertar as faixas premiadas (15, 16, 17, 18, 19 ou 20 pontos).
            </p>
          </div>
        </div>
      )
    },
    {
      id: 'surpresinha',
      name: 'Surpresinha',
      icon: Shuffle,
      description: 'Sistema escolhe os números automaticamente',
      content: (
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-800">Surpresinha na Lotomania</h3>
          <div className="bg-yellow-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">🎲 O que é?</h4>
            <p className="text-sm text-gray-700">
              A <strong>Surpresinha</strong> é quando você deixa o sistema da Caixa escolher 
              automaticamente os 50 números da sua aposta, sem precisar marcar manualmente.
            </p>
          </div>
          <div className="bg-blue-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">⚡ Como funciona</h4>
            <ul className="text-sm text-gray-700 space-y-1">
              <li>• Sistema seleciona 50 números aleatórios entre 00 e 99</li>
              <li>• Garante distribuição equilibrada dos números</li>
              <li>• Evita padrões óbvios que muitas pessoas escolhem</li>
              <li>• Pode ser combinada com outras modalidades</li>
            </ul>
          </div>
          <div className="bg-green-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">💡 Nossa Estratégia vs Surpresinha</h4>
            <p className="text-sm text-gray-700">
              Nossa estratégia é <strong>superior</strong> à Surpresinha pois não é aleatória - 
              ela segue um padrão matemático que garante cobertura sistemática de todas as possibilidades.
            </p>
          </div>
        </div>
      )
    },
    {
      id: 'teimosinha',
      name: 'Teimosinha',
      icon: Repeat,
      description: 'Repetir a mesma aposta por vários concursos',
      content: (
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-800">Teimosinha na Lotomania</h3>
          <div className="bg-orange-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">🔄 O que é?</h4>
            <p className="text-sm text-gray-700">
              A <strong>Teimosinha</strong> permite que você use os mesmos números 
              por vários concursos consecutivos, de 2 até 8 concursos.
            </p>
          </div>
          <div className="bg-purple-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">💰 Vantagens</h4>
            <ul className="text-sm text-gray-700 space-y-1">
              <li>• <strong>Desconto progressivo:</strong> Economiza até 25% no valor total</li>
              <li>• <strong>Conveniência:</strong> Não precisa fazer nova aposta a cada concurso</li>
              <li>• <strong>Persistência:</strong> Mantém a estratégia por mais tempo</li>
              <li>• <strong>Não perde sorteios:</strong> Garante participação contínua</li>
            </ul>
          </div>
          <div className="bg-red-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">⚠️ Nossa Estratégia e Teimosinha</h4>
            <p className="text-sm text-gray-700">
              Nossa estratégia <strong>NÃO</strong> é adequada para Teimosinha, pois ela evolui 
              a cada jogo. Cada um dos 504 jogos deve ser feito em concursos diferentes para 
              maximizar a eficiência da estratégia.
            </p>
          </div>
        </div>
      )
    },
    {
      id: 'espelho',
      name: 'Aposta Espelho',
      icon: Users,
      description: 'Apostar nos números NÃO marcados no jogo principal',
      content: (
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-800">Aposta Espelho</h3>
          <div className="bg-indigo-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">🪞 O que é?</h4>
            <p className="text-sm text-gray-700">
              A <strong>Aposta Espelho</strong> é quando você faz uma segunda aposta com os 
              50 números que NÃO foram marcados no seu jogo principal.
            </p>
          </div>
          <div className="bg-cyan-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">🎯 Como funciona</h4>
            <ul className="text-sm text-gray-700 space-y-1">
              <li>• <strong>Jogo Principal:</strong> Você marca 50 números</li>
              <li>• <strong>Jogo Espelho:</strong> Sistema marca os outros 50 números</li>
              <li>• <strong>Cobertura Total:</strong> Juntos cobrem todos os 100 números</li>
              <li>• <strong>Dobra as chances:</strong> Uma das apostas sempre terá acertos</li>
            </ul>
          </div>
          <div className="bg-emerald-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">🚀 Nossa Estratégia com Espelho</h4>
            <p className="text-sm text-gray-700">
              Aplicando Aposta Espelho em nossa estratégia, teríamos <strong>1.008 jogos</strong> 
              (504 principais + 504 espelhos) com investimento de <strong>R$ 3.024,00</strong>, 
              garantindo cobertura completa e matemática de TODOS os números em cada concurso.
            </p>
          </div>
        </div>
      )
    },
    {
      id: 'bolao',
      name: 'Bolão',
      icon: Users,
      description: 'Dividir apostas e prêmios com outras pessoas',
      content: (
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-800">Bolão da Lotomania</h3>
          <div className="bg-pink-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">👥 O que é?</h4>
            <p className="text-sm text-gray-700">
              <strong>Bolão</strong> é quando várias pessoas se juntam para fazer apostas maiores, 
              dividindo tanto o custo quanto os prêmios proporcionalmente.
            </p>
          </div>
          <div className="bg-teal-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">💫 Vantagens</h4>
            <ul className="text-sm text-gray-700 space-y-1">
              <li>• <strong>Custo menor:</strong> Divide investimento entre participantes</li>
              <li>• <strong>Mais jogos:</strong> Permite fazer estratégias maiores</li>
              <li>• <strong>Menor risco:</strong> Reduz o risco individual</li>
              <li>• <strong>Mais diversão:</strong> Experiência compartilhada</li>
            </ul>
          </div>
          <div className="bg-amber-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">🎯 Bolão com Nossa Estratégia</h4>
            <p className="text-sm text-gray-700">
              Com 10 pessoas em bolão, cada uma investiria apenas <strong>R$ 151,20</strong> 
              para executar nossa estratégia completa de 504 jogos. O prêmio seria dividido 
              igualmente entre todos os participantes.
            </p>
          </div>
        </div>
      )
    },
    {
      id: 'premios',
      name: 'Faixas de Premiação',
      icon: Award,
      description: 'Entenda todas as formas de ganhar na Lotomania',
      content: (
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-800">Faixas de Premiação da Lotomania</h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
              <h4 className="font-bold text-purple-800">🏆 20 Acertos ou 0 Acertos</h4>
              <p className="text-sm text-purple-700 mt-1">
                <strong>PRÊMIO MÁXIMO!</strong> A maior premiação da Lotomania.
                Sim, não acertar NENHUM número também é premiado!
              </p>
            </div>
            
            <div className="bg-red-50 p-4 rounded-lg border-l-4 border-red-500">
              <h4 className="font-bold text-red-800">🥇 19 Acertos</h4>
              <p className="text-sm text-red-700 mt-1">
                <strong>Prêmio Alto</strong> - Segunda maior premiação
              </p>
            </div>
            
            <div className="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
              <h4 className="font-bold text-orange-800">🥈 18 Acertos</h4>
              <p className="text-sm text-orange-700 mt-1">
                <strong>Prêmio Médio Alto</strong> - Terceira maior premiação
              </p>
            </div>
            
            <div className="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500">
              <h4 className="font-bold text-yellow-800">🥉 17 Acertos</h4>
              <p className="text-sm text-yellow-700 mt-1">
                <strong>Prêmio Médio</strong> - Boa premiação
              </p>
            </div>
            
            <div className="bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
              <h4 className="font-bold text-green-800">🏅 16 Acertos</h4>
              <p className="text-sm text-green-700 mt-1">
                <strong>Prêmio Baixo</strong> - Premiação menor mas significativa
              </p>
            </div>
            
            <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
              <h4 className="font-bold text-blue-800">🎯 15 Acertos</h4>
              <p className="text-sm text-blue-700 mt-1">
                <strong>Prêmio Mínimo</strong> - Menor premiação, mas ainda é prêmio!
              </p>
            </div>
          </div>
          
          <div className="bg-gray-50 p-4 rounded-lg">
            <h4 className="font-medium mb-2">📊 Probabilidades Oficiais</h4>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs">
              <div>20 acertos: 1 em 11.372.635</div>
              <div>19 acertos: 1 em 352.551</div>
              <div>18 acertos: 1 em 17.533</div>
              <div>17 acertos: 1 em 1.233</div>
              <div>16 acertos: 1 em 105</div>
              <div>15 acertos: 1 em 11</div>
            </div>
          </div>
        </div>
      )
    }
  ];

  const currentFeature = features.find(f => f.id === selectedFeature);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 to-pink-600 p-6 rounded-xl text-white">
        <h2 className="text-2xl font-bold mb-2">🎲 Funcionalidades da Lotomania</h2>
        <p className="text-purple-100">
          Conheça todas as modalidades e estratégias disponíveis na Lotomania oficial
        </p>
      </div>

      {/* Feature Navigation */}
      <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
          {features.map((feature) => {
            const Icon = feature.icon;
            return (
              <button
                key={feature.id}
                onClick={() => setSelectedFeature(feature.id)}
                className={`p-4 rounded-lg text-center transition-all duration-200 ${
                  selectedFeature === feature.id
                    ? 'bg-purple-600 text-white shadow-lg'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                <Icon className="w-6 h-6 mx-auto mb-2" />
                <h3 className="font-medium text-sm">{feature.name}</h3>
              </button>
            );
          })}
        </div>
      </div>

      {/* Feature Content */}
      <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
        {currentFeature && (
          <div>
            <div className="flex items-center gap-3 mb-4">
              <currentFeature.icon className="w-8 h-8 text-purple-600" />
              <div>
                <h2 className="text-xl font-bold text-gray-800">{currentFeature.name}</h2>
                <p className="text-gray-600">{currentFeature.description}</p>
              </div>
            </div>
            {currentFeature.content}
          </div>
        )}
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
          <div className="flex items-center gap-3">
            <DollarSign className="w-8 h-8 text-green-600" />
            <div>
              <h3 className="font-bold text-gray-800">Valor da Aposta</h3>
              <p className="text-2xl font-bold text-green-600">R$ 3,00</p>
              <p className="text-sm text-gray-600">Por jogo de 50 números</p>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
          <div className="flex items-center gap-3">
            <Calendar className="w-8 h-8 text-blue-600" />
            <div>
              <h3 className="font-bold text-gray-800">Sorteios</h3>
              <p className="text-2xl font-bold text-blue-600">3x</p>
              <p className="text-sm text-gray-600">Por semana (Seg, Qua, Sex)</p>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
          <div className="flex items-center gap-3">
            <Target className="w-8 h-8 text-purple-600" />
            <div>
              <h3 className="font-bold text-gray-800">Números Sorteados</h3>
              <p className="text-2xl font-bold text-purple-600">20</p>
              <p className="text-sm text-gray-600">De 100 números (00 a 99)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LotomaniaFeatures;