import SEO from '../components/SEO';
import { createLocalBusinessSchema, createFAQSchema, createBreadcrumbSchema } from '../config/schema';
import { MapPin, Phone, Mail, ArrowRight, CheckCircle, Building2 } from 'lucide-react';
import { Link } from 'react-router-dom';

const schema = createLocalBusinessSchema('Guarulhos', 'guarulhos');

const faqData = [
  { q: 'A Avanzato atende empresas em Guarulhos?', a: 'Sim, nossa matriz fica em Guarulhos e atendemos dezenas de empresas da regiao ha mais de 23 anos.' },
  { q: 'Qual o tempo de resposta em Guarulhos?', a: 'Como estamos na cidade, oferecemos o melhor SLA: atendimento em ate 4 horas para chamados criticos.' },
  { q: 'Quais segmentos a Avanzato atende em Guarulhos?', a: 'Contabilidades, advocacias, industrias, BPO, embalagens, logistica, monitoramento e mais.' },
  { q: 'A Avanzato faz suporte presencial em Guarulhos?', a: 'Sim, fazemos visitas presenciais mensais com relatorio completo de cada computador e servidor.' },
];

const faqSchema = createFAQSchema(faqData);

const breadcrumbSchema = createBreadcrumbSchema([
  { name: 'Home', url: 'https://avanzato.com.br/' },
  { name: 'Onde Atuamos', url: 'https://avanzato.com.br/onde-atuamos' },
  { name: 'Guarulhos', url: 'https://avanzato.com.br/suporte-ti-guarulhos' },
]);

const combinedSchema = [schema, faqSchema, breadcrumbSchema];

const servicos = [
  'Suporte tecnico 24/7',
  'Firewall e seguranca',
  'Microsoft 365',
  'Backup corporativo',
  'Servidores e virtualizacao',
  'Cloud Computing',
  'VoIP e PABX IP',
  'Monitoramento CFTV',
];

const clientes = [
  { nome: 'Dellacont', segmento: 'Contabilidade', servicos: 'Suporte + Servidor + Backup' },
  { nome: 'Madri', segmento: 'Contabilidade', servicos: 'Suporte + Servidor Nuvem + Backup' },
  { nome: 'Mouradi Naddi', segmento: 'Advocacia', servicos: 'Suporte + Servidor + Backup' },
  { nome: 'EFLAW', segmento: 'Advocacia', servicos: 'Suporte + Servidor + Backup' },
  { nome: 'Moraes Advogados', segmento: 'Advocacia', servicos: 'Suporte + Servidor + Backup' },
  { nome: 'Thalls', segmento: 'Industria', servicos: 'Suporte + Servidor + Backup + VoIP' },
  { nome: 'Ganiko', segmento: 'BPO', servicos: 'Suporte + Servidor Nuvem + Backup' },
  { nome: 'DCarvalho', segmento: 'Embalagens', servicos: 'Suporte + Servidor Nuvem + Backup' },
  { nome: 'Garuppy', segmento: 'Logistica', servicos: 'Suporte + Servidor Nuvem + Backup' },
  { nome: 'Premier', segmento: 'Monitoramento', servicos: 'Suporte + Servidor + Backup' },
];

const segmentos = [
  'Contabilidade', 'Advocacia', 'Industria', 'BPO',
  'Embalagens', 'Logistica', 'Monitoramento', 'Condominios',
];

const LocalGuarulhos = () => {
  return (
    <div className="min-h-screen bg-[#0e0e0e]">
      <SEO
        title="Suporte de TI em Guarulhos - Matriz Avanzato"
        description="Suporte de TI empresarial em Guarulhos. Atendemos contabilidades, advocacias, industrias e mais. Matriz da Avanzato. +23 anos de experiencia."
        keywords="suporte ti guarulhos, ti empresarial guarulhos, terceirizacao ti guarulhos, suporte informatica guarulhos"
        schema={combinedSchema}
      />

      <div className="max-w-7xl mx-auto px-6 py-16">
        <nav className="text-sm text-gray-400 mb-6">
          <Link to="/" className="hover:text-[#cbf400]">Home</Link>
          <span className="mx-2">/</span>
          <Link to="/onde-atuamos" className="hover:text-[#cbf400]">Onde Atuamos</Link>
          <span className="mx-2">/</span>
          <span className="text-white">Guarulhos</span>
        </nav>

        <div className="inline-block px-4 py-1 bg-[#cbf400]/20 text-[#cbf400] rounded-full text-sm font-medium mb-4">
          Matriz Avanzato
        </div>

        <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
          Suporte de TI em <span className="text-[#cbf400]">Guarulhos</span>
        </h1>
        <p className="text-xl text-gray-300 mb-8 max-w-3xl">
          Nossa matriz esta em Guarulhos e atendemos mais de 10 empresas da regiao.
          +23 anos de experiencia com suporte presencial e remoto.
        </p>

        {/* Clientes */}
        <div className="bg-[#1a1a1a] rounded-2xl p-8 border border-[#2a2a2a] mb-12">
          <h2 className="text-2xl font-semibold text-white mb-6">
            Empresas que Confiam na Avanzato em Guarulhos
          </h2>
          <div className="grid md:grid-cols-2 gap-4">
            {clientes.map((c) => (
              <div key={c.nome} className="flex items-start gap-3 p-4 bg-[#0e0e0e] rounded-xl">
                <Building2 className="w-5 h-5 text-[#cbf400] mt-0.5 shrink-0" />
                <div>
                  <p className="text-white font-medium">{c.nome}</p>
                  <p className="text-gray-400 text-sm">{c.segmento}</p>
                  <p className="text-gray-500 text-xs">{c.servicos}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="grid md:grid-cols-2 gap-8 mb-12">
          <div className="bg-[#1a1a1a] rounded-2xl p-8 border border-[#2a2a2a]">
            <h2 className="text-2xl font-semibold text-white mb-4">Nossos Servicos</h2>
            <div className="space-y-3">
              {servicos.map((s) => (
                <div key={s} className="flex items-center gap-3 text-gray-300">
                  <CheckCircle className="w-5 h-5 text-[#cbf400]" />
                  {s}
                </div>
              ))}
            </div>
          </div>

          <div className="bg-[#1a1a1a] rounded-2xl p-8 border border-[#2a2a2a]">
            <h2 className="text-2xl font-semibold text-white mb-4">Segmentos Atendidos</h2>
            <div className="space-y-3">
              {segmentos.map((s) => (
                <div key={s} className="flex items-center gap-3 text-gray-300">
                  <CheckCircle className="w-5 h-5 text-[#cbf400]" />
                  {s}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* FAQ */}
        <div className="bg-[#1a1a1a] rounded-2xl p-8 border border-[#2a2a2a] mb-12">
          <h2 className="text-2xl font-semibold text-white mb-6">Perguntas Frequentes</h2>
          <div className="space-y-4">
            {faqData.map((faq, i) => (
              <div key={i} className="border-b border-[#2a2a2a] pb-4">
                <h3 className="text-lg font-semibold text-[#cbf400] mb-2">{faq.q}</h3>
                <p className="text-gray-300">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div className="bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl p-8 border border-[#cbf400]/30 text-center">
          <h2 className="text-3xl font-bold text-white mb-4">
            Solicite uma Avaliacao Gratuita de TI
          </h2>
          <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
            Junte-se as mais de 10 empresas de Guarulhos que confiam na Avanzato.
          </p>
          <Link to="/avaliacao" className="inline-flex items-center gap-2 bg-[#cbf400] text-[#0e0e0e] px-8 py-4 rounded-xl font-semibold hover:bg-[#b8e000] transition-colors">
            Avaliar minha TI Agora
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>

        <div className="mt-12 grid md:grid-cols-3 gap-6">
          <div className="flex items-center gap-3 text-gray-300">
            <MapPin className="w-5 h-5 text-[#cbf400]" />
            <span>Rua Maria Curupaiti, 471 - Guarulhos, SP</span>
          </div>
          <div className="flex items-center gap-3 text-gray-300">
            <Phone className="w-5 h-5 text-[#cbf400]" />
            <span>(11) 4810-1704</span>
          </div>
          <div className="flex items-center gap-3 text-gray-300">
            <Mail className="w-5 h-5 text-[#cbf400]" />
            <span>contato@avanzato.com.br</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LocalGuarulhos;