'use client';

import { useState } from 'react';
import { 
  ChevronDown, 
  HelpCircle, 
  UtensilsCrossed, 
  Search, 
  Star, 
  MessageCircle,
  Shield,
  TrendingUp,
  Package
} from 'lucide-react';
import Link from 'next/link';

// FAQ Categories
const categories = [
  { id: 'general', name: 'General', icon: HelpCircle },
  { id: 'listings', name: 'Listings y Restaurantes', icon: UtensilsCrossed },
  { id: 'search', name: 'Búsqueda', icon: Search },
  { id: 'reviews', name: 'Reseñas', icon: Star },
  { id: 'account', name: 'Cuenta', icon: Shield },
];

// FAQ Data
const faqs = [
  {
    id: 1,
    category: 'general',
    question: '¿Qué es Restaurant Argentina?',
    answer: 'Restaurant Argentina es el directorio más completo de restaurantes en Argentina. Además de ayudarte a encontrar los mejores restaurantes del país, ofrecemos servicios de consultoría gastronómica integral para emprendedores del sector gastronómico, incluyendo desarrollo de concepto, diseño de espacios, ingeniería de menú, y capacitación de personal.'
  },
  {
    id: 2,
    category: 'general',
    question: '¿Es gratuito usar el directorio?',
    answer: 'Sí, el directorio de restaurantes es completamente gratuito para los usuarios que buscan restaurantes. Los restaurantes pueden crear un perfil básico gratuito, o bien optar por planes premium que ofrecen mayor visibilidad, estadísticas detalladas y herramientas de gestión avanzadas.'
  },
  {
    id: 3,
    category: 'listings',
    question: '¿Cómo puedo agregar mi restaurante al directorio?',
    answer: 'Para agregar tu restaurante, simplemente haz clic en "Publicitar" o "Claim" en nuestro sitio. Podrás crear un perfil básico gratuito con información como nombre, dirección, horario, tipo de cocina y fotos. También puedes contratar planes premium para mayor visibilidad.'
  },
  {
    id: 4,
    category: 'listings',
    question: '¿Cómo puedo modificar la información de mi restaurante?',
    answer: 'Si ya tienes un perfil registrado, puedes iniciar sesión y acceder al panel de gestión de tu restaurante desde "Mi Cuenta". All podrás actualizar información como horarios, menú, fotos, datos de contacto y responder a reseñas de clientes.'
  },
  {
    id: 5,
    category: 'search',
    question: '¿Puedo buscar restaurantes por zona o ciudad específica?',
    answer: '¡Por supuesto! Nuestro directorio incluye restaurantes de las principales ciudades argentinas como Buenos Aires, Córdoba, Rosario, Mendoza, Mar del Plata, Salta, Tucumán y muchas más. Puedes filtrar por ciudad, barrio o zona dentro de cada ciudad.'
  },
  {
    id: 6,
    category: 'reviews',
    question: '¿Cómo funciona el sistema de reseñas?',
    answer: 'Cualquier usuario puede dejar una reseña sobre un restaurante, calificando desde 1 hasta 5 estrellas y agregando un comentario. Las reseñas ayudan a otros usuarios a tomar decisiones informadas. Los restaurantes verificados pueden responder a las reseñas para interactuar con sus clientes.'
  },
  {
    id: 7,
    category: 'reviews',
    question: '¿Qué hago si hay una reseña negativa o incorrecta sobre mi restaurante?',
    answer: 'Si recibiste una reseña que consideras injusta o incorrecta, puedes intentar contactar directamente al usuario para resolver la situación. También puedes respond públicamente mostrando tu postura. Nuestro equipo revisa reportes de contenido inapropiado.'
  },
  {
    id: 8,
    category: 'account',
    question: '¿Qué servicios de consultoría ofrecen?',
    answer: 'Ofrecemos consultoría gastronómica integral que incluye: desarrollo de concepto y branding, diseño de espacios gastronómicos, ingeniería de menú y control de costos, capacitación de personal de cocina y servicio, acompañamiento en apertura, y gestión de presencia digital. Contáctanos para una consulta personalizada.'
  }
];

export default function FAQPage() {
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const [activeCategory, setActiveCategory] = useState('all');

  const filteredFaqs = activeCategory === 'all' 
    ? faqs 
    : faqs.filter(faq => faq.category === activeCategory);

  const toggleFaq = (id: number) => {
    setOpenFaq(openFaq === id ? null : id);
  };

  return (
    <div className="page-container">
      <header className="header">
        <Link href="/" className="logo">
          🍽️ Restaurant<span>Argentina</span>
        </Link>
        <nav className="nav-links">
          <Link href="/">Inicio</Link>
          <Link href="/blog/">Blog</Link>
          <Link href="/recursos/">Recursos</Link>
          <Link href="/directorio">Directorio</Link>
        </nav>
      </header>

      <main className="faq-main">
        <div className="faq-hero">
          <h1>Preguntas Frecuentes</h1>
          <p className="hero-subtitle">
            Encontrá respuestas a las dudas más comunes sobre Restaurant Argentina.
            ¿No encontrás lo que buscás? Estamos para ayudarte.
          </p>
        </div>

        <nav className="category-tabs">
          <button
            className={`category-tab ${activeCategory === 'all' ? 'active' : ''}`}
            onClick={() => setActiveCategory('all')}
          >
            <HelpCircle size={18} />
            Todas
          </button>
          {categories.map((cat) => {
            const Icon = cat.icon;
            return (
              <button
                key={cat.id}
                className={`category-tab ${activeCategory === cat.id ? 'active' : ''}`}
                onClick={() => setActiveCategory(cat.id)}
              >
                <Icon size={18} />
                {cat.name}
              </button>
            );
          })}
        </nav>

        <div className="faq-list">
          {filteredFaqs.map((faq) => (
            <div 
              key={faq.id} 
              className={`faq-item ${openFaq === faq.id ? 'open' : ''}`}
            >
              <button 
                className="faq-question"
                onClick={() => toggleFaq(faq.id)}
                aria-expanded={openFaq === faq.id}
              >
                <span className="question-text">{faq.question}</span>
                <ChevronDown 
                  size={20} 
                  className={`chevron ${openFaq === faq.id ? 'rotated' : ''}`}
                />
              </button>
              <div className="faq-answer">
                <div className="answer-content">
                  {faq.answer}
                </div>
              </div>
            </div>
          ))}
        </div>

        {filteredFaqs.length === 0 && (
          <div className="no-faqs">
            <HelpCircle size={48} />
            <p>No hay preguntas en esta categoría aún.</p>
          </div>
        )}

        <div className="contact-cta">
          <div className="cta-icon">
            <MessageCircle size={32} />
          </div>
          <h3>¿Aún tenés dudas?</h3>
          <p>
            Si no encontraste la respuesta que buscabas, nuestro equipo está 
            disponible para ayudarte.
          </p>
          <Link href="/contacto" className="contact-btn">
            Contactános
          </Link>
        </div>
      </main>

      <footer className="footer">
        <p>© 2026 RestaurantArgentina. Todos los derechos reservados.</p>
        <div className="footer-links">
          <Link href="/contacto">Contacto</Link>
          <Link href="/privacidad">Privacidad</Link>
          <Link href="/terminos">Términos</Link>
        </div>
      </footer>

      <style jsx>{`
        .page-container {
          min-height: 100vh;
          background: #050a11;
          color: #e8f3ff;
          font-family: 'Manrope', 'Space Grotesk', system-ui, sans-serif;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          max-width: 1180px;
          margin: 0 auto 24px;
          padding: 18px 24px;
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          background: rgba(5, 10, 17, 0.85);
          backdrop-filter: blur(18px);
        }

        .logo {
          font-size: 1.1rem;
          font-weight: 600;
          text-decoration: none;
          color: #e8f3ff;
        }

        .logo span {
          color: #f2b35c;
        }

        .nav-links {
          display: flex;
          gap: 24px;
        }

        .nav-links a {
          color: #99aac2;
          text-decoration: none;
          font-weight: 500;
          transition: color 0.2s;
        }

        .nav-links a:hover {
          color: #f2b35c;
        }

        .faq-main {
          max-width: 800px;
          margin: 0 auto;
          padding: 0 24px 80px;
        }

        .faq-hero {
          text-align: center;
          margin-bottom: 40px;
        }

        .faq-hero h1 {
          font-size: 2.5rem;
          font-weight: 700;
          margin: 0 0 16px;
          background: linear-gradient(135deg, #f2b35c 0%, #63f0c5 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .hero-subtitle {
          font-size: 1.1rem;
          color: #99aac2;
          line-height: 1.6;
          margin: 0;
          max-width: 500px;
          margin: 0 auto;
        }

        .category-tabs {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          justify-content: center;
          margin-bottom: 32px;
        }

        .category-tab {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 18px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 24px;
          color: #99aac2;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
        }

        .category-tab:hover {
          background: rgba(255, 255, 255, 0.08);
          color: #e8f3ff;
        }

        .category-tab.active {
          background: rgba(242, 179, 92, 0.15);
          border-color: #f2b35c;
          color: #f2b35c;
        }

        .faq-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .faq-item {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 12px;
          overflow: hidden;
          transition: border-color 0.2s;
        }

        .faq-item:hover {
          border-color: rgba(255, 255, 255, 0.15);
        }

        .faq-item.open {
          border-color: rgba(242, 179, 92, 0.3);
        }

        .faq-question {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 24px;
          background: none;
          border: none;
          color: #e8f3ff;
          font-size: 1rem;
          font-weight: 500;
          text-align: left;
          cursor: pointer;
          transition: background 0.2s;
        }

        .faq-question:hover {
          background: rgba(255, 255, 255, 0.03);
        }

        .question-text {
          flex: 1;
          padding-right: 16px;
        }

        .chevron {
          color: #667788;
          flex-shrink: 0;
          transition: transform 0.3s ease;
        }

        .chevron.rotated {
          transform: rotate(180deg);
          color: #f2b35c;
        }

        .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease, padding 0.3s ease;
        }

        .faq-item.open .faq-answer {
          max-height: 500px;
        }

        .answer-content {
          padding: 0 24px 20px;
          color: #99aac2;
          line-height: 1.7;
        }

        .no-faqs {
          text-align: center;
          padding: 48px 24px;
          color: #667788;
        }

        .no-faqs svg {
          margin-bottom: 16px;
          opacity: 0.5;
        }

        .contact-cta {
          text-align: center;
          margin-top: 48px;
          padding: 40px 24px;
          background: linear-gradient(135deg, rgba(242, 179, 92, 0.08) 0%, rgba(99, 240, 197, 0.05) 100%);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
        }

        .cta-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 64px;
          height: 64px;
          background: rgba(242, 179, 92, 0.15);
          border-radius: 50%;
          margin-bottom: 16px;
          color: #f2b35c;
        }

        .contact-cta h3 {
          font-size: 1.4rem;
          margin: 0 0 12px;
          color: #e8f3ff;
        }

        .contact-cta p {
          color: #99aac2;
          margin: 0 0 24px;
          max-width: 400px;
          margin-left: auto;
          margin-right: auto;
        }

        .contact-btn {
          display: inline-block;
          padding: 14px 32px;
          background: #f2b35c;
          color: #050a11;
          text-decoration: none;
          font-weight: 600;
          border-radius: 10px;
          transition: background 0.2s;
        }

        .contact-btn:hover {
          background: #e5a44f;
        }

        .footer {
          max-width: 1180px;
          margin: 0 auto;
          padding: 32px 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 16px;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .footer p {
          color: #667788;
          margin: 0;
          font-size: 0.9rem;
        }

        .footer-links {
          display: flex;
          gap: 24px;
        }

        .footer-links a {
          color: #667788;
          text-decoration: none;
          font-size: 0.9rem;
          transition: color 0.2s;
        }

        .footer-links a:hover {
          color: #f2b35c;
        }

        @media (max-width: 768px) {
          .header {
            flex-direction: column;
            gap: 16px;
          }

          .nav-links {
            flex-wrap: wrap;
            justify-content: center;
          }

          .faq-hero h1 {
            font-size: 2rem;
          }

          .category-tabs {
            justify-content: flex-start;
            overflow-x: auto;
            flex-wrap: nowrap;
            padding-bottom: 8px;
          }

          .category-tab {
            flex-shrink: 0;
          }

          .faq-question {
            padding: 16px 20px;
            font-size: 0.95rem;
          }

          .answer-content {
            padding: 0 20px 16px;
            font-size: 0.95rem;
          }

          .footer {
            flex-direction: column;
            text-align: center;
          }
        }
      `}</style>
    </div>
  );
}