"use client";

import { useState } from "react";
import Link from "next/link";
import Header from "@/components/Header";
import {
  RocketLaunchIcon,
  ArrowRightIcon,
  PlayCircleIcon,
  ShieldCheckIcon,
  BoltIcon,
  UsersIcon,
  CircleStackIcon,
  RectangleGroupIcon,
  CreditCardIcon,
  ChatBubbleLeftRightIcon,
  ShareIcon,
  ChartBarIcon,
  UserGroupIcon,
  ChartBarSquareIcon,
  DevicePhoneMobileIcon,
  CheckIcon,
  SparklesIcon,
  InformationCircleIcon,
  ServerIcon,
  PhoneIcon,
} from "@heroicons/react/24/outline";

export default function Home() {
  const [isAnnual, setIsAnnual] = useState(false);

  // Componente helper para ícones de redes sociais (mantém como SVG simples)
  const LinkedInIcon = () => (
    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
  );

  const TwitterIcon = () => (
    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
  );

  const InstagramIcon = () => (
    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
  );

  return (
    <>
      <Header />

      <main className="pt-28 bg-white dark:bg-zinc-950 transition-colors">
        {/* Hero Section */}
        <section className="py-28 bg-white dark:bg-zinc-900 transition-colors">
          <div className="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-brand rounded-full text-sm font-semibold text-white shadow-lg shadow-brand-20 mb-8">
                <RocketLaunchIcon className="w-4 h-4" />
                <span>Plataforma de Gestão Financeira</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">
                Transforme sua <span className="gradient-text">gestão financeira</span> em uma única interface.
              </h1>

              <p className="text-lg text-zinc-600 dark:text-zinc-400 mb-10 leading-relaxed transition-colors">
                Conecte CRM, ERP, projetos, pagamentos e suporte com dashboards inteligentes, automações e insights em tempo real para sua agência.
              </p>

              <div className="flex flex-col sm:flex-row items-center gap-4">
                <Link href="http://dash.localhost/cadastro" className="inline-flex items-center px-8 py-3 bg-brand text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-brand-20">
                  <ArrowRightIcon className="w-5 h-5 mr-2" />
                  Começar Grátis
                </Link>
                <Link href="#demo" className="inline-flex items-center px-8 py-3 rounded-xl border border-zinc-300 text-zinc-700 dark:text-white font-semibold hover:border-transparent hover:bg-brand hover:text-white transition-all">
                  <PlayCircleIcon className="w-5 h-5 mr-2" />
                  Ver Demo
                </Link>
              </div>

              <div className="mt-8 flex items-center gap-6 text-sm text-zinc-500 dark:text-zinc-400">
                <div className="flex items-center gap-2">
                  <ShieldCheckIcon className="w-5 h-5 gradient-text" />
                  Segurança bancária
                </div>
                <div className="flex items-center gap-2">
                  <BoltIcon className="w-5 h-5 gradient-text" />
                  Automatizações inteligentes
                </div>
              </div>
            </div>

            <div className="relative">
              <div className="absolute inset-0 blur-3xl bg-brand-horizontal-soft rounded-[40px]"></div>
              <div className="relative rounded-4xl border border-white/30 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl shadow-2xl overflow-hidden">
                <div className="flex items-center justify-between px-8 py-6 border-b border-zinc-100 dark:border-zinc-800">
                  <div>
                    <p className="text-xs uppercase tracking-[0.3em] text-zinc-400">Painel ao vivo</p>
                    <h3 className="text-xl font-semibold text-zinc-900 dark:text-white">Aggios Dashboard</h3>
                  </div>
                  <span className="px-3 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-semibold">Online</span>
                </div>
                <div className="p-8 space-y-6">
                  <div className="grid grid-cols-3 gap-4">
                    {[
                      { label: 'MRR', value: 'R$ 128K' },
                      { label: 'Clientes ativos', value: '312' },
                      { label: 'NPS', value: '92' },
                    ].map((stat) => (
                      <div key={stat.label} className="rounded-2xl border border-zinc-100 dark:border-zinc-800 p-4">
                        <p className="text-xs uppercase tracking-wide text-zinc-400">{stat.label}</p>
                        <p className="text-2xl font-semibold text-zinc-900 dark:text-white mt-1">{stat.value}</p>
                      </div>
                    ))}
                  </div>
                  <div className="rounded-2xl border border-zinc-100 dark:border-zinc-800 p-6">
                    <div className="flex items-center justify-between mb-4">
                      <p className="font-semibold text-zinc-900 dark:text-white">Fluxo de caixa</p>
                      <span className="text-sm text-emerald-500">+18% este mês</span>
                    </div>
                    <div className="h-40 bg-brand-horizontal-soft rounded-xl relative">
                      <div className="absolute inset-4 rounded-xl border border-dashed border-zinc-200 dark:border-zinc-800"></div>
                      <div className="absolute inset-0 flex items-end gap-2 p-6">
                        {[40, 60, 80, 50, 90, 70].map((height, index) => (
                          <span key={index} className="w-4 rounded-full bg-brand" style={{ height: `${height}%` }}></span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Solutions Section */}
        <section id="solutions" className="py-24 bg-zinc-50/60 dark:bg-zinc-900/40 border-y border-zinc-200 dark:border-zinc-800">
          <div className="max-w-7xl mx-auto px-6 lg:px-8">
            <div className="mb-16 text-center max-w-3xl mx-auto space-y-6">
              <div>
                <p className="text-sm uppercase tracking-[0.3em] text-zinc-500">Soluções</p>
                <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mt-4 leading-tight">
                  Suite completa para gerir <span className="gradient-text">todo o ciclo financeiro.</span>
                </h2>
              </div>
              <p className="text-lg text-zinc-600 dark:text-zinc-400">
                Escolha o módulo ideal ou combine todos para criar um ecossistema integrado com CRM, ERP, projetos, pagamentos e helpdesk em um só lugar.
              </p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {[
                { id: "crm", Icon: UsersIcon, title: "CRM Inteligente", desc: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real." },
                { id: "erp", Icon: CircleStackIcon, title: "ERP Financeiro", desc: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas." },
                { id: "gestao-projetos", Icon: RectangleGroupIcon, title: "Gestão de Projetos", desc: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos." },
                { id: "gestao-pagamentos", Icon: CreditCardIcon, title: "Gestão de Pagamentos", desc: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes." },
                { id: "helpdesk", Icon: ChatBubbleLeftRightIcon, title: "Helpdesk 360°", desc: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium." },
                { id: "integra", Icon: ShareIcon, title: "Integrações API", desc: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura." },
              ].map((item) => (
                <div id={item.id} key={item.id} className="relative rounded-4xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950/80 backdrop-blur-xl p-8 shadow-lg overflow-hidden">
                  <div className="absolute -top-20 -right-10 h-40 w-40 rounded-full bg-brand-soft blur-3xl" aria-hidden="true"></div>
                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 relative z-10">
                    <div>
                      <div className="inline-flex items-center gap-3 mb-4 px-4 py-2 rounded-full border border-zinc-200 dark:border-zinc-800 text-xs uppercase tracking-[0.2em] text-zinc-500">
                        <span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-white">
                          <item.Icon className="w-5 h-5" />
                        </span>
                        {item.title}
                      </div>
                      <p className="text-lg text-zinc-700 dark:text-zinc-300 leading-relaxed">
                        {item.desc}
                      </p>
                    </div>
                    <div className="w-full sm:w-48 h-36 rounded-2xl border border-dashed border-zinc-200 dark:border-zinc-800 p-4 text-sm text-zinc-500 dark:text-zinc-400 bg-white/60 dark:bg-zinc-900/60">
                      <p className="font-semibold text-zinc-900 dark:text-white mb-2">Módulo em ação</p>
                      <div className="space-y-2">
                        <div className="h-2 rounded-full bg-brand"></div>
                        <div className="h-2 rounded-full bg-brand w-3/4"></div>
                        <div className="h-2 rounded-full bg-zinc-200 dark:bg-zinc-800 w-2/3"></div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Features Section */}
        <section id="features" className="py-20 bg-zinc-50 dark:bg-zinc-800 transition-colors scroll-mt-32">
          <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">
                Recursos que fazem a <span className="gradient-text">diferença</span>
              </h2>
              <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
                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 dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
                  <ChartBarIcon className="w-6 h-6 text-white" />
                </div>
                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Dashboard Inteligente</h3>
                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
              </div>

              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
                  <UserGroupIcon className="w-6 h-6 text-white" />
                </div>
                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Gestão de Clientes</h3>
                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
              </div>

              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
                  <ChartBarSquareIcon className="w-6 h-6 text-white" />
                </div>
                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Relatórios Avançados</h3>
                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
              </div>

              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
                  <ShieldCheckIcon className="w-6 h-6 text-white" />
                </div>
                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Segurança Total</h3>
                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
              </div>

              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
                  <DevicePhoneMobileIcon className="w-6 h-6 text-white" />
                </div>
                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Acesso Mobile</h3>
                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
              </div>

              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                <div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
                  <ChatBubbleLeftRightIcon className="w-6 h-6 text-white" />
                </div>
                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Suporte 24/7</h3>
                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">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 dark:bg-zinc-900 transition-colors scroll-mt-32">
          <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">
                Planos que <span className="gradient-text">crescem</span> com você
              </h2>
              <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
                Todos os módulos inclusos em todos os planos. Escolha o ideal para o tamanho da sua equipe.
              </p>

              {/* Toggle Mensal/Anual */}
              <div className="flex items-center justify-center gap-4 mt-8">
                <span className={`text-sm font-medium transition-colors ${!isAnnual ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400'}`}>
                  Mensal
                </span>
                <button
                  onClick={() => setIsAnnual(!isAnnual)}
                  className="relative inline-flex h-8 w-14 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 bg-zinc-200 dark:bg-zinc-700"
                  style={{ backgroundColor: isAnnual ? '#ff0080' : '' }}
                >
                  <span
                    className={`inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform ${
                      isAnnual ? 'translate-x-7' : 'translate-x-1'
                    }`}
                  />
                </button>
                <span className={`text-sm font-medium transition-colors ${isAnnual ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400'}`}>
                  Anual
                  <span className="ml-2 inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/30 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 dark:text-emerald-400">
                    20% OFF
                  </span>
                </span>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
              {/* Plano Ignição */}
              <div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                <div className="mb-6">
                  <h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-1 transition-colors">Ignição</h3>
                  <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">1 a 30 usuários (colaboradores + clientes)</p>
                  <div className="flex items-baseline gap-1">
                    <span className="text-sm text-zinc-500">R$</span>
                    <span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">
                      {isAnnual ? '159,99' : '199,99'}
                    </span>
                    <span className="text-zinc-500 dark:text-zinc-400">/mês</span>
                  </div>
                  {isAnnual && (
                    <p className="text-xs text-emerald-600 dark:text-emerald-400 mt-1">
                      R$ 1.919,90 cobrado anualmente
                    </p>
                  )}
                </div>

                <ul className="space-y-3 mb-8">
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
                  </li>
                </ul>

                <Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center text-sm">
                  Começar Grátis
                </Link>
              </div>

              {/* Plano Órbita */}
              <div className="bg-brand p-6 rounded-2xl text-white shadow-2xl transform lg:scale-105 relative">
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-white text-xs font-bold rounded-full shadow-lg" style={{ color: '#ff0080' }}>
                  MAIS POPULAR
                </div>
                <div className="mb-6">
                  <h3 className="font-heading font-bold text-2xl mb-1">Órbita</h3>
                  <p className="text-sm text-white/80 mb-4">31 a 100 usuários (colaboradores + clientes)</p>
                  <div className="flex items-baseline gap-1">
                    <span className="text-sm text-white/80">R$</span>
                    <span className="text-4xl font-bold">
                      {isAnnual ? '319,99' : '399,99'}
                    </span>
                    <span className="text-white/80">/mês</span>
                  </div>
                  {isAnnual && (
                    <p className="text-xs text-white/80 mt-1">
                      R$ 3.839,90 cobrado anualmente
                    </p>
                  )}
                </div>

                <ul className="space-y-3 mb-8">
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    <span>Todos os módulos inclusos</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    <span>Portal white-label</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    <span>1GB de armazenamento</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm font-semibold">
                    <CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    <span>Suporte prioritário</span>
                  </li>
                </ul>

                <Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 bg-white font-semibold rounded-lg hover:bg-white/90 transition-colors block text-center text-sm" style={{ color: '#ff0080' }}>
                  Começar Agora
                </Link>
              </div>

              {/* Plano Cosmos */}
              <div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
                <div className="mb-6">
                  <h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-1 transition-colors">Cosmos</h3>
                  <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">101 a 300 usuários (colaboradores + clientes)</p>
                  <div className="flex items-baseline gap-1">
                    <span className="text-sm text-zinc-500">R$</span>
                    <span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">
                      {isAnnual ? '639,99' : '799,99'}
                    </span>
                    <span className="text-zinc-500 dark:text-zinc-400">/mês</span>
                  </div>
                  {isAnnual && (
                    <p className="text-xs text-emerald-600 dark:text-emerald-400 mt-1">
                      R$ 7.679,90 cobrado anualmente
                    </p>
                  )}
                </div>

                <ul className="space-y-3 mb-8">
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm font-semibold">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-900 dark:text-white">Suporte prioritário</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm font-semibold">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-900 dark:text-white">Gerente de conta dedicado</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm font-semibold">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-900 dark:text-white">API para integrações</span>
                  </li>
                </ul>

                <Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center text-sm">
                  Começar Agora
                </Link>
              </div>

              {/* Plano Enterprise */}
              <div className="bg-gradient-to-br from-zinc-900 to-zinc-800 dark:from-zinc-950 dark:to-zinc-900 p-6 rounded-2xl border border-zinc-700 dark:border-zinc-800 text-white shadow-xl transition-all">
                <div className="mb-6">
                  <div className="flex items-center gap-2 mb-2">
                    <h3 className="font-heading font-bold text-2xl">Enterprise</h3>
                    <SparklesIcon className="w-5 h-5 text-yellow-400" />
                  </div>
                  <p className="text-sm text-zinc-400 mb-4">301+ usuários (colaboradores + clientes)</p>
                  <div className="flex items-baseline gap-1">
                    <span className="text-3xl font-bold">Sob consulta</span>
                  </div>
                </div>

                <ul className="space-y-3 mb-8">
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-300">Tudo do plano Cosmos +</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-zinc-300">Armazenamento customizado</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm font-semibold">
                    <CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-white">Treinamento personalizado</span>
                  </li>
                </ul>

                <Link href="#contact" className="w-full px-4 py-2.5 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity block text-center text-sm">
                  Falar com Vendas
                </Link>
              </div>
            </div>

            {/* Nota sobre desconto */}
            <div className="text-center mt-8">
              <p className="text-sm text-zinc-500 dark:text-zinc-400 flex items-center justify-center gap-2">
                <InformationCircleIcon className="w-4 h-4" />
                Todos os planos com <span className="font-semibold text-emerald-600 dark:text-emerald-400">20% OFF</span> no pagamento anual
                {isAnnual && <span className="ml-1">(equivalente a 2,4 meses grátis)</span>}
              </p>
            </div>

            {/* Add-ons Section */}
            <div className="mt-16 pt-16 border-t border-zinc-200 dark:border-zinc-800">
              <div className="text-center mb-10">
                <h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-3 transition-colors">
                  Expanda sem limites
                </h3>
                <p className="text-lg text-zinc-600 dark:text-zinc-400 transition-colors">
                  Add-ons disponíveis para todos os planos
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
                <div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
                  <div className="flex items-center gap-3 mb-3">
                    <div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
                      <UserGroupIcon className="w-5 h-5 text-white" />
                    </div>
                    <h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Usuários Extras</h4>
                  </div>
                  <p className="text-2xl font-bold text-zinc-900 dark:text-white mb-2 transition-colors">R$ 9,90<span className="text-sm font-normal text-zinc-500">/usuário/mês</span></p>
                  <p className="text-sm text-zinc-600 dark:text-zinc-400 transition-colors">Adicione quantos usuários precisar, sem limite máximo</p>
                </div>

                <div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
                  <div className="flex items-center gap-3 mb-3">
                    <div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
                      <ServerIcon className="w-5 h-5 text-white" />
                    </div>
                    <h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Storage Extra</h4>
                  </div>
                  <p className="text-2xl font-bold text-zinc-900 dark:text-white mb-2 transition-colors">R$ 10,00<span className="text-sm font-normal text-zinc-500">/5GB/mês</span></p>
                  <p className="text-sm text-zinc-600 dark:text-zinc-400 transition-colors">Expanda seu armazenamento conforme sua necessidade</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <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">
              <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
                Pronto para <span className="gradient-text">começar?</span>
              </h2>
              <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 max-w-3xl mx-auto transition-colors">
                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="http://dash.localhost/cadastro" className="inline-flex items-center px-6 py-3 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
                  <RocketLaunchIcon className="w-5 h-5 mr-2" />
                  Começar Grátis Agora
                </Link>
                <Link href="#contact" className="inline-flex items-center px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all">
                  <PhoneIcon className="w-5 h-5 mr-2" />
                  Falar com Especialista
                </Link>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer id="contact" className="bg-zinc-900 dark:bg-black text-white py-16 transition-colors scroll-mt-32">
        <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-brand 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 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
                  <LinkedInIcon />
                </a>
                <a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
                  <TwitterIcon />
                </a>
                <a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
                  <InstagramIcon />
                </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:text-brand-gradient transition-all">Recursos</a></li>
                <li><a href="#pricing" className="text-zinc-400 hover:text-brand-gradient transition-all">Preços</a></li>
                <li><a href="#" className="text-zinc-400 hover:text-brand-gradient transition-all">API</a></li>
                <li><a href="#" className="text-zinc-400 hover:text-brand-gradient 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:text-brand-gradient transition-all">Central de Ajuda</a></li>
                <li><a href="#" className="text-zinc-400 hover:text-brand-gradient transition-all">Documentação</a></li>
                <li><a href="mailto:suporte@aggios.app" className="text-zinc-400 hover:text-brand-gradient transition-all">suporte@aggios.app</a></li>
                <li><a href="tel:+5511999999999" className="text-zinc-400 hover:text-brand-gradient transition-all">(11) 99999-9999</a></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-zinc-800 dark:border-zinc-700 mt-12 pt-8 flex flex-col md:flex-row items-center justify-between transition-colors">
            <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:text-brand-gradient transition-all text-sm">Privacidade</a>
              <a href="#" className="text-zinc-400 hover:text-brand-gradient transition-all text-sm">Termos</a>
              <a href="#" className="text-zinc-400 hover:text-brand-gradient transition-all text-sm">Cookies</a>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}
