import { Shell } from '@/layouts/Shell'

const faqs = [
    {
        question: 'Como faço para cadastrar minha farmácia?',
        answer: 'Clique em "Cadastrar" na tela de login, preencha os dados da sua empresa (CNPJ, nome, endereço) e aguarde a verificação. Após aprovado, você terá acesso completo à plataforma.'
    },
    {
        question: 'Como funciona o pagamento?',
        answer: 'Aceitamos Pix, cartão de crédito e boleto. O pagamento é processado de forma segura através dos nossos parceiros (Mercado Pago, Stripe, Asaas). Os valores são repassados aos vendedores após confirmação da entrega.'
    },
    {
        question: 'Qual a taxa cobrada pelo marketplace?',
        answer: 'O valor exibido já contempla a taxa do marketplace. Não mostramos taxas separadas para o comprador e não há taxas de cadastro ou mensalidades.'
    },
    {
        question: 'Como rastrear meu pedido?',
        answer: 'Acesse "Meus Pedidos" no menu. Lá você verá o status atualizado de cada pedido, desde a confirmação até a entrega. Você também receberá notificações por email e push.'
    },
    {
        question: 'Posso comprar de vários distribuidores no mesmo pedido?',
        answer: 'Sim! Você pode adicionar produtos de diferentes distribuidores ao carrinho. No checkout, cada distribuidor será tratado como um pedido separado para facilitar o frete e rastreamento.'
    },
    {
        question: 'Como funciona o crédito (Boleto a Prazo)?',
        answer: 'Farmácias verificadas podem solicitar um limite de crédito. Com crédito aprovado, você pode comprar e pagar em até 30 dias. O limite é definido com base no seu histórico de compras.'
    },
    {
        question: 'Posso convidar outros funcionários para a minha conta?',
        answer: 'Sim! Na seção "Equipe", você pode convidar colaboradores com diferentes níveis de acesso (Gerente, Comprador, etc.).'
    },
    {
        question: 'Como faço para vender na plataforma?',
        answer: 'Se você é distribuidor, cadastre sua empresa e aguarde verificação. Após aprovado, vá em "Meus Produtos" para cadastrar seu catálogo. Você pode importar via CSV para grandes volumes.'
    },
]

const contacts = [
    { icon: '📧', label: 'Email', value: 'suporte@saveinmed.com.br' },
    { icon: '📱', label: 'WhatsApp', value: '(62) 99999-0000' },
    { icon: '🕐', label: 'Horário', value: 'Seg-Sex: 08:00-18:00' },
]

export function HelpCenterPage() {
    return (
        <Shell>
            <div className="max-w-4xl mx-auto p-6">
                <div className="text-center mb-8">
                    <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
                        📚 Central de Ajuda
                    </h1>
                    <p className="text-gray-600 dark:text-gray-400 mt-2">
                        Encontre respostas para as perguntas mais frequentes
                    </p>
                </div>

                {/* FAQ Section */}
                <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
                    <h2 className="text-lg font-semibold p-6 border-b border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white">
                        ❓ Perguntas Frequentes
                    </h2>
                    <div className="divide-y divide-gray-200 dark:divide-gray-700">
                        {faqs.map((faq, index) => (
                            <details key={index} className="group">
                                <summary className="px-6 py-4 cursor-pointer list-none flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                    <span className="font-medium text-gray-900 dark:text-white">{faq.question}</span>
                                    <span className="text-gray-400 group-open:rotate-180 transition-transform">▼</span>
                                </summary>
                                <div className="px-6 pb-4 text-gray-600 dark:text-gray-400">
                                    {faq.answer}
                                </div>
                            </details>
                        ))}
                    </div>
                </div>

                {/* Contact Section */}
                <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
                    <h2 className="text-lg font-semibold mb-4">📞 Contato</h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        {contacts.map((contact, index) => (
                            <div key={index} className="bg-white/10 rounded-lg p-4">
                                <div className="text-2xl mb-2">{contact.icon}</div>
                                <div className="text-sm opacity-80">{contact.label}</div>
                                <div className="font-medium">{contact.value}</div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Quick Links */}
                <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
                    <a href="/orders" className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
                        <div className="text-2xl mb-2">📦</div>
                        <div className="text-sm font-medium text-gray-900 dark:text-white">Meus Pedidos</div>
                    </a>
                    <a href="/wallet" className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
                        <div className="text-2xl mb-2">💰</div>
                        <div className="text-sm font-medium text-gray-900 dark:text-white">Carteira</div>
                    </a>
                    <a href="/team" className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
                        <div className="text-2xl mb-2">👥</div>
                        <div className="text-sm font-medium text-gray-900 dark:text-white">Equipe</div>
                    </a>
                    <a href="/shipping-settings" className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
                        <div className="text-2xl mb-2">🚚</div>
                        <div className="text-sm font-medium text-gray-900 dark:text-white">Frete</div>
                    </a>
                </div>
            </div>
        </Shell>
    )
}