import React, { useState } from 'react';
import { Phone, MapPin, Clock, Users, Truck, CheckCircle, Star, Menu, X, MessageCircle, RefreshCw, Calendar, AlertCircle } from 'lucide-react';

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [formData, setFormData] = useState({
    nome: '',
    telefone: '',
    endereco: ''
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const message = `Olá! Gostaria de solicitar orçamento para caçamba de entulho.%0A%0ANome: ${formData.nome}%0ATelefone: ${formData.telefone}%0AEndereço da Obra: ${formData.endereco}`;
    window.open(`https://wa.me/5511952951951?text=${message}`, '_blank');
  };

  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="bg-white shadow-md sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Truck className="h-8 w-8 text-blue-700" />
              <h1 className="text-2xl font-bold text-gray-800">As Coleta Urbano</h1>
            </div>
            
            <div className="hidden md:flex items-center space-x-6">
              <a href="tel:1152951951" className="flex items-center space-x-2 text-blue-700 font-semibold hover:text-blue-800 transition-colors">
                <Phone className="h-5 w-5" />
                <span>(11) 5295-1951</span>
              </a>
              <button className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-semibold transition-colors flex items-center space-x-2">
                <MessageCircle className="h-5 w-5" />
                <span>WhatsApp</span>
              </button>
            </div>

            <button 
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>

          {/* Mobile Menu */}
          {isMenuOpen && (
            <div className="md:hidden mt-4 pb-4 border-t pt-4">
              <div className="flex flex-col space-y-4">
                <a href="tel:1152951951" className="flex items-center space-x-2 text-blue-700 font-semibold">
                  <Phone className="h-5 w-5" />
                  <span>(11) 5295-1951</span>
                </a>
                <button className="bg-green-600 text-white px-4 py-2 rounded-lg font-semibold flex items-center space-x-2 w-fit">
                  <MessageCircle className="h-5 w-5" />
                  <span>WhatsApp</span>
                </button>
              </div>
            </div>
          )}
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-blue-900 to-blue-700 text-white py-20 overflow-hidden">
        <div className="absolute inset-0 bg-black opacity-20"></div>
        <div 
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: `url('https://images.pexels.com/photos/162568/construction-site-build-construction-work-162568.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop')`
          }}
        ></div>
        <div className="relative container mx-auto px-4 text-center">
          <h2 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
            Aluguel Rápido de Caçamba<br />
            <span className="text-yellow-400">em São Paulo</span>
          </h2>
          <p className="text-xl md:text-2xl mb-4 opacity-90">Diária ou Semanal</p>
          <p className="text-lg mb-8 opacity-80 max-w-2xl mx-auto">
            Entrega e retirada rápida em toda São Paulo. Atendemos pessoa física e jurídica com agilidade e segurança.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a 
              href="tel:1152951951"
              className="bg-yellow-500 hover:bg-yellow-600 text-gray-900 px-8 py-4 rounded-lg font-bold text-lg transition-all transform hover:scale-105 flex items-center space-x-2 shadow-lg"
            >
              <Phone className="h-6 w-6" />
              <span>Ligue Agora: (11) 5295-1951</span>
            </a>
            <button 
              onClick={() => document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' })}
              className="bg-transparent border-2 border-white hover:bg-white hover:text-blue-900 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all"
            >
              Solicite Orçamento
            </button>
          </div>
        </div>
      </section>

      {/* Conformidade e Diferenciais */}
      <section className="py-16 bg-blue-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-gray-800 mb-4">Por Que Somos a Melhor Escolha?</h3>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Trabalhamos com total conformidade legal e oferecemos o melhor serviço de São Paulo
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <div className="text-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="h-8 w-8 text-green-700" />
              </div>
              <h4 className="text-lg font-semibold mb-3 text-gray-800">100% Conforme</h4>
              <p className="text-gray-600 text-sm mb-4">
                Atuamos 100% em conformidade com o decreto, sob cadastro do nº 0890 no AMLURB
              </p>
            </div>

            <div className="text-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Clock className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-lg font-semibold mb-3 text-gray-800">Entrega Rápida</h4>
              <p className="text-gray-600 text-sm mb-4">
                Entregamos sua caçamba com o melhor tempo médio do mercado em até 2 HORAS
              </p>
            </div>

            <div className="text-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="h-8 w-8 text-yellow-700" />
              </div>
              <h4 className="text-lg font-semibold mb-3 text-gray-800">Caçambas Autorizadas</h4>
              <p className="text-gray-600 text-sm mb-4">
                Evite multas na sua obra. Todas as nossas caçambas possuem autorização do SLU
              </p>
            </div>

            <div className="text-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <MapPin className="h-8 w-8 text-green-700" />
              </div>
              <h4 className="text-lg font-semibold mb-3 text-gray-800">Descarte Correto</h4>
              <p className="text-gray-600 text-sm mb-4">
                Seus resíduos são levados para um lugar próprio de descarte de entulhos, autorizado pela entidade competente
              </p>
            </div>
          </div>

          <div className="text-center">
            <button 
              onClick={() => window.open('https://wa.me/5511952951951?text=Olá! Gostaria de saber mais sobre os serviços da As Coleta Urbano.', '_blank')}
              className="bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all transform hover:scale-105 flex items-center space-x-2 mx-auto shadow-lg"
            >
              <MessageCircle className="h-6 w-6" />
              <span>Fale Conosco no WhatsApp</span>
            </button>
          </div>
        </div>
      </section>

      {/* Seção de Serviços */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-gray-800 mb-4">Nossos Serviços</h3>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Oferecemos soluções completas para descarte de entulho e materiais de construção
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="text-center bg-gray-50 p-6 rounded-lg hover:shadow-md transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Truck className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-lg font-semibold mb-2 text-gray-800">Caçamba 3m³</h4>
              <p className="text-gray-600 text-sm">
                Ideal para reformas pequenas e limpeza residencial
              </p>
            </div>

            <div className="text-center bg-gray-50 p-6 rounded-lg hover:shadow-md transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Truck className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-lg font-semibold mb-2 text-gray-800">Caçamba 5m³</h4>
              <p className="text-gray-600 text-sm">
                Perfeita para obras médias e reformas comerciais
              </p>
            </div>

            <div className="text-center bg-gray-50 p-6 rounded-lg hover:shadow-md transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Truck className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-lg font-semibold mb-2 text-gray-800">Caçamba 7m³</h4>
              <p className="text-gray-600 text-sm">
                Ideal para construções e obras de grande porte
              </p>
            </div>

            <div className="text-center bg-gray-50 p-6 rounded-lg hover:shadow-md transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-lg font-semibold mb-2 text-gray-800">Descarte Ecológico</h4>
              <p className="text-gray-600 text-sm">
                Destinação correta e sustentável dos materiais
              </p>
            </div>
          </div>

          <div className="mt-12 bg-blue-50 p-8 rounded-lg">
            <h4 className="text-2xl font-bold text-center text-gray-800 mb-6">Materiais Aceitos</h4>
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <h5 className="font-semibold text-green-700 mb-3 flex items-center">
                  <CheckCircle className="h-5 w-5 mr-2" />
                  Permitidos
                </h5>
                <ul className="space-y-2 text-gray-700">
                  <li>• Entulho de construção civil</li>
                  <li>• Tijolos, blocos e concreto</li>
                  <li>• Madeira de construção</li>
                  <li>• Azulejos e cerâmicas</li>
                  <li>• Gesso e argamassa</li>
                  <li>• Metais ferrosos</li>
                </ul>
              </div>
              <div>
                <h5 className="font-semibold text-red-700 mb-3 flex items-center">
                  <X className="h-5 w-5 mr-2" />
                  Não Permitidos
                </h5>
                <ul className="space-y-2 text-gray-700">
                  <li>• Lixo orgânico e doméstico</li>
                  <li>• Produtos químicos</li>
                  <li>• Tintas e solventes</li>
                  <li>• Materiais hospitalares</li>
                  <li>• Eletrônicos</li>
                  <li>• Pneus e baterias</li>
                </ul>
                <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                  <p className="text-sm text-yellow-800 font-medium mb-2">
                    ⚠️ Materiais Especiais
                  </p>
                  <p className="text-sm text-yellow-700">
                    Se você possui materiais da lista "Não Permitidos", 
                    <strong> comunique-nos antecipadamente</strong>. Temos caçambas 
                    especiais e próprias para cada tipo de material, garantindo 
                    o descarte correto e legal.
                  </p>
                </div>
              </div>
            </div>
            
            <div className="mt-8 text-center">
              <p className="text-gray-600 mb-4">
                Tem dúvidas sobre qual material pode descartar? Entre em contato conosco!
              </p>
              <button 
                onClick={() => window.open('https://wa.me/5511952951951?text=Olá! Tenho dúvidas sobre quais materiais posso descartar na caçamba. Podem me orientar?', '_blank')}
                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition-all flex items-center space-x-2 mx-auto"
              >
                <MessageCircle className="h-5 w-5" />
                <span>Consultar Materiais Permitidos</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Seção com Imagem de Caçamba e Profissionais */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-gray-800 mb-4">Nossos Profissionais</h3>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Contamos com uma equipe de profissionais treinados e capacitados para oferecer 
              o melhor serviço de aluguel de caçambas em São Paulo. Nossa experiência garante 
              segurança e eficiência em cada entrega.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="text-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Users className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-lg font-semibold mb-3 text-gray-800">Equipe Experiente</h4>
              <p className="text-gray-600 text-sm">
                Profissionais treinados com anos de experiência no setor
              </p>
            </div>

            <div className="text-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="h-8 w-8 text-green-700" />
              </div>
              <h4 className="text-lg font-semibold mb-3 text-gray-800">Atendimento Personalizado</h4>
              <p className="text-gray-600 text-sm">
                Cada cliente recebe atenção especial e soluções sob medida
              </p>
            </div>

            <div className="text-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Clock className="h-8 w-8 text-yellow-700" />
              </div>
              <h4 className="text-lg font-semibold mb-3 text-gray-800">Pontualidade Garantida</h4>
              <p className="text-gray-600 text-sm">
                Cumprimos rigorosamente os horários acordados
              </p>
            </div>

            <div className="text-center bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <MessageCircle className="h-8 w-8 text-purple-700" />
              </div>
              <h4 className="text-lg font-semibold mb-3 text-gray-800">Suporte Completo</h4>
              <p className="text-gray-600 text-sm">
                Acompanhamento durante todo o período de aluguel
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Sobre o Serviço */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-gray-800 mb-4">Facilidade e Rapidez no Aluguel</h3>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Oferecemos o processo mais simples e rápido para aluguel de caçambas em São Paulo. 
              Desde o primeiro contato até a retirada, cuidamos de tudo para que você tenha 
              tranquilidade em sua obra ou reforma.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 mb-16">
            <div className="text-center bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Phone className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-gray-800">Orçamento Rápido</h4>
              <p className="text-gray-600">
                Orçamento por telefone em minutos, sem complicações
              </p>
            </div>

            <div className="text-center bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Truck className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-gray-800">Entrega Rápida</h4>
              <p className="text-gray-600">
                Entrega rápida no local da obra, no horário combinado
              </p>
            </div>

            <div className="text-center bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-gray-800">Retirada Programada</h4>
              <p className="text-gray-600">
                Retirada programada sem complicações, quando você precisar
              </p>
            </div>
          </div>

          <div className="mb-16">
            <div className="max-w-4xl mx-auto text-center">
              <h3 className="text-3xl font-bold text-gray-800 mb-6">Caçambas de Qualidade</h3>
              <p className="text-lg text-gray-600 mb-6">
                Nossas caçambas são fabricadas com materiais de alta qualidade e passam por 
                manutenção regular para garantir segurança e durabilidade em sua obra.
              </p>
              <div className="grid md:grid-cols-3 gap-6 max-w-2xl mx-auto">
                <div className="flex flex-col items-center text-center">
                  <CheckCircle className="h-6 w-6 text-green-600" />
                  <span className="text-gray-700 mt-2">Caçambas sempre limpas e higienizadas</span>
                </div>
                <div className="flex flex-col items-center text-center">
                  <CheckCircle className="h-6 w-6 text-green-600" />
                  <span className="text-gray-700 mt-2">Diferentes tamanhos disponíveis</span>
                </div>
                <div className="flex flex-col items-center text-center">
                  <CheckCircle className="h-6 w-6 text-green-600" />
                  <span className="text-gray-700 mt-2">Estrutura resistente e segura</span>
                </div>
              </div>
            </div>
          </div>

          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-gray-800 mb-4">Por Que Escolher a As Coleta Urbano?</h3>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Oferecemos o melhor serviço de aluguel de caçambas em São Paulo, com rapidez na entrega, 
              preços justos e atendimento profissional para suas obras e reformas.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Clock className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-gray-800">Entrega Rápida</h4>
              <p className="text-gray-600">
                Caçambas entregues no mesmo dia ou no horário agendado, sem atrasos.
              </p>
            </div>

            <div className="text-center bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <MapPin className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-gray-800">Toda São Paulo</h4>
              <p className="text-gray-600">
                Atendemos todos os bairros da cidade com logística otimizada.
              </p>
            </div>

            <div className="text-center bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="h-8 w-8 text-blue-700" />
              </div>
              <h4 className="text-xl font-semibold mb-3 text-gray-800">Sem Burocracia</h4>
              <p className="text-gray-600">
                Processo simples e rápido, do pedido à entrega da caçamba.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Planos e Preços */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-gray-800 mb-4">Planos Flexíveis</h3>
            <p className="text-lg text-gray-600">
              Escolha a modalidade que melhor se adapta ao seu projeto
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="bg-gradient-to-br from-blue-50 to-blue-100 p-8 rounded-lg border-2 border-blue-200">
              <h4 className="text-2xl font-bold text-blue-800 mb-4">Aluguel Diário</h4>
              <p className="text-gray-700 mb-6">
                Ideal para obras pequenas e reformas rápidas. Máxima flexibilidade para seu projeto.
              </p>
              <ul className="space-y-3 mb-8">
                <li className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Entrega e retirada no mesmo dia</span>
                </li>
                <li className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Sem compromisso de longo prazo</span>
                </li>
                <li className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Perfeito para reformas residenciais</span>
                </li>
              </ul>
              <button 
                onClick={() => window.open('tel:1152951951')}
                className="w-full bg-blue-700 hover:bg-blue-800 text-white py-3 rounded-lg font-semibold transition-colors"
              >
                Solicitar Orçamento Diário
              </button>
            </div>

            <div className="bg-gradient-to-br from-yellow-50 to-yellow-100 p-8 rounded-lg border-2 border-yellow-200">
              <h4 className="text-2xl font-bold text-yellow-800 mb-4">Aluguel Semanal</h4>
              <p className="text-gray-700 mb-6">
                Perfeito para obras maiores e construções. Economia garantida para projetos longos.
              </p>
              <ul className="space-y-3 mb-8">
                <li className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Melhor custo-benefício</span>
                </li>
                <li className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Ideal para construções</span>
                </li>
                <li className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Desconto por período extendido</span>
                </li>
              </ul>
              <button 
                onClick={() => window.open('tel:1152951951')}
                className="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-3 rounded-lg font-semibold transition-colors"
              >
                Solicitar Orçamento Semanal
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Atendimento PJ e PF */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h3 className="text-3xl font-bold text-gray-800 mb-6">Atendemos Todos os Tipos de Obra</h3>
            <p className="text-lg text-gray-600 mb-8 max-w-3xl mx-auto">
              Seja para uma pequena reforma residencial ou uma grande construção comercial, 
              temos a solução ideal para seu projeto. Nossa experiência atende desde pessoas 
              físicas até grandes empresas do setor.
            </p>
            <div className="grid md:grid-cols-3 gap-6 max-w-2xl mx-auto mb-8">
              <div className="flex flex-col items-center text-center">
                <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-3">
                  <Users className="h-8 w-8 text-blue-600" />
                </div>
                <span className="text-gray-700 font-medium">Reformas Residenciais</span>
              </div>
              <div className="flex flex-col items-center text-center">
                <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-3">
                  <Truck className="h-8 w-8 text-blue-600" />
                </div>
                <span className="text-gray-700 font-medium">Construções Comerciais</span>
              </div>
              <div className="flex flex-col items-center text-center">
                <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-3">
                  <CheckCircle className="h-8 w-8 text-blue-600" />
                </div>
                <span className="text-gray-700 font-medium">Limpeza de Terrenos</span>
              </div>
            </div>
            <button 
              onClick={() => window.open('https://wa.me/5511952951951?text=Olá! Gostaria de um orçamento personalizado para minha obra.', '_blank')}
              className="bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all flex items-center space-x-2 mx-auto"
            >
              <MessageCircle className="h-6 w-6" />
              <span>Orçamento Personalizado</span>
            </button>
          </div>

          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-gray-800 mb-4">Atendemos Pessoa Física e Jurídica</h3>
            <p className="text-lg text-gray-600">
              Soluções personalizadas para cada tipo de cliente
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white p-8 rounded-lg shadow-md">
              <div className="flex items-center mb-6">
                <Users className="h-8 w-8 text-blue-700 mr-3" />
                <h4 className="text-2xl font-semibold text-gray-800">Pessoa Física</h4>
              </div>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                  <span>Reformas residenciais</span>
                </li>
                <li className="flex items-start space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                  <span>Limpeza de quintais e jardins</span>
                </li>
                <li className="flex items-start space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                  <span>Descarte de móveis e entulhos</span>
                </li>
                <li className="flex items-start space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                  <span>Atendimento personalizado e flexível</span>
                </li>
              </ul>
              <p className="text-gray-600 text-sm">
                Facilidade de pagamento e sem complicações burocráticas.
              </p>
            </div>

            <div className="bg-white p-8 rounded-lg shadow-md">
              <div className="flex items-center mb-6">
                <Truck className="h-8 w-8 text-blue-700 mr-3" />
                <h4 className="text-2xl font-semibold text-gray-800">Pessoa Jurídica</h4>
              </div>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                  <span>Empresas de construção civil</span>
                </li>
                <li className="flex items-start space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                  <span>Incorporadoras e construtoras</span>
                </li>
                <li className="flex items-start space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                  <span>Obras de grande porte</span>
                </li>
                <li className="flex items-start space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                  <span>Contratos corporativos com desconto</span>
                </li>
              </ul>
              <p className="text-gray-600 text-sm">
                Faturamento, nota fiscal e condições especiais para empresas.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Depoimentos */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-gray-800 mb-4">O Que Nossos Clientes Dizem</h3>
            <p className="text-lg text-gray-600">
              Confiança construída através da excelência no atendimento
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-gray-50 p-6 rounded-lg">
              <div className="flex items-center mb-4">
                <img 
                  src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=64&h=64&fit=crop&crop=face" 
                  alt="Mariana R." 
                  className="w-12 h-12 rounded-full object-cover mr-4"
                />
                <div>
                  <div className="flex mb-2">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  <div className="text-sm text-gray-600">
                    <strong>Mariana R.</strong><br />
                    Vila Mariana
                  </div>
                </div>
              </div>
              <p className="text-gray-700 mb-4 italic">
                "Serviço rápido e sem burocracia, caçamba entregue no mesmo dia!"
              </p>
            </div>

            <div className="bg-gray-50 p-6 rounded-lg">
              <div className="flex items-center mb-4">
                <img 
                  src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=64&h=64&fit=crop&crop=face" 
                  alt="Carlos T." 
                  className="w-12 h-12 rounded-full object-cover mr-4"
                />
                <div>
                  <div className="flex mb-2">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  <div className="text-sm text-gray-600">
                    <strong>Carlos T.</strong><br />
                    Pinheiros
                  </div>
                </div>
              </div>
              <p className="text-gray-700 mb-4 italic">
                "Ótimo atendimento e preço justo, recomendo para obras grandes."
              </p>
            </div>

            <div className="bg-gray-50 p-6 rounded-lg">
              <div className="flex items-center mb-4">
                <img 
                  src="https://images.pexels.com/photos/1130626/pexels-photo-1130626.jpeg?auto=compress&cs=tinysrgb&w=64&h=64&fit=crop&crop=face" 
                  alt="Fernanda S." 
                  className="w-12 h-12 rounded-full object-cover mr-4"
                />
                <div>
                  <div className="flex mb-2">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  <div className="text-sm text-gray-600">
                    <strong>Fernanda S.</strong><br />
                    Mooca
                  </div>
                </div>
              </div>
              <p className="text-gray-700 mb-4 italic">
                "Equipe profissional e caçamba limpa, tudo dentro do prazo."
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Política de Troca */}
      <section id="politica-troca" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <div className="flex items-center justify-center mb-4">
                <RefreshCw className="h-8 w-8 text-blue-700 mr-3" />
                <h3 className="text-3xl font-bold text-gray-800">Política de Troca, Cancelamento e Devolução</h3>
              </div>
              <p className="text-lg text-gray-600">
                Como nosso serviço é aluguel de caçambas de entulho, a política se aplica a alterações ou cancelamentos de pedidos
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
              <div className="bg-blue-50 p-6 rounded-lg border border-blue-200">
                <div className="flex items-center mb-4">
                  <Calendar className="h-6 w-6 text-blue-700 mr-3" />
                  <h4 className="text-xl font-semibold text-gray-800">Alteração de Data ou Endereço</h4>
                </div>
                <p className="text-gray-700">
                  Alterações podem ser solicitadas com <strong>mínimo de 24 horas de antecedência</strong> da data agendada, mediante disponibilidade.
                </p>
              </div>

              <div className="bg-green-50 p-6 rounded-lg border border-green-200">
                <div className="flex items-center mb-4">
                  <CheckCircle className="h-6 w-6 text-green-700 mr-3" />
                  <h4 className="text-xl font-semibold text-gray-800">Cancelamento</h4>
                </div>
                <div className="space-y-3 text-gray-700">
                  <p>
                    <strong>Cancelamentos feitos até 24 horas antes da entrega:</strong> reembolso integral ou crédito para nova data.
                  </p>
                  <p>
                    <strong>Cancelamentos após a entrega ou com menos de 24 horas:</strong> poderá ser cobrada taxa de deslocamento.
                  </p>
                </div>
              </div>

              <div className="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
                <div className="flex items-center mb-4">
                  <Truck className="h-6 w-6 text-yellow-700 mr-3" />
                  <h4 className="text-xl font-semibold text-gray-800">Troca de Caçamba</h4>
                </div>
                <p className="text-gray-700">
                  Caso seja necessário substituir a caçamba (por tamanho ou excesso de entulho), uma nova taxa de transporte poderá ser aplicada.
                </p>
              </div>
            </div>

            <div className="bg-gray-50 p-8 rounded-lg border-l-4 border-blue-700">
              <div className="flex items-center mb-4">
                <Phone className="h-6 w-6 text-blue-700 mr-3" />
                <h4 className="text-xl font-semibold text-gray-800">Contato para Troca/Cancelamento</h4>
              </div>
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <p className="text-gray-700 mb-4">
                    <strong>Telefone:</strong> (11) 5295-1951<br />
                    <strong>Horário de atendimento:</strong> segunda a sábado, 8h às 18h
                  </p>
                </div>
                <div className="flex flex-col sm:flex-row gap-3">
                  <a 
                    href="tel:1152951951"
                    className="bg-blue-700 hover:bg-blue-800 text-white px-6 py-3 rounded-lg font-semibold transition-all flex items-center justify-center space-x-2"
                  >
                    <Phone className="h-5 w-5" />
                    <span>Ligar Agora</span>
                  </a>
                  <button 
                    onClick={() => window.open('https://wa.me/5511952951951?text=Olá! Preciso fazer uma alteração ou cancelamento no meu pedido de caçamba.', '_blank')}
                    className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-semibold transition-all flex items-center justify-center space-x-2"
                  >
                    <MessageCircle className="h-5 w-5" />
                    <span>WhatsApp</span>
                  </button>
                </div>
              </div>
            </div>

            <div className="mt-8 bg-blue-50 p-6 rounded-lg border border-blue-200">
              <div className="flex items-start space-x-3">
                <AlertCircle className="h-6 w-6 text-blue-700 mt-0.5" />
                <div>
                  <h5 className="font-semibold text-blue-800 mb-2">Importante</h5>
                  <p className="text-blue-700">
                    Para garantir o melhor atendimento e evitar taxas adicionais, recomendamos entrar em contato 
                    com antecedência sempre que precisar fazer alterações em seu pedido. Nossa equipe está 
                    sempre disponível para ajudar e encontrar a melhor solução para suas necessidades.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Formulário de Contato */}
      <section id="contato" className="py-16 bg-blue-900">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl mx-auto">
            <div className="text-center mb-12">
              <h3 className="text-3xl font-bold text-white mb-4">Solicite Seu Orçamento</h3>
              <p className="text-lg text-blue-100">
                Preencha os dados abaixo e entraremos em contato rapidamente
              </p>
            </div>

            <form onSubmit={handleSubmit} className="bg-white p-8 rounded-lg shadow-lg">
              <div className="grid md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label htmlFor="nome" className="block text-sm font-medium text-gray-700 mb-2">
                    Nome Completo
                  </label>
                  <input
                    type="text"
                    id="nome"
                    name="nome"
                    value={formData.nome}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Seu nome completo"
                  />
                </div>

                <div>
                  <label htmlFor="telefone" className="block text-sm font-medium text-gray-700 mb-2">
                    Telefone
                  </label>
                  <input
                    type="tel"
                    id="telefone"
                    name="telefone"
                    value={formData.telefone}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="(11) 99999-9999"
                  />
                </div>
              </div>

              <div className="mb-6">
                <label htmlFor="endereco" className="block text-sm font-medium text-gray-700 mb-2">
                  Endereço da Obra
                </label>
                <input
                  type="text"
                  id="endereco"
                  name="endereco"
                  value={formData.endereco}
                  onChange={handleInputChange}
                  required
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="Rua, número, bairro - São Paulo, SP"
                />
              </div>

              <button
                type="submit"
                className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-6 rounded-lg transition-colors flex items-center justify-center space-x-2"
              >
                <MessageCircle className="h-5 w-5" />
                <span>Enviar via WhatsApp</span>
              </button>

              <p className="text-sm text-gray-600 text-center mt-4">
                Ou ligue diretamente para: <strong>(11) 5295-1951</strong>
              </p>
            </form>
          </div>
        </div>
      </section>

      {/* Rodapé */}
      <footer className="bg-gray-800 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Truck className="h-8 w-8 text-yellow-400" />
                <h4 className="text-2xl font-bold">As Coleta Urbano</h4>
              </div>
              <p className="text-gray-300 mb-4">
                Especialistas em aluguel de caçambas de entulho em São Paulo. 
                Rapidez, segurança e preço justo para sua obra.
              </p>
              <div className="flex space-x-4 mt-6">
                <button 
                  onClick={() => window.open('https://wa.me/5511952951951', '_blank')}
                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors flex items-center space-x-2"
                >
                  <MessageCircle className="h-4 w-4" />
                  <span>WhatsApp</span>
                </button>
                <a 
                  href="tel:1152951951"
                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors flex items-center space-x-2"
                >
                  <Phone className="h-4 w-4" />
                  <span>Ligar</span>
                </a>
              </div>
            </div>

            <div>
              <h5 className="text-lg font-semibold mb-4">Contato</h5>
              <div className="space-y-3">
                <a 
                  href="tel:1152951951" 
                  className="flex items-center space-x-2 text-yellow-400 hover:text-yellow-300 transition-colors"
                >
                  <Phone className="h-5 w-5" />
                  <span>(11) 5295-1951</span>
                </a>
                <div className="flex items-center space-x-2 text-gray-300">
                  <MapPin className="h-5 w-5" />
                  <span>São Paulo - SP</span>
                </div>
                <div className="flex items-center space-x-2 text-gray-300">
                  <Clock className="h-5 w-5" />
                  <span>Seg a Sáb: 8h às 18h</span>
                </div>
              </div>
            </div>

            <div>
              <h5 className="text-lg font-semibold mb-4">Menu</h5>
              <div className="grid grid-cols-1 gap-4">
                <div>
                  <h6 className="font-medium text-yellow-400 mb-2">Serviços</h6>
                  <ul className="space-y-1 text-sm text-gray-300">
                    <li>• Aluguel de Caçambas Diário</li>
                    <li>• Aluguel de Caçambas Semanal</li>
                    <li>• Atendimento PF e PJ</li>
                    <li>• Entrega em Toda São Paulo</li>
                  </ul>
                </div>
                <div>
                  <h6 className="font-medium text-yellow-400 mb-2">Políticas</h6>
                  <ul className="space-y-1 text-sm text-gray-300">
                    <li>
                      <button 
                        onClick={() => document.getElementById('politica-troca')?.scrollIntoView({ behavior: 'smooth' })}
                        className="hover:text-yellow-400 transition-colors text-left"
                      >
                        • Política de Troca
                      </button>
                    </li>
                    <li>
                      <button 
                        onClick={() => window.open('https://wa.me/5511952951951?text=Olá! Gostaria de informações sobre a política de privacidade.', '_blank')}
                        className="hover:text-yellow-400 transition-colors text-left"
                      >
                        • Política de Privacidade
                      </button>
                    </li>
                    <li>
                      <button 
                        onClick={() => window.open('https://wa.me/5511952951951?text=Olá! Gostaria de rastrear minha caçamba.', '_blank')}
                        className="hover:text-yellow-400 transition-colors text-left"
                      >
                        • Rastreio de Caçamba
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div className="border-t border-gray-700 mt-8 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
              <p className="text-gray-400 text-sm">
                &copy; 2024 As Coleta Urbano. Todos os direitos reservados.
              </p>
              <div className="flex items-center space-x-4 text-sm text-gray-400">
                <span>Cadastro AMLURB: 0890</span>
                <span>•</span>
                <span>CNPJ: XX.XXX.XXX/0001-XX</span>
              </div>
            </div>
          </div>
        </div>
      </footer>

      {/* Botão Flutuante WhatsApp */}
      <div className="fixed bottom-6 right-6 z-50">
        <a
          href="https://wa.me/5511952951951"
          target="_blank"
          rel="noopener noreferrer"
          className="bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-lg transition-all transform hover:scale-110 flex items-center justify-center"
        >
          <MessageCircle className="h-6 w-6" />
        </a>
      </div>
    </div>
  );
}

export default App;