* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
min-height: 100vh;
padding: 20px;
}

.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.header {
background: #25D366;
color: white;
padding: 30px;
text-align: center;
}

.header h1 {
font-size: 2rem;
margin-bottom: 10px;
}

.header p {
opacity: 0.9;
font-size: 1.1rem;
}

.form-container {
padding: 40px;
}

.form-group {
margin-bottom: 25px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-size: 1rem;
}

input, textarea {
width: 100%;
padding: 15px;
border: 2px solid #e1e1e1;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
font-family: inherit;
}

input:focus, textarea:focus {
outline: none;
border-color: #25D366;
box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
}

textarea {
resize: vertical;
min-height: 100px;
}

.phone-input {
position: relative;
}

.phone-prefix {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #666;
font-weight: 500;
}

.phone-input input {
padding-left: 45px;
}

.help-text {
font-size: 0.9rem;
color: #666;
margin-top: 5px;
line-height: 1.4;
}

.button-group {
display: flex;
gap: 15px;
margin-top: 30px;
}

button {
flex: 1;
padding: 15px 25px;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.btn-generate {
background: #25D366;
color: white;
}

.btn-generate:hover {
background: #20b358;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.btn-clear {
background: #f1f1f1;
color: #333;
}

.btn-clear:hover {
background: #e1e1e1;
}

.result-container {
margin-top: 30px;
padding: 25px;
background: #f8f9fa;
border-radius: 15px;
border-left: 5px solid #25D366;
display: none;
}

.result-container.show {
display: block;
animation: slideIn 0.3s ease;
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.result-title {
font-weight: 600;
color: #333;
margin-bottom: 15px;
font-size: 1.1rem;
}

.result-link {
background: white;
padding: 15px;
border-radius: 8px;
border: 1px solid #ddd;
word-break: break-all;
font-family: ‘Courier New’, monospace;
font-size: 0.9rem;
margin-bottom: 15px;
position: relative;
}

.copy-btn {
background: #007bff;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.3s ease;
}

.copy-btn:hover {
background: #0056b3;
}

.copy-btn.copied {
background: #28a745;
}

.test-link {
display: inline-block;
background: #25D366;
color: white;
padding: 12px 20px;
text-decoration: none;
border-radius: 8px;
margin-top: 10px;
font-weight: 600;
transition: all 0.3s ease;
}

.test-link:hover {
background: #20b358;
transform: translateY(-2px);
}

.error {
color: #dc3545;
font-size: 0.9rem;
margin-top: 5px;
display: none;
}

.error.show {
display: block;
}

@media (max-width: 768px) {
.container {
margin: 10px;
border-radius: 15px;
}

.header {
padding: 20px;
}

.header h1 {
font-size: 1.5rem;
}

.form-container {
padding: 25px;
}

.button-group {
flex-direction: column;
}
}

document.getElementById(‘whatsappForm’).addEventListener(‘submit’, function(e) {
e.preventDefault();
generateWhatsAppLink();
});

function generateWhatsAppLink() {
const phone = document.getElementById(‘phone’).value.trim();
const message = document.getElementById(‘message’).value.trim();
const phoneError = document.getElementById(‘phoneError’);
const resultContainer = document.getElementById(‘resultContainer’);

// Limpar erros anteriores
phoneError.classList.remove(‘show’);

// Validar número de telefone
if (!validatePhone(phone)) {
phoneError.classList.add(‘show’);
resultContainer.classList.remove(‘show’);
return;
}

// Limpar número (remover caracteres não numéricos)
const cleanPhone = phone.replace(/D/g, ”);

// Construir URL base
let whatsappUrl = `https://wa.me/${cleanPhone}`;

// Adicionar mensagem se fornecida
if (message) {
const encodedMessage = encodeURIComponent(message);
whatsappUrl += `?text=${encodedMessage}`;
}

// Exibir resultado
displayResult(whatsappUrl);
}

function validatePhone(phone) {
// Remover caracteres não numéricos para validação
const cleanPhone = phone.replace(/D/g, ”);

// Verificar se tem pelo menos 10 dígitos (mínimo para um número internacional)
// e no máximo 15 dígitos (padrão ITU-T E.164)
return cleanPhone.length >= 10 && cleanPhone.length <= 15;
}

function displayResult(url) {
const resultContainer = document.getElementById('resultContainer');
const generatedLink = document.getElementById('generatedLink');
const testLink = document.getElementById('testLink');

generatedLink.textContent = url;
testLink.href = url;
resultContainer.classList.add('show');

// Scroll suave para o resultado
resultContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function copyLink() {
const linkText = document.getElementById('generatedLink').textContent;
const copyBtn = document.querySelector('.copy-btn');

navigator.clipboard.writeText(linkText).then(function() {
const originalText = copyBtn.textContent;
copyBtn.textContent = '✅ Copiado!';
copyBtn.classList.add('copied');

setTimeout(function() {
copyBtn.textContent = originalText;
copyBtn.classList.remove('copied');
}, 2000);
}).catch(function(err) {
// Fallback para navegadores mais antigos
const textArea = document.createElement('textarea');
textArea.value = linkText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);

const originalText = copyBtn.textContent;
copyBtn.textContent = ' Copiado!';
copyBtn.classList.add('copied');

setTimeout(function() {
copyBtn.textContent = originalText;
copyBtn.classList.remove('copied');
}, 2000);
});
}

function clearForm() {
document.getElementById('phone').value = '';
document.getElementById('message').value = '';
document.getElementById('phoneError').classList.remove('show');
document.getElementById('resultContainer').classList.remove('show');
}

// Formatação automática do número de telefone (opcional)
document.getElementById('phone').addEventListener('input', function(e) {
// Remove caracteres não numéricos
let value = e.target.value.replace(/D/g, '');
e.target.value = value;
});

// Exemplo de uso ao carregar a página
window.addEventListener('load', function() {
// Você pode adicionar exemplos ou dicas aqui
console.log('Gerador de Links WhatsApp carregado com sucesso!');
});