<!DOCTYPE html>
<html lang="pt-BR" class="scroll-smooth">

<head>

    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XZ0CPPBRBW"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-XZ0CPPBRBW');
    </script>
    <meta name="google-adsense-account" content="ca-pub-1796024233810539">

    <!-- Google Tag Manager -->
    <script>(function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-KC7LPCGF');</script>

    <!-- Meta Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0a0a0a">

    <!-- SEO Meta Tags -->
    <title>Consultoria de TI em Sumaré SP | JMBETTA - Cloud, Sites e IA</title>
    <meta name="description"
        content="JMBETTA: consultoria de TI em Sumaré SP com +12 anos de experiência. Criação de sites, Google Meu Negócio, Cloud, DevOps e Agentes de IA.">
    <meta name="keywords"
        content="consultoria de TI Sumaré, consultoria de TI São Paulo, criação de sites Sumaré, Google Meu Negócio, infraestrutura cloud, DevOps, Kubernetes, segurança digital, Business Intelligence, Looker Studio, Agentes IA, otimização SEO, desenvolvimento web, Barueri">
    <meta name="author" content="JMBETTA">
    <meta name="robots" content="index, follow, max-snippet:150, max-image-preview:large">
    <meta name="googlebot" content="index, follow, max-snippet:150, max-image-preview:large">

    <!-- Geo Tags para SEO Local -->
    <meta name="geo.region" content="BR-SP">
    <meta name="geo.placename" content="Sumaré, São Paulo">
    <meta name="geo.position" content="-22.8187;-47.2662">
    <meta name="ICBM" content="-22.8187, -47.2662">

    <!-- Link para llms.txt (Navegação Agêntica) -->
    <link rel="llms" href="/.well-known/llms.txt">
    <link rel="llms" href="/llms.txt">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://jmbetta.shop/">
    <link rel="alternate" hreflang="pt-BR" href="https://jmbetta.shop/">

    <!-- Favicon Modernizado com SVG -->
    <link rel="icon" type="image/svg+xml" href="assets/jmbetta-logo.svg">
    <link rel="icon" type="image/webp" sizes="32x32" href="assets/favicon-32x32.webp">
    <link rel="icon" type="image/webp" sizes="16x16" href="assets/favicon-16x16.webp">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.webp">

    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Consultoria de TI em Sumaré SP | JMBETTA - Cloud, Sites e IA">
    <meta property="og:description"
        content="Especialistas em criação de sites, Google Meu Negócio, Cloud, DevOps, segurança digital e IA. +12 anos de experiência em Sumaré, São Paulo. Orçamento gratuito!">
    <meta property="og:image" content="https://jmbetta.shop/assets/og-image.webp">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="JMBETTA Consultoria de TI - Criação de Sites, Cloud e IA em Sumaré SP">
    <meta property="og:url" content="https://jmbetta.shop/">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="JMBETTA Consultoria em TI">
    <meta property="og:locale" content="pt_BR">
    <meta property="og:updated_time" content="2026-06-17T00:00:00-03:00">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Consultoria de TI em Sumaré SP | JMBETTA - Cloud, Sites e IA">
    <meta name="twitter:description"
        content="Criação de sites, Google Meu Negócio, Cloud, DevOps, segurança e IA em Sumaré SP. +12 anos de experiência, +50 projetos entregues. Orçamento gratuito!">
    <meta name="twitter:image" content="https://jmbetta.shop/assets/og-image.webp">
    <meta name="twitter:creator" content="@alexandred.alves">
    <meta name="twitter:site" content="@alexandred.alves">

    <!-- Preload critical resources -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"
        as="style" crossorigin="anonymous">
    <link rel="preload" href="assets/jmbetta-logo.webp" as="image" type="image/webp">

    <!-- Tailwind CSS (CDN - recomendado substituir por build estático em produção) -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">

    <!-- Custom Styles -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0a0a0a;
            color: #e5e5e5;
            overflow-x: hidden;
        }

        /* Performance optimizations */
        .performance-img {
            content-visibility: auto;
            contain-intrinsic-size: 400px 300px;
        }

        /* Gradient Text */
        .gradient-text {
            background: linear-gradient(90deg, #38bdf8, #6366f1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }

        /* Section Glow Effect */
        .section-glow {
            position: relative;
            overflow: hidden;
        }

        .section-glow::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(56, 189, 248, 0.15), transparent 40%);
            animation: rotateGlow 20s linear infinite;
            z-index: 0;
        }

        @keyframes rotateGlow {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* Card Hover Effects */
        .card-border-glow {
            position: relative;
            border: 1px solid #27272a;
            transition: all 0.4s ease;
            overflow: hidden;
            will-change: transform, box-shadow;
        }

        .card-border-glow:hover {
            border-color: #38bdf8;
            transform: translateY(-5px);
            box-shadow: 0 0 35px rgba(56, 189, 248, 0.2);
        }

        .card-border-glow .card-icon {
            transition: transform 0.4s ease;
        }

        .card-border-glow:hover .card-icon {
            transform: translateY(-4px) scale(1.1);
        }

        /* WhatsApp Floating Button */
        .whatsapp-fab {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background-color: #25D366;
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
            z-index: 1000;
        }

        .whatsapp-fab:hover {
            transform: scale(1.1);
        }

        /* Scroll Reveal Animation */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Modern Button with Gradient */
        .modern-btn {
            background-size: 200% auto;
            background-image: linear-gradient(to right, #38bdf8 0%, #6366f1 51%, #38bdf8 100%);
            transition: background-position 0.5s;
            font-weight: 600;
        }

        .modern-btn:hover {
            background-position: right center;
        }

        /* Custom Icons */
        .betta-icon {
            color: #38bdf8;
            margin-right: 10px;
        }

        /* Value Cards */
        .value-card {
            background: linear-gradient(145deg, #1e1e22, #2a2a2f);
            border-left: 4px solid #38bdf8;
        }

        /* Contact Icons */
        .contact-icon {
            color: #38bdf8;
            min-width: 24px;
        }

        /* Loading optimization */
        .lazy-load {
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }

        .lazy-load.loaded {
            opacity: 1;
        }

        /* Skip to main content for accessibility */
        .skip-to-content {
            position: absolute;
            top: -40px;
            left: 0;
            background: #38bdf8;
            color: white;
            padding: 8px;
            z-index: 9999;
            text-decoration: none;
        }

        .skip-to-content:focus {
            top: 0;
        }

        /* Banner Responsivo Customizado */
        .banner-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 1rem;
        }

        .banner-image {
            width: 100%;
            height: auto;
            aspect-ratio: 2 / 1;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(99, 102, 241, 0.1));
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            padding: 1.5rem;
        }

        .banner-container:hover .banner-overlay {
            opacity: 1;
        }

        .banner-container:hover .banner-image {
            transform: scale(1.03);
        }

        .banner-text {
            background: rgba(10, 10, 10, 0.85);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(56, 189, 248, 0.3);
            text-align: center;
            max-width: 500px;
        }

        /* Tooltip para agentes WebMCP */
        [data-tool] {
            position: relative;
        }

        [data-tool]:hover::after {
            content: attr(data-tool-description);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #1a1a1e;
            color: #e5e5e5;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            border: 1px solid #38bdf8;
            z-index: 10;
        }

        @media (max-width: 768px) {
            .banner-image {
                aspect-ratio: 3 / 2;
            }

            .banner-text {
                padding: 1.5rem;
                margin: 1rem;
            }

            .banner-overlay {
                opacity: 1;
                background: rgba(10, 10, 10, 0.7);
            }
        }

        @media (max-width: 480px) {
            .banner-image {
                aspect-ratio: 1 / 1;
            }

            .banner-text {
                padding: 1rem;
            }
        }
    </style>

    <!-- Structured Data (Schema.org) -->
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "ProfessionalService",
            "@id": "https://jmbetta.shop/#organization",
            "name": "JMBETTA",
            "alternateName": "JMBETTA Consultoria em TI",
            "description": "Consultoria especializada em TI, criação de sites, otimização Google Meu Negócio, infraestrutura Cloud, DevOps, segurança digital e IA personalizada em Sumaré, São Paulo.",
            "url": "https://jmbetta.shop/",
            "logo": "https://jmbetta.shop/assets/jmbetta-logo.webp",
            "image": "https://jmbetta.shop/assets/og-image.webp",
            "telephone": "+55-11-98177-7392",
            "email": "contato@jmbetta.shop",
            "priceRange": "$$",
            "address": {
                "@type": "PostalAddress",
                "streetAddress": "Al. Rio Negro, 503 - Sala 2011",
                "addressLocality": "Barueri",
                "addressRegion": "SP",
                "postalCode": "06454-000",
                "addressCountry": "BR"
            },
            "geo": {
                "@type": "GeoCoordinates",
                "latitude": "-23.5178",
                "longitude": "-46.8746"
            },
            "openingHoursSpecification": [{
                "@type": "OpeningHoursSpecification",
                "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
                "opens": "09:00",
                "closes": "18:00"
            }, {
                "@type": "OpeningHoursSpecification",
                "dayOfWeek": "Saturday",
                "opens": "09:00",
                "closes": "12:00"
            }],
            "sameAs": [
                "https://www.instagram.com/alexandred.alves"
            ],
            "areaServed": [{
                "@type": "GeoCircle",
                "geoMidpoint": {
                    "@type": "GeoCoordinates",
                    "latitude": "-22.8187",
                    "longitude": "-47.2662"
                },
                "geoRadius": "50000"
            }, {
                "@type": "GeoCircle",
                "geoMidpoint": {
                    "@type": "GeoCoordinates",
                    "latitude": "-23.5178",
                    "longitude": "-46.8746"
                },
                "geoRadius": "80000"
            }],
            "knowsAbout": [
                "Consultoria de TI",
                "Criação de Sites",
                "Google Meu Negócio",
                "Infraestrutura Cloud",
                "DevOps",
                "Kubernetes",
                "Segurança Digital",
                "Business Intelligence",
                "Inteligência Artificial",
                "Desenvolvimento Web",
                "Suporte Técnico",
                "Governança Financeira"
            ],
            "makesOffer": [{
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "Criação de Sites",
                    "description": "Desenvolvimento de sites responsivos e otimizados para SEO"
                }
            }, {
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "Google Meu Negócio",
                    "description": "Otimização e gerenciamento do Google Meu Negócio para visibilidade local"
                }
            }, {
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "Infraestrutura Cloud",
                    "description": "Consultoria e implementação de soluções em nuvem"
                }
            }, {
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "DevOps",
                    "description": "Implementação de práticas DevOps com Kubernetes e Docker"
                }
            }, {
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "Segurança Digital",
                    "description": "Proteção de ativos digitais e auditorias de segurança"
                }
            }, {
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "Business Intelligence",
                    "description": "Dashboards e análises de dados com Looker Studio"
                }
            }, {
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "Agentes de IA Personalizados",
                    "description": "Assistentes de IA privados treinados com os dados da sua empresa"
                }
            }, {
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "Suporte de TI para Empresas",
                    "description": "Planos de suporte técnico especializado para empresas"
                }
            }]
        }
    </script>

    <!-- FAQ Schema -->
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": [{
                "@type": "Question",
                "name": "Quanto tempo leva para criar um site profissional?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Desenvolvemos sites profissionais em 7-15 dias, dependendo da complexidade. Incluímos domínio, hospedagem SSL e otimização SEO."
                }
            }, {
                "@type": "Question",
                "name": "Vocês atendem apenas em Sumaré, São Paulo?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Nossa sede está localizada em Barueri - SP, na região de Alphaville, mas atendemos clientes em todo o Brasil, com foco especial em Sumaré e região metropolitana de São Paulo, através de consultoria remota para serviços de TI, Cloud e DevOps."
                }
            }, {
                "@type": "Question",
                "name": "O que está incluído na criação de sites?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Incluímos: domínio .com.br, hospedagem SSL, design responsivo, otimização SEO, integração com Google Meu Negócio, formulário de contato e suporte técnico."
                }
            }, {
                "@type": "Question",
                "name": "O que é um Agente de IA personalizado?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "É um assistente de inteligência artificial privado, treinado com os dados e documentos da sua empresa. Funciona como um ChatGPT exclusivo para o seu negócio, respondendo perguntas de clientes e equipe com precisão."
                }
            }, {
                "@type": "Question",
                "name": "Vocês oferecem suporte de TI para pequenas empresas?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Sim, oferecemos planos de suporte de TI para empresas de todos os tamanhos, desde pequenos negócios até grupos empresariais. Acesse nossa página de suporte para conhecer os planos disponíveis."
                }
            }]
        }
    </script>

    <!-- BreadcrumbList Schema -->
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [{
                "@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": "https://jmbetta.shop/"
            }, {
                "@type": "ListItem",
                "position": 2,
                "name": "Serviços de TI",
                "item": "https://jmbetta.shop/#servicos"
            }, {
                "@type": "ListItem",
                "position": 3,
                "name": "Criação de Sites",
                "item": "https://jmbetta.shop/#criacao-sites"
            }, {
                "@type": "ListItem",
                "position": 4,
                "name": "Contato",
                "item": "https://jmbetta.shop/#contato"
            }]
        }
    </script>

    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KC7LPCGF" height="0" width="0"
            style="display:none;visibility:hidden"></iframe>
    </noscript>
</head>

<body class="antialiased">
    <!-- Skip to main content (Accessibility) -->
    <a href="#main-content" class="skip-to-content">Pular para o conteúdo principal</a>

    <header role="banner" class="bg-black/50 backdrop-blur-lg fixed top-0 left-0 right-0 z-50 border-b border-zinc-800">
        <div class="container mx-auto px-6 py-3 flex justify-between items-center">
            <!-- Logo -->
            <a href="/" aria-label="JMBETTA - Página inicial" role="link">
                <img src="assets/jmbetta-logo.webp" alt="JMBETTA Logo - Consultoria de TI e Desenvolvimento"
                    class="h-12 w-auto performance-img" width="200" height="50" loading="eager" + fetchpriority="high"
                    srcset="assets/jmbetta-logo.webp 1x, assets/jmbetta-logo@2x.webp 2x"
                    sizes="(max-width: 768px) 150px, 200px"
                    onerror="this.onerror=null; this.src='assets/jmbetta-logo.webp';">
            </a>

            <!-- Desktop Navigation -->
            <nav class="hidden md:flex space-x-8 items-center text-sm" aria-label="Navegação principal" role="navigation">
                <a href="https://blog.jmbetta.shop" class="text-zinc-300 hover:text-white transition-colors hover:underline underline-offset-4"
                    aria-label="Ir para a seção de Serviços">Blog</a>
                <a href="#servicos" class="text-zinc-300 hover:text-white transition-colors hover:underline underline-offset-4"
                    aria-label="Ir para a seção de Serviços">Serviços</a>
                <a href="#produtos" class="text-zinc-300 hover:text-white transition-colors hover:underline underline-offset-4"
                    aria-label="Ir para a seção de Produtos">Produtos</a>
                <a href="#quemsomos" class="text-zinc-300 hover:text-white transition-colors hover:underline underline-offset-4"
                    aria-label="Ir para a seção Quem Somos">Quem Somos</a>
                <a href="#criacao-sites" class="text-zinc-300 hover:text-white transition-colors hover:underline underline-offset-4"
                    aria-label="Ir para a seção de Criação de Sites">Criação de Sites</a>
                <a href="looker.html" class="text-zinc-300 hover:text-white transition-colors hover:underline underline-offset-4"
                    aria-label="Ir para a página Looker Studio">Looker Studio</a>
                <a href="agentes-ia.html" class="text-zinc-300 hover:text-white transition-colors hover:underline underline-offset-4"
                    aria-label="Ir para a página Agentes IA">Agentes IA</a>
                <a href="ofertas-telefonia.html" class="text-zinc-300 hover:text-white transition-colors hover:underline underline-offset-4"
                    aria-label="Ir para a página Telefonia IA">Telefonia IA</a>
                <a href="#contato" class="modern-btn text-white font-semibold px-5 py-2 rounded-lg hover:scale-105 transition-transform"
                    aria-label="Ir para a seção de Contato">Contato</a>
            </nav>

            <!-- Mobile Menu Button -->
            <button id="mobile-menu-button" class="md:hidden text-white p-2 rounded-lg hover:bg-zinc-800 transition-colors"
                aria-label="Abrir menu de navegação" aria-expanded="false" aria-controls="mobile-menu" role="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <line x1="3" y1="12" x2="21" y2="12"></line>
                    <line x1="3" y1="6" x2="21" y2="6"></line>
                    <line x1="3" y1="18" x2="21" y2="18"></line>
                </svg>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden bg-zinc-900/95 backdrop-blur-sm" role="menu"
            aria-labelledby="mobile-menu-button">
            <a href="https://blog.jmbetta.shop" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Blog</a>
            <a href="#servicos" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Serviços</a>
            <a href="#produtos" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Produtos</a>
            <a href="#quemsomos" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Quem Somos</a>
            <a href="#criacao-sites" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Criação de Sites</a>
            <a href="looker.html" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Looker Studio</a>
            <a href="ofertas-telefonia.html" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Telefonia IA</a>
            <a href="agentes-ia.html" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Agentes IA</a>
            <a href="#contato" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Contato</a>
            <a href="https://blog.jmbetta.shop" class="block py-3 px-6 text-zinc-300 hover:bg-zinc-800 transition-colors" role="menuitem">Blog</a>
        </div>
    </header>

    <main id="main-content" role="main">
        <!-- Hero Section -->
        <section class="min-h-screen flex items-center justify-center text-center pt-20 section-glow"
            aria-labelledby="hero-title">
            <div class="container mx-auto px-6 relative z-10">
                <h1 id="hero-title" class="text-4xl md:text-6xl lg:text-7xl font-black tracking-tighter mb-4 leading-tight reveal">
                    Tecnologia com Força, <br class="hidden md:block" /> Beleza e <span class="gradient-text">Estratégia</span>.
                </h1>
                <p class="text-lg md:text-xl text-zinc-400 max-w-3xl mx-auto mb-8 reveal" style="transition-delay: 200ms;">
                    Da criação de sites ao Google Meu Negócio, da segurança digital à inteligência artificial em Sumaré,
                    São Paulo. Transformamos sua presença online em resultados concretos.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="#servicos" class="modern-btn text-white font-bold py-3 px-8 rounded-lg text-lg transition-transform hover:scale-105 inline-block reveal"
                        style="transition-delay: 400ms;" aria-label="Conheça nossas soluções de TI">
                        Conheça Nossas Soluções
                    </a>
                    <a href="#criacao-sites" class="bg-zinc-800 text-white font-bold py-3 px-8 rounded-lg text-lg transition-transform hover:scale-105 hover:bg-zinc-700 inline-block reveal"
                        style="transition-delay: 500ms;" aria-label="Solicitar criação de site">
                        Criar Meu Site
                    </a>
                </div>
            </div>
        </section>

        <!-- Serviços Section -->
        <section id="servicos" class="py-20" aria-labelledby="servicos-title">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12 reveal">
                    <h2 id="servicos-title" class="text-3xl md:text-4xl font-bold mb-2">Nossos Serviços de TI</h2>
                    <p class="text-zinc-400">Soluções completas para sua transformação digital em Sumaré, São Paulo.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- Criação de Sites -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal" role="article">
                        <div class="mb-4 card-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M21 2H3a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z">
                                </path>
                                <path d="M7 16l5-5 5 5"></path>
                                <path d="M12 11v9"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Criação de Sites Profissionais</h3>
                        <p class="text-zinc-400 flex-grow">Desenvolvimento de sites responsivos, otimizados para SEO e
                            conversão. Do design à hospedagem.</p>
                        <a href="criacao-de-sites.html" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Saiba mais sobre criação de sites">Saiba mais &rarr;</a>
                    </article>

                    <!-- Google Meu Negócio -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal"
                        style="transition-delay: 100ms;" role="article">
                        <div class="mb-4 card-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z">
                                </path>
                                <line x1="7" y1="7" x2="7.01" y2="7"></line>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Google Meu Negócio</h3>
                        <p class="text-zinc-400 flex-grow">Otimização completa do perfil, gerenciamento de avaliações e
                            aumento da visibilidade local.</p>
                        <a href="google-meu-negocio.html" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Otimizar Google Meu Negócio agora">Otimizar Agora &rarr;</a>
                    </article>

                    <!-- GoTo Connect - Telefonia IA -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal"
                        style="transition-delay: 700ms;" role="article">
                        <div class="mb-4 card-icon flex items-center gap-3" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 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">
                                </path>
                            </svg>
                            <div class="flex items-center gap-2">
                                <img src="/assets/goto-partner-logo.webp"
                                    alt="GoTo Connect - Parceiro Oficial" width="80" height="20" class="h-5 w-auto brightness-0 invert opacity-80"
                                    loading="lazy">
                                <span class="text-xs text-cyan-400 font-semibold">Parceiro Oficial</span>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Telefonia IA + GoTo Connect</h3>
                        <p class="text-zinc-400 flex-grow">Plataforma omnicanal com IA para telefonia cloud, WhatsApp,
                            redes sociais e análise de sentimentos. Atendimento unificado.</p>
                        <a href="ofertas-telefonia.html" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Conhecer solução de telefonia IA">Conhecer Solução &rarr;</a>
                    </article>

                    <!-- Gestão de E-mails -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal"
                        style="transition-delay: 200ms;" role="article">
                        <div class="mb-4 card-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
                                </path>
                                <polyline points="22,6 12,13 2,6"></polyline>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Gestão de E-mails e DNS</h3>
                        <p class="text-zinc-400 flex-grow">Garanta uma comunicação profissional e segura com Google
                            Workspace e DNS blindado.</p>
                        <a href="#contato" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Solicitar gestão de e-mails">Solicitar &rarr;</a>
                    </article>

                    <!-- Segurança Digital -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal"
                        style="transition-delay: 300ms;" role="article">
                        <div class="mb-4 card-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Segurança Digital</h3>
                        <p class="text-zinc-400 flex-grow">Proteção de ativos digitais com firewalls, SSL e auditorias
                            de vulnerabilidade.</p>
                        <a href="#contato" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Solicitar segurança digital">Solicitar &rarr;</a>
                    </article>

                    <!-- Cloud & DevOps -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal"
                        style="transition-delay: 400ms;" role="article">
                        <div class="mb-4 card-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
                                <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
                                <line x1="6" y1="6" x2="6.01" y2="6"></line>
                                <line x1="6" y1="18" x2="6.01" y2="18"></line>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Infraestrutura Cloud &amp; DevOps</h3>
                        <p class="text-zinc-400 flex-grow">Otimização de custos e entrega contínua com Docker,
                            Kubernetes e Rancher.</p>
                        <a href="#contato" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Solicitar infraestrutura cloud e DevOps">Solicitar &rarr;</a>
                    </article>

                    <!-- Business Intelligence -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal"
                        style="transition-delay: 500ms;" role="article">
                        <div class="mb-4 card-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M12 20V10M18 20V4M6 20V16"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Business Intelligence (BI)</h3>
                        <p class="text-zinc-400 flex-grow">Transforme números em decisões com dashboards em Looker
                            Studio.</p>
                        <a href="looker.html" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Ver dashboards Looker Studio">Ver Dashboards &rarr;</a>
                    </article>

                    <!-- Agentes de IA -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal"
                        style="transition-delay: 600ms;" role="article">
                        <div class="mb-4 card-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Agentes de IA Personalizados</h3>
                        <p class="text-zinc-400 flex-grow">Seu "ChatGPT" privado treinado com os dados da sua empresa.
                        </p>
                        <a href="agentes-ia.html" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Conhecer agentes de IA">Conhecer Agentes &rarr;</a>
                    </article>

                    <!-- Suporte -->
                    <article class="bg-zinc-900 p-8 rounded-xl card-border-glow flex flex-col reveal"
                        style="transition-delay: 600ms;" role="article">
                        <div class="mb-4 card-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                                fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M21 2H3a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z">
                                </path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Suporte para empresas</h3>
                        <p class="text-zinc-400 flex-grow">Tenha o serviço de suporte que a sua empresa precisa.</p>
                        <a href="suporte-ti.html" class="mt-4 text-sky-400 hover:text-sky-300 font-semibold inline-block self-start"
                            aria-label="Conhecer planos de suporte TI">Conhecer nossos planos &rarr;</a>
                    </article>
                </div>
            </div>
        </section>

        <!-- Criação de Sites Section -->
        <section id="criacao-sites" class="py-20 bg-zinc-900/50" aria-labelledby="criacao-sites-title">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12 reveal">
                    <h2 id="criacao-sites-title" class="text-3xl md:text-4xl font-bold mb-2">Criação de Sites
                        Profissionais</h2>
                    <p class="text-zinc-400">Sua presença digital começa com um site de impacto em Sumaré, São Paulo</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="reveal">
                        <div class="bg-zinc-900 p-8 rounded-xl card-border-glow">
                            <h3 class="text-2xl font-bold mb-6">Por que ter um site profissional?</h3>
                            <ul class="space-y-4" role="list">
                                <li class="flex items-start">
                                    <svg class="w-6 h-6 text-sky-400 mr-3 mt-1 flex-shrink-0" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    <span class="text-zinc-300"><strong>Credibilidade:</strong> Segundo uma pesquisa da Universidade Stanford, 75% dos consumidores
                                        julgam a credibilidade de uma empresa baseada no design do seu site</span>
                                </li>
                                <li class="flex items-start">
                                    <svg class="w-6 h-6 text-sky-400 mr-3 mt-1 flex-shrink-0" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    <span class="text-zinc-300"><strong>Visibilidade:</strong> Apareça nas primeiras
                                        posições do Google com SEO otimizado</span>
                                </li>
                                <li class="flex items-start">
                                    <svg class="w-6 h-6 text-sky-400 mr-3 mt-1 flex-shrink-0" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    <span class="text-zinc-300"><strong>Conversão:</strong> Sites otimizados convertem
                                        até 40% mais visitantes em clientes</span>
                                </li>
                                <li class="flex items-start">
                                    <svg class="w-6 h-6 text-sky-400 mr-3 mt-1 flex-shrink-0" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    <span class="text-zinc-300"><strong>Responsivo:</strong> Seu site perfeito em
                                        celulares, tablets e desktops</span>
                                </li>
                            </ul>

                            <div class="mt-8 p-6 bg-gradient-to-r from-sky-900/20 to-blue-900/20 rounded-lg border border-sky-800/30">
                                <h4 class="text-xl font-bold mb-3 text-white">Incluímos:</h4>
                                <div class="grid grid-cols-2 gap-3">
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-sky-400 mr-2" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7"></path>
                                        </svg>
                                        <span class="text-sm text-zinc-300">Domínio .com.br entre outros</span>
                                    </div>
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-sky-400 mr-2" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7"></path>
                                        </svg>
                                        <span class="text-sm text-zinc-300">Hospedagem SSL</span>
                                    </div>
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-sky-400 mr-2" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7"></path>
                                        </svg>
                                        <span class="text-sm text-zinc-300">Otimização SEO</span>
                                    </div>
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-sky-400 mr-2" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7"></path>
                                        </svg>
                                        <span class="text-sm text-zinc-300">Google Meu Negócio</span>
                                    </div>
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-sky-400 mr-2" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7"></path>
                                        </svg>
                                        <span class="text-sm text-zinc-300">Design Responsivo</span>
                                    </div>
                                    <div class="flex items-center">
                                        <svg class="w-5 h-5 text-sky-400 mr-2" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7"></path>
                                        </svg>
                                        <span class="text-sm text-zinc-300">Formulário de Contato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="reveal" style="transition-delay: 200ms;">
                        <div class="bg-gradient-to-br from-zinc-900 to-black p-8 rounded-xl border border-zinc-800">
                            <h3 class="text-2xl font-bold mb-6">Solicite um Orçamento</h3>
                            <!-- Formulário com atributos WebMCP para Navegação Agêntica -->
                            <form id="site-quote-form" action="https://formspree.io/f/xanbrpky" method="POST"
                                data-tool="quote-request" data-tool-description="Solicita um orçamento para criação de site profissional">
                                <input type="hidden" name="_subject" value="Novo Pedido de Site - JMBETTA">
                                <input type="hidden" name="_template" value="table">

                                <div class="space-y-4">
                                    <div>
                                        <label for="name" class="block text-sm font-medium text-zinc-400 mb-1">Nome
                                            Completo <span aria-hidden="true">*</span></label>
                                        <input type="text" id="name" name="name" required
                                            class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-sky-500"
                                            aria-required="true" placeholder="Seu nome completo">
                                    </div>

                                    <div>
                                        <label for="email" class="block text-sm font-medium text-zinc-400 mb-1">E-mail
                                            <span aria-hidden="true">*</span></label>
                                        <input type="email" id="email" name="email" required
                                            class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-sky-500"
                                            aria-required="true" placeholder="seu@email.com">
                                    </div>

                                    <div>
                                        <label for="phone" class="block text-sm font-medium text-zinc-400 mb-1">WhatsApp
                                            <span aria-hidden="true">*</span></label>
                                        <input type="tel" id="phone" name="phone" required
                                            class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-sky-500"
                                            aria-required="true" placeholder="(11) 99999-9999">
                                    </div>

                                    <div>
                                        <label for="site-type" class="block text-sm font-medium text-zinc-400 mb-1">Tipo
                                            de Site</label>
                                        <select id="site-type" name="site-type"
                                            class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-sky-500">
                                            <option value="">Selecione uma opção</option>
                                            <option value="landing-page">Landing Page (1 página)</option>
                                            <option value="site-institucional">Site Institucional (até 5 páginas)</option>
                                            <option value="site-completo">Site Completo (mais de 5 páginas)</option>
                                            <option value="ecommerce">Loja Virtual (E-commerce)</option>
                                            <option value="outro">Outro</option>
                                        </select>
                                    </div>

                                    <div>
                                        <label for="message" class="block text-sm font-medium text-zinc-400 mb-1">Detalhes do
                                            Projeto</label>
                                        <textarea id="message" name="message" rows="4"
                                            class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-sky-500"
                                            placeholder="Conte-nos sobre seu negócio e necessidades..."></textarea>
                                    </div>

                                    <button type="submit"
                                        class="w-full modern-btn text-white font-bold py-3 px-6 rounded-lg hover:scale-105 transition-transform mt-4"
                                        aria-label="Solicitar orçamento gratuito para site">
                                        Solicitar Orçamento Gratuito
                                    </button>
                                </div>
                            </form>
                            <div id="quote-status" class="hidden mt-4 text-center p-4 rounded-lg" role="status"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Produtos Eletrônicos Section -->
        <section id="produtos" class="py-20 bg-zinc-900/50" aria-labelledby="produtos-title">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12 reveal">
                    <h2 id="produtos-title" class="text-3xl md:text-4xl font-bold mb-2">Produtos Eletrônicos</h2>
                    <p class="text-zinc-400">Tecnologia de ponta ao seu alcance</p>
                </div>
                <div class="max-w-4xl mx-auto reveal">
                    <a href="https://loja.jmbetta.shop/" target="_blank" rel="noopener noreferrer"
                        class="block rounded-xl overflow-hidden card-border-glow banner-container group"
                        aria-label="Visitar a loja de eletrônicos JMBETTA">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Crect width='800' height='400' fill='%2318181b'/%3E%3C/svg%3E"
                            data-src="assets/loja-banner.webp"
                            alt="Visite Nossa Loja de Eletrônicos JMBETTA - Smartphones, Acessórios e Tecnologia"
                            class="banner-image performance-img lazy-load" width="800" height="400" loading="lazy"
                            onerror="this.onerror=null; this.src='https://placehold.co/800x400/18181b/e5e5e5?text=Visite+Nossa+Loja+de+Eletrônicos+JMBETTA&font=Inter';">

                        <div class="banner-overlay">
                            <div class="banner-text">
                                <h3 class="text-2xl font-bold text-white mb-2">Loja de Eletrônicos JMBETTA</h3>
                                <p class="text-zinc-300 mb-4">Smartphones, acessórios, gadgets e tecnologia com os
                                    melhores preços</p>
                                <div class="flex items-center justify-center space-x-4">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-sky-500/20 text-sky-300">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                                        </svg>
                                        Nossa Loja
                                    </span>
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-500/20 text-green-300">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                                            </path>
                                        </svg>
                                        Parcelamento
                                    </span>
                                </div>
                                <span class="mt-4 modern-btn text-white font-bold py-2 px-6 rounded-lg hover:scale-105 transition-transform inline-flex items-center">
                                    Visitar Loja
                                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <!-- Quem Somos Section -->
        <section id="quemsomos" class="py-20 section-glow" aria-labelledby="quemsomos-title">
            <div class="container mx-auto px-6 relative z-10">
                <div class="text-center mb-16 reveal">
                    <h2 id="quemsomos-title" class="text-4xl md:text-5xl font-bold mb-4">Quem Somos</h2>
                    <div class="inline-block p-4 bg-zinc-900/50 rounded-xl border border-zinc-800 mb-6">
                        <p class="text-2xl font-bold gradient-text">JMBETTA → Join Minds, Build Excellence Through
                            Technology &amp; Ambition.</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
                    <div class="space-y-8 reveal">
                        <article class="bg-zinc-900 p-8 rounded-xl card-border-glow" role="article">
                            <div class="flex items-start mb-6">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"
                                    fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="betta-icon" aria-hidden="true">
                                    <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path>
                                </svg>
                                <h3 class="text-2xl font-bold text-white">Nossa Filosofia</h3>
                            </div>
                            <p class="text-zinc-300 mb-4 text-lg">
                                Acreditamos na melhoria contínua, inovação e resultados. Nossa missão é
                                <span class="font-bold text-sky-400">"Just Make Better Technology &amp; Achievements"</span>
                                - Simplesmente fazer melhor: tecnologia e conquistas.
                            </p>
                            <div class="mt-6 p-4 bg-zinc-800/50 rounded-lg border-l-4 border-sky-500">
                                <p class="text-zinc-300">
                                    <span class="font-bold text-sky-400">Como o peixe Betta</span>, somos resistentes,
                                    estrategistas e únicos. Nos destacamos pela inteligência e inovação, nadando contra
                                    a maré para criar soluções que realmente fazem a diferença.
                                </p>
                            </div>
                        </article>

                        <div class="bg-gradient-to-br from-zinc-900 to-zinc-950 p-6 rounded-xl border border-zinc-800">
                            <h3 class="text-xl font-bold mb-4 text-white">Por que escolher a JMBETTA?</h3>
                            <ul class="space-y-3" role="list">
                                <li class="flex items-center"><span class="w-2 h-2 bg-sky-500 rounded-full mr-3" aria-hidden="true"></span>Expertise técnica combinada com visão estratégica</li>
                                <li class="flex items-center"><span class="w-2 h-2 bg-sky-500 rounded-full mr-3" aria-hidden="true"></span>Soluções personalizadas para cada cliente</li>
                                <li class="flex items-center"><span class="w-2 h-2 bg-sky-500 rounded-full mr-3" aria-hidden="true"></span>Compromisso com resultados mensuráveis</li>
                                <li class="flex items-center"><span class="w-2 h-2 bg-sky-500 rounded-full mr-3" aria-hidden="true"></span>Inovação constante desde 2016</li>
                                <li class="flex items-center"><span class="w-2 h-2 bg-sky-500 rounded-full mr-3" aria-hidden="true"></span>Criação de sites com SEO otimizado</li>
                                <li class="flex items-center"><span class="w-2 h-2 bg-sky-500 rounded-full mr-3" aria-hidden="true"></span>Gestão completa do Google Meu Negócio</li>
                            </ul>
                        </div>

                        <!-- Nossa Experiência -->
                        <div class="mt-8 reveal">
                            <div class="bg-gradient-to-r from-sky-900/20 to-blue-900/20 p-8 rounded-xl border border-sky-800/30">
                                <h4 class="text-2xl font-bold mb-6 text-white text-center">Nossa Experiência</h4>
                                <div class="grid grid-cols-2 gap-6">
                                    <div class="text-center p-6 bg-zinc-900/50 rounded-lg hover:bg-zinc-800/50 transition-all">
                                        <div class="text-4xl font-bold text-sky-400 mb-2" aria-label="12 anos de experiência">+15</div>
                                        <div class="text-lg text-white font-semibold">Anos de Experiência</div>
                                        <div class="text-sm text-zinc-400 mt-2">Atuando no mercado de tecnologia desde 2012 com mais de 15 anos de experiência atualizada em 2026</div>
                                    </div>
                                    <div class="text-center p-6 bg-zinc-900/50 rounded-lg hover:bg-zinc-800/50 transition-all">
                                        <div class="text-4xl font-bold text-sky-400 mb-2" aria-label="Mais de 50 projetos entregues">+50</div>
                                        <div class="text-lg text-white font-semibold">Projetos Entregues</div>
                                        <div class="text-sm text-zinc-400 mt-2">Para grupos empresariais de diversos segmentos</div>
                                    </div>
                                </div>
                                <div class="mt-6 pt-6 border-t border-zinc-800">
                                    <p class="text-zinc-300 text-center text-lg">
                                        <span class="font-bold text-sky-400">Experiência comprovada</span> em entregar
                                        soluções de TI para empresas que buscam transformação digital, eficiência operacional e
                                        crescimento sustentável.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="reveal" style="transition-delay: 200ms;">
                        <div class="bg-zinc-900 p-8 rounded-xl card-border-glow">
                            <h3 class="text-2xl font-bold mb-8 text-center text-white">Nossos Valores</h3>
                            <div class="space-y-6">
                                <!-- Valor J -->
                                <div class="value-card p-5 rounded-lg transition-all hover:bg-zinc-800/30">
                                    <div class="flex items-center mb-2">
                                        <span class="gradient-text font-black text-3xl w-10" aria-hidden="true">J</span>
                                        <h4 class="text-xl font-bold text-white ml-3">Justiça</h4>
                                    </div>
                                    <p class="text-zinc-400 ml-13">Ética e transparência em cada projeto, garantindo
                                        relações honestas e duradouras.</p>
                                </div>

                                <!-- Valor M -->
                                <div class="value-card p-5 rounded-lg transition-all hover:bg-zinc-800/30">
                                    <div class="flex items-center mb-2">
                                        <span class="gradient-text font-black text-3xl w-10" aria-hidden="true">M</span>
                                        <h4 class="text-xl font-bold text-white ml-3">Movimento</h4>
                                    </div>
                                    <p class="text-zinc-400 ml-13">Agilidade para acompanhar a evolução da tecnologia,
                                        sempre um passo à frente.</p>
                                </div>

                                <!-- Valor B -->
                                <div class="value-card p-5 rounded-lg transition-all hover:bg-zinc-800/30">
                                    <div class="flex items-center mb-2">
                                        <span class="gradient-text font-black text-3xl w-10" aria-hidden="true">B</span>
                                        <h4 class="text-xl font-bold text-white ml-3">Bravura</h4>
                                    </div>
                                    <p class="text-zinc-400 ml-13">Ousadia para explorar novas fronteiras e desafiar o
                                        convencional.</p>
                                </div>

                                <!-- Valor E -->
                                <div class="value-card p-5 rounded-lg transition-all hover:bg-zinc-800/30">
                                    <div class="flex items-center mb-2">
                                        <span class="gradient-text font-black text-3xl w-10" aria-hidden="true">E</span>
                                        <h4 class="text-xl font-bold text-white ml-3">Excelência</h4>
                                    </div>
                                    <p class="text-zinc-400 ml-13">Compromisso com a mais alta qualidade em cada
                                        detalhe, em cada entrega.</p>
                                </div>

                                <!-- Valor T -->
                                <div class="value-card p-5 rounded-lg transition-all hover:bg-zinc-800/30">
                                    <div class="flex items-center mb-2">
                                        <span class="gradient-text font-black text-3xl w-10" aria-hidden="true">T</span>
                                        <h4 class="text-xl font-bold text-white ml-3">Tecnologia</h4>
                                    </div>
                                    <p class="text-zinc-400 ml-13">Nossa paixão e nossa ferramenta de trabalho para
                                        transformar realidades.</p>
                                </div>

                                <!-- Valor T -->
                                <div class="value-card p-5 rounded-lg transition-all hover:bg-zinc-800/30">
                                    <div class="flex items-center mb-2">
                                        <span class="gradient-text font-black text-3xl w-10" aria-hidden="true">T</span>
                                        <h4 class="text-xl font-bold text-white ml-3">Transformação</h4>
                                    </div>
                                    <p class="text-zinc-400 ml-13">Impacto real nos negócios dos nossos clientes,
                                        gerando valor tangível.</p>
                                </div>

                                <!-- Valor A -->
                                <div class="value-card p-5 rounded-lg transition-all hover:bg-zinc-800/30">
                                    <div class="flex items-center mb-2">
                                        <span class="gradient-text font-black text-3xl w-10" aria-hidden="true">A</span>
                                        <h4 class="text-xl font-bold text-white ml-3">Avanço</h4>
                                    </div>
                                    <p class="text-zinc-400 ml-13">Visão de futuro e inovação constante, sempre buscando
                                        a próxima evolução.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Contato Section -->
        <section id="contato" class="py-20 bg-zinc-900/50" aria-labelledby="contato-title">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12 reveal">
                    <h2 id="contato-title" class="text-3xl md:text-4xl font-bold mb-2">Vamos Conversar?</h2>
                    <p class="text-zinc-400">Envie sua mensagem ou entre em contato pelos nossos canais.</p>
                </div>
                <div class="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-10 reveal">
                    <div>
                        <h3 class="text-xl font-bold mb-6">Informações de Contato</h3>
                        <div class="space-y-6">
                            <!-- E-mail -->
                            <a href="mailto:contato@jmbetta.shop"
                                class="flex items-center group p-4 bg-zinc-900/50 rounded-lg hover:bg-zinc-800/50 transition-all"
                                aria-label="Enviar e-mail para contato@jmbetta.shop">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="contact-icon mr-4" aria-hidden="true">
                                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
                                    </path>
                                    <polyline points="22,6 12,13 2,6"></polyline>
                                </svg>
                                <div>
                                    <p class="text-zinc-400 text-sm">E-mail</p>
                                    <p class="text-zinc-300 group-hover:text-white font-medium">contato@jmbetta.shop</p>
                                </div>
                            </a>

                            <!-- WhatsApp -->
                            <a href="https://wa.me/5511981777392" target="_blank" rel="noopener noreferrer"
                                class="flex items-center group p-4 bg-zinc-900/50 rounded-lg hover:bg-zinc-800/50 transition-all"
                                aria-label="Falar pelo WhatsApp com JMBETTA">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="contact-icon mr-4" aria-hidden="true">
                                    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
                                    </path>
                                </svg>
                                <div>
                                    <p class="text-zinc-400 text-sm">WhatsApp</p>
                                    <p class="text-zinc-300 group-hover:text-white font-medium">+55 11 98177-7392</p>
                                </div>
                            </a>

                            <!-- Instagram -->
                            <a href="https://www.instagram.com/alexandred.alves" target="_blank" rel="noopener noreferrer"
                                class="flex items-center group p-4 bg-zinc-900/50 rounded-lg hover:bg-zinc-800/50 transition-all"
                                aria-label="Seguir JMBETTA no Instagram">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="contact-icon mr-4" aria-hidden="true">
                                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                                </svg>
                                <div>
                                    <p class="text-zinc-400 text-sm">Instagram</p>
                                    <p class="text-zinc-300 group-hover:text-white font-medium">@alexandred.alves</p>
                                </div>
                            </a>

                            <!-- Horário -->
                            <div class="p-4 bg-zinc-900/50 rounded-lg border border-zinc-800">
                                <div class="flex items-center mb-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="contact-icon mr-4" aria-hidden="true">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <polyline points="12 6 12 12 16 14"></polyline>
                                    </svg>
                                    <p class="text-white font-medium">Horário de Atendimento</p>
                                </div>
                                <p class="text-zinc-400 text-sm ml-10">Segunda a Sexta: 9h às 18h</p>
                                <p class="text-zinc-400 text-sm ml-10">Sábado: 9h às 12h</p>
                            </div>

                            <!-- Localização -->
                            <div class="p-4 bg-zinc-900/50 rounded-lg border border-zinc-800">
                                <div class="flex items-center mb-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="contact-icon mr-4" aria-hidden="true">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg>
                                    <p class="text-white font-medium">Localização</p>
                                </div>
                                <p class="text-zinc-400 text-sm ml-10">Barueri - SP</p>
                                <p class="text-zinc-400 text-sm ml-10">Al. Rio Negro, 503 - Sala 2011</p>
                                <p class="text-zinc-400 text-sm ml-10">Atendemos todo Brasil remotamente</p>
                            </div>
                        </div>
                    </div>

                    <!-- Formulário de Contato Geral com WebMCP -->
                    <div>
                        <div class="bg-zinc-900 p-8 rounded-xl card-border-glow">
                            <h3 class="text-xl font-bold mb-6">Envie uma Mensagem</h3>
                            <form id="contact-form" action="https://formspree.io/f/xanbrpky" method="POST"
                                data-tool="contact-message" data-tool-description="Envia uma mensagem de contato para a equipe JMBETTA">
                                <input type="hidden" name="_subject" value="Contato do Site - JMBETTA">
                                <input type="hidden" name="_template" value="table">

                                <div class="space-y-4">
                                    <div>
                                        <label for="contact-name" class="block text-sm font-medium text-zinc-400 mb-1">Seu nome <span aria-hidden="true">*</span></label>
                                        <input type="text" id="contact-name" name="name"
                                            class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-sky-500"
                                            required aria-required="true" placeholder="Seu nome completo">
                                    </div>

                                    <div>
                                        <label for="contact-email" class="block text-sm font-medium text-zinc-400 mb-1">Seu e-mail <span aria-hidden="true">*</span></label>
                                        <input type="email" id="contact-email" name="email"
                                            class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-sky-500"
                                            required aria-required="true" placeholder="seu@email.com">
                                    </div>

                                    <div>
                                        <label for="contact-message" class="block text-sm font-medium text-zinc-400 mb-1">Sua mensagem <span aria-hidden="true">*</span></label>
                                        <textarea id="contact-message" name="message" rows="5"
                                            class="w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-sky-500"
                                            required aria-required="true" placeholder="Como podemos ajudar?"></textarea>
                                    </div>

                                    <button type="submit"
                                        class="w-full modern-btn text-white font-bold py-3 px-6 rounded-lg hover:scale-105 transition-transform"
                                        aria-label="Enviar mensagem de contato">
                                        Enviar Mensagem
                                    </button>
                                </div>
                            </form>
                            <div id="form-status" class="hidden mt-4 text-center p-4 rounded-lg" role="status"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer role="contentinfo" class="bg-black border-t border-zinc-800">
        <div class="container mx-auto px-6 py-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <a href="/" class="inline-block mb-4" aria-label="Voltar para a página inicial">
                        <img src="assets/jmbetta-logo.webp" alt="JMBETTA Logo" class="h-10 w-auto"
                            width="160" height="40" loading="lazy"
                            onerror="this.onerror=null; this.src='assets/jmbetta-logo.webp';">
                    </a>
                    <p class="text-zinc-400 text-sm">Consultoria especializada em TI, criação de sites e transformação
                        digital em Sumaré, São Paulo.</p>
                </div>

                <div>
                    <h4 class="text-white font-bold mb-4">Links Rápidos</h4>
                    <ul class="space-y-2" role="list">
                        <li><a href="#servicos" class="text-zinc-300 hover:text-white text-sm transition-colors">Serviços</a></li>
                        <li><a href="#criacao-sites" class="text-zinc-300 hover:text-white text-sm transition-colors">Criação de Sites</a></li>
                        <li><a href="#quemsomos" class="text-zinc-300 hover:text-white text-sm transition-colors">Quem Somos</a></li>
                        <li><a href="#contato" class="text-zinc-300 hover:text-white text-sm transition-colors">Contato</a></li>
                        <li><a href="calculadora.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Calculadora</a></li>
                        <li><a href="gemini.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Gemini AI</a></li>
                        <li><a href="governanca-financeira.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Governança Financeira</a></li>
                        <li><a href="https://blog.jmbetta.shop" class="text-zinc-300 hover:text-white text-sm transition-colors">Blog</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-white font-bold mb-4">Serviços</h4>
                    <ul class="space-y-2" role="list">
                        <li><a href="#criacao-sites" class="text-zinc-300 hover:text-white text-sm transition-colors">Criação de Sites</a></li>
                        <li><a href="google-meu-negocio.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Google Meu Negócio</a></li>
                        <li><a href="suporte-ti.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Suporte de TI</a></li>
                        <li><a href="agentes-ia.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Agentes de IA</a></li>
                        <li><a href="looker.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Business Intelligence</a></li>
                        <li><a href="ofertas-telefonia.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Telefonia IA</a></li>
                        <li><a href="privacidade.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Privacidade</a></li>
                        <li><a href="termos.html" class="text-zinc-300 hover:text-white text-sm transition-colors">Termos</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-zinc-800 mt-8 pt-6 text-center text-zinc-300 text-sm">
                <p>&copy; 2016 JMBETTA. Todos os direitos reservados, Atualizado em Julho de 2026</p>
                <p class="mt-1">Criando Soluções Únicas, como você.</p>
                <p class="mt-2 text-xs text-zinc-300">CNPJ: 26.528.502/0001-83 - Alphaville Industrial, Barueri - SP</p>
                <p class="mt-1 text-xs text-zinc-300">15+ anos de experiência | +50 projetos entregues</p>
            </div>
        </div>
    </footer>

    <!-- WhatsApp Floating Button -->
    <a href="https://wa.me/5511981777392" target="_blank" rel="noopener noreferrer" class="whatsapp-fab"
        aria-label="Fale conosco no WhatsApp" title="Conversar no WhatsApp">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor" aria-hidden="true">
            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.894 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01s-.521.074-.792.372c-.272.296-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z" />
        </svg>
    </a>

    <!-- JavaScript -->
    <script>
        // Mobile Menu Toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
            mobileMenu.classList.toggle('hidden');
            mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
        });

        const mobileMenuLinks = mobileMenu.getElementsByTagName('a');
        for (let link of mobileMenuLinks) {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                mobileMenuButton.setAttribute('aria-expanded', 'false');
            });
        }

        // Scroll Reveal Animation
        function revealOnScroll() {
            const reveals = document.querySelectorAll('.reveal');
            const windowHeight = window.innerHeight;
            const elementVisible = 150;

            reveals.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                if (elementTop < windowHeight - elementVisible) {
                    element.classList.add('active');
                }
            });
        }

        window.addEventListener('scroll', revealOnScroll);
        document.addEventListener('DOMContentLoaded', () => {
            revealOnScroll();

            // Lazy loading images
            const lazyLoadObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        const src = img.getAttribute('data-src');
                        if (src) {
                            img.src = src;
                            img.removeAttribute('data-src');
                        }
                        img.classList.add('loaded');
                        lazyLoadObserver.unobserve(img);
                    }
                });
            }, {
                rootMargin: '50px',
                threshold: 0.1
            });

            const lazyImages = document.querySelectorAll('img.lazy-load');
            lazyImages.forEach(img => lazyLoadObserver.observe(img));
        });

        // Contact Form Submission
        const form = document.getElementById('contact-form');
        const formStatus = document.getElementById('form-status');

        if (form) {
            form.addEventListener('submit', async function(event) {
                event.preventDefault();
                const data = new FormData(form);
                const button = form.querySelector('button[type="submit"]');
                button.disabled = true;
                button.textContent = 'Enviando...';

                try {
                    const response = await fetch(form.action, {
                        method: form.method,
                        body: data,
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    if (response.ok) {
                        form.reset();
                        formStatus.classList.remove('hidden');
                        formStatus.className = 'mt-4 text-center p-4 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30';
                        formStatus.innerHTML = `
                            <div class="flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Mensagem enviada com sucesso! Entraremos em contato em breve.
                            </div>
                        `;

                        setTimeout(() => {
                            formStatus.classList.add('hidden');
                        }, 5000);
                    } else {
                        throw new Error('Erro na resposta do servidor.');
                    }
                } catch (error) {
                    console.error('Form submission error:', error);
                    formStatus.classList.remove('hidden');
                    formStatus.className = 'mt-4 text-center p-4 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30';
                    formStatus.innerHTML = `
                        <div class="flex items-center justify-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Ocorreu um erro ao enviar a mensagem. Tente novamente ou entre em contato pelo WhatsApp.
                        </div>
                    `;
                } finally {
                    button.disabled = false;
                    button.textContent = 'Enviar Mensagem';
                }
            });
        }

        // Site Quote Form Submission
        const siteQuoteForm = document.getElementById('site-quote-form');
        const quoteStatus = document.getElementById('quote-status');

        if (siteQuoteForm) {
            siteQuoteForm.addEventListener('submit', async function(event) {
                event.preventDefault();
                const data = new FormData(siteQuoteForm);
                const button = siteQuoteForm.querySelector('button[type="submit"]');
                button.disabled = true;
                button.textContent = 'Enviando...';

                try {
                    const response = await fetch(siteQuoteForm.action, {
                        method: siteQuoteForm.method,
                        body: data,
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    if (response.ok) {
                        siteQuoteForm.reset();
                        quoteStatus.classList.remove('hidden');
                        quoteStatus.className = 'mt-4 text-center p-4 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30';
                        quoteStatus.innerHTML = `
                            <div class="flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Orçamento solicitado com sucesso! Entraremos em contato em até 24h.
                            </div>
                        `;

                        setTimeout(() => {
                            quoteStatus.classList.add('hidden');
                        }, 5000);
                    } else {
                        throw new Error('Erro na resposta do servidor.');
                    }
                } catch (error) {
                    console.error('Quote form submission error:', error);
                    quoteStatus.classList.remove('hidden');
                    quoteStatus.className = 'mt-4 text-center p-4 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30';
                    quoteStatus.innerHTML = `
                        <div class="flex items-center justify-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Erro ao enviar solicitação. Entre em contato diretamente pelo WhatsApp.
                        </div>
                    `;
                } finally {
                    button.disabled = false;
                    button.textContent = 'Solicitar Orçamento Gratuito';
                }
            });
        }

        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });

                    history.pushState(null, null, targetId);
                }
            });
        });

        // WebMCP — expõe ferramentas do site para agentes de IA via browser
        if (typeof navigator !== 'undefined' && navigator.modelContext) {
            navigator.modelContext.provideContext({
                tools: [
                    {
                        name: "get_jmbetta_services",
                        description: "Returns the list of JMBETTA IT services with descriptions and pricing",
                        inputSchema: { type: "object", properties: {}, required: [] },
                        execute: async () => ({
                            services: [
                                { name: "Criação de Sites", description: "Sites responsivos com SEO, desde landing pages até e-commerce", url: "https://jmbetta.shop/#criacao-sites" },
                                { name: "Google Meu Negócio", description: "Planos: Essencial R$249, Profissional R$399, Premium R$649/mês", url: "https://jmbetta.shop/google-meu-negocio.html" },
                                { name: "Agentes de IA", description: "Assistentes de IA privados treinados com dados da empresa", url: "https://jmbetta.shop/agentes-ia.html" },
                                { name: "Suporte TI com SLA", description: "Basic R$750, Pro R$1650, Premium R$3900/mês", url: "https://jmbetta.shop/suporte-ti.html" },
                                { name: "Telefonia Cloud GoTo Connect", description: "Parceiro oficial GoTo — telefonia em nuvem, WhatsApp omnicanal e IA", url: "https://jmbetta.shop/ofertas-telefonia.html" },
                                { name: "Business Intelligence", description: "Dashboards Looker Studio", url: "https://jmbetta.shop/looker.html" }
                            ]
                        })
                    },
                    {
                        name: "get_jmbetta_contact",
                        description: "Returns JMBETTA contact information, business hours and location",
                        inputSchema: { type: "object", properties: {}, required: [] },
                        execute: async () => ({
                            whatsapp: "+55 11 98177-7392",
                            whatsapp_link: "https://wa.me/5511981777392",
                            email: "contato@jmbetta.shop",
                            address: "Al. Rio Negro, 503 - Sala 2011, Alphaville Industrial, Barueri - SP",
                            hours: { weekdays: "9h às 18h", saturday: "9h às 12h" }
                        })
                    },
                    {
                        name: "get_jmbetta_about",
                        description: "Returns information about JMBETTA — history, experience and differentials",
                        inputSchema: { type: "object", properties: {}, required: [] },
                        execute: async () => ({
                            name: "JMBETTA Consultoria em TI",
                            slogan: "Join Minds, Build Excellence Through Technology & Ambition",
                            founded: 2016,
                            experience_years: 12,
                            projects_delivered: 50,
                            cnpj: "26.528.502/0001-83"
                        })
                    }
                ]
            }).catch(() => {});
        }
    </script>
</body>

</html>