export default function CTASection() {
    return (
        <section
            id="contato"
            aria-labelledby="cta-heading"
            className="bg-surface-elevated border-t border-white/5 py-20 px-6"
        >
            <div className="max-w-[1200px] mx-auto text-center">
                <h2
                    id="cta-heading"
                    className="text-2xl md:text-3xl font-medium text-textPrimary tracking-h2 mb-4"
                    style={{ fontFeatureSettings: '"cv01", "ss03"' }}
                >
                    Pronto para encontrar seu imóvel?
                </h2>

                <p className="text-base text-textSecondary leading-relaxed mb-8 max-w-[480px] mx-auto">
                    Nossa equipe está disponível para te ajudar a encontrar a melhor
                    opção. Entre em contato agora mesmo.
                </p>

                <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a
                        href="tel:+5511999999999"
                        className="
              inline-flex items-center justify-center gap-2
              px-6 py-3
              bg-brand-indigo hover:bg-accent-hover
              text-white font-semibold text-sm
              rounded transition-colors duration-200
              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-violet focus-visible:ring-offset-2 focus-visible:ring-offset-surface-elevated
            "
                        aria-label="Ligar para (11) 99999-9999"
                    >
                        <svg
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            aria-hidden="true"
                        >
                            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12.5 19.79 19.79 0 0 1 1.61 3.87 2 2 0 0 1 3.58 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
                        </svg>
                        (11) 99999-9999
                    </a>

                    <a
                        href="mailto:contato@imobiliariahub.com.br"
                        className="
              inline-flex items-center justify-center gap-2
              px-6 py-3
              bg-white/5 hover:bg-white/[0.08]
              text-textSecondary hover:text-textPrimary
              font-semibold text-sm
              rounded border border-white/10
              transition-colors duration-200
              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-violet focus-visible:ring-offset-2 focus-visible:ring-offset-surface-elevated
            "
                        aria-label="Enviar e-mail para contato@imobiliariahub.com.br"
                    >
                        <svg
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            aria-hidden="true"
                        >
                            <rect width="20" height="16" x="2" y="4" rx="2" />
                            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                        </svg>
                        Enviar e-mail
                    </a>
                </div>
            </div>
        </section>
    )
}