/* global React */

function Header({ active, scrollTo }) {
  const { Button } = window.MXDEngenharia_e41562;
  const [open, setOpen] = React.useState(false);
  const items = [
  ['inicio', 'Início'],
  ['areas', 'Áreas'],
  ['processo', 'Processo'],
  ['sobre', 'Quem somos'],
  ['contato', 'Contato']];

  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const navTo = (id) => {
    setOpen(false);
    if (id.includes('.html')) { window.location.href = id; return; }
    if (document.getElementById(id)) { scrollTo(id); }
    else { window.location.href = 'index.html#' + id; }
  };
  const wa = () => window.open('https://wa.me/5534996847972?text=' + encodeURIComponent('Olá! Vim pelo site da MXD Engenharia e gostaria de solicitar um orçamento de perícia/avaliação.'), '_blank', 'noopener');

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(251,248,242,0.82)',
      backdropFilter: 'saturate(140%) blur(10px)',
      WebkitBackdropFilter: 'saturate(140%) blur(10px)',
      borderBottom: '1px solid var(--line-warm)'
    }}>
      <style>{`
        .hdr-burger { display: none; }
        @media (max-width: 640px) {
          .hdr-nav { display: none !important; }
          .hdr-burger { display: inline-flex !important; }
        }
        @media (min-width: 641px) {
          .hdr-mobile { display: none !important; }
        }
        .hdr-mobile {
          overflow: hidden; max-height: 0;
          transition: max-height 0.32s var(--ease-out);
          border-top: 1px solid var(--line-warm);
          background: rgba(251,248,242,0.98);
          padding-left: 0 !important; padding-right: 0 !important;
        }
        .hdr-mobile.open { max-height: 460px; }
        .hdr-mobile a {
          display: block; padding: 15px 24px;
          font-family: var(--font-sans); font-size: 16px; font-weight: 500;
          color: var(--ink-700); text-decoration: none;
          border-bottom: 1px solid var(--line-warm);
        }
        .hdr-mobile a:active { background: var(--cream-100); }
        .hdr-mobile-cta { padding: 16px 24px; }
      `}</style>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto', padding: '13px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between'
      }}>
        <a href="#inicio" onClick={(e) => {e.preventDefault();navTo('inicio');}} style={{ display: 'inline-flex' }}>
          <img src={(window.__resources && window.__resources.logoMxd) || "assets/logo-mxd.svg"} alt="MXD Engenharia" style={{ height: 38 }} />
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <nav className="hdr-nav" style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            {items.map(([id, label]) =>
            <a
              key={id}
              href={id.includes('.html') ? id : '#' + id}
              onClick={(e) => {if (id.includes('.html')) return;e.preventDefault();navTo(id);}}
              style={{
                fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)',
                fontWeight: active === id ? 'var(--fw-semibold)' : 'var(--fw-medium)',
                color: active === id ? 'var(--blue-700)' : 'var(--ink-500)',
                textDecoration: 'none', padding: '8px 13px', borderRadius: 'var(--r-sm)',
                transition: 'color var(--dur-fast) var(--ease-out)'
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--blue-700)'}
              onMouseLeave={(e) => e.currentTarget.style.color = active === id ? 'var(--blue-700)' : 'var(--ink-500)'}>
              {label}
            </a>
            )}
            <div style={{ marginLeft: 12 }}>
              <Button size="sm" onClick={wa} iconLeft={<Icon name="message-circle" size={16} color="currentColor" />} style={{ whiteSpace: 'nowrap' }}>WhatsApp</Button>
            </div>
          </nav>
          <button
            className="hdr-burger"
            aria-label={open ? 'Fechar menu' : 'Abrir menu'}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
            style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: 6,
              alignItems: 'center', justifyContent: 'center', color: 'var(--ink-900)'
            }}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" aria-hidden="true">
              {open
                ? <g><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></g>
                : <g><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" /></g>}
            </svg>
          </button>
        </div>
      </div>
      <div className={'hdr-mobile' + (open ? ' open' : '')}>
        {items.map(([id, label]) =>
        <a
          key={id}
          href={id.includes('.html') ? id : '#' + id}
          onClick={(e) => {if (id.includes('.html')) return;e.preventDefault();navTo(id);}}>
          {label}
        </a>
        )}
        <div className="hdr-mobile-cta">
          <Button size="md" onClick={() => {setOpen(false);wa();}} iconLeft={<Icon name="message-circle" size={18} color="currentColor" />} style={{ width: '100%', justifyContent: 'center' }}>Falar pelo WhatsApp</Button>
        </div>
      </div>
    </header>);

}
window.Header = Header;

function CredBar() {
  const items = [
  ['Atuação desde', '2023'],
  ['Responsável técnico', 'Eng. Civil'],
  ['Registro', 'CREA-SP 123.234']];

  return (
    <section style={{ background: 'var(--cream-50)', borderBottom: '1px solid var(--line-warm)' }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)'
      }}>
        {items.map(([label, value], i) =>
        <div key={label} style={{
          padding: '28px 28px', borderLeft: i === 0 ? 'none' : '1px solid var(--line-warm)',
          display: 'flex', flexDirection: 'column', gap: 6
        }}>
            <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-eyebrow)', fontWeight: 'var(--fw-medium)',
            letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)'
          }}>{label}</span>
            <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-semibold)',
            color: 'var(--ink-900)', letterSpacing: '-0.01em'
          }}>{value}</span>
          </div>
        )}
      </div>
    </section>);

}
window.CredBar = CredBar;

function Services({ scrollTo }) {
  const { Eyebrow } = window.MXDEngenharia_e41562;
  const items = [
  ['scale', 'Perícias de engenharia', 'Vistorias, análise de vícios construtivos e laudos periciais para processos judiciais.'],
  ['home', 'Avaliação de imóveis', 'Valor de mercado para inventários, divórcios e partilhas, conforme NBR 14653.'],
  ['gavel', 'Assistência técnica', 'Apoio ao advogado: quesitos, pareceres e impugnação de laudos oficiais.'],
  ['file-search', 'Vícios construtivos', 'Identificação de causa, extensão e quantificação de danos em edificações.'],
  ['ruler', 'Disputas patrimoniais', 'Mensuração e divisão técnica de bens imóveis em conflitos patrimoniais.'],
  ['clipboard-check', 'Laudos & ART', 'Documentação fundamentada, com memória de cálculo e ART devidamente registrada.']];

  return (
    <section id="areas" style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '108px 32px' }}>
        <Eyebrow>Áreas de atuação</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-h2)', letterSpacing: 'var(--ls-heading)',
          fontWeight: 'var(--fw-bold)', color: 'var(--ink-900)', margin: '14px 0 4px', maxWidth: 600
        }}>
          Atuação técnica em todas as fases do processo.
        </h2>
        <p style={{
          fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body-lg)', color: 'var(--text-secondary)',
          margin: '0 0 60px', maxWidth: 540, lineHeight: 'var(--lh-normal)'
        }}>
          Da vistoria inicial à sustentação do laudo em juízo.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', columnGap: 56, rowGap: 0 }}>
          {items.map(([icon, title, desc], i) =>
          <div key={title} style={{ paddingTop: 30, paddingBottom: 40, borderTop: '1px solid var(--line-warm)' }}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: 26 }}>
                <Icon name={icon} size={20} color="var(--blue-600)" />
              </div>
              <h3 style={{
              fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-h4)', fontWeight: 'var(--fw-semibold)',
              color: 'var(--ink-900)', margin: '0 0 10px', letterSpacing: '-0.01em'
            }}>{title}</h3>
              <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-normal)',
              color: 'var(--text-secondary)', margin: 0
            }}>{desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.Services = Services;

function Process() {
  const { Eyebrow } = window.MXDEngenharia_e41562;
  const steps = [
  ['01', 'Briefing', 'Entendemos o objeto, o processo e os quesitos a responder.'],
  ['02', 'Vistoria', 'Levantamento técnico em campo, com registro fotográfico e medições.'],
  ['03', 'Análise', 'Fundamentação conforme normas técnicas, com memória de cálculo.'],
  ['04', 'Laudo & ART', 'Entrega do laudo e documentação técnica e ART registrada, pronto para o processo.']];

  return (
    <section id="processo" style={{ background: 'var(--blue-900)', color: 'var(--text-inverse)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '108px 32px' }}>
        <Eyebrow tone="inverse">Como trabalhamos</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-h2)', letterSpacing: 'var(--ls-heading)',
          fontWeight: 'var(--fw-bold)', color: 'var(--cream-50)', margin: '14px 0 56px', maxWidth: 560
        }}>
          Um método claro, do primeiro contato ao laudo.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
          {steps.map(([n, title, desc]) =>
          <div key={n} style={{ paddingTop: 22, borderTop: '1px solid var(--line-cool)' }}>
              <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-semibold)',
              color: 'var(--blue-300)', marginBottom: 14
            }}>{n}</div>
              <h3 style={{
              fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-h4)', fontWeight: 'var(--fw-semibold)',
              color: 'var(--cream-50)', margin: '0 0 8px'
            }}>{title}</h3>
              <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-normal)',
              color: 'var(--blue-300)', margin: 0
            }}>{desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.Process = Process;

function About() {
  const { Eyebrow, DataField, Button } = window.MXDEngenharia_e41562;
  return (
    <section id="sobre" style={{ background: 'var(--cream-100)', borderBottom: '1px solid var(--line-warm)' }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto', padding: '108px 32px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start'
      }}>
        <div>
          <Eyebrow>Sobre a MXD</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-h1)', letterSpacing: 'var(--ls-heading)',
            fontWeight: 'var(--fw-bold)', color: 'var(--ink-900)', margin: '16px 0 24px', maxWidth: 480
          }}>
            Rigor técnico a serviço da decisão jurídica.
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-secondary)', margin: '0 0 18px' }}>A MXD nasceu para traduzir a engenharia em argumento jurídico. Investigamos, mensuramos e documentamos cada caso com o rigor tecnico necessario. 


          </p>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>
            Cada trabalho é conduzido por engenheiro civil habilitado, fundamentado nas normas
            aplicáveis e acompanhado da respectiva ART. Nosso compromisso é com a clareza e a
            sustentação técnica, não com promessas de resultado.
          </p>
          <div style={{ marginTop: 30 }}>
            <Button variant="secondary" onClick={() => {window.location.href = 'quem-somos.html';}} iconRight={<Icon name="arrow-right" size={18} color="var(--blue-700)" />}>
              Conheça o engenheiro responsável
            </Button>
          </div>
        </div>
        <div>
          {[
          ['Atuação desde', '2023'],
          ['Registro da empresa', 'CREA-SP 123.234'],
          ['CNPJ', '41.540.372/0001-98']].
          map(([label, value], i) =>
          <div key={label} style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24,
            padding: '18px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line-warm)'
          }}>
              <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--text-muted)'
            }}>{label}</span>
              <span style={{
              fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body)', fontWeight: 'var(--fw-medium)',
              color: 'var(--ink-900)', textAlign: 'right'
            }}>{value}</span>
            </div>
          )}
          <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 14, marginTop: 26,
            padding: '18px 20px', borderLeft: '2px solid var(--blue-600)', background: 'var(--cream-50)'
          }}>
            <Icon name="badge-check" size={20} color="var(--blue-600)" />
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-normal)', color: 'var(--ink-800)', margin: 0 }}>
              <strong style={{ fontWeight: 'var(--fw-semibold)' }}>ART emitida em todos os casos.</strong> Cada trabalho é acompanhado da Anotação de Responsabilidade Técnica (ART) registrada no CREA, garantindo respaldo legal e rastreabilidade.
            </p>
          </div>
        </div>
      </div>
    </section>);

}
window.About = About;

function ContactForm() {
  const { Eyebrow, Button, Input, Badge } = window.MXDEngenharia_e41562;
  const [sent, setSent] = React.useState(false);
  const areas = ['Perícia judicial', 'Avaliação de imóvel', 'Vício construtivo', 'Assistência técnica'];
  const [area, setArea] = React.useState(areas[0]);
  const canais = ['WhatsApp', 'E-mail', 'Ligação'];
  const [canal, setCanal] = React.useState(canais[0]);
  const [nome, setNome] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [telefone, setTelefone] = React.useState('');
  const [mensagem, setMensagem] = React.useState('');
  const seg = (on) => ({
    cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)',
    padding: '9px 14px', borderRadius: 'var(--r-sm)',
    border: '1px solid ' + (on ? 'var(--blue-600)' : 'var(--line-warm)'),
    background: on ? 'var(--blue-50)' : 'transparent',
    color: on ? 'var(--blue-700)' : 'var(--ink-500)',
    transition: 'all var(--dur-fast) var(--ease-out)'
  });
  const onSubmit = (e) => {
    e.preventDefault();
    const linhas = [
      'Olá! Solicitação de orçamento pelo site da MXD Engenharia.',
      '',
      'Nome: ' + (nome || '—'),
      'E-mail: ' + (email || '—'),
      'Área: ' + area,
      'Prefere atendimento por: ' + canal,
    ];
    if (canal === 'Ligação') linhas.push('Telefone para ligação: ' + (telefone || '—'));
    if (mensagem) { linhas.push('', 'Mensagem: ' + mensagem); }
    window.open('https://wa.me/5534996847972?text=' + encodeURIComponent(linhas.join('\n')), '_blank', 'noopener');
    setSent(true);
  };
  return (
    <section id="contato" style={{ background: 'var(--blue-900)', borderTop: '1px solid var(--line-cool)' }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto', padding: '108px 32px',
        display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56
      }}>
        <div>
          <Eyebrow tone="inverse">Contato</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-h2)', letterSpacing: 'var(--ls-heading)',
            fontWeight: 'var(--fw-bold)', color: 'var(--cream-50)', margin: '14px 0 16px', maxWidth: 420
          }}>
            Solicite um orçamento.
          </h2>
          {[
          ['message-circle', 'WhatsApp (34) 99684-7972', 'https://wa.me/5534996847972?text=' + encodeURIComponent('Olá! Vim pelo site da MXD Engenharia e gostaria de solicitar um orçamento.')],
          ['mail', 'contato@mxdengenharia.com.br', 'mailto:contato@mxdengenharia.com.br'],
          ['map-pin', 'Av. Nove de Julho, 3147 — Jardim Paulista, São Paulo — SP, 01407-000', null]].
          map(([icon, val, href]) =>
          <div key={val} style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <Icon name={icon} size={18} color="var(--blue-300)" />
              {href ?
            <a href={href} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body)', color: '#fff', textDecoration: 'underline', textUnderlineOffset: '3px', cursor: 'pointer' }}>{val}</a> :

            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body)', color: '#fff' }}>{val}</span>
            }
            </div>
          )}
        </div>
        <div style={{
          background: 'var(--cream-50)', border: '1px solid var(--line-warm)',
          borderRadius: 'var(--r-md)', padding: 32, boxShadow: 'var(--shadow-sm)'
        }}>
          {sent ?
          <div style={{ padding: '48px 0', textAlign: 'center' }}>
              <Icon name="check-circle-2" size={40} color="var(--green-600)" />
              <h3 style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-h3)', color: 'var(--ink-900)', margin: '16px 0 6px' }}>Abrimos o WhatsApp</h3>
              <p style={{ fontFamily: 'var(--font-sans)', color: 'var(--text-secondary)', margin: 0 }}>Conclua o envio na conversa que abrimos. Retornaremos em até um dia útil.</p>
            </div> :

          <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Input label="Nome" placeholder="Seu nome" required value={nome} onChange={(e) => setNome(e.target.value)} />
                <Input label="E-mail" type="email" placeholder="voce@escritorio.com" required value={email} onChange={(e) => setEmail(e.target.value)} />
              </div>
              <div>
                <label style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-medium)', color: 'var(--text-secondary)', display: 'block', marginBottom: 8 }}>Área</label>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {areas.map((a) =>
                <button type="button" key={a} onClick={() => setArea(a)} style={seg(area === a)}>{a}</button>
                )}
                </div>
              </div>
              <div>
                <label style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-medium)', color: 'var(--text-secondary)', display: 'block', marginBottom: 8 }}>Como prefere continuar o atendimento?</label>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {canais.map((c) =>
                <button type="button" key={c} onClick={() => setCanal(c)} style={seg(canal === c)}>{c}</button>
                )}
                </div>
              </div>
              {canal === 'Ligação' &&
              <Input label="Telefone para ligação" type="tel" placeholder="(00) 00000-0000" required value={telefone} onChange={(e) => setTelefone(e.target.value)} />
              }
              <Input label="Mensagem" placeholder="Descreva brevemente o caso" value={mensagem} onChange={(e) => setMensagem(e.target.value)} />
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 6 }}>
                <Badge status="info">Sigilo profissional</Badge>
                <Button type="submit" iconLeft={<Icon name="message-circle" size={18} color="currentColor" />}>Enviar pelo WhatsApp</Button>
              </div>
            </form>
          }
        </div>
      </div>
    </section>);

}
window.ContactForm = ContactForm;

function Footer({ scrollTo }) {
  const cols = [
  ['Atuação', [['Perícias de engenharia', 'areas'], ['Avaliação de imóveis', 'areas'], ['Vícios construtivos', 'areas'], ['Assistência técnica', 'areas']]],
  ['Empresa', [['Quem somos', 'quem-somos.html'], ['Como trabalhamos', 'processo'], ['Contato', 'contato'], ['Política de Privacidade', 'politica-de-privacidade.html']]]];

  return (
    <footer style={{ background: 'var(--cream-100)', color: 'var(--text-secondary)', borderTop: '1px solid var(--line-warm)' }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto', padding: '56px 32px 40px',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 40
      }}>
        <div>
          <img src={(window.__resources && window.__resources.logoMxd) || "assets/logo-mxd.svg"} alt="MXD Engenharia" style={{ height: 44 }} />
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-normal)',
            color: 'var(--text-secondary)', margin: '18px 0 0', maxWidth: 320
          }}>
            Perícias de engenharia e avaliação de imóveis para o setor jurídico.
            Laudos por engenheiro civil habilitado, com ART.
          </p>
        </div>
        {cols.map(([title, links]) =>
        <div key={title}>
            <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--ls-eyebrow)',
            textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 16
          }}>{title}</div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {links.map(([l, id]) =>
            <li key={l}>
                  <a href={id.includes('.html') ? id : '#' + id} onClick={(e) => {if (id.includes('.html')) return;e.preventDefault();scrollTo && scrollTo(id);}} style={{
                fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--text-secondary)',
                textDecoration: 'none', transition: 'color var(--dur-fast) var(--ease-out)'
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink-900)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-secondary)'}>{l}</a>
                </li>
            )}
            </ul>
          </div>
        )}
      </div>
      <div style={{ borderTop: '1px solid var(--line-warm)' }}>
        <div style={{
          maxWidth: 'var(--container)', margin: '0 auto', padding: '20px 32px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)'
        }}>
          <span>© 2026 MXD Engenharia, Serviços e Produções LTDA · CNPJ 41.540.372/0001-98</span>
          <span>CREA-SP 123.234</span>
        </div>
      </div>
    </footer>);

}
window.Footer = Footer;