import { useState, useEffect } from "react"; // ─── PALETA ────────────────────────────────────────────────────────────────── const C = { navy: '#0D1B33', navyMid: '#162748', brass: '#C4961A', brassHov: '#D4A620', offWhite: '#F5F3EE', white: '#FFFFFF', dark: '#1A1918', mid: '#6B6966', muted: '#9D9A96', border: '#E2DDD8', green: '#25D366', }; const DP = { fontFamily: "'Barlow Condensed','Arial Narrow',sans-serif" }; const BP = { fontFamily: "'Inter','Helvetica Neue',sans-serif" }; // ─── PRODUTOS ───────────────────────────────────────────────────────────────── const PRODS = [ { id:'k1', cat:'kits', name:'Kit Básico', price:499, tag:'Mais Vendido', desc:'Para primeiros atendimentos residenciais. Material essencial, qualidade profissional desde o primeiro dia.', itens:['20 chaves virgens residenciais','Jogo de gazuas básico','Duplicadora manual','Suporte técnico via WhatsApp'] }, { id:'k2', cat:'kits', name:'Kit Intermediário', price:699, tag:'Recomendado', desc:'Operação residencial completa. Para quem quer atender com qualidade desde o início.', itens:['40 chaves virgens residenciais','Jogo de gazuas completo','Duplicadora profissional','Ferramentas de apoio','Suporte técnico via WhatsApp'] }, { id:'k3', cat:'kits', name:'Kit Completo', price:999, tag:'Melhor Custo-Benefício', desc:'Residencial + automotivo. Para quem pensa grande desde o início da carreira.', itens:['50 chaves virgens residenciais','10 chaves automotivas virgens','Jogo de gazuas profissional','Transponders básicos','Suporte técnico via WhatsApp'] }, { id:'r1', cat:'residencial', name:'Chaves Virgens Residenciais', price:12.90, desc:'Caixa com 50 unidades. Diversas bitolas disponíveis.' }, { id:'r2', cat:'residencial', name:'Fechadura Alta Segurança', price:89.90, desc:'Aço temperado. 3 chaves inclusas. Porta externa.' }, { id:'r3', cat:'residencial', name:'Cilindro Europeu Segredo', price:45.00, desc:'Alta resistência. 3 chaves. Múltiplas bitolas.' }, { id:'r4', cat:'residencial', name:'Jogo de Gazuas Profissional', price:120.00, desc:'10 peças em aço carbono. Para chaveiro profissional.' }, { id:'a1', cat:'automotivo', name:'Chave Automotiva HU66', price:18.50, desc:'Virgem. VW / Audi. Alta precisão de corte.' }, { id:'a2', cat:'automotivo', name:'Transponder ID47 Original', price:35.00, desc:'Honda / Toyota. Original. Pronto para programação.' }, { id:'a3', cat:'automotivo', name:'Controle Remoto Universal 3B', price:42.00, desc:'3 botões. Programável. Compatível com diversas marcas.' }, { id:'a4', cat:'automotivo', name:'Chave Canivete c/ Lâmina', price:28.00, desc:'Lâmina virgem inclusa. Compatível com múltiplos modelos.' }, ]; const WA = '5531999999999'; // ⚠️ substituir pelo número real // ─── HELPERS ───────────────────────────────────────────────────────────────── function brl(v) { const p = v.toFixed(2).split('.'); return 'R$\u00A0' + p[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ',' + p[1]; } function waLink(msg) { return `https://wa.me/${WA}?text=${encodeURIComponent(msg)}`; } function openWA(msg) { window.open(waLink(msg), '_blank'); } // ─── TAG COLORS ─────────────────────────────────────────────────────────────── const kitTag = { k1:{ bg:'#4F46E5', col:'#fff' }, k2:{ bg:C.brass, col:C.navy }, k3:{ bg:'#059669', col:'#fff' } }; const catBadge = { kits: { bg:'#FEF3C7', col:'#92400E', label:'Kit Iniciante' }, residencial:{ bg:'#F0FDF4', col:'#15803D', label:'Residencial' }, automotivo: { bg:'#EFF6FF', col:'#1D4ED8', label:'Automotivo' }, }; // ─── KEY SVG BACKGROUND ─────────────────────────────────────────────────────── function KeyBg({ opacity=0.07, size=800 }) { return ( ); } // ─── LOGO ICON ──────────────────────────────────────────────────────────────── function LogoIcon({ size=26, color=C.navy }) { return ( ); } // ═════════════════════════════════════════════════════════════════════════════ // APP // ═════════════════════════════════════════════════════════════════════════════ export default function App() { const [pg, setPg] = useState('home'); const [cart, setCart] = useState([]); const [cartOpen, setCartOpen] = useState(false); const [filter, setFilter] = useState('todos'); // ── Injetar fontes + keyframes ── useEffect(() => { const s = document.createElement('style'); s.textContent = ` @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{background:${C.offWhite}} @keyframes waWave{0%,100%{box-shadow:0 4px 18px rgba(37,211,102,.5)}50%{box-shadow:0 4px 28px rgba(37,211,102,.9),0 0 0 9px rgba(37,211,102,.12)}} @keyframes slideIn{from{right:-440px}to{right:0}} input:focus,textarea:focus{outline:2px solid ${C.brass}!important;outline-offset:0} button:active{opacity:.88} `; document.head.appendChild(s); return () => { try { document.head.removeChild(s); } catch(e) {} }; }, []); // ── Navegação ── const go = (p) => { setPg(p); setCartOpen(false); window.scrollTo(0,0); }; // ── Carrinho ── const addItem = (prod) => setCart(prev => { const ex = prev.find(i => i.id === prod.id); if (ex) return prev.map(i => i.id===prod.id ? {...i, qty:i.qty+1} : i); return [...prev, {...prod, qty:1}]; }); const updQty = (id, d) => setCart(prev => prev.map(i => i.id===id ? {...i, qty:i.qty+d} : i).filter(i=>i.qty>0) ); const cartN = cart.reduce((s,i)=>s+i.qty, 0); const cartTot = cart.reduce((s,i)=>s+i.price*i.qty, 0); // ── Checkout ── const waCheckout = () => { if (!cart.length) return; const lines = cart.map(i=>`• ${i.qty}x ${i.name}: ${brl(i.price*i.qty)}`).join('\n'); openWA(`Olá, Land Minas!\n\nVim pelo site e gostaria de fazer um pedido:\n\n${lines}\n\nTotal: ${brl(cartTot)}\n\nAguardo retorno!`); }; const waDirect = (prod) => openWA(`Olá, Land Minas!\n\nVim pelo site e tenho interesse em:\n• 1x ${prod.name}: ${brl(prod.price)}\n\nPoderia me ajudar?`); const filtered = filter==='todos' ? PRODS : PRODS.filter(p=>p.cat===filter); // ══════════════════════════════════════════════════════════════════════════ // NAVBAR // ══════════════════════════════════════════════════════════════════════════ const Nav = () => ( ); // ══════════════════════════════════════════════════════════════════════════ // HOME // ══════════════════════════════════════════════════════════════════════════ const Home = () => ( <> {/* HERO */}
Distribuidora Oficial · BH e Região

MATERIAL DE
CHAVEIRO
PROFISSIONAL

Representante oficial de fábrica. Chaves, fechaduras e equipamentos automotivos com procedência garantida para chaveiros de BH.

{/* BARRA DE STATS */}
{[['150+','Clientes Ativos'],['4 Anos','no Mercado'],['2','Empresas'],['Fábrica','Representante Oficial']].map(([n,l])=>(
{n}
{l}
))}
{/* KITS */}
Para Quem Está Começando

KITS PARA INICIANTES

Tudo o que você precisa para começar, montado por quem entende do mercado. Sem precisar saber o que comprar.

{PRODS.filter(p=>p.cat==='kits').map((p,i)=>{ const ts = kitTag[p.id]; const featured = i===1; return (
{p.tag}
{p.name}

{p.desc}

    {p.itens.map(it=>(
  • ✓{it}
    • ))}
{brl(p.price)}
); })}
{/* PRODUTOS EM DESTAQUE */}
Catálogo

PRODUTOS EM DESTAQUE

{PRODS.filter(p=>p.cat!=='kits').slice(0,8).map(p=>{ const cb = catBadge[p.cat]; return (
{p.cat==='automotivo' ? '🚗' : '🔑'}
{cb.label}
{p.name}
{p.desc}
{brl(p.price)}
); })}
{/* POR QUE NÓS */}

POR QUE ESCOLHER A LAND MINAS?

{[ ['🏭','Representante Oficial','Produto original com procedência certificada. Direto da fábrica, sem intermediários no meio.'], ['🚚','Entrega Rápida em BH','Atendimento local ágil. Presença em BH e toda a região metropolitana.'], ['📦','Portfólio Completo','Residencial e automotivo em um só fornecedor. Uma parceria, tudo resolvido.'], ['🎓','Apoio ao Iniciante','Kits prontos + suporte técnico WhatsApp para quem está começando na profissão.'], ].map(([icon, title, desc])=>(
{icon}
{title}
{desc}
))}
{/* CTA FINAL */}

PRONTO PARA COMPRAR?

Fale com nossa equipe no WhatsApp ou explore o catálogo completo.

); // ══════════════════════════════════════════════════════════════════════════ // PRODUTOS // ══════════════════════════════════════════════════════════════════════════ const Produtos = () => (

CATÁLOGO

Produtos originais com procedência garantida. Entrega em toda BH e região.

{/* Filtros */}
{[['todos','🗂 Todos'],['kits','🎁 Kits Iniciante'],['residencial','🏠 Residencial'],['automotivo','🚗 Automotivo']].map(([id,label])=>( ))}
{filtered.map(p=>{ const cb = catBadge[p.cat]; const ts = kitTag[p.id]; return (
{p.tag && ts &&
{p.tag}
}
{p.cat==='kits'?'🎁':p.cat==='automotivo'?'🚗':'🔑'}
{cb.label}
{p.name}
{p.desc}
{p.itens && (
    {p.itens.map(it=>(
  • ✓{it}
    • ))}
)}
{brl(p.price)}
); })}
); // ══════════════════════════════════════════════════════════════════════════ // SOBRE // ══════════════════════════════════════════════════════════════════════════ const Sobre = () => (
Nossa História

REFERÊNCIA EM
MATERIAL DE
CHAVEIRO EM BH

Há 4 anos sendo o parceiro de confiança do chaveiro profissional em Belo Horizonte e região metropolitana.

QUEM SOMOS

A Land Minas é uma distribuidora B2B especializada em materiais e equipamentos para chaveiros profissionais em Belo Horizonte e região metropolitana.

Como representante oficial de fábrica, garantimos acesso direto a produtos originais com procedência certificada — sem intermediários, com preço competitivo.

Atendemos tanto o chaveiro residencial quanto o especialista automotivo, com portfólio completo: desde chaves virgens e fechaduras até transponders e equipamentos de programação.

{[ ['🏭','Representante Oficial de Fábrica','Produto original direto da indústria. Qualidade e procedência em todo o portfólio.'], ['📦','Portfólio Completo','Residencial e automotivo em um só lugar. Um fornecedor, tudo resolvido.'], ['🤝','Parceria de Longo Prazo','Mais de 150 clientes ativos que confiam na Land Minas há anos.'], ['🎓','Apoio ao Iniciante','Kits prontos e suporte técnico para quem está começando na profissão.'], ].map(([icon, title, desc])=>(
{icon}
{title}
{desc}
))}
{[['150+','Clientes Ativos'],['4','Anos de Mercado'],['2','Empresas'],['100%','Produto Original']].map(([n,l])=>(
{n}
{l}
))}

PARCERIA COM A JR CURSOS

Somos parceiros da JR Cursos, escola de formação de chaveiros. Alunos recém-formados têm condições especiais de acesso ao portfólio da Land Minas.

); // ══════════════════════════════════════════════════════════════════════════ // CONTATO // ══════════════════════════════════════════════════════════════════════════ const Contato = () => (
Estamos Aqui

FALE COM A
LAND MINAS

Atendimento rápido via WhatsApp no horário comercial.

PREFERE O WHATSAPP?

A maioria dos pedidos passa pelo WhatsApp. Rápido, direto, retorno em minutos no horário comercial.

{[ ['📍','Endereço','Belo Horizonte, MG — BH e Região Metropolitana'], ['⏰','Horário','Seg a Sex: 8h às 18h | Sáb: 8h às 12h'], ['📧','E-mail','contato@landminas.com.br'], ].map(([icon, label, value])=>(
{icon}
{label}
{value}
))}

ENVIAR MENSAGEM

{[['Nome completo','text','Seu nome'],['Empresa / Estabelecimento','text','Sua empresa'],['WhatsApp','tel','(31) 9 0000-0000'],['E-mail','email','seu@email.com']].map(([label,type,ph])=>(
))}
' +'' +'' +'
'; } html+='
'; painel.innerHTML=html; /* Máscara de telefone no orçamento */ var telOrc=document.getElementById('sb-orc-tel'); if(telOrc)telOrc.addEventListener('input',function(){window._sbMascaraTel(this);}); /* Bind enviar */ var btnEnviar=document.getElementById('sb-orc-enviar'); if(btnEnviar){ btnEnviar.addEventListener('click',function(){ var nome=document.getElementById('sb-orc-nome').value.trim(); var email=document.getElementById('sb-orc-email').value.trim(); var tel=document.getElementById('sb-orc-tel').value.trim(); var msg=document.getElementById('sb-orc-msg').value.trim(); var fb=document.getElementById('sb-orc-feedback'); if(!nome){fb.style.display='block';fb.style.background='#f8d7da';fb.style.color='#721c24';fb.textContent='Preencha seu nome.';return;} if(!email&&!tel){fb.style.display='block';fb.style.background='#f8d7da';fb.style.color='#721c24';fb.textContent='Preencha e-mail ou telefone.';return;} if(email&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){fb.style.display='block';fb.style.background='#f8d7da';fb.style.color='#721c24';fb.textContent='E-mail inválido.';return;} btnEnviar.disabled=true;btnEnviar.textContent='Enviando...'; function doSendOrc(token){ fetch('/api/public/orcamento',{ method:'POST', headers:{'Content-Type':'application/json','Accept':'application/json'}, body:JSON.stringify({nome:nome,email:email,telefone:tel,mensagem:msg,itens:getCart(),'g-recaptcha-response':token||''}) }).then(function(r){return r.json();}).then(function(res){ if(res.code===200||res.status==='success'){ fb.style.display='block';fb.style.background='#d4edda';fb.style.color='#155724';fb.textContent=res.message||'Orçamento enviado com sucesso!'; saveCart([]);atualizarBadge(); setTimeout(function(){atualizarPainel();painel.style.right='-420px';},2000); }else{ var errMsg=res.message||'Erro ao enviar.'; if(res.data&&res.data.errors){errMsg=Object.values(res.data.errors).flat().join(', ');} fb.style.display='block';fb.style.background='#f8d7da';fb.style.color='#721c24';fb.textContent=errMsg; btnEnviar.disabled=false;btnEnviar.textContent='Solicitar orçamento'; } }).catch(function(){ fb.style.display='block';fb.style.background='#f8d7da';fb.style.color='#721c24';fb.textContent='Erro de conexão.'; btnEnviar.disabled=false;btnEnviar.textContent='Solicitar orçamento'; }); } /* reCAPTCHA v3 se disponível */ var rcKey=typeof window._sbRecaptchaKey!=='undefined'?window._sbRecaptchaKey:''; if(rcKey&&typeof grecaptcha!=='undefined'){ grecaptcha.ready(function(){grecaptcha.execute(rcKey,{action:'orcamento'}).then(doSendOrc);}); }else{ doSendOrc(''); } }); } } window._sbRemoveCart=removeFromCart; atualizarBadge(); /* Bind botões "solicitar orçamento" já renderizados no HTML estático */ var orcBtns=document.querySelectorAll('.sb-add-orc'); for(var ob=0;obSolicitar orçamento';},1500); atualizarPainel();painel.style.right='0px'; }); } })(); /* ═══ FAQ Accordion ═══ */ (function(){ var faqs=document.querySelectorAll('[data-sb-faq="1"]'); for(var f=0;f' +'' +'' +'
' +'
'; document.body.appendChild(overlay); var galData=[]; for(var i=0;i11)v=v.substring(0,11); if(v.length>10){ v=v.replace(/^(\d{2})(\d{5})(\d{4}).*/,'($1) $2-$3'); }else if(v.length>6){ v=v.replace(/^(\d{2})(\d{4})(\d{0,4}).*/,'($1) $2-$3'); }else if(v.length>2){ v=v.replace(/^(\d{2})(\d{0,5}).*/,'($1) $2'); }else if(v.length>0){ v=v.replace(/^(\d{0,2}).*/,'($1'); } el.value=v; }; /* Aplicar máscara nos campos de telefone do formulário de contato */ (function(){ var tels=document.querySelectorAll('.sb-form-contato input[name="telefone"], .sb-form-contato input[type="tel"]'); for(var i=0;i