/* ==================================================
   STOCK, Shared chrome for internal pages
   (Header + mega menu, Footer, Internal hero, Contact)
   Home file is NOT affected by this file.
   ================================================== */

const { useState, useEffect, useRef } = React;

const HOME = 'index.html';
const PAGE_PRODUTO = 'Stock - Produto.html';
const PAGE_SOLUCOES = 'Stock - Soluções.html';
const PAGE_INSTITUCIONAL = 'Stock - Institucional.html';
const PAGE_CONTATO = 'Stock - Contato.html';
const IG_URL = 'https://www.instagram.com/stock.armazenagem/';

/* ----------  LOGO  ---------- */
function Logo() {
  return (
    <a href={HOME} className="logo-mark" aria-label="Stock">
      <img src="assets/stock-logo.svg" alt="Stock, Sistema de armazenagem e construtivos" className="logo-img" />
    </a>
  );
}

/* ----------  NAV + MEGA DATA  ---------- */
const NAV_LINKS = [
  { label: 'HOME', href: HOME },
  { label: 'SOLUÇÕES', href: PAGE_SOLUCOES, mega: true },
  { label: 'CLIENTES', href: HOME + '#clientes' },
  { label: 'INSTITUCIONAL', href: PAGE_INSTITUCIONAL },
  { label: 'CONTATO', href: PAGE_CONTATO },
];

const MEGA_PRODUCTS = [
  { name: 'Porta Pallet', group: 'Estáticos', featured: true, href: 'porta-pallet.html', img: 'assets/produtos/porta-pallet.webp', desc: 'Seletividade total e layout flexível para qualquer operação.' },
  { name: 'Mini Porta Pallet', group: 'Estáticos', href: 'mini-porta-pallet.html', img: 'assets/produtos/mini-porta-pallet.webp', desc: 'Compacto, ideal para cargas leves e fracionadas.' },
  { name: 'Cantilever', group: 'Estáticos', href: 'cantilever.html', img: 'assets/produtos/cantilever.webp', desc: 'Para cargas longas e volumosas, sem colunas frontais.' },
  { name: 'Mezanino', group: 'Estáticos', href: 'mezanino.html', img: 'assets/produtos/mezanino.webp', desc: 'Multiplica a área útil do galpão em novos pavimentos.' },
  { name: 'Rack Pallet', group: 'Estáticos', href: 'rack-pallet.html', img: 'assets/produtos/porta-pallet.webp', desc: 'Paletização modular, robusta e de fácil movimentação.' },
  { name: 'Drive In', group: 'Dinâmicos', href: 'drive-in.html', img: 'assets/produtos/drive-in.webp', desc: 'Alta densidade de estocagem sem corredores intermediários.' },
  { name: 'Push Back', group: 'Dinâmicos', href: 'push-back.html', img: 'assets/produtos/push-back.webp', desc: 'Densidade com múltiplas posições por corredor.' },
  { name: 'Flow Rack', group: 'Dinâmicos', href: 'flow-rack.html', img: 'assets/produtos/flow-rack.webp', desc: 'Separação ágil de pedidos com abastecimento por gravidade.' },
  { name: 'Dinâmico', group: 'Dinâmicos', href: 'dinamico.html', img: 'assets/produtos/dinamico.webp', desc: 'Sistema FIFO: primeiro a entrar, primeiro a sair.' },
  { name: 'Carro Satélite', group: 'Dinâmicos', href: 'carro-satelite.html', img: 'assets/produtos/carro-satelite.webp', desc: 'Movimentação semiautomática de alta densidade.' },
];

const MEGA_SERVICES = [
  { name: 'Projeto', href: PAGE_INSTITUCIONAL + '#projeto' },
  { name: 'Fabricação', href: PAGE_INSTITUCIONAL + '#fabricacao' },
  { name: 'Instalação', href: PAGE_INSTITUCIONAL + '#instalacao' },
];

function HexIcon() {
  return (
    <svg className="mega-hex" width="18" height="20" viewBox="0 0 22 25" fill="none">
      <path d="M11 1 L20.5 6.5 V18 L11 23.5 L1.5 18 V6.5 Z" stroke="currentColor" strokeWidth="1.6" fill="none"/>
    </svg>
  );
}

function MegaPanel({ onClose }) {
  const [hov, setHov] = useState(0);
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const cols = [
    { title: 'Estruturas Estáticas', items: MEGA_PRODUCTS.filter(p => p.group === 'Estáticos') },
    { title: 'Estruturas Dinâmicas', items: MEGA_PRODUCTS.filter(p => p.group === 'Dinâmicos') },
  ];
  const idxOf = (p) => MEGA_PRODUCTS.indexOf(p);
  const cur = MEGA_PRODUCTS[hov];

  return (
    <div className="mega-panel">
      <div className="mega-hexmark"></div>

      <button className="mega-close" onClick={onClose} aria-label="Fechar">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
      </button>

      <div className="mega-inner">
        <div className="mega-head">
          <h2><span className="mega-h-strong">Soluções</span> Stock</h2>
          <p>Estruturas sob medida para cada tipo de operação.</p>
        </div>

        <div className="mega-columns">
          {cols.map(c => (
            <div className="mega-col" key={c.title}>
              <div className="mega-col-title">{c.title}</div>
              <ul>
                {c.items.map(p => (
                  <li key={p.name}>
                    <a
                      href={p.href}
                      className={(idxOf(p) === hov ? 'active' : '') + (p.featured ? ' featured' : '')}
                      onMouseEnter={() => setHov(idxOf(p))}
                    >
                      <span className="mega-bullet"><HexIcon /></span>
                      {p.name}
                      {p.featured && <span className="mega-star">Carro-chefe</span>}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
          <div className="mega-col mega-col-serv">
            <div className="mega-col-title">Serviços</div>
            <ul>
              {MEGA_SERVICES.map(s => (
                <li key={s.name}>
                  <a href={s.href}>
                    <span className="mega-bullet"><HexIcon /></span>
                    {s.name}
                  </a>
                </li>
              ))}
            </ul>
            <a href={PAGE_CONTATO} className="mega-project">
              <span className="mega-arrow">→</span> Quero fazer meu projeto
            </a>
          </div>
        </div>
      </div>

      <div className="mega-stage">
        <div className="mega-shots">
          {MEGA_PRODUCTS.map((p, i) => (
            <div
              key={p.name}
              className={`mega-bgshot ${i === hov ? 'show' : ''}`}
              style={{ backgroundImage: `url(${p.img})` }}
            ></div>
          ))}
        </div>
        <div className="mega-caption" key={hov}>
          <span className="mega-cap-tag">Estruturas {cur.group}</span>
          <h3>{cur.name}</h3>
          <p>{cur.desc}</p>
          <a href={cur.href} className="mega-cap-link">Ver detalhes <span className="mega-arrow">→</span></a>
        </div>
      </div>
    </div>
  );
}

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [megaOpen, setMegaOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = megaOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [megaOpen]);

  return (
    <React.Fragment>
      <header className={`site-header solid ${scrolled ? 'scrolled' : ''}`}>
        <div className="container-wide header-inner">
          <Logo />
          <nav>
            <ul className="main-nav">
              {NAV_LINKS.map(l => (
                <li key={l.label} className={l.mega ? 'has-mega' : ''}>
                  <a
                    href={l.href}
                    onClick={(e) => { if (l.mega) { e.preventDefault(); setMegaOpen(v => !v); } }}
                  >{l.label}{l.mega && <span className="nav-caret">▾</span>}</a>
                </li>
              ))}
            </ul>
          </nav>
          <a href={PAGE_CONTATO} className="btn btn-orange header-cta-btn">Faça um orçamento</a>
          <button className="mobile-toggle" aria-label="Menu">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
          </button>
        </div>
      </header>
      <div className={`mega-wrap ${megaOpen ? 'open' : ''}`}>
        <MegaPanel onClose={() => setMegaOpen(false)} />
      </div>
    </React.Fragment>
  );
}

/* ----------  INTERNAL HERO  ---------- */
function InternalHero({ crumb, title, subtitle, cta, image, kicker }) {
  return (
    <section className={`ipage-hero ${image ? 'has-img' : ''}`}>
      <div className="ipage-hero-hex"></div>
      <div className="container ipage-hero-inner">
        <div className="ipage-hero-text">
          <nav className="breadcrumb">
            <a href={HOME}>Home</a>
            {crumb.map((c, i) => (
              <span key={i}>
                <span className="bc-sep">/</span>
                {c.href ? <a href={c.href}>{c.label}</a> : <span className="bc-current">{c.label}</span>}
              </span>
            ))}
          </nav>
          {kicker && <span className="ipage-kicker">{kicker}</span>}
          <h1>{title}</h1>
          {subtitle && <p>{subtitle}</p>}
          {cta !== false && (
            <div className="ipage-hero-actions">
              <a href={PAGE_CONTATO} className="btn btn-orange">Faça um orçamento</a>
              <a href={PAGE_SOLUCOES} className="btn btn-ghost-light">Ver soluções <span className="mega-arrow">→</span></a>
            </div>
          )}
        </div>
        {image && (
          <div className="ipage-hero-media">
            <div className="ipage-hero-frame">
              <img src={image} alt={title} />
            </div>
            <div className="ipage-hero-badge">
              <span className="ihb-hex"><img src="assets/emblema-s.png" alt="" /></span>
              <span className="ihb-text"><strong>Fabricação própria</strong>10.000 m² de área fabril</span>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ----------  CONTACT BLOCK (reused CTA)  ---------- */
function ContactBlock({ id }) {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 3000); };
  return (
    <section className="contact" id={id || 'contato'}>
      <div className="container">
        <div className="contact-grid">
          <form className="contact-form reveal" onSubmit={onSubmit}>
            <div className="form-row">
              <div className="form-field"><input type="text" placeholder="Nome" required /></div>
              <div className="form-field"><input type="text" placeholder="Sobrenome" /></div>
            </div>
            <div className="form-row">
              <div className="form-field"><input type="email" placeholder="E-mail" required /></div>
              <div className="form-field"><input type="tel" placeholder="Telefone / WhatsApp" /></div>
            </div>
            <div className="form-field">
              <select defaultValue="">
                <option value="" disabled>Qual solução te interessa?</option>
                {MEGA_PRODUCTS.map(p => <option key={p.name} value={p.name}>{p.name}</option>)}
              </select>
            </div>
            <div className="form-field"><textarea placeholder="Conte um pouco sobre seu projeto..." rows="4"></textarea></div>
            <button type="submit" className="btn btn-orange btn-arrow form-submit">
              {sent ? '✓ Mensagem enviada' : 'Enviar mensagem'}
            </button>
          </form>

          <div className="contact-info reveal reveal-delay-2">
            <span className="section-eyebrow">Entre em contato</span>
            <h2>Fale com nossos <span className="accent">consultores</span></h2>
            <p>Solicite seu orçamento ou tire suas dúvidas. Nosso time responde rápido, geralmente no mesmo dia.</p>
            <div className="contact-channels">
              <div className="contact-channel">
                <div className="contact-channel-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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>
                </div>
                <div>
                  <div className="contact-channel-label">E-mail</div>
                  <a href="mailto:contato@stocksac.com.br" className="contact-channel-value">contato@stocksac.com.br</a>
                </div>
              </div>
              <div className="contact-channel">
                <div className="contact-channel-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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.72c.13.96.36 1.9.7 2.81a2 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-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                </div>
                <div>
                  <div className="contact-channel-label">Telefone</div>
                  <a href="tel:+5581991998879" className="contact-channel-value">+55 81 9 9199.8879</a>
                </div>
              </div>
              <div className="contact-channel">
                <div className="contact-channel-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.87 1.22 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.63.71.23 1.36.19 1.87.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.13-.27-.2-.57-.35z"/><path d="M12 2a10 10 0 0 0-8.6 15.05L2 22l5.05-1.32A10 10 0 1 0 12 2zm0 18.13c-1.5 0-2.96-.4-4.24-1.16l-.3-.18-3 .78.8-2.92-.2-.31A8.13 8.13 0 1 1 12 20.13z"/></svg>
                </div>
                <div>
                  <div className="contact-channel-label">WhatsApp</div>
                  <a href="https://wa.me/5581992008719" target="_blank" rel="noopener" className="contact-channel-value">+55 81 9 9200.8719</a>
                </div>
              </div>
              <div className="contact-channel">
                <div className="contact-channel-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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>
                </div>
                <div>
                  <div className="contact-channel-label">Endereço</div>
                  <span className="contact-channel-value">Av. Assedipe, 15, Abreu e Lima/PE</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------  FOOTER  ---------- */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-contact-row">
          <a href="tel:+5581991998879" className="fc-item">
            <span className="fc-icon"><svg width="22" height="22" 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.72c.13.96.36 1.9.7 2.81a2 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-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span>
            <span className="fc-text"><strong>Telefone</strong>81 9 9199.8879</span>
          </a>
          <a href="https://wa.me/5581992008719" target="_blank" rel="noopener" className="fc-item">
            <span className="fc-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.87 1.22 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.63.71.23 1.36.19 1.87.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.13-.27-.2-.57-.35z"/><path d="M12 2a10 10 0 0 0-8.6 15.05L2 22l5.05-1.32A10 10 0 1 0 12 2zm0 18.13c-1.5 0-2.96-.4-4.24-1.16l-.3-.18-3 .78.8-2.92-.2-.31A8.13 8.13 0 1 1 12 20.13z"/></svg></span>
            <span className="fc-text"><strong>WhatsApp</strong>81 9 9200.8719</span>
          </a>
          <a href="mailto:contato@stocksac.com.br" className="fc-item">
            <span className="fc-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg></span>
            <span className="fc-text"><strong>E-mail</strong>contato@stocksac.com.br</span>
          </a>
        </div>

        <div className="footer-grid">
          <div className="footer-brand">
            <Logo />
            <p>Sistemas de armazenagem industrial. Engenharia, projeto, fabricação e instalação, feito por uma equipe só.</p>
            <div className="footer-social">
              <a href="#" aria-label="LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 1 1 8.25 6.5 1.75 1.75 0 0 1 6.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0 0 13 14.19a.66.66 0 0 0 0 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 0 1 2.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg></a>
              <a href={IG_URL} target="_blank" rel="noopener" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg></a>
              <a href="#" aria-label="Facebook"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5a1 1 0 0 1 1-1h3v-4h-3a5 5 0 0 0-5 5v2.01h-2l-.396 3.98h2.396v8.01Z"/></svg></a>
            </div>
          </div>

          <div className="footer-col">
            <div className="footer-h">Links Úteis</div>
            <ul>
              <li><a href={HOME}>Home</a></li>
              <li><a href={PAGE_SOLUCOES}>Soluções</a></li>
              <li><a href={PAGE_INSTITUCIONAL}>Sobre nós</a></li>
              <li><a href={HOME + '#blog'}>Blog</a></li>
              <li><a href={PAGE_CONTATO}>Contato</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-h">Soluções</div>
            <ul>
              <li><a href={'porta-pallet.html'}>Porta Pallet</a></li>
              <li><a href={'drive-in.html'}>Drive In</a></li>
              <li><a href={'cantilever.html'}>Cantilever</a></li>
              <li><a href={'mezanino.html'}>Mezanino</a></li>
              <li><a href={'push-back.html'}>Push Back</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-h">Endereço</div>
            <ul>
              <li>Av. Assedipe, 15</li>
              <li>Distrito Industrial, Abreu e Lima</li>
              <li>PE · CEP 53520-785</li>
              <li><a href="mailto:contato@stocksac.com.br">contato@stocksac.com.br</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>Política de Privacidade</span>
          <span>Copyright © 2026 Stock · Todos os direitos reservados.</span>
          <span>Stock Sistemas de Armazenagem e Construtivos Ltda.</span>
        </div>
      </div>
    </footer>
  );
}

/* ----------  REVEAL HOOK  ---------- */
function useScrollReveal() {
  useEffect(() => {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); obs.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

Object.assign(window, {
  Logo, Header, Footer, MegaPanel, HexIcon, InternalHero, ContactBlock, useScrollReveal,
  MEGA_PRODUCTS, MEGA_SERVICES,
  HOME, PAGE_PRODUTO, PAGE_SOLUCOES, PAGE_INSTITUCIONAL, PAGE_CONTATO, IG_URL,
});