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

const schema = createLocalBusinessSchema('Ipiranga', 'ipiranga');

const faqData = [
  { q: 'A Avanzato atende empresas em Ipiranga?', a: 'Sim, atuamos em Ipiranga e regiao com suporte tecnico presencial e remoto para empresas de todos os portes.' },
  { q: 'Qual o tempo de resposta para chamados em Ipiranga?', a: 'Nosso SLA garante atendimento em ate 4 horas para chamados criticos na regiao de Ipiranga.' },
  { q: 'Quais servicos a Avanzato oferece em Ipiranga?', a: 'Oferecemos suporte de TI, firewall, Microsoft 365, backup, servidores, cloud, VoIP e monitoramento.' },
  { q: 'A Avanzato trabalha com qual segmento em Ipiranga?', a: 'Atendemos contabilidades, advocacias, industrias, clinicas, imobiliarias e mais.' },
];

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: 'Ipiranga', url: 'https://avanzato.com.br/suporte-ti-ipiranga' },
]);

const combinedSchema = [schema, faqSchema, breadcrumbSchema];

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

const segmentos = [
  'Contabilidades', 'Advocacias', 'Industrias', 'Clinicas',
  'Imobiliarias', 'Condominios', 'Logistica', 'Comercio',
];

const LocalIpiranga = () => {
  return (
    <div className="min-h-screen bg-[#0e0e0e]">
      <SEO
        title="Suporte de TI em Ipiranga - Avanzato Tecnologia"
        description="Suporte de TI empresarial em Ipiranga. Atendimento presencial e remoto. Firewall, Microsoft 365, Backup, Cloud, VoIP. Solicite avaliacao gratuita."
        keywords="suporte ti ipiranga, ti empresarial Ipiranga, terceirizacao ti Ipiranga"
        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">Ipiranga</span>
        </nav>

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

        <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 em Ipiranga</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>

        <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>

        <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">
            Descubra como otimizar a infraestrutura de TI da sua empresa em Ipiranga.
          </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 dos Patriotas, 100 - Ipiranga, 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 LocalIpiranga;