/* ============================================================
   shared.jsx — site shell, hooks, icon set, brand constants
   ============================================================ */

const BRAND = {
  name: 'Todescatto Advocacia',
  tagline: 'Advocacia Previdenciária',
  lawyer: 'Dr. Diego Eduardo Todescatto',
  oab: 'OAB/SC 58.998',
  whatsapp: '5548988804653',
  phoneDisplay: '(48) 98880-4653',
  email: 'todescattosecretaria@gmail.com',
  emailSec: 'todescattosecretaria@gmail.com',
  address: 'Rua Saldanha Marinho, 374 — Sl. 608, Centro, Florianópolis/SC — CEP 88010-450',
};

const waMsg = (msg = 'Olá! Preciso de ajuda especializada em Direito Previdenciário. Pode me ajudar?') =>
  `https://wa.me/${BRAND.whatsapp}?text=${encodeURIComponent(msg)}`;

/* ---------- Icons (Lucide-style strokes) ---------- */
const Icon = {
  arrow: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  whatsapp: <svg width="20" height="20" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" focusable="false" style={{shapeRendering:'geometricPrecision'}}><path d="M16.001 0C7.166 0 0 7.165 0 16c0 2.825.738 5.585 2.143 8.012L0 32l8.235-2.158a15.99 15.99 0 0 0 7.766 1.974h.007C24.836 31.816 32 24.65 32 15.816 32 11.534 30.336 7.51 27.314 4.486 24.291 1.464 20.265 0 16.001 0Zm0 29.078h-.006a13.27 13.27 0 0 1-6.768-1.85l-.485-.288-5.029 1.318 1.341-4.9-.316-.503a13.293 13.293 0 0 1-2.027-7.07c.003-7.345 5.978-13.32 13.298-13.32 3.551 0 6.886 1.385 9.397 3.9 2.51 2.514 3.893 5.853 3.892 9.405-.003 7.346-5.978 13.308-13.297 13.308Zm7.292-9.967c-.4-.2-2.367-1.168-2.733-1.302-.367-.133-.633-.2-.9.2-.267.4-1.033 1.302-1.267 1.568-.233.267-.467.3-.866.1-.4-.2-1.689-.622-3.218-1.985-1.19-1.061-1.993-2.371-2.226-2.772-.234-.4-.025-.617.175-.816.18-.18.4-.467.6-.7.2-.234.267-.4.4-.667.133-.267.067-.5-.033-.7-.1-.2-.9-2.171-1.234-2.971-.325-.78-.655-.675-.9-.687-.233-.012-.5-.014-.766-.014-.267 0-.7.1-1.067.5s-1.4 1.367-1.4 3.337c0 1.97 1.434 3.871 1.633 4.137.2.267 2.82 4.305 6.832 6.04.954.413 1.7.659 2.281.842.957.305 1.83.262 2.519.159.768-.115 2.367-.967 2.7-1.901.334-.935.334-1.736.234-1.902-.1-.167-.367-.267-.766-.467Z"/></svg>,
  phone: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  mail: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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"/></svg>,
  pin: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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"/></svg>,
  clock: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
  check: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  ext: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>,
  scale: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="3" x2="12" y2="21"/><path d="M6 21h12"/><path d="M12 3l-6 9h12z" /><path d="M6 12c0 2 1 3 3 3s3-1 3-3"/><path d="M12 12c0 2 1 3 3 3s3-1 3-3"/></svg>,
  award: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>,
  shield: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
  heart: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>,
  menu: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
  x: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  globe: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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"/></svg>,
};

/* ---------- Reveal-on-scroll hook ---------- */
function useReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('.reveal:not(.in), .step:not(.in)').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Counter hook (counts when visible) ---------- */
function useCounter(ref, target, { duration = 1600, decimals = 0 } = {}) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!ref.current) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const t0 = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - t0) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(target * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [target, duration]);
  return decimals === 0 ? Math.round(val) : val.toFixed(decimals);
}

/* ---------- Header ---------- */
function Header({ current = 'home' }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const isHome = current === 'home';
  const link = (href, key, label) => (
    <a href={href} className={current === key ? 'active' : ''} onClick={() => setOpen(false)}>{label}</a>
  );

  return (
    <header className={'site-header' + (scrolled ? ' scrolled' : '')}>
      <div className="container">
        <a href="index.html" className="logo-mark" style={{ textDecoration: 'none' }}>
          <img src="assets/logo-header.png" alt="Todescatto Advocacia" />
        </a>
        <nav className={open ? 'open' : ''}>
          {link('index.html', 'home', 'Início')}
          {link('areas.html', 'areas', 'Serviços Previdenciários')}
          {link('diferenciais.html', 'diferenciais', 'Diferenciais')}
          {link('como-funciona.html', 'processo', 'Como Funciona')}
          {link('sobre.html', 'sobre', 'Sobre')}
          {link('contato.html', 'contato', 'Contato')}
          <a className="btn-wa-header" href={waMsg()} target="_blank" rel="noopener">
            {Icon.whatsapp}
            <span>Fale conosco</span>
          </a>
        </nav>
        <button className="menu-toggle" aria-label="Menu" onClick={() => setOpen((v) => !v)}>
          {open ? Icon.x : Icon.menu}
        </button>
      </div>
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="f-about">
            <img className="f-logo" src="assets/logo-header.png" alt="Todescatto Advocacia" />
            <p>
              Escritório de Direito Previdenciário em Florianópolis. Atendimento técnico e individualizado em busca do melhor benefício.
            </p>
            <p style={{ fontSize: 11, letterSpacing: '0.06em', color: 'rgba(251,250,247,0.45)', marginTop: 16 }}>
              Atendimento jurídico realizado conforme as normas da OAB, sem promessa de resultados.
            </p>
          </div>
          <div>
            <h4>Serviços Previdenciários</h4>
            <ul>
              <li><a href="areas.html#aposentadoria">Aposentadorias</a></li>
              <li><a href="areas.html#invalidez">Aposentadoria por Incapacidade Permanente</a></li>
              <li><a href="areas.html#auxilio">Auxílio por Incapacidade</a></li>
              <li><a href="areas.html#bpc">BPC / LOAS</a></li>
              <li><a href="areas.html#pensao">Pensão por Morte</a></li>
              <li><a href="areas.html#planejamento">Planejamento Previdenciário</a></li>
            </ul>
          </div>
          <div>
            <h4>Contato</h4>
            <ul>
              <li>{BRAND.address}</li>
              <li><a href={waMsg()}>WhatsApp · {BRAND.phoneDisplay}</a></li>
              <li><a href={`mailto:${BRAND.email}`}>{BRAND.email}</a></li>
              <li style={{ marginTop: 12 }}>
                <a className="btn btn-ghost" href={waMsg()} style={{ padding: '10px 18px', fontSize: 13 }} target="_blank" rel="noopener">
                  {Icon.whatsapp}<span>Iniciar conversa</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="copy">
          <span>© 2026 Todescatto Advocacia Previdenciária. Todos os direitos reservados. · {BRAND.oab}</span>
          <span>Desenvolvido por <a href="#" style={{ fontWeight: 700, textDecoration: 'underline' }}>Techforge Development</a></span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- WhatsApp Float ---------- */
function WhatsAppFloat() {
  return (
    <a href={waMsg()} className="wa-float" target="_blank" rel="noopener" aria-label="WhatsApp">
      <svg width="28" height="28" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" focusable="false" style={{shapeRendering:'geometricPrecision'}}><path d="M16.001 0C7.166 0 0 7.165 0 16c0 2.825.738 5.585 2.143 8.012L0 32l8.235-2.158a15.99 15.99 0 0 0 7.766 1.974h.007C24.836 31.816 32 24.65 32 15.816 32 11.534 30.336 7.51 27.314 4.486 24.291 1.464 20.265 0 16.001 0Zm0 29.078h-.006a13.27 13.27 0 0 1-6.768-1.85l-.485-.288-5.029 1.318 1.341-4.9-.316-.503a13.293 13.293 0 0 1-2.027-7.07c.003-7.345 5.978-13.32 13.298-13.32 3.551 0 6.886 1.385 9.397 3.9 2.51 2.514 3.893 5.853 3.892 9.405-.003 7.346-5.978 13.308-13.297 13.308Zm7.292-9.967c-.4-.2-2.367-1.168-2.733-1.302-.367-.133-.633-.2-.9.2-.267.4-1.033 1.302-1.267 1.568-.233.267-.467.3-.866.1-.4-.2-1.689-.622-3.218-1.985-1.19-1.061-1.993-2.371-2.226-2.772-.234-.4-.025-.617.175-.816.18-.18.4-.467.6-.7.2-.234.267-.4.4-.667.133-.267.067-.5-.033-.7-.1-.2-.9-2.171-1.234-2.971-.325-.78-.655-.675-.9-.687-.233-.012-.5-.014-.766-.014-.267 0-.7.1-1.067.5s-1.4 1.367-1.4 3.337c0 1.97 1.434 3.871 1.633 4.137.2.267 2.82 4.305 6.832 6.04.954.413 1.7.659 2.281.842.957.305 1.83.262 2.519.159.768-.115 2.367-.967 2.7-1.901.334-.935.334-1.736.234-1.902-.1-.167-.367-.267-.766-.467Z"/></svg>
    </a>
  );
}

Object.assign(window, { BRAND, waMsg, Icon, useReveal, useCounter, Header, Footer, WhatsAppFloat });
