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

export const metadata = {
  title: "Integrações API - Aggios",
  description: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura.",
};

export default function IntegracoesPage() {
  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-indigo-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-indigo-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
                  <i className="ri-share-forward-line"></i>
                  <span>Integrações API</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">
                  Conecte tudo em um <span className="bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">ecossistema</span>
                </h1>

                <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
                  API REST completa para integrar com BI, contabilidade, ERPs externos e automatizar workflows com webhooks.
                </p>

                <div className="flex flex-col sm:flex-row gap-4">
                  <Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-indigo-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-indigo-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-indigo-200 to-purple-200 dark:from-indigo-900/20 dark:to-purple-900/20 rounded-[40px]"></div>
                <div className="relative bg-zinc-900 dark:bg-zinc-950 rounded-3xl border border-zinc-700 dark:border-zinc-800 p-6 shadow-2xl font-mono text-sm">
                  <div className="flex items-center gap-2 mb-4">
                    <div className="w-3 h-3 rounded-full bg-red-500"></div>
                    <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                    <div className="w-3 h-3 rounded-full bg-emerald-500"></div>
                    <span className="ml-auto text-zinc-500 text-xs">api.aggios.app</span>
                  </div>
                  <div className="space-y-2 text-zinc-300">
                    <div><span className="text-purple-400">POST</span> <span className="text-zinc-500">/api/v1/customers</span></div>
                    <div className="pl-4 text-zinc-500">{"{"}</div>
                    <div className="pl-8"><span className="text-blue-400">"name"</span>: <span className="text-emerald-400">"João Silva"</span>,</div>
                    <div className="pl-8"><span className="text-blue-400">"email"</span>: <span className="text-emerald-400">"joao@empresa.com"</span></div>
                    <div className="pl-4 text-zinc-500">{"}"}</div>
                    <div className="pt-2 border-t border-zinc-700">
                      <span className="text-emerald-400">✓ 201 Created</span>
                    </div>
                  </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">
                API <span className="bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">completa</span>
              </h2>
              <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
                Integre com qualquer sistema e automatize processos complexos.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {[
                { icon: "ri-code-s-slash-line", title: "RESTful API", desc: "Endpoints padronizados com JSON, autenticação OAuth 2.0 e rate limiting." },
                { icon: "ri-webhook-line", title: "Webhooks em Tempo Real", desc: "Receba notificações instantâneas de eventos como novos clientes ou pagamentos." },
                { icon: "ri-file-text-line", title: "Documentação Completa", desc: "OpenAPI/Swagger com exemplos em múltiplas linguagens e sandbox." },
                { icon: "ri-lock-line", title: "Segurança Enterprise", desc: "Criptografia TLS 1.3, tokens JWT e logs de auditoria completos." },
                { icon: "ri-database-2-line", title: "SDKs Oficiais", desc: "Bibliotecas nativas para Python, Node.js, PHP, Ruby e .NET." },
                { icon: "ri-bar-chart-box-line", title: "Analytics de Uso", desc: "Dashboard com chamadas, latência, erros e consumo de quota." },
              ].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-indigo-500 hover:shadow-lg transition-all">
                  <div className="w-14 h-14 bg-indigo-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>

        {/* Use Cases */}
        <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="text-center mb-16">
              <h2 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white mb-6 transition-colors">
                Casos de uso
              </h2>
              <p className="text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto transition-colors">
                Veja como empresas usam nossas APIs para criar soluções personalizadas.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {[
                {
                  title: "Dashboards BI Customizados",
                  desc: "Conecte Power BI, Tableau ou Metabase para visualizar dados em tempo real.",
                  icon: "ri-dashboard-line",
                  tags: ["Power BI", "Tableau", "Looker"],
                },
                {
                  title: "Sincronização Contábil",
                  desc: "Exporte lançamentos automaticamente para Conta Azul, Omie ou sistemas próprios.",
                  icon: "ri-calculator-line",
                  tags: ["Conta Azul", "Omie", "SAP"],
                },
                {
                  title: "Automação de Marketing",
                  desc: "Integre com RD Station, HubSpot e Active Campaign via webhooks.",
                  icon: "ri-mail-send-line",
                  tags: ["RD Station", "HubSpot", "Mailchimp"],
                },
                {
                  title: "Apps Internos",
                  desc: "Construa ferramentas customizadas usando nossa API como backend.",
                  icon: "ri-apps-line",
                  tags: ["React", "Vue", "Mobile"],
                },
              ].map((useCase, index) => (
                <div key={index} className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 hover:border-indigo-500 hover:shadow-lg transition-all">
                  <div className="flex items-start gap-4 mb-4">
                    <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/20 rounded-xl flex items-center justify-center text-indigo-600 text-2xl shrink-0">
                      <i className={useCase.icon}></i>
                    </div>
                    <div className="flex-1">
                      <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-2 transition-colors">
                        {useCase.title}
                      </h3>
                      <p className="text-zinc-600 dark:text-zinc-400 mb-4 transition-colors">
                        {useCase.desc}
                      </p>
                      <div className="flex flex-wrap gap-2">
                        {useCase.tags.map((tag, tagIndex) => (
                          <span key={tagIndex} className="px-3 py-1 bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 text-xs font-semibold rounded-full">
                            {tag}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Developer Resources */}
        <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-12">
              <h2 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white mb-6 transition-colors">
                Recursos para desenvolvedores
              </h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                { icon: "ri-book-open-line", title: "Documentação", desc: "Guias completos e referência da API", link: "#" },
                { icon: "ri-code-box-line", title: "Sandbox", desc: "Ambiente de testes sem custos", link: "#" },
                { icon: "ri-chat-4-line", title: "Suporte Dev", desc: "Comunidade no Discord e Slack", link: "#" },
              ].map((resource, index) => (
                <a key={index} href={resource.link} className="group bg-zinc-50 dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 hover:border-indigo-500 hover:shadow-lg transition-all">
                  <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/20 rounded-xl flex items-center justify-center text-indigo-600 text-2xl mb-4 group-hover:scale-110 transition-transform">
                    <i className={resource.icon}></i>
                  </div>
                  <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-2 transition-colors">
                    {resource.title}
                  </h3>
                  <p className="text-sm text-zinc-600 dark:text-zinc-400 transition-colors">
                    {resource.desc}
                  </p>
                </a>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-20 bg-zinc-50 dark:bg-zinc-800 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">
              Construa <span className="bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">sem limites</span>
            </h2>
            <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
              Comece a integrar hoje mesmo com nossa API RESTful.
            </p>
            <Link href="http://dash.localhost/cadastro" className="inline-block px-8 py-4 bg-indigo-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>
    </>
  );
}