import Link from "next/link";
import Header from "@/components/Header";

export const metadata = {
  title: "Helpdesk 360° - Aggios",
  description: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium.",
};

export default function HelpdeskPage() {
  return (
    <>
      <Header />

      <main className="pt-20 bg-white dark:bg-zinc-950 transition-colors">
        {/* Hero Section */}
        <section className="py-20 bg-gradient-to-br from-orange-50 to-white dark:from-zinc-900 dark:to-zinc-950 transition-colors">
          <div className="max-w-7xl mx-auto px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <div className="inline-flex items-center gap-2 px-4 py-2 bg-orange-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
                  <i className="ri-customer-service-line"></i>
                  <span>Helpdesk 360°</span>
                </div>

                <h1 className="font-heading font-bold text-5xl lg:text-6xl text-zinc-900 dark:text-white mb-6 leading-tight transition-colors">
                  Suporte que <span className="bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent">encanta</span> clientes
                </h1>

                <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
                  Gerencie tickets, controle SLAs e construa uma base de conhecimento completa. Tudo integrado ao CRM.
                </p>

                <div className="flex flex-col sm:flex-row gap-4">
                  <Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-orange-600 text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg">
                    Começar Grátis
                  </Link>
                  <Link href="/#pricing" className="px-8 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-xl hover:border-transparent hover:bg-orange-600 hover:text-white transition-all">
                    Ver Planos
                  </Link>
                </div>
              </div>

              <div className="relative">
                <div className="absolute inset-0 blur-3xl bg-gradient-to-r from-orange-200 to-red-200 dark:from-orange-900/20 dark:to-red-900/20 rounded-[40px]"></div>
                <div className="relative bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-8 shadow-2xl transition-colors">
                  <div className="space-y-3">
                    {[
                      { id: "#1284", title: "Bug no checkout", priority: "urgent", status: "aberto", color: "bg-red-500" },
                      { id: "#1283", title: "Dúvida sobre plano", priority: "normal", status: "respondido", color: "bg-blue-500" },
                      { id: "#1282", title: "Solicitação de feature", priority: "baixa", status: "fechado", color: "bg-emerald-500" },
                    ].map((ticket, index) => (
                      <div key={index} className="flex items-center gap-3 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-xl">
                        <div className={`w-3 h-3 rounded-full ${ticket.color}`}></div>
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="text-xs font-mono text-zinc-500">{ticket.id}</span>
                            <span className={`text-xs px-2 py-0.5 rounded-full ${ticket.priority === 'urgent' ? 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-400' : 'bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400'} font-semibold`}>
                              {ticket.priority === 'urgent' ? 'Urgente' : ticket.priority === 'normal' ? 'Normal' : 'Baixa'}
                            </span>
                          </div>
                          <p className="text-sm font-semibold text-zinc-900 dark:text-white">{ticket.title}</p>
                        </div>
                        <i className={`ri-${ticket.status === 'fechado' ? 'check' : ticket.status === 'respondido' ? 'reply' : 'time'}-line text-zinc-400`}></i>
                      </div>
                    ))}
                  </div>
                  <div className="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-800 flex items-center justify-between text-sm">
                    <span className="text-zinc-600 dark:text-zinc-400">Tempo médio de resposta</span>
                    <span className="font-semibold text-orange-600">1.2h</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Features */}
        <section className="py-20 bg-white dark:bg-zinc-900 transition-colors">
          <div className="max-w-7xl mx-auto px-6 lg:px-8">
            <div className="text-center mb-16">
              <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
                Atendimento <span className="bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent">profissional</span>
              </h2>
              <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
                Ferramentas completas para oferecer suporte de alta qualidade aos seus clientes.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {[
                { icon: "ri-ticket-2-line", title: "Sistema de Tickets", desc: "Organize solicitações por prioridade, categoria e status automaticamente." },
                { icon: "ri-time-line", title: "SLA Automático", desc: "Defina tempos de resposta e resolução com alertas quando próximo do limite." },
                { icon: "ri-book-open-line", title: "Base de Conhecimento", desc: "Crie artigos, FAQs e tutoriais para reduzir tickets recorrentes." },
                { icon: "ri-chat-3-line", title: "Chat em Tempo Real", desc: "Converse com clientes diretamente no site com widget personalizável." },
                { icon: "ri-mail-line", title: "E-mail Integrado", desc: "Receba e responda tickets direto do e-mail sem sair da plataforma." },
                { icon: "ri-bar-chart-line", title: "Métricas de Atendimento", desc: "CSAT, NPS, tempo de primeira resposta e tempo de resolução." },
              ].map((feature, index) => (
                <div key={index} className="bg-zinc-50 dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-orange-500 hover:shadow-lg transition-all">
                  <div className="w-14 h-14 bg-orange-600 rounded-2xl flex items-center justify-center text-white text-2xl mb-6">
                    <i className={feature.icon}></i>
                  </div>
                  <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">
                    {feature.title}
                  </h3>
                  <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">
                    {feature.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Benefits */}
        <section className="py-20 bg-zinc-50 dark:bg-zinc-800 transition-colors">
          <div className="max-w-7xl mx-auto px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-16 items-center">
              <div>
                <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
                  Por que usar nosso Helpdesk?
                </h2>
                <p className="text-lg text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
                  Integração total com CRM significa contexto completo em cada atendimento.
                </p>

                <div className="space-y-6">
                  {[
                    { title: "Visão 360° do cliente", desc: "Acesse histórico de compras, tickets anteriores e contratos na mesma tela." },
                    { title: "Redução de 70% em tickets", desc: "Base de conhecimento self-service diminui demanda de suporte." },
                    { title: "Aumento do NPS", desc: "Atendimento rápido e contextualizado eleva satisfação dos clientes." },
                    { title: "Automações inteligentes", desc: "Distribua tickets automaticamente com base em assunto e prioridade." },
                  ].map((benefit, index) => (
                    <div key={index} className="flex gap-4">
                      <span className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-600 text-white shadow-sm shrink-0 mt-1">
                        <i className="ri-check-line text-sm"></i>
                      </span>
                      <div>
                        <h4 className="font-semibold text-lg text-zinc-900 dark:text-white mb-1 transition-colors">
                          {benefit.title}
                        </h4>
                        <p className="text-zinc-600 dark:text-zinc-400 transition-colors">
                          {benefit.desc}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-8 shadow-2xl transition-colors">
                <div className="grid grid-cols-2 gap-4 mb-6">
                  {[
                    { label: "Tickets Abertos", value: "24", icon: "ri-inbox-line", color: "text-orange-600" },
                    { label: "Resolvidos Hoje", value: "89", icon: "ri-check-double-line", color: "text-emerald-600" },
                  ].map((stat, index) => (
                    <div key={index} className="p-4 bg-zinc-50 dark:bg-zinc-800 rounded-2xl text-center">
                      <i className={`${stat.icon} text-3xl ${stat.color} mb-2`}></i>
                      <p className="text-2xl font-bold text-zinc-900 dark:text-white">{stat.value}</p>
                      <p className="text-xs text-zinc-600 dark:text-zinc-400 mt-1">{stat.label}</p>
                    </div>
                  ))}
                </div>

                <div className="border-t border-zinc-200 dark:border-zinc-800 pt-6">
                  <p className="text-sm font-semibold text-zinc-900 dark:text-white mb-4">Satisfação do Cliente</p>
                  <div className="flex items-center gap-3 mb-2">
                    <div className="flex-1 h-3 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
                      <div className="h-full bg-orange-600 rounded-full" style={{ width: '94%' }}></div>
                    </div>
                    <span className="text-sm font-bold text-orange-600">94%</span>
                  </div>
                  <p className="text-xs text-zinc-500 dark:text-zinc-400">Baseado em 342 avaliações</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-20 bg-white dark:bg-zinc-900 transition-colors">
          <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
            <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
              Eleve seu <span className="bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent">suporte</span>
            </h2>
            <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
              Transforme cada atendimento em uma oportunidade de encantar clientes.
            </p>
            <Link href="http://dash.localhost/cadastro" className="inline-block px-8 py-4 bg-orange-600 text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg">
              <i className="ri-rocket-line mr-2"></i>
              Começar Grátis Agora
            </Link>
          </div>
        </section>
      </main>

      <footer className="bg-zinc-900 dark:bg-black text-white py-12 transition-colors">
        <div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
          <p className="text-zinc-400 text-sm">
            © 2025 Aggios. Todos os direitos reservados.
          </p>
        </div>
      </footer>
    </>
  );
}