// Sherlock BR — camada compartilhada (header, footer, seções, widget)
// BASE é definido por cada página antes do carregamento deste arquivo.
const BASE = (typeof window !== 'undefined' && window.SB_BASE) || '';
const IS_HOME = !!(typeof window !== 'undefined' && window.SB_IS_HOME);
const SB_PAGE = (typeof window !== 'undefined' && window.SB_PAGE) || 'home';
const HOME_URL = BASE + 'index.html';
const BLOG_DIR = BASE + 'blog/';
const PAGE_URL = {
  services: BASE+'servicos/index.html', sobre: BASE+'sobre/index.html', diagnostico: BASE+'diagnostico/index.html',
  locacao: BASE+'locacao/index.html',
  contato: BASE+'contato/index.html', blog: BLOG_DIR+'index.html', home: HOME_URL,
};
const scrollToId = (id) => {
  const el = document.getElementById(id);
  if (!el) return false;
  window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior:'smooth' });
  return true;
};
const onNav = (id) => {
  if (id === 'home' && IS_HOME) { window.scrollTo({ top:0, behavior:'smooth' }); return; }
  if (IS_HOME && scrollToId(id)) return;
  if (PAGE_URL[id]) { window.location.href = PAGE_URL[id]; return; }
  window.location.href = HOME_URL + '#' + id;
};

const { useState, useEffect, useRef } = React;

// ─── SVG Icon component (React-safe, no DOM mutation) ────────────────────────
const Icon = ({ name, size=20, color='currentColor', sw=1.75, style={} }) => {
  const d = {
    printer: <><rect width="16" height="12" x="4" y="2" rx="2"/><path d="M22 8H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M22 8h-2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2"/><path d="M6 18h12v4H6z"/><path d="M6 14h.01"/></>,
    'wifi-off': <><line x1="2" y1="2" x2="22" y2="22"/><path d="M8.5 16.5a5 5 0 0 1 7 0"/><path d="M2 8.82a15 15 0 0 1 4.17-2.65"/><path d="M10.66 5c4.01-.36 8.14.9 11.34 3.76"/><path d="M16.85 11.25a10 10 0 0 1 2.22 1.68"/><path d="M5 12.55a10 10 0 0 1 5.17-2.39"/><circle cx="12" cy="20" r="1"/></>,
    'shield-alert': <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>,
    'message-circle': <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    'map-pin': <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    'file-text': <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>,
    'check-circle': <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></>,
    'check-circle-2': <><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></>,
    'arrow-right': <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    'chevron-right': <><polyline points="9 18 15 12 9 6"/></>,
    search: <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    stethoscope: <><path d="M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .3.3"/><path d="M8 15v1a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6v-4"/><circle cx="20" cy="10" r="2"/></>,
    monitor: <><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></>,
    server: <><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></>,
    wifi: <><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1"/></>,
    'shield-check': <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></>,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>,
    database: <><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></>,
    headphones: <><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    'building-2': <><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></>,
    factory: <><path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/><path d="M17 18h1"/><path d="M12 18h1"/><path d="M7 18h1"/></>,
    'heart-pulse': <><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/><path d="M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27"/></>,
    'shopping-bag': <><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></>,
    home: <><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    'alert-triangle': <><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
    'monitor-smartphone': <><rect width="10" height="14" x="3" y="8" rx="2"/><path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4"/><path d="M8 18h.01"/></>,
    'layout-dashboard': <><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></>,
    'grid-3x3': <><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></>,
    map: <><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></>,
    wrench: <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></>,
    'pen-line': <><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></>,
    'package-check': <><path d="m16 16 2 2 4-4"/><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 1 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14"/><path d="m7.5 4.27 9 5.15"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/></>,
    activity: <><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></>,
    handshake: <><path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 1 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l1.71 1.71"/><path d="m2 2 20 20"/><path d="M8.71 8.71 6 11.41a5.79 5.79 0 0 0 0 8.19l.59.59a5.79 5.79 0 0 0 8.19 0l.59-.59"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
    cross: <><path d="M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2h-2z"/></>,
    'map-pin-off': <><path d="M12 22s-8-6-8-13c0-1.7.4-3.4 1.2-4.8"/><path d="M5.6 5.6A7 7 0 0 1 19 10c0 3.1-1.6 5.9-3.4 8.2"/><line x1="2" y1="2" x2="22" y2="22"/></>,
    navigation: <><polygon points="3 11 22 2 13 21 11 13 3 11"/></>,
  };
  const paths = d[name];
  if (!paths) return <svg width={size} height={size} viewBox="0 0 24 24" style={style}/>;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths}
    </svg>
  );
};

// ─── WhatsApp SVG ─────────────────────────────────────────────────────────────
const WAIcon = ({ size=20, color='currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
  </svg>
);

const WA_LINK = "https://wa.me/5521966811227?text=Ol%C3%A1%2C%20gostaria%20de%20agendar%20um%20diagn%C3%B3stico%20gratuito.";
const PATTERN = BASE + "assets/Pattern.png";
const SOCIAL = [
  { name:'Instagram', href:'https://www.instagram.com/sherlockbr.oficial/' },
  { name:'LinkedIn',  href:'https://www.linkedin.com/company/sherlockbr' },
  { name:'Facebook',  href:'https://www.facebook.com/sherlockbr.oficial' },
];
const WA_NUM = "5521966811227";
const waLink = (msg) => `https://wa.me/${WA_NUM}?text=${encodeURIComponent(msg)}`;

// ─── Lead Widget — WhatsApp conversacional (motor de captação) ─────────────────
const LeadWidget = () => {
  const [open, setOpen] = useState(false);
  const [nudge, setNudge] = useState(false);

  useEffect(() => {
    if (typeof sessionStorage !== 'undefined' && sessionStorage.getItem('sb_nudge')) return;
    const t = setTimeout(() => setNudge(true), 5500);
    return () => clearTimeout(t);
  }, []);

  const dismissNudge = () => { setNudge(false); try { sessionStorage.setItem('sb_nudge','1'); } catch(e){} };
  const toggle = () => { dismissNudge(); setOpen(o => !o); };
  const go = (msg) => { window.open(waLink(msg), '_blank', 'noopener'); };

  const intents = [
    { icon:'wrench',        label:'Estou com um problema de TI agora', sub:'Atendimento prioritário', msg:'Olá! Estou com um problema de TI na minha empresa e preciso de ajuda o quanto antes.' },
    { icon:'stethoscope',   label:'Quero o diagnóstico gratuito',       sub:'Análise sem custo',       msg:'Olá! Gostaria de agendar o diagnóstico gratuito de TI para a minha empresa.' },
    { icon:'package-check', label:'Locação de equipamentos',            sub:'Computadores e servidores', msg:'Olá! Tenho interesse em locação de equipamentos de TI. Podem me enviar mais informações?' },
    { icon:'headphones',    label:'Falar com um especialista',          sub:'Tirar dúvidas',           msg:'Olá! Gostaria de falar com um especialista da Sherlock BR sobre os serviços de TI.' },
  ];

  return (
    <div style={{ position:'fixed', bottom:26, right:24, zIndex:1000, display:'flex', flexDirection:'column', alignItems:'flex-end', gap:14 }} className="lead-widget">

      {/* Painel de chat */}
      {open && (
        <div style={{
          width:340, maxWidth:'calc(100vw - 32px)', background:'#fff', borderRadius:18,
          boxShadow:'0 24px 70px rgba(1,18,26,0.32)', overflow:'hidden',
          border:'1px solid rgba(22,36,45,0.08)', animation:'fadeInUp 240ms cubic-bezier(.2,.8,.2,1)',
        }}>
          {/* Cabeçalho */}
          <div style={{ background:'linear-gradient(135deg,#012d3a,#16242d)', padding:'18px 18px 16px', display:'flex', alignItems:'center', gap:12, position:'relative' }}>
            <div style={{ width:44, height:44, borderRadius:'50%', background:'#d6b886', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
              <Icon name="shield-check" size={22} color="#16242d" sw={2.2}/>
            </div>
            <div style={{ lineHeight:1.2 }}>
              <div style={{ color:'#fff', fontFamily:"'Poppins',sans-serif", fontWeight:700, fontSize:15 }}>Sherlock BR</div>
              <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:3 }}>
                <span style={{ width:7, height:7, borderRadius:'50%', background:'#25D366', boxShadow:'0 0 0 3px rgba(37,211,102,0.25)' }}></span>
                <span style={{ color:'rgba(255,255,255,0.62)', fontSize:11.5, fontFamily:"'Inter',sans-serif" }}>Online · responde rápido</span>
              </div>
            </div>
            <button onClick={toggle} aria-label="Fechar" style={{ position:'absolute', top:14, right:14, background:'rgba(255,255,255,0.10)', border:'none', cursor:'pointer', width:28, height:28, borderRadius:8, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, lineHeight:1 }}>×</button>
          </div>

          {/* Corpo */}
          <div style={{ padding:'18px 16px 16px', background:'#f6f7f8' }}>
            <div style={{ background:'#fff', border:'1px solid #eceff1', borderRadius:'4px 14px 14px 14px', padding:'12px 14px', marginBottom:14, boxShadow:'0 2px 8px rgba(0,0,0,0.04)' }}>
              <p style={{ fontSize:13.5, color:'#16242d', fontFamily:"'Inter',sans-serif", lineHeight:1.55, margin:0 }}>Olá! Como podemos ajudar a sua empresa hoje? Escolha uma opção e continue agora no WhatsApp.</p>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
              {intents.map(it => (
                <button key={it.label} onClick={() => go(it.msg)} className="lw-intent" style={{
                  display:'flex', alignItems:'center', gap:12, width:'100%', textAlign:'left', cursor:'pointer',
                  background:'#fff', border:'1px solid #e6e9eb', borderRadius:12, padding:'11px 13px',
                  fontFamily:"'Inter',sans-serif", transition:'all 180ms ease',
                }}
                  onMouseEnter={e=>{ e.currentTarget.style.borderColor='#d6b886'; e.currentTarget.style.background='#fffdf8'; e.currentTarget.style.transform='translateX(2px)'; }}
                  onMouseLeave={e=>{ e.currentTarget.style.borderColor='#e6e9eb'; e.currentTarget.style.background='#fff'; e.currentTarget.style.transform='translateX(0)'; }}
                >
                  <span style={{ width:36, height:36, borderRadius:9, background:'rgba(214,184,134,0.14)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                    <Icon name={it.icon} size={17} color="#16242d" sw={2}/>
                  </span>
                  <span style={{ flex:1, minWidth:0 }}>
                    <span style={{ display:'block', fontSize:13, fontWeight:700, color:'#16242d', lineHeight:1.25 }}>{it.label}</span>
                    <span style={{ display:'block', fontSize:11, color:'#8a949a', marginTop:1 }}>{it.sub}</span>
                  </span>
                  <Icon name="chevron-right" size={15} color="#c4cdd2" sw={2.5}/>
                </button>
              ))}
            </div>
          </div>

          {/* Rodapé */}
          <div style={{ padding:'11px 16px', background:'#fff', borderTop:'1px solid #eceff1', display:'flex', alignItems:'center', justifyContent:'center', gap:7 }}>
            <WAIcon size={14} color="#25D366"/>
            <span style={{ fontSize:11.5, color:'#6c757d', fontFamily:"'Inter',sans-serif" }}>Atendimento Seg–Sex, 8h–18h · (21) 96681-1227</span>
          </div>
        </div>
      )}

      {/* Tooltip de atenção (nudge) */}
      {nudge && !open && (
        <div style={{ display:'flex', alignItems:'center', gap:8, background:'#fff', borderRadius:'14px 14px 4px 14px', boxShadow:'0 12px 34px rgba(1,18,26,0.22)', padding:'11px 14px', maxWidth:230, animation:'fadeInUp 300ms ease', cursor:'pointer' }} onClick={toggle}>
          <p style={{ fontSize:13, color:'#16242d', fontFamily:"'Inter',sans-serif", fontWeight:600, lineHeight:1.4, margin:0 }}>Precisa de ajuda com a TI da sua empresa?</p>
          <button onClick={(e)=>{ e.stopPropagation(); dismissNudge(); }} aria-label="Dispensar" style={{ background:'none', border:'none', cursor:'pointer', color:'#aeb6bb', fontSize:16, lineHeight:1, padding:2, flexShrink:0 }}>×</button>
        </div>
      )}

      {/* Botão flutuante (FAB) */}
      <button onClick={toggle} aria-label={open ? 'Fechar atendimento' : 'Abrir atendimento no WhatsApp'} style={{
        position:'relative', width:62, height:62, borderRadius:'50%', border:'none', cursor:'pointer',
        background:'#25D366', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
        boxShadow:'0 10px 34px rgba(37,211,102,0.45)', transition:'transform 220ms ease, box-shadow 220ms ease',
        alignSelf:'flex-end',
      }}
        onMouseEnter={e=>{ e.currentTarget.style.transform='scale(1.07)'; }}
        onMouseLeave={e=>{ e.currentTarget.style.transform='scale(1)'; }}
      >
        {!open && <span style={{ position:'absolute', inset:0, borderRadius:'50%', border:'2px solid #25D366', animation:'pulseRing 2.4s ease-out infinite' }}></span>}
        {open
          ? <span style={{ fontSize:30, lineHeight:1, fontWeight:300 }}>×</span>
          : <WAIcon size={30} color="#fff"/>}
      </button>
    </div>
  );
};


// ─── Header ───────────────────────────────────────────────────────────────────
const NAV = [
  { key:'home', label:'Início', href:HOME_URL, anchor:'home' },
  { key:'services', label:'Serviços', href:PAGE_URL.services },
  { key:'locacao', label:'Locação', href:PAGE_URL.locacao },
  { key:'diagnostico', label:'Diagnóstico', href:PAGE_URL.diagnostico },
  { key:'blog', label:'Blog', href:PAGE_URL.blog },
  { key:'contato', label:'Contato', href:PAGE_URL.contato },
];

const Header = ({ page }) => {
  const cur = page || SB_PAGE;
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const click = (l) => (e) => {
    setMenuOpen(false);
    if (!l.anchor || !IS_HOME) return;
    e.preventDefault();
    if (l.anchor === 'home') window.scrollTo({ top:0, behavior:'smooth' }); else scrollToId(l.anchor);
  };
  const isActive = (l) => l.key === cur;
  return (
    <>
      <header style={{
        position:'fixed', top:0, left:0, right:0, zIndex:1000,
        background: scrolled ? 'rgba(1,45,58,0.98)' : 'rgba(1,45,58,0.88)',
        backdropFilter:'blur(14px)',
        borderBottom: scrolled ? '1px solid rgba(214,184,134,0.22)' : '1px solid rgba(214,184,134,0.08)',
        boxShadow: scrolled ? '0 4px 24px rgba(0,0,0,0.28)' : 'none',
        transition:'all 300ms ease',
      }}>
        <div style={{ maxWidth:1280, margin:'0 auto', padding:'0 32px', height:72, display:'flex', alignItems:'center', gap:40 }}>
          <a href={HOME_URL} aria-label="Sherlock BR — página inicial" style={{ background:'none', border:'none', cursor:'pointer', padding:0, display:'flex', alignItems:'center', flexShrink:0 }}>
            <img src={BASE+"assets/logo.png"} alt="Sherlock BR" style={{ height:44, width:'auto', display:'block', objectFit:'contain' }} />
          </a>
          <nav className="desktop-only" style={{ gap:2, flex:1 }}>
            {NAV.map(l => (
              <a key={l.key} href={l.href} onClick={click(l)} style={{
                background: isActive(l) ? 'rgba(214,184,134,0.10)' : 'none',
                border:'none', cursor:'pointer', padding:'8px 16px',
                fontSize:14, fontFamily:"'Inter',sans-serif", fontWeight:500, borderRadius:6,
                color: isActive(l) ? '#d6b886' : 'rgba(255,255,255,0.75)', transition:'all 200ms', textDecoration:'none',
              }}
                onMouseEnter={e=>{ if(!isActive(l)){ e.currentTarget.style.color='#fff'; e.currentTarget.style.background='rgba(255,255,255,0.06)'; }}}
                onMouseLeave={e=>{ if(!isActive(l)){ e.currentTarget.style.color='rgba(255,255,255,0.75)'; e.currentTarget.style.background='none'; }}}
              >{l.label}</a>
            ))}
          </nav>
          <div style={{ flex:1 }} className="mobile-only"/>
          <a href={WA_LINK} target="_blank" rel="noopener noreferrer" className="desktop-only" style={{
            padding:'10px 20px', background:'#d6b886', color:'#16242d',
            fontFamily:"'Inter',sans-serif", fontSize:13, fontWeight:700,
            borderRadius:7, textDecoration:'none', alignItems:'center', gap:8,
            transition:'all 200ms', whiteSpace:'nowrap',
          }}
            onMouseEnter={e=>{ e.currentTarget.style.background='#c4a673'; e.currentTarget.style.transform='translateY(-1px)'; }}
            onMouseLeave={e=>{ e.currentTarget.style.background='#d6b886'; e.currentTarget.style.transform='translateY(0)'; }}
          >
            <Icon name="stethoscope" size={14} color="#16242d" sw={2.5}/>
            Diagnóstico Gratuito
          </a>
          <button
            className={"hamburger" + (menuOpen?" open":"")}
            aria-label="Abrir menu"
            onClick={() => setMenuOpen(o=>!o)}
          >
            <span/><span/><span/>
          </button>
        </div>
      </header>
      {/* Mobile menu */}
      <div className={"mobile-menu-overlay" + (menuOpen?" open":"")} onClick={() => setMenuOpen(false)}/>
      <div className={"mobile-menu-panel-fixed" + (menuOpen?" open":"")}>
        {NAV.map(l => (
          <a key={l.key} href={l.href} className={"mlink" + (isActive(l)?" active":"")} onClick={click(l)} style={{ textDecoration:'none' }}>
            <span>{l.label}</span>
            <Icon name="chevron-right" size={16} color={isActive(l)?'#d6b886':'rgba(255,255,255,0.4)'} sw={2}/>
          </a>
        ))}
        <a href={WA_LINK} target="_blank" rel="noopener noreferrer" className="mcta" onClick={() => setMenuOpen(false)}>
          <Icon name="stethoscope" size={16} color="#16242d" sw={2.5}/>
          Diagnóstico Gratuito
        </a>
      </div>
      {/* Lead Widget — WhatsApp conversacional */}
      <LeadWidget/>
    </>
  );
};

// ─── HERO 1 — "O Problema" ────────────────────────────────────────────────────
const HeroProblema = ({ onNav }) => {
  const scenes = [
    { icon:'printer', problem:'Impressora parada. Reunião em 10 minutos.', sub:'Cada minuto de downtime custa dinheiro. A Sherlock resolve antes que vire crise.', label:'Suporte Imediato' },
    { icon:'wifi-off', problem:'Queda de conexão. Equipe inteira parada.', sub:'Monitoramento 24/7 que detecta falhas antes que seus funcionários percebam.', label:'Monitoramento 24/7' },
    { icon:'shield-alert', problem:'Vírus. Dados da empresa em risco agora.', sub:'Segurança proativa que blinda sua operação contra ameaças digitais.', label:'Segurança & Proteção' },
  ];
  const [cur, setCur] = useState(0);
  const [vis, setVis] = useState(true);

  useEffect(() => {
    const id = setInterval(() => {
      setVis(false);
      setTimeout(() => { setCur(c => (c+1)%3); setVis(true); }, 350);
    }, 4500);
    return () => clearInterval(id);
  }, []);

  const sc = scenes[cur];

  return (
    <section style={{ position:'relative', minHeight:'100vh', background:'linear-gradient(135deg,#0a1a22 0%,#16242d 100%)', display:'flex', alignItems:'center', overflow:'hidden' }}>
      {/* Animated grid */}
      <div style={{ position:'absolute', inset:0, opacity:.05, backgroundImage:'linear-gradient(rgba(214,184,134,0.9) 1px,transparent 1px),linear-gradient(90deg,rgba(214,184,134,0.9) 1px,transparent 1px)', backgroundSize:'60px 60px', animation:'gridMove 10s linear infinite' }}/>
      {/* Pattern */}
      <div style={{ position:'absolute', inset:0, backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.04 }}/>
      {/* Scanline */}
      <div style={{ position:'absolute', left:0, right:0, height:2, background:'linear-gradient(90deg,transparent,rgba(214,184,134,0.25),transparent)', animation:'scanline 7s linear infinite', pointerEvents:'none' }}/>
      {/* Slide dots */}
      <div style={{ position:'absolute', bottom:36, left:'50%', transform:'translateX(-50%)', display:'flex', gap:10, zIndex:10 }}>
        {scenes.map((_,i) => (
          <button key={i} onClick={() => { setVis(false); setTimeout(() => { setCur(i); setVis(true); }, 200); }} style={{ width:i===cur?28:8, height:8, borderRadius:4, border:'none', cursor:'pointer', background:i===cur?'#d6b886':'rgba(214,184,134,0.28)', transition:'all 350ms' }}/>
        ))}
      </div>
      <div style={{ maxWidth:1280, margin:'0 auto', padding:'110px 32px 90px', position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'center', width:'100%' }}>
        {/* Copy */}
        <div style={{ opacity:vis?1:0, transform:vis?'translateY(0)':'translateY(18px)', transition:'all 400ms ease' }}>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:24, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
            <div style={{ width:6, height:6, borderRadius:'50%', background:'#d6b886', animation:'pulseRing 2s ease infinite' }}/>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>{sc.label}</span>
          </div>
          <h1 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(34px,4vw,58px)', fontWeight:900, color:'#fff', lineHeight:1.07, letterSpacing:'-1.5px', marginBottom:22 }}>
            Sua TI em colapso?<br/><span style={{ color:'#d6b886' }}>A Sherlock cuida.</span>
          </h1>
          <div style={{ fontSize:'clamp(15px,1.6vw,19px)', fontFamily:"'Poppins',sans-serif", fontWeight:700, color:'#fff', marginBottom:10, borderLeft:'3px solid #d6b886', paddingLeft:16 }}>
            "{sc.problem}"
          </div>
          <p style={{ fontSize:15, color:'rgba(255,255,255,0.62)', lineHeight:1.75, fontFamily:"'Inter',sans-serif", marginBottom:38, maxWidth:480 }}>{sc.sub}</p>
          <div style={{ display:'flex', gap:14, flexWrap:'wrap', alignItems:'center' }}>
            <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'14px 28px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:15, fontWeight:800, borderRadius:8, textDecoration:'none', transition:'all 200ms', boxShadow:'0 4px 20px rgba(214,184,134,0.35)' }}
              onMouseEnter={e=>{ e.currentTarget.style.background='#c4a673'; e.currentTarget.style.transform='translateY(-2px)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.background='#d6b886'; e.currentTarget.style.transform='translateY(0)'; }}
            >
              <Icon name="stethoscope" size={17} color="#16242d" sw={2}/>
              Diagnóstico Gratuito
            </a>
            <button onClick={() => onNav('services')} style={{ padding:'14px 22px', background:'transparent', color:'rgba(255,255,255,0.78)', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:600, border:'1.5px solid rgba(255,255,255,0.22)', borderRadius:8, cursor:'pointer', transition:'all 200ms' }}
              onMouseEnter={e=>{ e.currentTarget.style.borderColor='#d6b886'; e.currentTarget.style.color='#d6b886'; }}
              onMouseLeave={e=>{ e.currentTarget.style.borderColor='rgba(255,255,255,0.22)'; e.currentTarget.style.color='rgba(255,255,255,0.78)'; }}
            >Ver todos os serviços →</button>
          </div>
          <div style={{ display:'flex', gap:22, marginTop:38, flexWrap:'wrap' }}>
            {['Somente RJ','Suporte 24/7','Equipe certificada','Sem carência'].map(t => (
              <div key={t} style={{ display:'flex', alignItems:'center', gap:6 }}>
                <div style={{ width:5, height:5, borderRadius:'50%', background:'#d6b886', opacity:.7 }}/>
                <span style={{ fontSize:12, color:'rgba(255,255,255,0.48)', fontFamily:"'Inter',sans-serif", fontWeight:500 }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
        {/* Illustration */}
        <div style={{ display:'flex', justifyContent:'center', alignItems:'center' }}>
          <SceneCard scene={cur} vis={vis}/>
        </div>
      </div>
    </section>
  );
};

const SceneCard = ({ scene, vis }) => {
  const base = { width:360, height:380, position:'relative', opacity:vis?1:0, transition:'opacity 400ms' };
  const card = { position:'absolute', inset:0, borderRadius:20, background:'rgba(12,28,38,0.85)', border:'1px solid rgba(214,184,134,0.15)', overflow:'hidden' };
  const titleBar = (label) => (
    <div style={{ background:'rgba(214,184,134,0.07)', padding:'11px 18px', display:'flex', alignItems:'center', gap:8, borderBottom:'1px solid rgba(214,184,134,0.09)' }}>
      {['#ff5f57','#febc2e','#28c840'].map(c => <div key={c} style={{ width:10, height:10, borderRadius:'50%', background:c }}/>)}
      <span style={{ marginLeft:8, fontSize:11, color:'rgba(255,255,255,0.38)', fontFamily:"'Inter',sans-serif" }}>{label}</span>
    </div>
  );

  if (scene === 0) return (
    <div style={base}><div style={card}>
      {titleBar('status.impressora')}
      <div style={{ padding:26, display:'flex', flexDirection:'column', gap:14, alignItems:'center', height:'calc(100% - 46px)', justifyContent:'center' }}>
        <div style={{ position:'relative' }}>
          <Icon name="printer" size={72} color="#d6b886" sw={1.2}/>
          <div style={{ position:'absolute', top:-6, right:-6, width:22, height:22, borderRadius:'50%', background:'#ef4444', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13, fontWeight:900, color:'#fff', animation:'pulseRing 1.5s ease infinite' }}>!</div>
        </div>
        <div style={{ background:'rgba(239,68,68,0.12)', border:'1px solid rgba(239,68,68,0.28)', borderRadius:8, padding:'10px 18px', textAlign:'center' }}>
          <div style={{ fontSize:13, fontWeight:700, color:'#fca5a5', fontFamily:"'Inter',sans-serif" }}>ERRO: Impressora offline</div>
          <div style={{ fontSize:11, color:'rgba(255,255,255,0.42)', fontFamily:"'Inter',sans-serif", marginTop:4 }}>Depto RH — 3 trabalhos na fila</div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          {['09:47','09:52','09:58'].map((t,i) => (
            <div key={i} style={{ background:'rgba(214,184,134,0.07)', border:'1px solid rgba(214,184,134,0.12)', borderRadius:6, padding:'6px 10px', textAlign:'center' }}>
              <div style={{ fontSize:10, color:'#d6b886', fontFamily:"'Inter',sans-serif", fontWeight:600 }}>{t}</div>
              <div style={{ fontSize:9, color:'rgba(255,255,255,0.33)', fontFamily:"'Inter',sans-serif" }}>Tentativa {i+1}</div>
            </div>
          ))}
        </div>
        <div style={{ width:'100%', height:6, background:'rgba(255,255,255,0.07)', borderRadius:3, overflow:'hidden' }}>
          <div style={{ height:'100%', width:'30%', background:'#d6b886', borderRadius:3, backgroundImage:'linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent)', backgroundSize:'200px 100%', animation:'shimmerBar 2s linear infinite' }}/>
        </div>
        <div style={{ fontSize:12, color:'rgba(255,255,255,0.38)', fontFamily:"'Inter',sans-serif", textAlign:'center' }}>Suporte Sherlock notificado — a caminho</div>
      </div>
    </div></div>
  );

  if (scene === 1) return (
    <div style={base}><div style={card}>
      {titleBar('monitor.rede — ao vivo')}
      <div style={{ padding:22, height:'calc(100% - 46px)', display:'flex', flexDirection:'column', gap:12 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          {[{n:'Switch',ico:'server',ok:true},{n:'Firewall',ico:'shield',ok:true},{n:'Internet',ico:'globe',ok:false}].map((node,i) => (
            <React.Fragment key={node.n}>
              <div style={{ textAlign:'center' }}>
                <div style={{ width:44, height:44, borderRadius:'50%', background:node.ok?'rgba(214,184,134,0.12)':'rgba(239,68,68,0.15)', border:`2px solid ${node.ok?'#d6b886':'#ef4444'}`, display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 6px' }}>
                  <Icon name={node.ico} size={20} color={node.ok?'#d6b886':'#fca5a5'} sw={1.5}/>
                </div>
                <div style={{ fontSize:10, color:node.ok?'rgba(255,255,255,0.55)':'#fca5a5', fontFamily:"'Inter',sans-serif" }}>{node.n}</div>
              </div>
              {i<2 && <div style={{ flex:1, height:2, margin:'0 8px', background:i===1?'rgba(239,68,68,0.5)':'rgba(214,184,134,0.3)', position:'relative', marginBottom:18 }}>
                {i===1 && <span style={{ position:'absolute', top:-10, left:'50%', transform:'translateX(-50%)', color:'#ef4444', fontSize:14, fontWeight:900 }}>✕</span>}
              </div>}
            </React.Fragment>
          ))}
        </div>
        {[{l:'14 estações de trabalho',s:'Offline',c:'#fca5a5'},{l:'Servidor de arquivos',s:'Degradado',c:'#fbbf24'},{l:'VoIP / Telefonia',s:'Offline',c:'#fca5a5'}].map(item => (
          <div key={item.l} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', background:'rgba(255,255,255,0.04)', borderRadius:8, padding:'8px 12px' }}>
            <span style={{ fontSize:12, color:'rgba(255,255,255,0.62)', fontFamily:"'Inter',sans-serif" }}>{item.l}</span>
            <span style={{ fontSize:10, fontWeight:700, color:item.c, background:`${item.c}18`, borderRadius:4, padding:'2px 8px', fontFamily:"'Inter',sans-serif" }}>{item.s}</span>
          </div>
        ))}
        <div style={{ marginTop:'auto', background:'rgba(214,184,134,0.08)', border:'1px solid rgba(214,184,134,0.22)', borderRadius:8, padding:'10px 14px', display:'flex', alignItems:'center', gap:10 }}>
          <div style={{ width:8, height:8, borderRadius:'50%', background:'#d6b886', animation:'pulseRing 1.5s ease infinite', flexShrink:0 }}/>
          <span style={{ fontSize:11, color:'#d6b886', fontFamily:"'Inter',sans-serif", fontWeight:600 }}>Sherlock detectou anomalia — análise iniciada</span>
        </div>
      </div>
    </div></div>
  );

  return (
    <div style={base}><div style={{ ...card, border:'1px solid rgba(239,68,68,0.25)' }}>
      <div style={{ background:'rgba(239,68,68,0.14)', padding:'11px 18px', display:'flex', alignItems:'center', gap:8, borderBottom:'1px solid rgba(239,68,68,0.18)' }}>
        <div style={{ width:8, height:8, borderRadius:'50%', background:'#ef4444', animation:'pulseRing 1s ease infinite' }}/>
        <span style={{ fontSize:11, color:'#fca5a5', fontFamily:"'Inter',sans-serif", fontWeight:700 }}>⚠ ALERTA DE SEGURANÇA — AÇÃO IMEDIATA</span>
      </div>
      <div style={{ padding:22, height:'calc(100% - 46px)', display:'flex', flexDirection:'column', gap:14 }}>
        <div style={{ display:'flex', alignItems:'center', gap:14 }}>
          <Icon name="shield-alert" size={46} color="#ef4444" sw={1.5}/>
          <div>
            <div style={{ fontSize:14, fontWeight:700, color:'#fca5a5', fontFamily:"'Inter',sans-serif" }}>Malware Detectado</div>
            <div style={{ fontSize:11, color:'rgba(255,255,255,0.42)', fontFamily:"'Inter',sans-serif", marginTop:2 }}>Ransomware · Variante LockBit</div>
          </div>
        </div>
        {[{l:'Arquivos em risco',p:68,c:'#ef4444'},{l:'Propagação na rede',p:31,c:'#fbbf24'},{l:'Backup íntegro',p:100,c:'#22c55e'}].map(item => (
          <div key={item.l}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:4 }}>
              <span style={{ fontSize:11, color:'rgba(255,255,255,0.55)', fontFamily:"'Inter',sans-serif" }}>{item.l}</span>
              <span style={{ fontSize:11, fontWeight:700, color:item.c, fontFamily:"'Inter',sans-serif" }}>{item.p}%</span>
            </div>
            <div style={{ height:6, background:'rgba(255,255,255,0.08)', borderRadius:3, overflow:'hidden' }}>
              <div style={{ height:'100%', width:`${item.p}%`, background:item.c, borderRadius:3 }}/>
            </div>
          </div>
        ))}
        <div style={{ background:'rgba(34,197,94,0.10)', border:'1px solid rgba(34,197,94,0.25)', borderRadius:8, padding:'10px 14px' }}>
          <div style={{ fontSize:11, fontWeight:700, color:'#86efac', fontFamily:"'Inter',sans-serif" }}>✓ Sherlock isolou a ameaça em 4 min</div>
          <div style={{ fontSize:10, color:'rgba(255,255,255,0.38)', fontFamily:"'Inter',sans-serif", marginTop:3 }}>Backup restaurado · Operação retomada</div>
        </div>
      </div>
    </div></div>
  );
};

// ─── HERO 2 — Diagnóstico Gratuito ───────────────────────────────────────────
const HeroDiagnostico = ({ onNav }) => {
  const steps = [
    { num:'01', title:'Você solicita o diagnóstico', sub:'Via WhatsApp — sem burocracia', icon:'message-circle' },
    { num:'02', title:'Nossa equipe visita sua empresa', sub:'Análise presencial em RJ', icon:'map-pin' },
    { num:'03', title:'Relatório detalhado entregue', sub:'Vulnerabilidades, riscos e recomendações', icon:'file-text' },
    { num:'04', title:'Você decide o próximo passo', sub:'Sem compromisso. Sem vendas forçadas.', icon:'check-circle' },
  ];
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a+1)%4), 2400);
    return () => clearInterval(id);
  }, []);
  return (
    <section style={{ position:'relative', minHeight:'100vh', background:'linear-gradient(160deg,#16242d 0%,#012d3a 65%,#0a1f28 100%)', display:'flex', alignItems:'center', overflow:'hidden' }}>
      {[...Array(18)].map((_,i) => (
        <div key={i} style={{ position:'absolute', left:`${5+(i*23)%90}%`, top:`${10+(i*37)%80}%`, width:3, height:3, borderRadius:'50%', background:'#d6b886', opacity:.13, animation:`particleDrift ${4+(i%4)}s ease-in-out ${(i*.4)%3}s infinite` }}/>
      ))}
      <div style={{ position:'absolute', inset:0, backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.04 }}/>
      <div style={{ position:'absolute', top:0, left:0, right:0, height:3, background:'linear-gradient(90deg,transparent,#d6b886,transparent)' }}/>
      <div style={{ maxWidth:1280, margin:'0 auto', padding:'110px 32px 90px', position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'center', width:'100%' }}>
        {/* Steps */}
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {steps.map((s,i) => (
            <div key={i} onClick={() => setActive(i)} style={{
              display:'flex', alignItems:'center', gap:18, padding:'16px 20px',
              borderRadius:12, cursor:'pointer',
              background: active===i ? 'rgba(214,184,134,0.10)' : 'rgba(255,255,255,0.03)',
              border: `1.5px solid ${active===i ? 'rgba(214,184,134,0.35)' : 'rgba(255,255,255,0.07)'}`,
              transform: active===i ? 'translateX(6px)' : 'translateX(0)', transition:'all 280ms ease',
            }}>
              <div style={{ width:46, height:46, borderRadius:12, flexShrink:0, background:active===i?'#d6b886':'rgba(214,184,134,0.10)', border:`2px solid ${active===i?'#d6b886':'rgba(214,184,134,0.18)'}`, display:'flex', alignItems:'center', justifyContent:'center', transition:'all 280ms' }}>
                <Icon name={s.icon} size={20} color={active===i?'#16242d':'#d6b886'} sw={2}/>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:2 }}>
                  <span style={{ fontSize:10, fontWeight:800, color:'#d6b886', fontFamily:"'Inter',sans-serif", letterSpacing:'1px' }}>{s.num}</span>
                  <span style={{ fontSize:14, fontWeight:700, color:active===i?'#fff':'rgba(255,255,255,0.68)', fontFamily:"'Inter',sans-serif" }}>{s.title}</span>
                </div>
                <div style={{ fontSize:12, color:'rgba(255,255,255,0.42)', fontFamily:"'Inter',sans-serif" }}>{s.sub}</div>
              </div>
              {active===i && <Icon name="chevron-right" size={16} color="#d6b886" sw={2}/>}
            </div>
          ))}
        </div>
        {/* Copy */}
        <div>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:24, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
            <Icon name="search" size={13} color="#d6b886" sw={2.5}/>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Diagnóstico Gratuito</span>
          </div>
          <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(30px,3.5vw,52px)', fontWeight:900, color:'#fff', lineHeight:1.1, letterSpacing:'-1px', marginBottom:20 }}>
            Descubra os riscos<br/><span style={{ color:'#d6b886' }}>da sua TI — de graça.</span>
          </h2>
          <p style={{ fontSize:16, color:'rgba(255,255,255,0.58)', lineHeight:1.78, fontFamily:"'Inter',sans-serif", marginBottom:36, maxWidth:460 }}>
            Implantamos sua TI do zero e entregamos um laudo completo antes de qualquer contrato. Transparência total desde o primeiro passo.
          </p>
          <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'15px 32px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:15, fontWeight:800, borderRadius:8, textDecoration:'none', transition:'all 200ms', boxShadow:'0 8px 28px rgba(214,184,134,0.28)' }}
            onMouseEnter={e=>{ e.currentTarget.style.background='#c4a673'; e.currentTarget.style.transform='translateY(-2px)'; }}
            onMouseLeave={e=>{ e.currentTarget.style.background='#d6b886'; e.currentTarget.style.transform='translateY(0)'; }}
          >
            <WAIcon size={18} color="#16242d"/>
            Agendar pelo WhatsApp
            <Icon name="arrow-right" size={16} color="#16242d" sw={2.5}/>
          </a>
        </div>
      </div>
    </section>
  );
};

// ─── HERO 3 — TI para seu Segmento ───────────────────────────────────────────
const HeroSegmentos = ({ onNav }) => {
  const segs = [
    { label:'Empresas', icon:'building-2', pain:'Capital imobilizado em equipamentos que ficam obsoletos.', sol:'Alugue toda a infraestrutura de TI com suporte incluído e custo mensal previsível.' },
    { label:'Indústrias', icon:'factory', pain:'TI parada significa linha de produção parada.', sol:'Infraestrutura robusta com monitoramento 24/7 e reposição imediata de equipamentos.' },
    { label:'Clínicas', icon:'heart-pulse', pain:'Dados de pacientes e conformidade com LGPD/CFM.', sol:'TI segura, backup redundante e sistema sempre disponível para atendimento.' },
    { label:'Hospitais', icon:'cross', pain:'Sistemas críticos não podem ter downtime.', sol:'Alta disponibilidade, segurança de dados e equipe certificada no RJ.' },
    { label:'Varejo', icon:'shopping-bag', pain:'PDV fora do ar = venda perdida e cliente insatisfeito.', sol:'Rede estável, equipamentos sempre funcionando e suporte em minutos.' },
    { label:'Condomínios', icon:'home', pain:'Câmeras, portaria, internet — tudo precisa funcionar.', sol:'Gestão completa da TI condominial com atendimento presencial no RJ.' },
  ];
  const [active, setActive] = useState(0);
  const sg = segs[active];
  return (
    <section style={{ position:'relative', minHeight:'100vh', background:'#f8f9fa', display:'flex', alignItems:'center', overflow:'hidden' }}>
      <div style={{ position:'absolute', right:0, top:0, bottom:0, width:'45%', background:'linear-gradient(135deg,#012d3a,#16242d)' }}/>
      <div style={{ position:'absolute', right:0, top:0, bottom:0, width:'45%', backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.05 }}/>
      <div style={{ maxWidth:1280, margin:'0 auto', padding:'110px 32px 90px', position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'center', width:'100%' }}>
        {/* Left — light */}
        <div>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:22, background:'rgba(214,184,134,0.15)', border:'1px solid rgba(214,184,134,0.35)', borderRadius:100, padding:'6px 16px' }}>
            <Icon name="monitor" size={13} color="#c4a673" sw={2.5}/>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#c4a673', fontFamily:"'Inter',sans-serif" }}>TI Completa para seu Segmento</span>
          </div>
          <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(28px,3.2vw,48px)', fontWeight:900, color:'#16242d', lineHeight:1.1, letterSpacing:'-1px', marginBottom:18 }}>
            Sua empresa tem<br/>TI que funciona?
          </h2>
          <p style={{ fontSize:16, color:'#6c757d', lineHeight:1.78, fontFamily:"'Inter',sans-serif", marginBottom:28, maxWidth:440 }}>
            Implantamos, organizamos e gerenciamos toda a TI da sua empresa no Rio de Janeiro — do zero ou retomando o que já existe.
          </p>
          {/* Segment pills */}
          <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginBottom:26 }}>
            {segs.map((s,i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                display:'flex', alignItems:'center', gap:6, padding:'8px 14px', borderRadius:8, cursor:'pointer',
                background: active===i ? '#16242d' : '#fff',
                border: `2px solid ${active===i ? '#16242d' : '#e9ecef'}`,
                color: active===i ? '#d6b886' : '#6c757d',
                fontSize:13, fontWeight:600, fontFamily:"'Inter',sans-serif", transition:'all 200ms',
              }}
                onMouseEnter={e=>{ if(active!==i){ e.currentTarget.style.borderColor='#d6b886'; e.currentTarget.style.color='#16242d'; }}}
                onMouseLeave={e=>{ if(active!==i){ e.currentTarget.style.borderColor='#e9ecef'; e.currentTarget.style.color='#6c757d'; }}}
              >
                <Icon name={s.icon} size={14} color={active===i?'#d6b886':'#6c757d'} sw={2}/>
                {s.label}
              </button>
            ))}
          </div>
          {/* Problem / Solution */}
          <div style={{ background:'#fff', border:'2px solid #e9ecef', borderRadius:12, padding:'20px 22px', marginBottom:26, boxShadow:'0 4px 16px rgba(0,0,0,0.06)' }}>
            <div style={{ display:'flex', gap:12, marginBottom:12 }}>
              <div style={{ width:32, height:32, borderRadius:8, background:'rgba(239,68,68,0.10)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name="alert-triangle" size={16} color="#ef4444" sw={2}/>
              </div>
              <div>
                <div style={{ fontSize:10, fontWeight:700, color:'#ef4444', fontFamily:"'Inter',sans-serif", textTransform:'uppercase', letterSpacing:'1px', marginBottom:3 }}>O Problema</div>
                <div style={{ fontSize:14, color:'#16242d', fontFamily:"'Inter',sans-serif", lineHeight:1.55 }}>{sg.pain}</div>
              </div>
            </div>
            <div style={{ height:1, background:'#f0f0f0', margin:'12px 0' }}/>
            <div style={{ display:'flex', gap:12 }}>
              <div style={{ width:32, height:32, borderRadius:8, background:'rgba(214,184,134,0.12)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name="check-circle-2" size={16} color="#d6b886" sw={2}/>
              </div>
              <div>
                <div style={{ fontSize:10, fontWeight:700, color:'#d6b886', fontFamily:"'Inter',sans-serif", textTransform:'uppercase', letterSpacing:'1px', marginBottom:3 }}>A Solução Sherlock</div>
                <div style={{ fontSize:14, color:'#16242d', fontFamily:"'Inter',sans-serif", lineHeight:1.55 }}>{sg.sol}</div>
              </div>
            </div>
          </div>
          <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'13px 26px', background:'#16242d', color:'#d6b886', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:700, borderRadius:8, textDecoration:'none', transition:'all 200ms' }}
            onMouseEnter={e=>{ e.currentTarget.style.background='#012d3a'; e.currentTarget.style.transform='translateY(-1px)'; }}
            onMouseLeave={e=>{ e.currentTarget.style.background='#16242d'; e.currentTarget.style.transform='translateY(0)'; }}
          >Quero uma proposta <Icon name="arrow-right" size={16} color="#d6b886" sw={2.5}/></a>
        </div>
        {/* Right — dark */}
        <div style={{ display:'flex', flexDirection:'column', gap:12, background:'linear-gradient(155deg,#012d3a,#16242d)', borderRadius:16, padding:'28px 24px', border:'1px solid rgba(214,184,134,0.15)', boxShadow:'0 18px 40px rgba(0,0,0,0.28)', position:'relative', overflow:'hidden' }}>
          <div style={{ position:'absolute', inset:0, backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.05, pointerEvents:'none', borderRadius:16 }}/>
          <div style={{ position:'relative', fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif", marginBottom:4 }}>O que inclui</div>
          {[
            { icon:'monitor', label:'Computadores & Notebooks', sub:'Locação sem imobilizar capital', badge:'Locação' },
            { icon:'server', label:'Servidores & Storage', sub:'Infraestrutura corporativa completa', badge:'Infra' },
            { icon:'wifi', label:'Rede & Conectividade', sub:'Roteadores, switches, Wi-Fi gerenciado', badge:'Rede' },
            { icon:'shield-check', label:'Segurança & Backup', sub:'Proteção ativa e cópias redundantes', badge:'24/7' },
            { icon:'headphones', label:'Suporte Técnico', sub:'Atendimento presencial e remoto', badge:'Incluso' },
          ].map((item,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:14, padding:'13px 16px', background:'rgba(214,184,134,0.05)', border:'1px solid rgba(214,184,134,0.11)', borderRadius:10, transition:'all 200ms', cursor:'default' }}
              onMouseEnter={e=>{ e.currentTarget.style.background='rgba(214,184,134,0.10)'; e.currentTarget.style.borderColor='rgba(214,184,134,0.24)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.background='rgba(214,184,134,0.05)'; e.currentTarget.style.borderColor='rgba(214,184,134,0.11)'; }}
            >
              <div style={{ width:40, height:40, borderRadius:10, background:'rgba(214,184,134,0.12)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name={item.icon} size={19} color="#d6b886" sw={1.75}/>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13, fontWeight:700, color:'#fff', fontFamily:"'Inter',sans-serif" }}>{item.label}</div>
                <div style={{ fontSize:11, color:'rgba(255,255,255,0.42)', fontFamily:"'Inter',sans-serif" }}>{item.sub}</div>
              </div>
              <span style={{ fontSize:10, fontWeight:700, color:'#d6b886', background:'rgba(214,184,134,0.12)', borderRadius:4, padding:'3px 8px', fontFamily:"'Inter',sans-serif", whiteSpace:'nowrap' }}>{item.badge}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Problemas Reais Section ──────────────────────────────────────────────────
const ProblemasReaisSection = () => {
  const [active, setActive] = useState(0);
  const items = [
    { img:BASE+'assets/problema-tela-azul.jpeg', tag:'Falha Crítica', title:'Tela azul no meio do expediente', text:'Uma falha crítica pode parar equipes inteiras em segundos. Com monitoramento preventivo e gestão profissional da infraestrutura, a Sherlock identifica riscos antes que eles afetem sua operação.', icon:'alert-triangle', metric:'-87%', metricL:'tempo médio de downtime' },
    { img:BASE+'assets/problema-cabeamento.jpeg', tag:'Infra Improvisada', title:'Cabeamento desorganizado e sem padronização', text:'Infraestrutura improvisada gera lentidão, instabilidade e aumenta o risco de falhas. Uma rede estruturada melhora a performance, facilita manutenções e reduz paradas inesperadas.', icon:'server', metric:'+3x', metricL:'velocidade da rede' },
    { img:BASE+'assets/problema-conexao.jpeg', tag:'Instabilidade', title:'Conexão perdida durante uma reunião', text:'Instabilidade de rede impacta produtividade, comunicação e até fechamento de negócios. A Sherlock mantém sua operação conectada, estável e preparada para ambientes corporativos críticos.', icon:'wifi-off', metric:'99,9%', metricL:'de uptime garantido' },
    { img:BASE+'assets/problema-impressora.jpeg', tag:'Operação Parada', title:'Impressora parada, operação atrasada', text:'Pequenos problemas de TI podem causar grandes impactos no dia a dia da empresa. Com suporte corporativo e manutenção preventiva, sua equipe ganha mais continuidade e menos interrupções.', icon:'printer', metric:'<15min', metricL:'tempo de resposta' },
  ];
  return (
    <section style={{ position:'relative', background:'linear-gradient(180deg,#0a1a22 0%,#16242d 50%,#012d3a 100%)', padding:'96px 32px', overflow:'hidden' }}>
      {/* Floating orbs */}
      <div style={{ position:'absolute', top:'10%', left:'-5%', width:380, height:380, borderRadius:'50%', background:'radial-gradient(circle,rgba(214,184,134,0.18),transparent 70%)', filter:'blur(40px)', animation:'orb 18s ease-in-out infinite', pointerEvents:'none' }}/>
      <div style={{ position:'absolute', bottom:'5%', right:'-8%', width:460, height:460, borderRadius:'50%', background:'radial-gradient(circle,rgba(1,45,58,0.55),transparent 70%)', filter:'blur(60px)', animation:'orb 22s ease-in-out 4s infinite', pointerEvents:'none' }}/>
      <div style={{ position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(214,184,134,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(214,184,134,0.08) 1px,transparent 1px)', backgroundSize:'80px 80px', opacity:.35, pointerEvents:'none', maskImage:'radial-gradient(ellipse at center,black 30%,transparent 75%)', WebkitMaskImage:'radial-gradient(ellipse at center,black 30%,transparent 75%)' }}/>
      <div style={{ maxWidth:1280, margin:'0 auto', position:'relative', zIndex:1 }}>
        <div style={{ textAlign:'center', marginBottom:64 }}>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:18, background:'rgba(239,68,68,0.10)', border:'1px solid rgba(239,68,68,0.28)', borderRadius:100, padding:'7px 18px' }}>
            <Icon name="alert-triangle" size={13} color="#fca5a5" sw={2.5}/>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#fca5a5', fontFamily:"'Inter',sans-serif" }}>Você reconhece esses problemas?</span>
          </div>
          <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(28px,3.4vw,48px)', fontWeight:900, color:'#fff', letterSpacing:'-1px', marginBottom:14, lineHeight:1.1 }}>
            Problemas reais que afetam<br/><span style={{ color:'#d6b886' }}>a TI da sua empresa</span>
          </h2>
          <p style={{ fontSize:16, color:'rgba(255,255,255,0.58)', maxWidth:580, margin:'0 auto', lineHeight:1.72, fontFamily:"'Inter',sans-serif" }}>
            Cenas do dia a dia corporativo. A Sherlock existe para que sua empresa não precise viver nenhuma delas.
          </p>
        </div>

        {/* 3D Card Grid */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:28, perspective:'1500px' }}>
          {items.map((it,i) => (
            <div key={i}
              className="tilt-card"
              onMouseEnter={() => setActive(i)}
              style={{
                position:'relative', borderRadius:18, overflow:'hidden',
                background:'#0a1a22', cursor:'default',
                border:`1.5px solid ${active===i?'rgba(214,184,134,0.5)':'rgba(214,184,134,0.15)'}`,
                animation: `tiltIn 700ms ease ${i*120}ms backwards, ${active===i?'glowPulse 3s ease-in-out infinite':'none'}`,
                aspectRatio:'4/3.1',
                transformStyle:'preserve-3d',
              }}
            >
              {/* Image */}
              <div style={{ position:'absolute', inset:0, overflow:'hidden' }}>
                <img src={it.img} alt={it.title} className="pr-img" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block', filter:'brightness(.62) saturate(1.05)' }}/>
              </div>
              {/* Gradient overlay */}
              <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,rgba(10,26,34,.35) 0%,rgba(10,26,34,.15) 35%,rgba(10,26,34,.85) 75%,rgba(10,26,34,.96) 100%)' }}/>
              {/* Corner badge — tag */}
              <div style={{ position:'absolute', top:18, left:18, display:'flex', alignItems:'center', gap:8, background:'rgba(239,68,68,0.18)', backdropFilter:'blur(8px)', border:'1px solid rgba(239,68,68,0.4)', borderRadius:100, padding:'6px 14px', transform:'translateZ(40px)' }}>
                <div style={{ width:6, height:6, borderRadius:'50%', background:'#ef4444', animation:'pulseRing 1.5s ease infinite' }}/>
                <span style={{ fontSize:10, fontWeight:800, letterSpacing:'1.5px', textTransform:'uppercase', color:'#fca5a5', fontFamily:"'Inter',sans-serif" }}>{it.tag}</span>
              </div>
              {/* Floating metric chip */}
              <div style={{ position:'absolute', top:18, right:18, background:'rgba(214,184,134,0.96)', borderRadius:12, padding:'10px 14px', textAlign:'right', boxShadow:'0 12px 30px rgba(0,0,0,.5)', transform:'translateZ(60px)' }}>
                <div style={{ fontFamily:"'Poppins',sans-serif", fontSize:22, fontWeight:900, color:'#16242d', lineHeight:1 }}>{it.metric}</div>
                <div style={{ fontSize:9, color:'rgba(22,36,45,.7)', fontFamily:"'Inter',sans-serif", fontWeight:600, marginTop:3, textTransform:'uppercase', letterSpacing:'.5px' }}>{it.metricL}</div>
              </div>
              {/* Content */}
              <div style={{ position:'absolute', left:0, right:0, bottom:0, padding:'28px 28px 26px', transform:'translateZ(20px)' }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
                  <div style={{ width:34, height:34, borderRadius:9, background:'rgba(214,184,134,0.15)', border:'1px solid rgba(214,184,134,0.35)', display:'flex', alignItems:'center', justifyContent:'center', backdropFilter:'blur(8px)' }}>
                    <Icon name={it.icon} size={16} color="#d6b886" sw={2}/>
                  </div>
                  <h3 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(16px,1.5vw,20px)', fontWeight:800, color:'#fff', lineHeight:1.25, letterSpacing:'-0.3px', flex:1 }}>{it.title}</h3>
                </div>
                <p className="pr-overlay-text" style={{ fontSize:13.5, color:'rgba(255,255,255,0.78)', lineHeight:1.7, fontFamily:"'Inter',sans-serif" }}>{it.text}</p>
              </div>
              <div className="tilt-shine"/>
            </div>
          ))}
        </div>

        {/* CTA bar */}
        <div style={{ marginTop:54, background:'linear-gradient(135deg,rgba(214,184,134,0.12),rgba(214,184,134,0.04))', border:'1.5px solid rgba(214,184,134,0.28)', borderRadius:14, padding:'24px 30px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, flexWrap:'wrap', backdropFilter:'blur(8px)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:18 }}>
            <div style={{ width:48, height:48, borderRadius:12, background:'#d6b886', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, boxShadow:'0 8px 24px rgba(214,184,134,.35)' }}>
              <Icon name="shield-check" size={22} color="#16242d" sw={2}/>
            </div>
            <div>
              <div style={{ fontFamily:"'Poppins',sans-serif", fontSize:18, fontWeight:800, color:'#fff', marginBottom:3 }}>Pare de apagar incêndios. Comece a prevenir.</div>
              <div style={{ fontSize:13, color:'rgba(255,255,255,0.58)', fontFamily:"'Inter',sans-serif" }}>Diagnóstico gratuito em até 24h. Sem compromisso.</div>
            </div>
          </div>
          <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'13px 26px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:800, borderRadius:8, textDecoration:'none', whiteSpace:'nowrap', transition:'all 200ms', boxShadow:'0 6px 20px rgba(214,184,134,.4)' }}
            onMouseEnter={e=>{ e.currentTarget.style.background='#c4a673'; e.currentTarget.style.transform='translateY(-2px)'; }}
            onMouseLeave={e=>{ e.currentTarget.style.background='#d6b886'; e.currentTarget.style.transform='translateY(0)'; }}
          >
            <WAIcon size={16} color="#16242d"/>
            Quero resolver isso
            <Icon name="arrow-right" size={15} color="#16242d" sw={2.5}/>
          </a>
        </div>
      </div>
    </section>
  );
};

// ─── Services Section ─────────────────────────────────────────────────────────
const ServicesSection = ({ onNav }) => {
  const [hov, setHov] = useState(null);
  const svcs = [
    { icon:'stethoscope', title:'Diagnóstico Gratuito', desc:'Análise completa da sua infraestrutura sem custo. Identificamos riscos, vulnerabilidades e oportunidades — com relatório detalhado entregue em mãos.', tag:'Gratuito & Sem Compromisso', hl:true },
    { icon:'server', title:'Implantação de TI do Zero', desc:'Estruturamos toda a infraestrutura tecnológica da sua empresa do início — rede, servidores, segurança, estações de trabalho e processos.', tag:'Do planejamento à execução', hl:true },
    { icon:'monitor-smartphone', title:'Locação de Equipamentos', desc:'Computadores, notebooks, servidores e periféricos sob locação mensal. Sem imobilizar capital, com manutenção e troca incluídas.', tag:'Custo Previsível', hl:true },
    { icon:'headphones', title:'Suporte Corporativo', desc:'Atendimento técnico especializado presencial e remoto. Resolução ágil de incidentes com foco em continuidade operacional.', tag:'Reativo e Proativo' },
    { icon:'eye', title:'Monitoramento 24/7', desc:'Vigilância contínua de servidores, redes e endpoints. Detectamos anomalias e agimos antes que o problema impacte sua operação.', tag:'Sempre Ativo' },
    { icon:'shield-check', title:'Segurança da Informação', desc:'Proteção contra vírus, ransomware, acessos não autorizados e vazamento de dados. Conformidade com LGPD.', tag:'Proteção Contínua' },
    { icon:'database', title:'Backup & Disaster Recovery', desc:'Cópias de segurança redundantes e planos de recuperação testados. Sua empresa opera mesmo em caso de desastres.', tag:'Continuidade Garantida' },
    { icon:'layout-dashboard', title:'Gestão de Infraestrutura', desc:'Administração completa do ambiente — atualizações, patches, inventário de ativos e relatórios mensais.', tag:'Gestão Completa' },
    { icon:'users', title:'Treinamento de Equipes', desc:'Capacitamos seus colaboradores em boas práticas de segurança digital e uso correto de ferramentas.', tag:'Capacitação' },
  ];
  return (
    <section style={{ background:'#f8f9fa', padding:'90px 32px' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom:60 }}>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:16, background:'rgba(214,184,134,0.12)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
            <Icon name="grid-3x3" size={12} color="#d6b886" sw={2.5}/>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Nossos Serviços</span>
          </div>
          <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(26px,3vw,42px)', fontWeight:900, color:'#16242d', letterSpacing:'-0.5px', marginBottom:14 }}>Cobertura completa para sua TI corporativa</h2>
          <p style={{ fontSize:16, color:'#6c757d', maxWidth:540, margin:'0 auto', lineHeight:1.72, fontFamily:"'Inter',sans-serif" }}>Da prevenção à recuperação, a Sherlock cuida de toda a tecnologia da sua empresa no Rio de Janeiro.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18, marginBottom:44 }}>
          {svcs.map((s,i) => (
            <div key={i} onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(null)} style={{
              background: s.hl ? 'linear-gradient(135deg,#012d3a,#16242d)' : '#fff',
              border:`2px solid ${hov===i?'#d6b886':s.hl?'rgba(214,184,134,0.20)':'#e9ecef'}`,
              borderRadius:12, padding:'26px 22px',
              transition:'all 240ms ease',
              transform: hov===i ? 'translateY(-4px)' : 'translateY(0)',
              boxShadow: hov===i ? '0 12px 32px rgba(0,0,0,0.14)' : '0 2px 6px rgba(0,0,0,0.04)',
              position:'relative', overflow:'hidden', cursor:'default',
            }}>
              {s.hl && <div style={{ position:'absolute', top:14, right:14, background:'#d6b886', color:'#16242d', fontSize:9, fontWeight:800, padding:'3px 8px', borderRadius:4, fontFamily:"'Inter',sans-serif", letterSpacing:'0.5px', textTransform:'uppercase' }}>Destaque</div>}
              <div style={{ width:46, height:46, borderRadius:12, marginBottom:14, background:s.hl?'rgba(214,184,134,0.14)':hov===i?'#d6b886':'rgba(214,184,134,0.10)', border:`1.5px solid ${s.hl?'rgba(214,184,134,0.28)':'rgba(214,184,134,0.18)'}`, display:'flex', alignItems:'center', justifyContent:'center', transition:'all 240ms' }}>
                <Icon name={s.icon} size={21} color={s.hl?'#d6b886':hov===i?'#fff':'#d6b886'} sw={1.75}/>
              </div>
              <div style={{ fontSize:15, fontWeight:700, color:s.hl?'#fff':'#16242d', fontFamily:"'Inter',sans-serif", marginBottom:8 }}>{s.title}</div>
              <div style={{ fontSize:13, color:s.hl?'rgba(255,255,255,0.58)':'#6c757d', lineHeight:1.65, fontFamily:"'Inter',sans-serif", marginBottom:13 }}>{s.desc}</div>
              <span style={{ display:'inline-block', fontSize:10, fontWeight:700, color:'#d6b886', background:'rgba(214,184,134,0.12)', borderRadius:4, padding:'3px 8px', fontFamily:"'Inter',sans-serif" }}>{s.tag}</span>
            </div>
          ))}
        </div>
        <div style={{ textAlign:'center' }}>
          <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'14px 30px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:15, fontWeight:700, borderRadius:8, textDecoration:'none', transition:'all 200ms', boxShadow:'0 4px 18px rgba(214,184,134,0.28)' }}
            onMouseEnter={e=>{ e.currentTarget.style.background='#c4a673'; e.currentTarget.style.transform='translateY(-2px)'; }}
            onMouseLeave={e=>{ e.currentTarget.style.background='#d6b886'; e.currentTarget.style.transform='translateY(0)'; }}
          >
            <Icon name="calendar" size={16} color="#16242d" sw={2.5}/>
            Solicitar Diagnóstico Gratuito
          </a>
        </div>
      </div>
    </section>
  );
};

// ─── Implantação Timeline ─────────────────────────────────────────────────────
const TimelineSection = () => {
  const [active, setActive] = useState(0);
  const steps = [
    { num:'01', title:'Diagnóstico e Levantamento', dur:'Dia 1–2', desc:'Nossa equipe visita sua empresa, analisa o ambiente atual, identifica necessidades, gargalos e riscos. Entregamos um relatório completo — mesmo que você não contrate nada.', del:'Relatório de diagnóstico', icon:'search' },
    { num:'02', title:'Projeto e Proposta', dur:'Dia 3–5', desc:'Com base no diagnóstico, elaboramos o projeto completo: equipamentos, rede, segurança, sistemas e cronograma. Proposta transparente, sem surpresas.', del:'Projeto técnico + proposta comercial', icon:'file-text' },
    { num:'03', title:'Aprovação e Contrato', dur:'Dia 6–7', desc:'Revisamos juntos, ajustamos conforme necessário e formalizamos o contrato com escopo definido e SLAs documentados.', del:'Contrato assinado', icon:'pen-line' },
    { num:'04', title:'Implantação e Configuração', dur:'Semana 2–3', desc:'Instalamos e configuramos toda a infraestrutura: cabeamento, switches, firewall, servidores, estações de trabalho, Wi-Fi, backup e segurança.', del:'Infraestrutura funcionando', icon:'wrench' },
    { num:'05', title:'Treinamento da Equipe', dur:'Semana 3', desc:'Orientamos seus colaboradores sobre o novo ambiente: como usar, boas práticas de segurança e o que fazer em caso de problema.', del:'Equipe capacitada + documentação', icon:'users' },
    { num:'06', title:'Gestão Contínua & Suporte', dur:'Mensal', desc:'Monitoramento 24/7, suporte técnico, atualizações, relatórios mensais de saúde da TI e revisões periódicas.', del:'Relatório mensal + atendimento contínuo', icon:'shield-check' },
  ];
  const st = steps[active];
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a+1)%6), 3000);
    return () => clearInterval(id);
  }, []);
  return (
    <section style={{ background:'linear-gradient(135deg,#012d3a,#16242d)', padding:'90px 32px', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset:0, backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.04 }}/>
      <div style={{ maxWidth:1280, margin:'0 auto', position:'relative', zIndex:1 }}>
        <div style={{ textAlign:'center', marginBottom:64 }}>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:16, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
            <Icon name="map" size={12} color="#d6b886" sw={2.5}/>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Como Trabalhamos</span>
          </div>
          <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(26px,3vw,42px)', fontWeight:900, color:'#fff', letterSpacing:'-0.5px', marginBottom:14 }}>
            Implantação de TI do zero<br/><span style={{ color:'#d6b886' }}>com método e transparência</span>
          </h2>
          <p style={{ fontSize:16, color:'rgba(255,255,255,0.52)', maxWidth:500, margin:'0 auto', lineHeight:1.72, fontFamily:"'Inter',sans-serif" }}>Do diagnóstico à gestão contínua — um processo claro e documentado.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 2fr', gap:44, alignItems:'start' }}>
          {/* List */}
          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
            {steps.map((s,i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                display:'flex', alignItems:'center', gap:14, padding:'13px 16px',
                background: active===i ? 'rgba(214,184,134,0.11)' : 'transparent',
                border:`1.5px solid ${active===i?'rgba(214,184,134,0.33)':'transparent'}`,
                borderRadius:10, cursor:'pointer', textAlign:'left', transition:'all 240ms',
              }}>
                <div style={{ width:34, height:34, borderRadius:9, flexShrink:0, background:active===i?'#d6b886':'rgba(214,184,134,0.10)', display:'flex', alignItems:'center', justifyContent:'center', transition:'all 240ms' }}>
                  <Icon name={s.icon} size={16} color={active===i?'#16242d':'#d6b886'} sw={2}/>
                </div>
                <div>
                  <div style={{ fontSize:12, fontWeight:700, color:active===i?'#fff':'rgba(255,255,255,0.62)', fontFamily:"'Inter',sans-serif" }}>{s.title}</div>
                  <div style={{ fontSize:11, color:'#d6b886', opacity:active===i?1:0.55, fontFamily:"'Inter',sans-serif" }}>{s.dur}</div>
                </div>
              </button>
            ))}
          </div>
          {/* Detail */}
          <div style={{ background:'rgba(255,255,255,0.04)', border:'1.5px solid rgba(214,184,134,0.17)', borderRadius:16, padding:'36px 36px', minHeight:300 }}>
            <div style={{ display:'flex', alignItems:'center', gap:16, marginBottom:22 }}>
              <div style={{ width:54, height:54, borderRadius:14, background:'#d6b886', display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name={st.icon} size={26} color="#16242d" sw={2}/>
              </div>
              <div>
                <div style={{ fontSize:11, color:'#d6b886', fontFamily:"'Inter',sans-serif", fontWeight:700, letterSpacing:'1px', textTransform:'uppercase', marginBottom:3 }}>Etapa {st.num} · {st.dur}</div>
                <div style={{ fontSize:20, fontWeight:800, color:'#fff', fontFamily:"'Poppins',sans-serif" }}>{st.title}</div>
              </div>
            </div>
            <p style={{ fontSize:15, color:'rgba(255,255,255,0.62)', lineHeight:1.82, fontFamily:"'Inter',sans-serif", marginBottom:24 }}>{st.desc}</p>
            <div style={{ display:'flex', alignItems:'center', gap:10, background:'rgba(214,184,134,0.08)', border:'1px solid rgba(214,184,134,0.18)', borderRadius:8, padding:'11px 15px' }}>
              <Icon name="package-check" size={17} color="#d6b886" sw={2}/>
              <div>
                <div style={{ fontSize:10, color:'rgba(255,255,255,0.38)', fontFamily:"'Inter',sans-serif", fontWeight:700, textTransform:'uppercase', letterSpacing:'1px', marginBottom:2 }}>Entregável</div>
                <div style={{ fontSize:13, color:'#fff', fontFamily:"'Inter',sans-serif", fontWeight:600 }}>{st.del}</div>
              </div>
            </div>
            <div style={{ display:'flex', gap:6, marginTop:24 }}>
              {steps.map((_,i) => (
                <div key={i} onClick={() => setActive(i)} style={{ height:4, flex:i===active?3:1, borderRadius:2, background:i===active?'#d6b886':'rgba(214,184,134,0.18)', transition:'all 320ms ease', cursor:'pointer' }}/>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Locação de Infraestrutura ────────────────────────────────────────────────
const LocacaoSection = ({ onNav, asPage }) => {
  const H = asPage ? 'h1' : 'h2';
  const [hov, setHov] = useState(null);
  const items = [
    { icon:'monitor-smartphone', title:'Notebooks corporativos', sub:'Para equipes administrativas, comerciais, híbridas ou remotas.' },
    { icon:'monitor', title:'Desktops corporativos', sub:'Operações fixas, recepção, atendimento, financeiro, backoffice e setores internos.' },
    { icon:'layout-dashboard', title:'Monitores e estações de trabalho', sub:'Mais produtividade, ergonomia e estrutura para equipes que trabalham com múltiplas telas.' },
    { icon:'package-check', title:'Acessórios corporativos', sub:'Teclados, mouses, headsets, webcams, nobreaks, docks e periféricos essenciais.' },
    { icon:'wrench', title:'Equipamentos sob medida', sub:'Configurações conforme o perfil de uso: básico, administrativo, técnico ou alta performance.' },
    { icon:'shield-check', title:'Gestão e suporte Sherlock', sub:'Acompanhamento técnico, manutenção, substituição, configuração e padronização durante o contrato.' },
  ];
  const idealFor = [
    { icon:'building-2', text:'Empresas em crescimento' },
    { icon:'factory', text:'Indústrias com muitos computadores' },
    { icon:'heart-pulse', text:'Clínicas, consultórios e hospitais' },
    { icon:'users', text:'Equipes híbridas ou remotas' },
    { icon:'activity', text:'Operações renovando máquinas antigas' },
  ];
  const benefits = [
    'Menos investimento inicial',
    'Mais previsibilidade de custos',
    'Equipamentos adequados ao perfil da operação',
    'Menos preocupação com manutenção',
    'Substituição e suporte durante o contrato',
    'Padronização do parque tecnológico',
    'Mais segurança na configuração dos dispositivos',
    'Escalabilidade para crescer ou reduzir',
    'Integração com suporte, segurança, backup e monitoramento Sherlock',
  ];
  const steps = [
    { n:'01', icon:'search',       t:'Diagnóstico da necessidade',     d:'A Sherlock entende o tamanho da equipe, o perfil de uso e os riscos atuais da operação.' },
    { n:'02', icon:'layout-dashboard', t:'Dimensionamento da infraestrutura', d:'Definimos os equipamentos, configurações e acessórios ideais para cada função.' },
    { n:'03', icon:'package-check',t:'Entrega e configuração',          d:'As máquinas são preparadas, padronizadas e entregues prontas para uso.' },
    { n:'04', icon:'shield-check', t:'Gestão contínua',                 d:'A Sherlock acompanha o ambiente, presta suporte, orienta melhorias e mantém a operação funcionando.' },
  ];

  return (
    <section id="locacao" data-screen-label="Locação de Infraestrutura" style={{ background:'linear-gradient(180deg,#0a1a22 0%,#012d3a 60%,#16242d 100%)', position:'relative', overflow:'hidden' }}>
      {/* decorative bg */}
      <div style={{ position:'absolute', inset:0, backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.04, pointerEvents:'none' }}/>
      <div style={{ position:'absolute', top:'-10%', left:'-5%', width:480, height:480, borderRadius:'50%', background:'radial-gradient(circle,rgba(214,184,134,0.18),transparent 70%)', filter:'blur(60px)', pointerEvents:'none' }}/>
      <div style={{ position:'absolute', bottom:'5%', right:'-8%', width:520, height:520, borderRadius:'50%', background:'radial-gradient(circle,rgba(1,45,58,0.6),transparent 70%)', filter:'blur(70px)', pointerEvents:'none' }}/>

      {/* INTRO */}
      <div style={{ position:'relative', zIndex:1, maxWidth:1280, margin:'0 auto', padding:(asPage?'140px':'96px')+' 32px 56px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.25fr 1fr', gap:64, alignItems:'center' }}>
          <div>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:18, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
            <Icon name="package-check" size={13} color="#d6b886" sw={2.5}/>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Locação de Infraestrutura de TI</span>
          </div>
          <H style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(28px,3.5vw,52px)', fontWeight:900, color:'#fff', letterSpacing:'-1px', lineHeight:1.08, marginBottom:18 }}>
            Equipe sua empresa<br/><span style={{ color:'#d6b886' }}>sem descapitalizar o caixa.</span>
          </H>
          <p style={{ fontSize:'clamp(15px,1.4vw,18px)', color:'rgba(255,255,255,0.78)', lineHeight:1.7, fontFamily:"'Inter',sans-serif", marginBottom:22, maxWidth:740, fontWeight:500 }}>
            Computadores, notebooks, monitores e acessórios prontos para uso, com suporte técnico, padronização e gestão Sherlock para sua operação funcionar com segurança e previsibilidade.
          </p>
          <p style={{ fontSize:15, color:'rgba(255,255,255,0.55)', lineHeight:1.78, fontFamily:"'Inter',sans-serif", marginBottom:14, maxWidth:760 }}>
            Comprar equipamentos, configurar máquinas, lidar com manutenção, substituição, suporte e obsolescência consome tempo, dinheiro e atenção da gestão. Com a locação de infraestrutura de TI da Sherlock, sua empresa conta com equipamentos adequados ao perfil da operação, suporte especializado e uma estrutura tecnológica mais organizada, segura e escalável.
          </p>
          <p style={{ fontSize:15, color:'rgba(255,255,255,0.55)', lineHeight:1.78, fontFamily:"'Inter',sans-serif", marginBottom:34, maxWidth:760 }}>
            A proposta não é apenas entregar máquinas — é entregar uma <strong style={{ color:'#d6b886', fontWeight:700 }}>base de trabalho confiável</strong> para que sua equipe produza mais, com menos interrupções e menos improviso.
          </p>
          <div style={{ display:'flex', gap:14, flexWrap:'wrap' }}>
            <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'14px 26px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:800, borderRadius:8, textDecoration:'none', transition:'all 200ms', boxShadow:'0 6px 22px rgba(214,184,134,0.32)' }}
              onMouseEnter={e=>{ e.currentTarget.style.background='#c4a673'; e.currentTarget.style.transform='translateY(-2px)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.background='#d6b886'; e.currentTarget.style.transform='translateY(0)'; }}
            >
              <Icon name="stethoscope" size={15} color="#16242d" sw={2.5}/>
              Solicitar Diagnóstico Sherlock Gratuito
            </a>
            <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'14px 24px', background:'transparent', color:'#fff', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:600, borderRadius:8, textDecoration:'none', border:'1.5px solid rgba(255,255,255,0.22)', transition:'all 200ms' }}
              onMouseEnter={e=>{ e.currentTarget.style.borderColor='#d6b886'; e.currentTarget.style.color='#d6b886'; }}
              onMouseLeave={e=>{ e.currentTarget.style.borderColor='rgba(255,255,255,0.22)'; e.currentTarget.style.color='#fff'; }}
            >
              <WAIcon size={15} color="currentColor"/>
              Falar com um especialista
            </a>
          </div>
          </div>

          {/* Image */}
          <div className="locacao-photo" style={{ position:'relative', borderRadius:18, overflow:'hidden', aspectRatio:'3/4', boxShadow:'0 28px 64px rgba(0,0,0,0.45)', border:'1px solid rgba(214,184,134,0.20)' }}>
            <img src={BASE+"assets/locacao-escritorio.jpg"} alt="Escritório corporativo com infraestrutura de TI organizada" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block', filter:'saturate(0.92) brightness(0.86)' }}/>
            <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,rgba(10,26,34,0.25) 0%,rgba(10,26,34,0.10) 40%,rgba(1,45,58,0.78) 100%)' }}/>
            {/* Floating badge */}
            <div style={{ position:'absolute', top:20, left:20, display:'flex', alignItems:'center', gap:8, background:'rgba(10,26,34,0.65)', backdropFilter:'blur(10px)', border:'1px solid rgba(214,184,134,0.32)', borderRadius:100, padding:'7px 14px' }}>
              <div style={{ width:6, height:6, borderRadius:'50%', background:'#d6b886', animation:'pulseRing 2s ease infinite' }}/>
              <span style={{ fontSize:10, fontWeight:800, letterSpacing:'1.5px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Infra como serviço</span>
            </div>
            {/* Bottom caption */}
            <div style={{ position:'absolute', left:0, right:0, bottom:0, padding:'22px 22px 24px' }}>
              <div style={{ fontFamily:"'Poppins',sans-serif", fontSize:18, fontWeight:800, color:'#fff', lineHeight:1.25, marginBottom:6, letterSpacing:'-0.3px' }}>
                Operação pronta no <span style={{ color:'#d6b886' }}>dia zero.</span>
              </div>
              <div style={{ fontSize:12, color:'rgba(255,255,255,0.72)', fontFamily:"'Inter',sans-serif", lineHeight:1.55 }}>
                Equipamentos padronizados, configurados e sob gestão Sherlock — entregues prontos para o time produzir.
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* EQUIPMENT CARDS */}
      <div style={{ position:'relative', zIndex:1, maxWidth:1280, margin:'0 auto', padding:'0 32px 80px' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif", marginBottom:22 }}>O que você pode locar</div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }}>
          {items.map((it,i) => (
            <div key={i}
              onMouseEnter={() => setHov(i)}
              onMouseLeave={() => setHov(null)}
              style={{
                background: hov===i ? 'linear-gradient(160deg,rgba(214,184,134,0.10),rgba(214,184,134,0.02))' : 'rgba(255,255,255,0.03)',
                border:`1.5px solid ${hov===i?'rgba(214,184,134,0.45)':'rgba(214,184,134,0.13)'}`,
                borderRadius:14, padding:'26px 22px',
                transition:'all 280ms ease',
                transform: hov===i ? 'translateY(-4px)' : 'translateY(0)',
                position:'relative', overflow:'hidden',
              }}
            >
              <div style={{ width:48, height:48, borderRadius:12, background:hov===i?'#d6b886':'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.22)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:18, transition:'all 280ms' }}>
                <Icon name={it.icon} size={22} color={hov===i?'#16242d':'#d6b886'} sw={1.75}/>
              </div>
              <div style={{ fontSize:11, fontWeight:800, color:'#d6b886', fontFamily:"'Inter',sans-serif", letterSpacing:'1px', marginBottom:6 }}>0{i+1}</div>
              <div style={{ fontFamily:"'Poppins',sans-serif", fontSize:18, fontWeight:800, color:'#fff', marginBottom:8, lineHeight:1.25 }}>{it.title}</div>
              <div style={{ fontSize:13.5, color:'rgba(255,255,255,0.6)', fontFamily:"'Inter',sans-serif", lineHeight:1.65 }}>{it.sub}</div>
            </div>
          ))}
        </div>
      </div>

      {/* IDEAL FOR + WHY (light contrast block) */}
      <div style={{ position:'relative', zIndex:1, background:'#f8f9fa', padding:'80px 32px' }}>
        <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:60, alignItems:'start' }}>
          <div>
            <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:16, background:'rgba(214,184,134,0.12)', border:'1px solid rgba(214,184,134,0.30)', borderRadius:100, padding:'6px 16px' }}>
              <Icon name="target" size={13} color="#c4a673" sw={2.5}/>
              <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#c4a673', fontFamily:"'Inter',sans-serif" }}>Para quem é ideal</span>
            </div>
            <h3 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(22px,2.5vw,32px)', fontWeight:900, color:'#16242d', letterSpacing:'-0.5px', marginBottom:14, lineHeight:1.18 }}>
              Empresas que precisam de uma TI sólida — sem o peso da compra.
            </h3>
            <p style={{ fontSize:14.5, color:'#6c757d', lineHeight:1.78, fontFamily:"'Inter',sans-serif", marginBottom:26 }}>
              A locação faz sentido quando a empresa quer crescer com agilidade, padronizar equipamentos e ter suporte técnico sempre disponível.
            </p>
            <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
              {idealFor.map((it,i) => (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px', background:'#fff', border:'1.5px solid #e9ecef', borderRadius:9, transition:'all 200ms' }}
                  onMouseEnter={e=>{ e.currentTarget.style.borderColor='#d6b886'; e.currentTarget.style.transform='translateX(4px)'; }}
                  onMouseLeave={e=>{ e.currentTarget.style.borderColor='#e9ecef'; e.currentTarget.style.transform='translateX(0)'; }}
                >
                  <div style={{ width:30, height:30, borderRadius:7, background:'rgba(214,184,134,0.12)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                    <Icon name={it.icon} size={14} color="#c4a673" sw={2}/>
                  </div>
                  <span style={{ fontSize:13.5, color:'#16242d', fontFamily:"'Inter',sans-serif", fontWeight:500 }}>{it.text}</span>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:16, background:'#16242d', borderRadius:100, padding:'6px 16px' }}>
              <Icon name="check-circle-2" size={13} color="#d6b886" sw={2.5}/>
              <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Por que locar com a Sherlock</span>
            </div>
            <h3 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(22px,2.5vw,32px)', fontWeight:900, color:'#16242d', letterSpacing:'-0.5px', marginBottom:14, lineHeight:1.18 }}>
              Mais que máquinas. Uma <span style={{ color:'#c4a673' }}>parceria de continuidade.</span>
            </h3>
            <p style={{ fontSize:14.5, color:'#6c757d', lineHeight:1.78, fontFamily:"'Inter',sans-serif", marginBottom:26 }}>
              Locar com a Sherlock é integrar sua infraestrutura ao mesmo ecossistema de suporte, segurança e monitoramento que protege sua operação.
            </p>
            <div style={{ background:'linear-gradient(155deg,#012d3a,#16242d)', borderRadius:14, padding:'28px 26px', position:'relative', overflow:'hidden', border:'1px solid rgba(214,184,134,0.18)', boxShadow:'0 18px 40px rgba(0,0,0,0.18)' }}>
              <div style={{ position:'absolute', inset:0, backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.05, pointerEvents:'none' }}/>
              <div style={{ position:'relative', display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
                {benefits.map((b,i) => (
                  <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:9 }}>
                    <Icon name="check-circle-2" size={15} color="#d6b886" sw={2} style={{ flexShrink:0, marginTop:2 }}/>
                    <span style={{ fontSize:13, color:'rgba(255,255,255,0.78)', fontFamily:"'Inter',sans-serif", lineHeight:1.55 }}>{b}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* COMO FUNCIONA */}
      <div style={{ position:'relative', zIndex:1, padding:'80px 32px 60px' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ textAlign:'center', marginBottom:54 }}>
            <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:14, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
              <Icon name="map" size={12} color="#d6b886" sw={2.5}/>
              <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Como funciona</span>
            </div>
            <h3 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(22px,2.6vw,34px)', fontWeight:900, color:'#fff', letterSpacing:'-0.5px', lineHeight:1.18 }}>
              Do diagnóstico à gestão contínua,<br/><span style={{ color:'#d6b886' }}>em quatro passos.</span>
            </h3>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20, position:'relative' }}>
            {/* connecting line */}
            <div style={{ position:'absolute', top:34, left:'12%', right:'12%', height:1, background:'linear-gradient(90deg,transparent,rgba(214,184,134,0.35),rgba(214,184,134,0.35),transparent)', pointerEvents:'none' }}/>
            {steps.map((s,i) => (
              <div key={i} style={{ background:'rgba(255,255,255,0.03)', border:'1px solid rgba(214,184,134,0.15)', borderRadius:14, padding:'26px 22px', position:'relative', backdropFilter:'blur(4px)' }}>
                <div style={{ width:60, height:60, borderRadius:'50%', background:'#16242d', border:'1.5px solid #d6b886', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 16px', position:'relative', zIndex:1 }}>
                  <Icon name={s.icon} size={22} color="#d6b886" sw={1.8}/>
                </div>
                <div style={{ textAlign:'center', fontSize:10, fontWeight:800, color:'#d6b886', fontFamily:"'Inter',sans-serif", letterSpacing:'1.5px', marginBottom:6 }}>ETAPA {s.n}</div>
                <div style={{ textAlign:'center', fontFamily:"'Poppins',sans-serif", fontSize:16, fontWeight:800, color:'#fff', marginBottom:10, lineHeight:1.3 }}>{s.t}</div>
                <p style={{ textAlign:'center', fontSize:12.5, color:'rgba(255,255,255,0.58)', fontFamily:"'Inter',sans-serif", lineHeight:1.65 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* HIGHLIGHT */}
      <div style={{ position:'relative', zIndex:1, padding:'40px 32px 96px' }}>
        <div style={{ maxWidth:1080, margin:'0 auto', background:'linear-gradient(135deg,rgba(214,184,134,0.14),rgba(214,184,134,0.04))', border:'1.5px solid rgba(214,184,134,0.32)', borderRadius:18, padding:'44px 44px', position:'relative', overflow:'hidden' }}>
          <div style={{ position:'absolute', top:0, left:0, right:0, height:3, background:'linear-gradient(90deg,transparent,#d6b886,transparent)' }}/>
          <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:40, alignItems:'center' }}>
            <div>
              <h3 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(22px,2.6vw,32px)', fontWeight:900, color:'#fff', letterSpacing:'-0.5px', lineHeight:1.2, marginBottom:14 }}>
                Sua empresa não precisa comprar tudo para <span style={{ color:'#d6b886' }}>operar com qualidade.</span>
              </h3>
              <p style={{ fontSize:14.5, color:'rgba(255,255,255,0.65)', lineHeight:1.78, fontFamily:"'Inter',sans-serif" }}>
                Com a locação de infraestrutura de TI, sua operação ganha flexibilidade, controle e suporte profissional. A Sherlock cuida da base tecnológica para que sua empresa foque no que realmente importa: <strong style={{ color:'#fff', fontWeight:700 }}>produtividade, segurança e crescimento</strong>.
              </p>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', justifyContent:'center', gap:10, padding:'15px 24px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:800, borderRadius:8, textDecoration:'none', transition:'all 200ms', boxShadow:'0 8px 24px rgba(214,184,134,0.32)' }}
                onMouseEnter={e=>{ e.currentTarget.style.background='#c4a673'; e.currentTarget.style.transform='translateY(-2px)'; }}
                onMouseLeave={e=>{ e.currentTarget.style.background='#d6b886'; e.currentTarget.style.transform='translateY(0)'; }}
              >
                <Icon name="stethoscope" size={15} color="#16242d" sw={2.5}/>
                Solicitar Diagnóstico Gratuito
              </a>
              <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', justifyContent:'center', gap:10, padding:'14px 22px', background:'transparent', color:'#d6b886', fontFamily:"'Inter',sans-serif", fontSize:13, fontWeight:700, borderRadius:8, textDecoration:'none', border:'1.5px solid rgba(214,184,134,0.45)', transition:'all 200ms' }}
                onMouseEnter={e=>{ e.currentTarget.style.background='rgba(214,184,134,0.10)'; }}
                onMouseLeave={e=>{ e.currentTarget.style.background='transparent'; }}
              >
                <WAIcon size={14} color="#d6b886"/>
                Falar com um especialista
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Testimonials ─────────────────────────────────────────────────────────────
const TestimonialsSection = () => {
  const [cur, setCur] = useState(0);
  const ts = [
    { text:'Antes da Sherlock, ficávamos horas sem internet e ninguém sabia o que estava acontecendo. Hoje temos monitoramento contínuo e os problemas são resolvidos antes que a equipe perceba.', author:'Carlos M.', role:'Diretor de Operações', seg:'Indústria — Rio de Janeiro' },
    { text:'Implantaram toda a nossa TI em menos de duas semanas. Rede, servidor, câmeras, estações de trabalho. Tudo organizado e documentado. Nunca tivemos uma TI tão profissional.', author:'Ana P.', role:'Sócia-Proprietária', seg:'Consultório Médico — Barra da Tijuca, RJ' },
    { text:'O diagnóstico gratuito foi revelador. Descobrimos vulnerabilidades que não sabíamos que existiam. Contratamos os serviços gerenciados na semana seguinte.', author:'Ricardo L.', role:'Gerente de TI', seg:'Hospital — Zona Sul, RJ' },
    { text:'A locação de equipamentos resolveu nosso problema de capital. Pagamos mensalmente, temos tudo sempre atualizado e sem dor de cabeça com manutenção.', author:'Fernanda S.', role:'CEO', seg:'Empresa de Varejo — Rio de Janeiro' },
  ];
  useEffect(() => {
    const id = setInterval(() => setCur(c => (c+1)%ts.length), 5000);
    return () => clearInterval(id);
  }, []);
  const t = ts[cur];
  return (
    <section style={{ background:'#fff', padding:'90px 32px', position:'relative' }}>
      <div style={{ position:'absolute', top:0, left:0, right:0, height:3, background:'linear-gradient(90deg,transparent,#d6b886 30%,#d6b886 70%,transparent)' }}/>
      <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'center' }}>
        <div>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:18, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>O que dizem nossos clientes</span>
          </div>
          <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(24px,2.8vw,38px)', fontWeight:900, color:'#16242d', letterSpacing:'-0.5px', marginBottom:16, lineHeight:1.12 }}>
            Empresas do RJ que<br/>confiam na Sherlock
          </h2>
          <p style={{ fontSize:15, color:'#6c757d', lineHeight:1.78, fontFamily:"'Inter',sans-serif", marginBottom:36 }}>
            Somente atendemos no Rio de Janeiro — o que nos permite oferecer suporte presencial rápido e relacionamento de parceria real.
          </p>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            {[{n:'24h',l:'Tempo máximo de resposta'},{n:'100%',l:'Foco em clientes corporativos'},{n:'24/7',l:'Monitoramento ativo'},{n:'RJ',l:'Atendimento exclusivo no estado'}].map(m => (
              <div key={m.l} style={{ background:'#f8f9fa', border:'1.5px solid #e9ecef', borderRadius:10, padding:'18px 16px' }}>
                <div style={{ fontFamily:"'Poppins',sans-serif", fontSize:26, fontWeight:900, color:'#d6b886', marginBottom:4 }}>{m.n}</div>
                <div style={{ fontSize:12, color:'#6c757d', fontFamily:"'Inter',sans-serif", lineHeight:1.4 }}>{m.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{ background:'linear-gradient(135deg,#012d3a,#16242d)', borderRadius:16, padding:'36px 32px', position:'relative', minHeight:260 }}>
            <div style={{ position:'absolute', inset:0, backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.05, borderRadius:16 }}/>
            <div style={{ fontSize:72, fontFamily:"'Poppins',sans-serif", fontWeight:900, color:'rgba(214,184,134,0.13)', lineHeight:.6, marginBottom:20, position:'relative', zIndex:1 }}>"</div>
            <p style={{ fontSize:15, color:'rgba(255,255,255,0.78)', lineHeight:1.82, fontFamily:"'Inter',sans-serif", fontStyle:'italic', marginBottom:24, position:'relative', zIndex:1 }}>{t.text}</p>
            <div style={{ display:'flex', alignItems:'center', gap:12, position:'relative', zIndex:1 }}>
              <div style={{ width:42, height:42, borderRadius:'50%', background:'#d6b886', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:"'Poppins',sans-serif", fontSize:16, fontWeight:900, color:'#16242d', flexShrink:0 }}>{t.author[0]}</div>
              <div>
                <div style={{ fontSize:14, fontWeight:700, color:'#fff', fontFamily:"'Inter',sans-serif" }}>{t.author}</div>
                <div style={{ fontSize:12, color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>{t.role}</div>
                <div style={{ fontSize:11, color:'rgba(255,255,255,0.38)', fontFamily:"'Inter',sans-serif" }}>{t.seg}</div>
              </div>
            </div>
          </div>
          <div style={{ display:'flex', gap:8, marginTop:14, justifyContent:'center' }}>
            {ts.map((_,i) => (
              <button key={i} onClick={() => setCur(i)} style={{ width:i===cur?26:8, height:8, borderRadius:4, border:'none', cursor:'pointer', background:i===cur?'#d6b886':'#e9ecef', transition:'all 280ms' }}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── CTA Section ──────────────────────────────────────────────────────────────
const CTASection = () => (
  <section style={{ background:'#d6b886', padding:'76px 32px', position:'relative', overflow:'hidden' }}>
    <div style={{ position:'absolute', inset:0, backgroundImage:'radial-gradient(circle at 20% 50%,rgba(255,255,255,0.18) 0%,transparent 60%),radial-gradient(circle at 80% 50%,rgba(22,36,45,0.10) 0%,transparent 60%)' }}/>
    <div style={{ maxWidth:760, margin:'0 auto', textAlign:'center', position:'relative', zIndex:1 }}>
      <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:18, background:'rgba(22,36,45,0.10)', borderRadius:100, padding:'6px 16px' }}>
        <div style={{ width:6, height:6, borderRadius:'50%', background:'#16242d', opacity:.7 }}/>
        <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#16242d', opacity:.65, fontFamily:"'Inter',sans-serif" }}>Somente no Rio de Janeiro</span>
      </div>
      <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(26px,4vw,50px)', fontWeight:900, color:'#16242d', letterSpacing:'-1px', marginBottom:14, lineHeight:1.08 }}>
        Sua empresa merece uma<br/>TI que funciona de verdade.
      </h2>
      <p style={{ fontSize:17, color:'rgba(22,36,45,0.68)', marginBottom:36, fontFamily:"'Inter',sans-serif", lineHeight:1.68 }}>
        Solicite agora o diagnóstico gratuito e descubra como a Sherlock pode transformar a tecnologia da sua empresa.
      </p>
      <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:12, padding:'16px 34px', background:'#16242d', color:'#d6b886', fontFamily:"'Inter',sans-serif", fontSize:16, fontWeight:800, borderRadius:8, textDecoration:'none', transition:'all 200ms', boxShadow:'0 8px 24px rgba(22,36,45,0.22)' }}
        onMouseEnter={e=>{ e.currentTarget.style.background='#012d3a'; e.currentTarget.style.transform='translateY(-2px)'; }}
        onMouseLeave={e=>{ e.currentTarget.style.background='#16242d'; e.currentTarget.style.transform='translateY(0)'; }}
      >
        <WAIcon size={20} color="#d6b886"/>
        Agendar Diagnóstico pelo WhatsApp
      </a>
      <p style={{ marginTop:18, fontSize:13, color:'rgba(22,36,45,0.52)', fontFamily:"'Inter',sans-serif" }}>Gratuito · Sem compromisso · Atendemos apenas no Rio de Janeiro</p>
    </div>
  </section>
);

// ─── About Section ────────────────────────────────────────────────────────────
const AboutSection = () => (
  <section style={{ background:'#fff', padding:'90px 32px' }}>
    <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'center' }}>
      <div>
        <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:18, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
          <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Sobre a Sherlock</span>
        </div>
        <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(24px,2.8vw,40px)', fontWeight:900, color:'#16242d', letterSpacing:'-0.5px', marginBottom:18, lineHeight:1.12 }}>
          Tecnologia não é improviso,<br/><span style={{ color:'#d6b886' }}>é estratégia.</span>
        </h2>
        <p style={{ fontSize:15, color:'#6c757d', lineHeight:1.82, marginBottom:18, fontFamily:"'Inter',sans-serif" }}>
          Fundada em 2021, a Sherlock BR nasceu para transformar a TI de um ponto de risco em um pilar de proteção operacional. Somos parceiros estratégicos — não apenas um helpdesk.
        </p>
        <p style={{ fontSize:15, color:'#6c757d', lineHeight:1.82, marginBottom:30, fontFamily:"'Inter',sans-serif" }}>
          <strong style={{ color:'#16242d' }}>Atuamos exclusivamente no Rio de Janeiro</strong>, o que nos permite oferecer suporte presencial rápido, conhecer o contexto real de cada cliente e construir relacionamentos de longo prazo.
        </p>
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {[
            { icon:'map-pin', text:'CEO Corporate, Av. João Cabral de Melo Neto, 850, Barra da Tijuca · RJ' },
            { icon:'briefcase', text:'ALB Inteligência Digital Ltda. · CNPJ 43.522.361/0001-00' },
            { icon:'target', text:'Ser o parceiro estratégico de TI de empresas que precisam de continuidade e segurança' },
          ].map((item,i) => (
            <div key={i} style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
              <div style={{ width:32, height:32, borderRadius:8, background:'rgba(214,184,134,0.10)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1 }}>
                <Icon name={item.icon} size={14} color="#d6b886" sw={2}/>
              </div>
              <span style={{ fontSize:13, color:'#6c757d', fontFamily:"'Inter',sans-serif", lineHeight:1.6 }}>{item.text}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
        {[
          { icon:'shield', title:'Prevenção', sub:'Agimos antes que o problema aconteça' },
          { icon:'activity', title:'Continuidade', sub:'Sua operação nunca para' },
          { icon:'lock', title:'Segurança', sub:'Dados e sistemas protegidos' },
          { icon:'handshake', title:'Parceria', sub:'Estratégia, não apenas suporte' },
        ].map((p,i) => (
          <div key={i} style={{ background:'linear-gradient(135deg,#012d3a,#16242d)', borderRadius:12, padding:'26px 20px', border:'1px solid rgba(214,184,134,0.10)' }}>
            <div style={{ width:42, height:42, borderRadius:10, background:'rgba(214,184,134,0.12)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:12 }}>
              <Icon name={p.icon} size={20} color="#d6b886" sw={1.75}/>
            </div>
            <div style={{ fontSize:15, fontWeight:700, color:'#fff', fontFamily:"'Inter',sans-serif", marginBottom:6 }}>{p.title}</div>
            <div style={{ fontSize:12, color:'rgba(255,255,255,0.52)', fontFamily:"'Inter',sans-serif", lineHeight:1.5 }}>{p.sub}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ─── Contact Section ──────────────────────────────────────────────────────────
const ContactSection = () => {
  const [form, setForm] = useState({ name:'', company:'', segment:'', email:'', phone:'', message:'' });
  const [sent, setSent] = useState(false);
  const inp = { padding:'11px 14px', border:'2px solid #e9ecef', borderRadius:8, fontFamily:"'Inter',sans-serif", fontSize:14, color:'#16242d', outline:'none', width:'100%', transition:'border-color 200ms', background:'#fff' };
  const focus = e => e.currentTarget.style.borderColor = '#d6b886';
  const blur = e => e.currentTarget.style.borderColor = '#e9ecef';
  if (sent) return (
    <section style={{ background:'#f8f9fa', padding:'90px 32px', minHeight:'55vh', display:'flex', alignItems:'center' }}>
      <div style={{ maxWidth:500, margin:'0 auto', textAlign:'center' }}>
        <div style={{ width:68, height:68, borderRadius:'50%', background:'rgba(214,184,134,0.12)', border:'2px solid #d6b886', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 22px', fontSize:26, color:'#d6b886', fontWeight:900 }}>✓</div>
        <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:28, fontWeight:900, color:'#16242d', marginBottom:12 }}>Solicitação recebida!</h2>
        <p style={{ fontSize:15, color:'#6c757d', lineHeight:1.72, fontFamily:"'Inter',sans-serif", marginBottom:26 }}>Abrimos o WhatsApp com a sua solicitação — é só enviar para falar agora com nossa equipe. Se o WhatsApp não abrir, use o botão abaixo. Também retornamos em até 24h.</p>
        <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
          <a href={waLink(`Olá! Quero agendar o diagnóstico gratuito de TI.\n\nNome: ${form.name}\nEmpresa: ${form.company}${form.segment?`\nSegmento: ${form.segment}`:''}\nE-mail: ${form.email}\nWhatsApp: ${form.phone}${form.message?`\n\nMensagem: ${form.message}`:''}`)} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:9, padding:'12px 24px', background:'#25D366', color:'#fff', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:700, border:'none', borderRadius:8, textDecoration:'none' }}>
            <WAIcon size={17} color="#fff"/> Continuar no WhatsApp
          </a>
          <button onClick={() => setSent(false)} style={{ padding:'12px 24px', background:'transparent', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:700, border:'2px solid #e9ecef', borderRadius:8, cursor:'pointer', transition:'border-color 200ms' }}
          onMouseEnter={e=>e.currentTarget.style.borderColor='#d6b886'}
          onMouseLeave={e=>e.currentTarget.style.borderColor='#e9ecef'}
        >Voltar</button>
        </div>
      </div>
    </section>
  );
  return (
    <section style={{ background:'#f8f9fa', padding:'90px 32px' }}>
      <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.15fr', gap:68, alignItems:'start' }}>
        <div>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:18, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 16px' }}>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Fale conosco</span>
          </div>
          <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(24px,2.8vw,38px)', fontWeight:900, color:'#16242d', letterSpacing:'-0.5px', marginBottom:14, lineHeight:1.12 }}>Agende seu<br/><span style={{ color:'#d6b886' }}>Diagnóstico Gratuito</span></h2>
          <p style={{ fontSize:15, color:'#6c757d', lineHeight:1.78, marginBottom:30, fontFamily:"'Inter',sans-serif" }}>Nossa equipe analisa sua infraestrutura sem custo e entrega um relatório completo. Atendemos empresas, indústrias, clínicas e hospitais no Rio de Janeiro.</p>
          <div style={{ display:'flex', flexDirection:'column', gap:14, marginBottom:30 }}>
            {[{icon:'search',text:'Análise completa do ambiente de TI'},{icon:'file-text',text:'Relatório detalhado de vulnerabilidades'},{icon:'shield',text:'Recomendações de segurança personalizadas'},{icon:'clock',text:'Retorno em até 24h'}].map(b => (
              <div key={b.text} style={{ display:'flex', alignItems:'center', gap:12 }}>
                <div style={{ width:32, height:32, borderRadius:8, background:'rgba(214,184,134,0.10)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <Icon name={b.icon} size={15} color="#d6b886" sw={2}/>
                </div>
                <span style={{ fontSize:14, color:'#16242d', fontFamily:"'Inter',sans-serif", fontWeight:500 }}>{b.text}</span>
              </div>
            ))}
          </div>
          <div style={{ background:'#fff', border:'2px solid #e9ecef', borderRadius:12, padding:'18px 20px' }}>
            <div style={{ fontSize:11, fontWeight:700, color:'#6c757d', fontFamily:"'Inter',sans-serif", textTransform:'uppercase', letterSpacing:'1px', marginBottom:8 }}>Prefere falar agora?</div>
            <a href={WA_LINK} style={{ display:'flex', alignItems:'center', gap:10, fontSize:15, fontWeight:700, color:'#16242d', textDecoration:'none', fontFamily:"'Inter',sans-serif" }}>
              <WAIcon size={20} color="#25D366"/>
              (21) 96681-1227 · WhatsApp
            </a>
          </div>
        </div>
        <div style={{ background:'#fff', border:'2px solid #e9ecef', borderRadius:16, padding:'38px 34px', boxShadow:'0 8px 32px rgba(0,0,0,0.07)' }}>
          <h3 style={{ fontFamily:"'Poppins',sans-serif", fontSize:21, fontWeight:800, color:'#16242d', marginBottom:26 }}>Agendar Diagnóstico Gratuito</h3>
          <form onSubmit={e=>{ e.preventDefault();
            const msg = `Olá! Quero agendar o diagnóstico gratuito de TI.\n\nNome: ${form.name}\nEmpresa: ${form.company}${form.segment?`\nSegmento: ${form.segment}`:''}\nE-mail: ${form.email}\nWhatsApp: ${form.phone}${form.message?`\n\nMensagem: ${form.message}`:''}`;
            window.open(waLink(msg), '_blank', 'noopener');
            setSent(true);
          }} style={{ display:'flex', flexDirection:'column', gap:16 }}>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
              <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
                <label style={{ fontSize:12, fontWeight:600, color:'#16242d', fontFamily:"'Inter',sans-serif" }}>Seu nome *</label>
                <input style={inp} type="text" placeholder="João Silva" required value={form.name} onChange={e=>setForm({...form,name:e.target.value})} onFocus={focus} onBlur={blur}/>
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
                <label style={{ fontSize:12, fontWeight:600, color:'#16242d', fontFamily:"'Inter',sans-serif" }}>Empresa *</label>
                <input style={inp} type="text" placeholder="Nome da empresa" required value={form.company} onChange={e=>setForm({...form,company:e.target.value})} onFocus={focus} onBlur={blur}/>
              </div>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={{ fontSize:12, fontWeight:600, color:'#16242d', fontFamily:"'Inter',sans-serif" }}>Segmento</label>
              <select style={{ ...inp, background:'#fff' }} value={form.segment} onChange={e=>setForm({...form,segment:e.target.value})} onFocus={focus} onBlur={blur}>
                <option value="">Selecione o segmento...</option>
                <option>Empresa / Escritório Corporativo</option>
                <option>Indústria / Fábrica</option>
                <option>Consultório Médico / Clínica</option>
                <option>Hospital / Saúde</option>
                <option>Varejo / Loja</option>
                <option>Condomínio</option>
                <option>Outro</option>
              </select>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
              <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
                <label style={{ fontSize:12, fontWeight:600, color:'#16242d', fontFamily:"'Inter',sans-serif" }}>E-mail corporativo *</label>
                <input style={inp} type="email" placeholder="joao@empresa.com.br" required value={form.email} onChange={e=>setForm({...form,email:e.target.value})} onFocus={focus} onBlur={blur}/>
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
                <label style={{ fontSize:12, fontWeight:600, color:'#16242d', fontFamily:"'Inter',sans-serif" }}>WhatsApp *</label>
                <input style={inp} type="tel" placeholder="(21) 99999-9999" required value={form.phone} onChange={e=>setForm({...form,phone:e.target.value})} onFocus={focus} onBlur={blur}/>
              </div>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={{ fontSize:12, fontWeight:600, color:'#16242d', fontFamily:"'Inter',sans-serif" }}>Conte sobre sua operação</label>
              <textarea style={{ ...inp, resize:'vertical', minHeight:82 }} placeholder="Quantos computadores? Qual o principal problema hoje?" value={form.message} onChange={e=>setForm({...form,message:e.target.value})} onFocus={focus} onBlur={blur}/>
            </div>
            <button type="submit" style={{ padding:'14px 24px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:15, fontWeight:700, border:'none', borderRadius:8, cursor:'pointer', transition:'all 200ms' }}
              onMouseEnter={e=>{ e.currentTarget.style.background='#c4a673'; e.currentTarget.style.transform='translateY(-1px)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.background='#d6b886'; e.currentTarget.style.transform='translateY(0)'; }}
            >Solicitar Diagnóstico Gratuito</button>
            <p style={{ fontSize:11, color:'#adb5bd', textAlign:'center', fontFamily:"'Inter',sans-serif" }}>Seus dados são tratados com sigilo. Sem spam.</p>
          </form>
        </div>
      </div>
    </section>
  );
};

// ─── Mapa / Localização ───────────────────────────────────────────────────────
const MAPS_PLACE = "https://www.google.com/maps/place/Sherlock+%7C+Suporte+em+Tecnologia/@-22.9849673,-43.3612986,17z/data=!3m1!4b1!4m6!3m5!1s0x9bda2f60d41f4d:0xa7a9a7481ac7e35f!8m2!3d-22.9849673!4d-43.3587183!16s%2Fg%2F11vm8crlk8";
const MAPS_ROUTE = "https://www.google.com/maps/dir/?api=1&destination=-22.9849673,-43.3587183&destination_place_id=ChIJTR_UYPYtvQkRX-PHGkinqac";
const MAPS_EMBED = "https://www.google.com/maps?q=Sherlock%20%7C%20Suporte%20em%20Tecnologia%2C%20Av.%20Jo%C3%A3o%20Cabral%20de%20Melo%20Neto%2C%20850%2C%20Barra%20da%20Tijuca%2C%20Rio%20de%20Janeiro&hl=pt-BR&z=16&output=embed";

const MapSection = () => {
  const linkBase = { display:'inline-flex', alignItems:'center', gap:9, padding:'12px 20px', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:700, borderRadius:8, textDecoration:'none', transition:'all 200ms' };
  return (
    <section style={{ background:'#f8f9fa', padding:'0 32px 90px' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.55fr', gap:36, alignItems:'stretch' }} className="map-grid">
          <div style={{ background:'linear-gradient(155deg,#012d3a,#16242d)', borderRadius:16, padding:'38px 34px', position:'relative', overflow:'hidden', border:'1px solid rgba(214,184,134,0.16)' }}>
            <div style={{ position:'absolute', inset:0, backgroundImage:`url('${PATTERN}')`, backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.05, pointerEvents:'none' }}/>
            <div style={{ position:'relative', zIndex:1, display:'flex', flexDirection:'column', height:'100%' }}>
              <div style={{ display:'inline-flex', alignItems:'center', gap:8, alignSelf:'flex-start', marginBottom:18, background:'rgba(214,184,134,0.10)', border:'1px solid rgba(214,184,134,0.25)', borderRadius:100, padding:'6px 15px' }}>
                <Icon name="map-pin" size={13} color="#d6b886" sw={2.4}/>
                <span style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif" }}>Onde estamos</span>
              </div>
              <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(24px,2.6vw,34px)', fontWeight:900, color:'#fff', letterSpacing:'-0.8px', lineHeight:1.14, marginBottom:16 }}>
                Barra da Tijuca,<br/><span style={{ color:'#d6b886' }}>Rio de Janeiro.</span>
              </h2>
              <p style={{ fontSize:15, color:'rgba(255,255,255,0.62)', lineHeight:1.75, fontFamily:"'Inter',sans-serif", marginBottom:22 }}>
                Nossa base fica no CEO Corporate, na Barra — e o atendimento técnico é presencial em toda a cidade do Rio de Janeiro.
              </p>
              <div style={{ display:'flex', flexDirection:'column', gap:14, paddingTop:20, borderTop:'1px solid rgba(214,184,134,0.16)', marginBottom:26 }}>
                <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
                  <Icon name="map-pin" size={17} color="#d6b886" sw={2}/>
                  <div style={{ fontSize:14, color:'rgba(255,255,255,0.82)', fontFamily:"'Inter',sans-serif", lineHeight:1.6 }}>
                    CEO Corporate — Av. João Cabral de Melo Neto, 850<br/>Barra da Tijuca, Rio de Janeiro — RJ
                  </div>
                </div>
                <div style={{ display:'flex', gap:12, alignItems:'center' }}>
                  <Icon name="clock" size={17} color="#d6b886" sw={2}/>
                  <div style={{ fontSize:14, color:'rgba(255,255,255,0.82)', fontFamily:"'Inter',sans-serif" }}>Seg a Sex, 9h às 18h · Suporte crítico 24/7</div>
                </div>
              </div>
              <div style={{ display:'flex', gap:12, flexWrap:'wrap', marginTop:'auto' }}>
                <a href={MAPS_ROUTE} target="_blank" rel="noopener noreferrer" style={{ ...linkBase, background:'#d6b886', color:'#16242d' }}
                  onMouseEnter={e=>e.currentTarget.style.background='#c4a673'}
                  onMouseLeave={e=>e.currentTarget.style.background='#d6b886'}>
                  <Icon name="navigation" size={16} color="#16242d" sw={2.2}/> Traçar rota
                </a>
                <a href={MAPS_PLACE} target="_blank" rel="noopener noreferrer" style={{ ...linkBase, background:'transparent', color:'rgba(255,255,255,0.78)', border:'1px solid rgba(255,255,255,0.22)', fontWeight:600 }}
                  onMouseEnter={e=>{ e.currentTarget.style.borderColor='#d6b886'; e.currentTarget.style.color='#d6b886'; }}
                  onMouseLeave={e=>{ e.currentTarget.style.borderColor='rgba(255,255,255,0.22)'; e.currentTarget.style.color='rgba(255,255,255,0.78)'; }}>
                  Ver no Google Maps
                </a>
              </div>
            </div>
          </div>
          <div style={{ borderRadius:16, overflow:'hidden', border:'2px solid #e9ecef', boxShadow:'0 20px 48px rgba(1,45,58,0.12)', minHeight:420, background:'#e9ecef' }}>
            <iframe title="Sherlock BR no Google Maps — Barra da Tijuca, Rio de Janeiro" src={MAPS_EMBED}
              style={{ width:'100%', height:'100%', minHeight:420, border:0, display:'block' }}
              loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen/>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Footer ───────────────────────────────────────────────────────────────────
const FOOT_SERVICES = [
  { l:'Diagnóstico Gratuito', h:PAGE_URL.diagnostico },
  { l:'Implantação de TI', h:PAGE_URL.services },
  { l:'Locação de Equipamentos', h:PAGE_URL.locacao },
  { l:'Suporte Corporativo', h:PAGE_URL.services },
  { l:'Monitoramento 24/7', h:PAGE_URL.services },
  { l:'Segurança da Informação', h:PAGE_URL.services },
  { l:'Backup & Recovery', h:PAGE_URL.services },
];
const FOOT_COMPANY = [
  { l:'Início', h:HOME_URL },
  { l:'Serviços', h:PAGE_URL.services },
  { l:'Diagnóstico', h:PAGE_URL.diagnostico },
  { l:'Sobre', h:PAGE_URL.sobre },
  { l:'Blog', h:PAGE_URL.blog },
  { l:'Contato', h:PAGE_URL.contato },
];
const footLink = { fontSize:13, color:'rgba(255,255,255,0.48)', fontFamily:"'Inter',sans-serif", textDecoration:'none', transition:'color 200ms', display:'block' };

const Footer = () => (
  <footer style={{ background:'#16242d', borderTop:'1px solid rgba(214,184,134,0.12)' }}>
    <div style={{ maxWidth:1280, margin:'0 auto', padding:'60px 32px 30px' }}>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1.2fr 1fr 1.5fr', gap:44, marginBottom:44 }}>
        <div style={{ display:'flex', flexDirection:'column', gap:13 }}>
          <img src={BASE+"assets/logo.png"} alt="Sherlock BR" style={{ height:42, width:'auto', display:'block', objectFit:'contain', alignSelf:'flex-start' }}/>
          <p style={{ fontSize:13, fontStyle:'italic', color:'#d6b886', fontFamily:"'Inter',sans-serif", fontWeight:600 }}>Tecnologia não é improviso, é estratégia.</p>
          <p style={{ fontSize:13, color:'rgba(255,255,255,0.42)', fontFamily:"'Inter',sans-serif", lineHeight:1.65 }}>Central de soluções corporativas em TI.<br/>Atendemos exclusivamente no Rio de Janeiro.</p>
          <div style={{ display:'flex', gap:14, flexWrap:'wrap' }}>
            {SOCIAL.map(s => (
              <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.name} style={{ fontSize:12, color:'rgba(255,255,255,0.38)', fontFamily:"'Inter',sans-serif", textDecoration:'none', transition:'color 200ms' }}
                onMouseEnter={e=>e.currentTarget.style.color='#d6b886'}
                onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,0.38)'}
              >{s.name}</a>
            ))}
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', marginBottom:5, fontFamily:"'Inter',sans-serif" }}>Serviços</div>
          {FOOT_SERVICES.map(item => (
            <a key={item.l} href={item.h} style={footLink}
              onMouseEnter={e=>e.currentTarget.style.color='#d6b886'}
              onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,0.48)'}
            >{item.l}</a>
          ))}
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', marginBottom:5, fontFamily:"'Inter',sans-serif" }}>Empresa</div>
          {FOOT_COMPANY.map(item => (
            <a key={item.l} href={item.h} style={footLink}
              onMouseEnter={e=>e.currentTarget.style.color='#d6b886'}
              onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,0.48)'}
            >{item.l}</a>
          ))}
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', marginBottom:2, fontFamily:"'Inter',sans-serif" }}>Contato</div>
          {[{l:'WhatsApp',v:'(21) 96681-1227',icon:'message-circle'},{l:'E-mail',v:'contato@sherlockbr.com',icon:'mail'},{l:'Endereço',v:'CEO Corporate, Av. João Cabral de Melo Neto, 850, Barra da Tijuca · RJ',icon:'map-pin'}].map(c => (
            <div key={c.l} style={{ display:'flex', gap:9, alignItems:'flex-start' }}>
              <Icon name={c.icon} size={13} color="#d6b886" sw={2} style={{ flexShrink:0, marginTop:2 }}/>
              <div>
                <div style={{ fontSize:10, color:'rgba(255,255,255,0.28)', fontFamily:"'Inter',sans-serif", fontWeight:700, textTransform:'uppercase', letterSpacing:'0.5px', marginBottom:1 }}>{c.l}</div>
                <div style={{ fontSize:12, color:'rgba(255,255,255,0.58)', fontFamily:"'Inter',sans-serif", lineHeight:1.5 }}>{c.v}</div>
              </div>
            </div>
          ))}
          <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ marginTop:6, padding:'10px 16px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:12, fontWeight:700, borderRadius:7, textDecoration:'none', display:'inline-block', transition:'background 200ms' }}
            onMouseEnter={e=>e.currentTarget.style.background='#c4a673'}
            onMouseLeave={e=>e.currentTarget.style.background='#d6b886'}
          >Diagnóstico Gratuito</a>
        </div>
      </div>
      <div style={{ borderTop:'1px solid rgba(255,255,255,0.07)', paddingTop:22, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:10 }}>
        <span style={{ fontSize:11, color:'rgba(255,255,255,0.23)', fontFamily:"'Inter',sans-serif" }}>© 2026 Sherlock BR · ALB Inteligência Digital Ltda. · CNPJ 43.522.361/0001-00</span>
        <span style={{ fontSize:11, color:'rgba(255,255,255,0.23)', fontFamily:"'Inter',sans-serif" }}>Atendimento exclusivo no Rio de Janeiro</span>
      </div>
    </div>
  </footer>
);

// ─── Mini hero (páginas internas) ─────────────────────────────────────────────
const MiniHero = ({ tag, title, sub, children }) => (
  <div style={{ background:'linear-gradient(135deg,#012d3a,#16242d)', padding:'110px 32px 60px', textAlign:'center', position:'relative', overflow:'hidden' }}>
    <div style={{ position:'absolute', inset:0, backgroundImage:"url('"+PATTERN+"')", backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.05 }}/>
    <div style={{ position:'relative', zIndex:1 }}>
      <div style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', marginBottom:12, fontFamily:"'Inter',sans-serif" }}>{tag}</div>
      <h1 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(30px,4vw,50px)', fontWeight:900, color:'#fff', letterSpacing:'-1px', marginBottom:14 }}>{title}</h1>
      <p style={{ fontSize:16, color:'rgba(255,255,255,0.58)', maxWidth:560, margin:'0 auto', fontFamily:"'Inter',sans-serif", lineHeight:1.68 }}>{sub}</p>
      {children}
    </div>
  </div>
);

// ─── Shell ────────────────────────────────────────────────────────────────────
const SiteShell = ({ page, children }) => (
  <div>
    <Header page={page}/>
    <main style={{ paddingTop:72 }}>{children}</main>
    <Footer/>
  </div>
);

const mountSite = (page, content) => {
  ReactDOM.createRoot(document.getElementById('root')).render(<SiteShell page={page}>{content}</SiteShell>);
};

Object.assign(window, {
  Icon, WAIcon, WA_LINK, WA_NUM, waLink, PATTERN, SOCIAL, BASE, HOME_URL, BLOG_DIR, PAGE_URL, onNav, scrollToId,
  LeadWidget, Header, Footer, MiniHero, SiteShell, mountSite,
  HeroProblema, HeroDiagnostico, HeroSegmentos, SceneCard, ProblemasReaisSection,
  ServicesSection, TimelineSection, LocacaoSection, TestimonialsSection, CTASection,
  AboutSection, ContactSection, MapSection, MAPS_PLACE, MAPS_ROUTE, MAPS_EMBED,
});
