"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { 
  ChevronDownIcon, 
  ChevronUpIcon,
  ArrowLeftIcon 
} from "@heroicons/react/24/outline";

const FAQ_DATA = [
  {
    id: 1,
    question: "O que é o SaveInMed?",
    answer: "O SaveInMed é um marketplace B2B exclusivo para farmácias, criado para facilitar a compra e venda de medicamentos e produtos próximos ao vencimento com desconto, ajudando farmácias a reduzir perdas e aumentar a eficiência do estoque."
  },
  {
    id: 2,
    question: "Quem pode usar o SaveInMed?",
    answer: "A plataforma é exclusiva para:\n✔️ Farmácias\n✔️ Drogarias\n\nNão aceitamos distribuidores ou atacadistas.\nO modelo é farmácia vendendo para farmácia."
  },
  {
    id: 3,
    question: "Por que farmácias vendem produtos próximos ao vencimento no SaveInMed?",
    answer: "Porque isso traz vantagens imediatas:\n\n• Recupera parte do valor de produtos que seriam descartados\n• Gera caixa rapidamente\n• Ajuda outras farmácias a comprar mais barato\n• Evita falta de medicamentos no balcão\n• Reduz desperdício\n• Garante giro de estoque"
  },
  {
    id: 4,
    question: "Que produtos posso comprar ou vender?",
    answer: "Você pode anunciar ou adquirir:\n\n• Medicamentos próximos ao vencimento\n• MIPs (isentos de prescrição)\n• Higiene e beleza\n• Vitaminas e suplementos\n• Materiais de saúde\n• Perfumaria\n\n⛔ Produtos vencidos ou sem rastreabilidade são proibidos."
  },
  {
    id: 5,
    question: "Como funciona o processo de compra e venda?",
    answer: "1. Uma farmácia anuncia produtos com validade e desconto.\n2. Outras farmácias encontram as melhores ofertas.\n3. A compra é feita diretamente pelo SaveInMed.\n4. A farmácia vendedora prepara o envio.\n5. A entrega é combinada entre as farmácias.\n\nSimples, rápido e seguro."
  },
  {
    id: 6,
    question: "Quais são as formas de pagamento no SaveInMed?",
    answer: "O SaveInMed trabalha somente com pagamentos à vista, através de:\n\n✔️ PIX\n✔️ Cartão de crédito à vista\n\n❌ Não aceita boleto\n❌ Não aceita cartão parcelado\n❌ Não trabalha com prazo\n\nIsso garante agilidade, segurança e evita inadimplência entre farmácias."
  },
  {
    id: 7,
    question: "Como funciona a entrega dos produtos?",
    answer: "A entrega é organizada diretamente entre as farmácias, normalmente via:\n\n• Motoboy\n• Entregador parceiro\n• Retirada no balcão\n• Transportadora local\n\nO SaveInMed oferece rastreamento básico e atualização de status."
  },
  {
    id: 8,
    question: "O SaveInMed é seguro?",
    answer: "Sim. Todas as farmácias passam por verificação de:\n\n• CNPJ\n• Responsável Técnico\n• Alvará\n• Documentação farmacêutica\n\nSomente estabelecimentos regulares e autorizados podem participar."
  },
  {
    id: 9,
    question: "Posso vender medicamentos controlados?",
    answer: "Sim, desde que todas as exigências legais da Anvisa sejam cumpridas.\nO envio e a documentação são de responsabilidade da farmácia vendedora."
  },
  {
    id: 10,
    question: "O SaveInMed ajuda na gestão do meu estoque?",
    answer: "Sim!\nA plataforma oferece:\n\n• Alerta de vencimento\n• Sugestão de produtos para venda rápida\n• Indicadores de perda evitada\n• Histórico de movimentações\n• Gestão simplificada de itens publicados"
  },
  {
    id: 11,
    question: "O SaveInMed cobra para usar?",
    answer: "O cadastro é gratuito.\nPodem existir taxas por venda ou planos avançados, de acordo com o nível de uso."
  },
  {
    id: 12,
    question: "A plataforma funciona 24 horas?",
    answer: "Sim, o SaveInMed opera 24/7.\nO suporte funciona em horário comercial."
  },
  {
    id: 13,
    question: "O que NÃO posso vender?",
    answer: "• Produtos vencidos\n• Itens sem nota fiscal\n• Medicamentos falsificados\n• Produtos roubados\n• Materiais proibidos pela Anvisa"
  },
  {
    id: 14,
    question: "As farmácias são avaliadas?",
    answer: "Sim. Após cada operação, as farmácias avaliam:\n\n• Rapidez\n• Cumprimento da entrega\n• Qualidade do produto\n• Comunicação\n• Confiabilidade"
  }
];

const FAQPage = () => {
  const [openItems, setOpenItems] = useState<number[]>([]);

  const toggleItem = (id: number) => {
    setOpenItems(prev => 
      prev.includes(id) 
        ? prev.filter(item => item !== id)
        : [...prev, id]
    );
  };

  const formatAnswer = (answer: string) => {
    return answer.split('\n').map((line, index) => (
      <div key={index} className={index > 0 ? "mt-2" : ""}>
        {line}
      </div>
    ));
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex items-center">
              <Image
                src="/logo.png"
                alt="SaveInMed Logo"
                width={64}
                height={64}
                className="h-16 w-16"
              />
              <span className="ml-2 sm:ml-4 text-lg sm:text-xl lg:text-2xl font-bold text-gray-900">SaveInMed</span>
            </div>

            {/* Botão Voltar */}
            <Link
              href="/"
              className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm sm:text-base font-medium hover:bg-blue-700 transition-colors"
            >
              <ArrowLeftIcon className="h-4 w-4" />
              <span>Voltar</span>
            </Link>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-16 bg-gradient-to-br from-blue-50 to-green-50">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
            Perguntas Frequentes
          </h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Encontre respostas para as principais dúvidas sobre o SaveInMed
          </p>
        </div>
      </section>

      {/* FAQ Content */}
      <section className="py-16 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-4">
            {FAQ_DATA.map((item) => (
              <div
                key={item.id}
                className="border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"
              >
                <button
                  className="w-full px-6 py-4 text-left bg-white hover:bg-gray-50 transition-colors flex justify-between items-center"
                  onClick={() => toggleItem(item.id)}
                >
                  <h3 className="text-lg font-semibold text-gray-900 pr-4">
                    {item.question}
                  </h3>
                  <div className="flex-shrink-0">
                    {openItems.includes(item.id) ? (
                      <ChevronUpIcon className="h-5 w-5 text-blue-600" />
                    ) : (
                      <ChevronDownIcon className="h-5 w-5 text-gray-400" />
                    )}
                  </div>
                </button>
                
                {openItems.includes(item.id) && (
                  <div className="px-6 pb-6 bg-gray-50 border-t border-gray-100">
                    <div className="text-gray-700 leading-relaxed pt-4 whitespace-pre-line">
                      {formatAnswer(item.answer)}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-gradient-to-r from-blue-600 to-green-600">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold text-white mb-4">
            Ainda tem dúvidas?
          </h2>
          <p className="text-xl text-blue-100 mb-8">
            Nossa equipe está pronta para ajudar você
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/login"
              className="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors"
            >
              Entrar na Plataforma
            </Link>
            <a
              href="mailto:suporte@saveinmed.com"
              className="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition-colors"
            >
              Falar com Suporte
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <div className="flex items-center mb-4">
                <Image
                  src="/logo.png"
                  alt="SaveInMed Logo"
                  width={40}
                  height={40}
                  className="h-10 w-10"
                />
                <span className="ml-3 text-xl font-bold">SaveInMed</span>
              </div>
              <p className="text-gray-400 mb-4">
                Marketplace B2B para farmácias e hospitais. Conectando o setor de saúde 
                através de tecnologia inovadora.
              </p>
            </div>
            
            <div>
              <h3 className="text-lg font-semibold mb-4">Suporte</h3>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">Contato</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Documentação</a></li>
                <li><Link href="/faq" className="hover:text-white transition-colors">FAQ</Link></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; {new Date().getFullYear()} SaveInMed. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default FAQPage;