import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <>
      {/* Header */}
      <header className="bg-white border-b border-zinc-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="flex items-center justify-between py-4">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-sm">A</span>
              </div>
              <span className="font-heading font-bold text-xl text-zinc-900">aggios</span>
            </div>

            <nav className="hidden md:flex items-center gap-8">
              <a href="#features" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Recursos</a>
              <a href="#pricing" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Preços</a>
              <a href="#contact" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Contato</a>
            </nav>

            <div className="flex items-center gap-4">
              <Link href="https://dash.aggios.app/login" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all font-medium">
                Entrar
              </Link>
              <Link href="https://dash.aggios.app/cadastro" className="px-6 py-2 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
                Começar Grátis
              </Link>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-linear-to-r from-[#FF3A05]/10 to-[#FF0080]/10 rounded-full text-sm font-medium mb-6">
              <i className="ri-rocket-line text-base bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
              <span className="bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent">
                Plataforma de Gestão Financeira
              </span>
            </div>

            <h1 className="font-heading font-bold text-5xl lg:text-7xl text-zinc-900 mb-6 leading-tight">
              Transforme sua <br />
              <span className="gradient-text">gestão financeira</span>
            </h1>

            <p className="text-xl text-zinc-600 mb-8 max-w-3xl mx-auto leading-relaxed">
              A plataforma completa para gestão de agências e clientes.
              Controle financeiro, relatórios inteligentes e muito mais.
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
                <i className="ri-arrow-right-line mr-2"></i>
                Começar Grátis
              </Link>
              <Link href="#demo" className="px-6 py-3 border-2 border-zinc-300 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
                <i className="ri-play-circle-line mr-2"></i>
                Ver Demo
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 bg-zinc-50">
        <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 mb-6">
              Recursos que fazem a <span className="gradient-text">diferença</span>
            </h2>
            <p className="text-xl text-zinc-600 max-w-3xl mx-auto">
              Ferramentas poderosas para simplificar sua gestão e impulsionar seus resultados.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
                <i className="ri-dashboard-3-line text-2xl text-white"></i>
              </div>
              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Dashboard Inteligente</h3>
              <p className="text-zinc-600 leading-relaxed">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
            </div>

            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
                <i className="ri-team-line text-2xl text-white"></i>
              </div>
              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Gestão de Clientes</h3>
              <p className="text-zinc-600 leading-relaxed">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
            </div>

            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
                <i className="ri-file-chart-line text-2xl text-white"></i>
              </div>
              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Relatórios Avançados</h3>
              <p className="text-zinc-600 leading-relaxed">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
            </div>

            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
                <i className="ri-secure-payment-line text-2xl text-white"></i>
              </div>
              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Segurança Total</h3>
              <p className="text-zinc-600 leading-relaxed">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
            </div>

            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
                <i className="ri-smartphone-line text-2xl text-white"></i>
              </div>
              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Acesso Mobile</h3>
              <p className="text-zinc-600 leading-relaxed">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
            </div>

            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
                <i className="ri-customer-service-2-line text-2xl text-white"></i>
              </div>
              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Suporte 24/7</h3>
              <p className="text-zinc-600 leading-relaxed">Conte com nossa equipe especializada sempre que precisar, em qualquer horário.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-20 bg-white">
        <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 mb-6">
              Planos para todos os <span className="gradient-text">tamanhos</span>
            </h2>
            <p className="text-xl text-zinc-600 max-w-3xl mx-auto">
              Escolha o plano ideal para sua agência e comece a transformar sua gestão hoje mesmo.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {/* Plano Básico */}
            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
              <div className="text-center mb-8">
                <h3 className="font-heading font-bold text-xl text-zinc-900 mb-2">Básico</h3>
                <div className="flex items-baseline justify-center gap-1 mb-2">
                  <span className="text-4xl font-bold text-zinc-900">R$ 29</span>
                  <span className="text-zinc-600">/mês</span>
                </div>
                <p className="text-zinc-600">Perfeito para começar</p>
              </div>

              <ul className="space-y-4 mb-8">
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">Até 10 clientes</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">Dashboard básico</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">Relatórios mensais</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">Suporte por email</span>
                </li>
              </ul>

              <Link href="https://dash.aggios.app/cadastro" className="w-full px-6 py-3 border-2 border-zinc-200 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
                Começar Grátis
              </Link>
            </div>

            {/* Plano Pro */}
            <div className="bg-linear-to-br from-[#FF3A05] to-[#FF0080] p-8 rounded-2xl text-white shadow-2xl transform scale-105">
              <div className="text-center mb-8">
                <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/20 rounded-full text-sm font-medium mb-4">
                  <i className="ri-star-line"></i>
                  Mais Popular
                </div>
                <h3 className="font-heading font-bold text-xl mb-2">Pro</h3>
                <div className="flex items-baseline justify-center gap-1 mb-2">
                  <span className="text-4xl font-bold">R$ 79</span>
                  <span className="text-white/80">/mês</span>
                </div>
                <p className="text-white/80">Para agências em crescimento</p>
              </div>

              <ul className="space-y-4 mb-8">
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-white text-lg"></i>
                  <span>Até 100 clientes</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-white text-lg"></i>
                  <span>Dashboard completo</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-white text-lg"></i>
                  <span>Relatórios ilimitados</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-white text-lg"></i>
                  <span>Suporte prioritário</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-white text-lg"></i>
                  <span>API integrations</span>
                </li>
              </ul>

              <Link href="https://dash.aggios.app/cadastro" className="w-full px-6 py-3 bg-white text-zinc-900 font-semibold rounded-lg hover:bg-white/90 transition-colors block text-center">
                Começar Agora
              </Link>
            </div>

            {/* Plano Enterprise */}
            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
              <div className="text-center mb-8">
                <h3 className="font-heading font-bold text-xl text-zinc-900 mb-2">Enterprise</h3>
                <div className="flex items-baseline justify-center gap-1 mb-2">
                  <span className="text-4xl font-bold text-zinc-900">R$ 199</span>
                  <span className="text-zinc-600">/mês</span>
                </div>
                <p className="text-zinc-600">Para grandes agências</p>
              </div>

              <ul className="space-y-4 mb-8">
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">Clientes ilimitados</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">Dashboard personalizado</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">Relatórios avançados</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">Suporte dedicado</span>
                </li>
                <li className="flex items-center gap-3">
                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
                  <span className="text-zinc-600">White label</span>
                </li>
              </ul>

              <Link href="#contact" className="w-full px-6 py-3 border-2 border-zinc-200 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
                Falar com Vendas
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-zinc-50">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center">
            <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 mb-6">
              Pronto para <span className="gradient-text">começar?</span>
            </h2>
            <p className="text-xl text-zinc-600 mb-8 max-w-3xl mx-auto">
              Junte-se a centenas de agências que já transformaram sua gestão com a Aggios.
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
                <i className="ri-rocket-line mr-2"></i>
                Começar Grátis Agora
              </Link>
              <Link href="#contact" className="px-6 py-3 border-2 border-zinc-300 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
                <i className="ri-phone-line mr-2"></i>
                Falar com Especialista
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer id="contact" className="bg-zinc-900 text-white py-16">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="md:col-span-2">
              <div className="flex items-center gap-2 mb-6">
                <div className="w-8 h-8 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-lg flex items-center justify-center">
                  <span className="text-white font-bold text-sm">A</span>
                </div>
                <span className="font-heading font-bold text-xl">aggios</span>
              </div>
              <p className="text-zinc-400 mb-6 max-w-md">
                A plataforma completa para gestão financeira de agências.
                Transforme sua gestão e impulsione seus resultados.
              </p>
              <div className="flex items-center gap-4">
                <a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
                  <i className="ri-linkedin-line text-lg group-hover:text-white"></i>
                </a>
                <a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
                  <i className="ri-twitter-line text-lg group-hover:text-white"></i>
                </a>
                <a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
                  <i className="ri-instagram-line text-lg group-hover:text-white"></i>
                </a>
              </div>
            </div>

            <div>
              <h3 className="font-heading font-bold text-lg mb-4">Produto</h3>
              <ul className="space-y-3">
                <li><a href="#features" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Recursos</a></li>
                <li><a href="#pricing" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Preços</a></li>
                <li><a href="#" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">API</a></li>
                <li><a href="#" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Integrações</a></li>
              </ul>
            </div>

            <div>
              <h3 className="font-heading font-bold text-lg mb-4">Suporte</h3>
              <ul className="space-y-3">
                <li><a href="#" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Central de Ajuda</a></li>
                <li><a href="#" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Documentação</a></li>
                <li><a href="mailto:suporte@aggios.app" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">suporte@aggios.app</a></li>
                <li><a href="tel:+5511999999999" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">(11) 99999-9999</a></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-zinc-800 mt-12 pt-8 flex flex-col md:flex-row items-center justify-between">
            <p className="text-zinc-400 text-sm">
              © 2025 Aggios. Todos os direitos reservados.
            </p>
            <div className="flex items-center gap-6 mt-4 md:mt-0">
              <a href="#" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all text-sm">Privacidade</a>
              <a href="#" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all text-sm">Termos</a>
              <a href="#" className="text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all text-sm">Cookies</a>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}