/* ==================================================
   STOCK, App
   ================================================== */

const { useState, useEffect, useRef } = React;

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

/* ----------  HEADER + MEGA MENU  ---------- */
const NAV_LINKS = [
  { label: 'HOME', href: '#top' },
  { label: 'SOLUÇÕES', href: '#solucoes', mega: true },
  { label: 'CLIENTES', href: '#clientes' },
  { label: 'INSTITUCIONAL', href: 'Stock - Institucional.html' },
  { label: 'CONTATO', href: '#contato' },
];

const PAGE_PRODUTO = 'Stock - Produto.html';
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: 'Stock - Institucional.html#projeto' },
  { name: 'Fabricação', href: 'Stock - Institucional.html#fabricacao' },
  { name: 'Instalação', href: 'Stock - Institucional.html#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))}
                      onClick={onClose}
                    >
                      <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} onClick={onClose}>
                    <span className="mega-bullet"><HexIcon /></span>
                    {s.name}
                  </a>
                </li>
              ))}
            </ul>
            <a href="#contato" className="mega-project" onClick={onClose}>
              <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" onClick={onClose}>Ver detalhes <span className="mega-arrow">→</span></a>
        </div>
      </div>
    </div>
  );
}

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState('#top');
  const [progress, setProgress] = useState(0);
  const [megaOpen, setMegaOpen] = useState(false);
  const closeTimer = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? (window.scrollY / h) * 100 : 0);
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const openMega = () => { clearTimeout(closeTimer.current); setMegaOpen(true); };
  const closeMega = () => { clearTimeout(closeTimer.current); setMegaOpen(false); };

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

  return (
    <React.Fragment>
    <header className={`site-header ${scrolled ? 'scrolled' : ''} ${megaOpen ? 'mega-active' : ''}`}>
      <div className="scroll-progress" style={{ width: progress + '%' }}></div>
      <div className="container-wide header-inner">
        <Logo />
        <nav>
          <ul className="main-nav">
            {NAV_LINKS.map(l => (
              <li
                key={l.href}
                className={l.mega ? 'has-mega' : ''}
              >
                <a
                  href={l.href}
                  className={(active === l.href ? 'is-active' : '') + (l.mega && megaOpen ? ' mega-on' : '')}
                  onClick={(e) => {
                    if (l.mega) { e.preventDefault(); setMegaOpen(v => !v); }
                    else { setActive(l.href); setMegaOpen(false); }
                  }}
                >{l.label}{l.mega && <span className="nav-caret">▾</span>}</a>
              </li>
            ))}
          </ul>
        </nav>
        <a href="#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>
  );
}

/* ----------  HERO with sliding carousel  ---------- */
// Each slide: title lines (one line flagged orange) + description.
const HERO_SLIDES = [
  {
    lines: [
      { t: "Estrutura" },
      { t: "sob medida", orange: true },
      { t: "para otimizar" },
      { t: "seu espaço" },
    ],
    desc: "Sistemas projetados para maximizar a capacidade de estocagem, melhorar o fluxo logístico e reduzir custos operacionais.",
  },
  {
    lines: [
      { t: "A Stock", orange: true },
      { t: "desenvolve" },
      { t: "projeta, produz" },
      { t: "e implementa" },
    ],
    desc: "Da engenharia à instalação, uma equipe só cuida de todo o seu projeto de armazenagem.",
  },
  {
    lines: [
      { t: "Soluções" },
      { t: "inteligentes em" },
      { t: "armazenagem", orange: true },
      { t: "industrial" },
    ],
    desc: "Maximize o espaço e a eficiência do seu armazém com nossas estruturas de alta performance.",
  },
];

const HERO_VIDEO_ID = 'YbAX9QJgqyc';

function Hero() {
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  const videoRef = useRef(null);

  // Autoplay carousel
  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % HERO_SLIDES.length), 7000);
    return () => clearInterval(t);
  }, [paused]);

  // YouTube IFrame API, reliable autoplay + loop background
  useEffect(() => {
    let player;
    function build() {
      player = new window.YT.Player(videoRef.current, {
        videoId: HERO_VIDEO_ID,
        playerVars: {
          autoplay: 1, mute: 1, controls: 0, loop: 1, playlist: HERO_VIDEO_ID,
          showinfo: 0, rel: 0, modestbranding: 1, playsinline: 1,
          disablekb: 1, iv_load_policy: 3, fs: 0,
        },
        events: {
          onReady: (e) => { e.target.mute(); e.target.playVideo(); },
          onStateChange: (e) => {
            if (e.data === window.YT.PlayerState.ENDED) e.target.playVideo();
          },
        },
      });
    }
    if (window.YT && window.YT.Player) {
      build();
    } else {
      const tag = document.createElement('script');
      tag.src = 'https://www.youtube.com/iframe_api';
      document.head.appendChild(tag);
      window.onYouTubeIframeAPIReady = build;
    }
    return () => { if (player && player.destroy) player.destroy(); };
  }, []);

  const go = (dir) => setIdx(i => (i + dir + HERO_SLIDES.length) % HERO_SLIDES.length);

  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <div
          className="hero-poster"
          style={{ backgroundImage: `url(https://img.youtube.com/vi/${HERO_VIDEO_ID}/maxresdefault.jpg)` }}
        ></div>
        <div className="hero-video-wrap">
          <div ref={videoRef} className="hero-video"></div>
        </div>
      </div>

      <div className="hero-viewport">
        <div className="hero-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
          {HERO_SLIDES.map((s, i) => (
            <div className="hero-slide" key={i} aria-hidden={i !== idx}>
              <div className="container hero-inner">
                <div className="hero-left">
                  <h1 className="hero-title">
                    {s.lines.map((ln, j) => (
                      <span key={j} className={ln.orange ? 'orange' : ''}>{ln.t}</span>
                    ))}
                  </h1>
                </div>
                <div className="hero-right">
                  <p className="hero-desc">{s.desc}</p>
                  <a href="#contato" className="btn btn-blue">Fale com um especialista</a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="hero-arrows">
        <button onClick={() => go(-1)} aria-label="Slide anterior">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        </button>
        <button onClick={() => go(1)} aria-label="Próximo slide">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        </button>
      </div>

      <div className="hero-dots">
        {HERO_SLIDES.map((_, i) => (
          <button
            key={i}
            className={`hero-dot ${i === idx ? 'active' : ''}`}
            onClick={() => setIdx(i)}
            aria-label={`Slide ${i + 1}`}
          />
        ))}
      </div>
    </section>
  );
}

/* ----------  FLOATING WHATSAPP  ---------- */
function WhatsAppFloat() {
  return (
    <a href="https://wa.me/5581992008719" className="wa-float" aria-label="WhatsApp" target="_blank" rel="noopener">
      <span className="wa-pulse"></span>
      <svg width="30" height="30" viewBox="0 0 24 24" fill="white">
        <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 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-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 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.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 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/>
      </svg>
    </a>
  );
}

/* ----------  SOLUTIONS FEATURE + SLIDER  ---------- */
const SOLUTIONS = [
  { name: "Porta Pallet", img: "assets/produtos/porta-pallet.webp",
    desc: "Favorecem a busca e seletividade por mercadorias e são adaptáveis às mudanças de layout em relação ao espaço em que estão inseridos." },
  { name: "Drive In", img: "assets/produtos/drive-in.webp",
    desc: "Sem corredores, os produtos são armazenados em profundidade, possibilitando alta taxa de ocupação e volume de armazenagem." },
  { name: "Cantilever", img: "assets/produtos/cantilever.webp",
    desc: "Sistema de armazenagem versátil, possibilita o armazenamento de diversos tipos e dimensões de mercadorias, como cargas longas." },
  { name: "Mezanino", img: "assets/produtos/mezanino.webp",
    desc: "Sistema multifuncional, ideal para criar escritórios ou estoque. Também pode aumentar a área útil para ampliar a operação." },
  { name: "Mini Porta Pallet", img: "assets/produtos/mini-porta-pallet.webp",
    desc: "Estrutura compacta ideal para cargas leves e fracionadas, com fácil montagem e máximo aproveitamento de altura." },
  { name: "Flow Rack", img: "assets/produtos/flow-rack.webp",
    desc: "Aumento de produtividade e precisão na separação de pedidos e na organização da montagem de pedidos fracionados." },
  { name: "Push Back", img: "assets/produtos/push-back.webp",
    desc: "Permite alta densidade em armazenagem e ótimo aproveitamento em volume de cargas armazenadas." },
  { name: "Dinâmico", img: "assets/produtos/dinamico.webp",
    desc: "As mercadorias são abastecidas de um lado e retiradas do outro, garantindo que o primeiro palete armazenado seja o primeiro a sair." },
  { name: "Sistema para Carro Satélite", img: "assets/produtos/carro-satelite.webp",
    desc: "Carga e descarga realizadas de forma semiautomática, por empilhadeiras convencionais ou automatizadas." },
  { name: "Rack Pallet", img: "assets/produtos/porta-pallet.webp",
    desc: "Solução robusta e modular para paletização, garantindo organização, segurança e agilidade na movimentação de cargas." },
];

function SolutionsFeature() {
  const [idx, setIdx] = useState(0);
  const go = (dir) => setIdx(i => (i + dir + SOLUTIONS.length) % SOLUTIONS.length);
  const cur = SOLUTIONS[idx];

  // Preload all images so slide changes never wait on a network load
  useEffect(() => {
    SOLUTIONS.forEach(s => { const im = new Image(); im.src = s.img; });
  }, []);

  return (
    <section className="solutions-feature" id="solucoes">
      <div className="container">
        <div className="reveal">
          <div className="solutions-head">
            <div>
              <span className="section-eyebrow no-line">Conheça nossos</span>
              <h2 className="title-gray">Sistemas e Soluções</h2>
            </div>
            <a href="#produtos" className="btn btn-ghost-orange btn-arrow">Saiba mais</a>
          </div>
        </div>

        <div className="sol-slider reveal">
          <img src="assets/fundo-solucoes.png" alt="" className="sol-watermark" />
          <div className="sol-arrows">
            <button onClick={() => go(-1)} aria-label="Anterior">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            </button>
            <button onClick={() => go(1)} aria-label="Próximo">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </button>
          </div>

          <div className="sol-body">
            <div className="sol-info" key={idx + '-info'}>
              <div className="sol-icon">
                <img src="assets/icon-produto.png" alt="" />
              </div>
              <h3>{cur.name}</h3>
              <p>{cur.desc}</p>
              <a href="#contato" className="btn btn-orange btn-arrow">Solicitar orçamento</a>
            </div>
            <div className="sol-image" key={idx + '-img'}>
              <img src={cur.img} alt={cur.name} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------  PRODUCTS  ---------- */
const PRODUCTS = [
  { name: "Porta Palete", img: "uploads/soluções/PORTA PALLET.png",
    desc: "Favorecem a busca e seletividade por mercadorias e são adaptáveis às mudanças de layout em relação ao espaço que estão inseridos." },
  { name: "Mini Porta Palete", img: "uploads/soluções/MINI PORTA PALLET.png",
    desc: "Estrutura compacta ideal para cargas leves e fracionadas, com fácil montagem e máximo aproveitamento de altura." },
  { name: "Drive-in", img: "uploads/soluções/DRIVE IN.png",
    desc: "Sem corredores, os produtos são armazenados em profundidade, possibilitando alta taxa de ocupação e volume de armazenagem." },
  { name: "Dinâmico", img: "uploads/soluções/DINAMICO.png",
    desc: "As mercadorias são abastecidas de um lado e retiradas do outro, garantindo que o primeiro palete armazenado seja o primeiro a sair." },
  { name: "Push Back", img: "uploads/soluções/PUSH BACK.png",
    desc: "Permite alta densidade em armazenagem e ótimo aproveitamento em volume de cargas armazenadas." },
  { name: "Cantilever", img: "uploads/soluções/CANTILEVER.png",
    desc: "Sistema com armazenagem versátil, possibilita o armazenamento de diversos tipos e dimensões de mercadorias." },
  { name: "Carro Satélite", img: "uploads/soluções/sistema para carro satelite.png",
    desc: "Carga e descarga realizada de forma semiautomática, por empilhadeiras convencionais ou automatizadas." },
  { name: "Flow Rack", img: "uploads/soluções/FLOW RACK.png",
    desc: "Aumento de produtividade e precisão na separação de pedidos e organização da montagem de pedidos fracionados." },
  { name: "Mezanino", img: "uploads/soluções/MEZANINO.png",
    desc: "Sistema multifuncional, ideal para criar escritórios ou estoque. Também pode aumentar a área útil para ampliar a operação." },
];

function ProductCard({ p, i }) {
  return (
    <div className={`product-card reveal reveal-delay-${(i % 3) + 1}`}>
      <div className="product-icon">
        <img src="uploads/icon 2.png" alt="" />
      </div>
      <h3>{p.name}</h3>
      <p>{p.desc}</p>
      <a href="#contato" className="product-link">Saiba mais</a>
    </div>
  );
}

function Products() {
  return (
    <section className="products" id="produtos">
      <div className="products-bg-text">SOLUÇÕES <span>E SISTEMAS</span></div>
      <div className="container">
        <div className="products-header reveal">
          <span className="section-eyebrow center">Conheça nossos</span>
          <h2>Produtos<span className="accent">.</span></h2>
        </div>
        <div className="products-grid">
          {PRODUCTS.map((p, i) => <ProductCard key={i} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}

/* ----------  COUNTER (animated on scroll-into-view)  ---------- */
function Counter({ to, duration = 2000, prefix = '', suffix = '' }) {
  const [val, setVal] = useState(0);
  const [started, setStarted] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          setStarted(true);
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(to * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration, started]);

  return (
    <span ref={ref} className="stat-value">
      {prefix}{val.toLocaleString('pt-BR')}<span className="stat-suffix">{suffix}</span>
    </span>
  );
}

/* ----------  EXCELLENCE  ---------- */
function StatBlock({ to, prefix, suffix, label }) {
  return (
    <div className="stat-block">
      <div className="stat-main">
        <Counter to={to} prefix={prefix} suffix={suffix} />
        <span className="stat-label">{label}</span>
      </div>
      <span className="stat-icon">
        <img src="assets/s-icon-blue.png" alt="" />
      </span>
    </div>
  );
}

function Excellence() {
  return (
    <section className="excellence" id="sobre">
      <div className="container">
        <div className="excellence-grid">

          <div className="exc-col exc-left reveal">
            <div className="exc-emblem">
              <img src="assets/emblema-s.png" alt="Stock" />
            </div>
            <div className="exc-divider"></div>
            <StatBlock to={10000} suffix="m²" label="De área do fabril" />
          </div>

          <div className="exc-col exc-mid reveal reveal-delay-1">
            <div className="exc-content">
              <h2>Excelência em<br/>armazenagem</h2>
              <p>Com anos de experiência, a Stock projeta e implementa soluções inovadoras em movimentação e armazenagem, utilizando materiais de alta resistência e tecnologia de ponta.</p>
              <a href="#contato" className="exc-link">Saiba mais <span>➔</span></a>
            </div>
            <div className="exc-divider"></div>
            <StatBlock to={150} prefix="+" label="Clientes satisfeitos" />
          </div>

          <div className="exc-col exc-right reveal reveal-delay-2">
            <img src="assets/excelencia-fabril.png" alt="Especialista Stock" className="exc-person" />
          </div>

        </div>
      </div>
    </section>
  );
}

/* ----------  VIDEO BLOCK  ---------- */
function VideoBlock() {
  const [playing, setPlaying] = useState(false);
  return (
    <section className="video-block" id="institucional">
      <img src="assets/emblema-s.png" alt="" className="vb-watermark" />
      <div className="container">
        <div className="vb-grid reveal">
          <div className="vb-video">
            <div className="vb-frame">
              {playing ? (
                <iframe
                  src="https://www.youtube-nocookie.com/embed/YbAX9QJgqyc?autoplay=1&rel=0&modestbranding=1&playsinline=1"
                  title="Institucional Stock"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                ></iframe>
              ) : (
                <button
                  className="vb-poster"
                  onClick={() => setPlaying(true)}
                  aria-label="Assistir vídeo institucional"
                  style={{ backgroundImage: `url(https://img.youtube.com/vi/YbAX9QJgqyc/maxresdefault.jpg)` }}
                >
                  <span className="vb-play">
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                  </span>
                </button>
              )}
            </div>
          </div>
          <div className="vb-text">
            <h2>A Stock desenvolve, projeta, produz e implementa.</h2>
            <span className="vb-sub">Armazenagem e construtivos</span>
            <p>Soluções em movimentação e armazenagem com estruturas de aço de alta resistência mecânica, projetadas sob medida para maximizar capacidade, otimizar fluxo logístico e reduzir custos operacionais. Mais de 200 clientes em todo o Brasil confiam na nossa engenharia.</p>
            <a href="#contato" className="exc-link">Saiba mais <span>➔</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------  CTA BLUE  ---------- */
function CtaBlue() {
  return (
    <section className="cta-blue">
      <div className="cta-blue-top"></div>
      <div className="container">
        <div className="cta-blue-grid">
          <div className="cta-blue-image reveal">
            <img src="assets/excelencia-colaborador.png" alt="Consultores Stock" />
          </div>
          <div className="cta-blue-text reveal reveal-delay-2">
            <h2>Transforme seu<br/>estoque com<br/>nossas soluções</h2>
            <p>Descubra como nossas estruturas podem revolucionar sua logística.</p>
            <a href="#contato" className="btn btn-orange">Faça um orçamento</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------  CONTACT  ---------- */
function Contact() {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3000);
  };

  return (
    <section className="contact" 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>
                {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.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>
                </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.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 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-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 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.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 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/>
                  </svg>
                </div>
                <div>
                  <div className="contact-channel-label">WhatsApp</div>
                  <a href="https://wa.me/5581992008719" className="contact-channel-value">+55 81 9 9200.8719</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------  CLIENTS  ---------- */
const REVIEWS = [
  { name: "Brivaldo Moura", when: "4 meses atrás", initial: "B", color: "#5B6470",
    text: "Atendimento com excelência! As estruturas são muito bem acabadas na qual supriu nossa necessidade de armazenagem com total segurança." },
  { name: "Leila Rendall", when: "4 meses atrás", initial: "L", color: "#2A73E8",
    text: "Excelente experiência do início ao fim! O atendimento foi ágil e muito profissional, o projeto foi desenvolvido exatamente como precisávamos." },
  { name: "João Pedro", when: "4 meses atrás", initial: "J", color: "#1F9E52",
    text: "Sem palavras para o atendimento! Entrega dentro do prazo, suporte rápido, as estruturas são de altíssima qualidade. Recomendo demais." },
  { name: "Ana Carolina", when: "5 meses atrás", initial: "A", color: "#C4392B",
    text: "Equipe extremamente atenciosa e comprometida. Do projeto à instalação, tudo impecável. Nosso armazém ficou muito mais organizado." },
  { name: "Marcos Vinícius", when: "6 meses atrás", initial: "M", color: "#8E44AD",
    text: "Profissionais competentes e produto de primeira linha. A montagem foi rápida e sem transtornos. Superou nossas expectativas." },
  { name: "Fernanda Lima", when: "7 meses atrás", initial: "F", color: "#E67E22",
    text: "Melhor decisão que tomamos para nossa logística. Estruturas robustas, prazo cumprido e um pós-venda excelente. Nota 10!" },
];

function GoogleG({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-label="Google">
      <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/>
      <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/>
      <path fill="#FBBC05" d="M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z"/>
      <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/>
    </svg>
  );
}

function Stars() {
  return (
    <div className="review-stars">
      {[0,1,2,3,4].map(i => (
        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
      ))}
      <svg className="review-verified" width="15" height="15" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#4285F4"/><path d="M9.5 12.5l1.8 1.8 3.5-3.8" fill="none" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </div>
  );
}

function ReviewCard({ r }) {
  return (
    <div className="review-card">
      <div className="review-head">
        <div className="review-avatar" style={{ background: r.color }}>{r.initial}</div>
        <div className="review-who">
          <div className="review-name">{r.name}</div>
          <div className="review-when">{r.when}</div>
        </div>
        <div className="review-g"><GoogleG size={22} /></div>
      </div>
      <Stars />
      <p className="review-text">{r.text}</p>
      <a href="#" className="review-more">Leia mais</a>
    </div>
  );
}

function Clients() {
  const [start, setStart] = useState(0);
  const perView = 3;
  const maxStart = Math.max(0, REVIEWS.length - perView);
  const go = (dir) => setStart(s => Math.min(maxStart, Math.max(0, s + dir)));

  return (
    <section className="clients" id="clientes">
      <div className="container">
        <div className="clients-header reveal">
          <h2 className="clients-title">
            Temos orgulho de atender a uma ampla gama de<br/>
            <span className="accent">clientes em todo o país</span>
          </h2>
        </div>

        <div className="reviews-block reveal reveal-delay-2">
          <div className="reviews-summary">
            <div className="reviews-summary-label">EXCELENTE</div>
            <div className="reviews-summary-stars">
              {[0,1,2,3,4].map(i => (
                <svg key={i} width="30" height="30" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
              ))}
            </div>
            <div className="reviews-summary-count">Com base em <strong>17 avaliações</strong></div>
            <div className="reviews-summary-google">
              <GoogleG size={30} />
              <span className="google-word">Google</span>
            </div>
          </div>

          <div className="reviews-slider">
            <button className="reviews-arrow left" onClick={() => go(-1)} disabled={start === 0} aria-label="Anterior">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            </button>
            <div className="reviews-viewport">
              <div className="reviews-track" style={{ transform: `translateX(-${start * (100 / perView)}%)` }}>
                {REVIEWS.map((r, i) => (
                  <div className="review-cell" key={i}><ReviewCard r={r} /></div>
                ))}
              </div>
            </div>
            <button className="reviews-arrow right" onClick={() => go(1)} disabled={start === maxStart} aria-label="Próximo">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------  LOGOS MARQUEE  ---------- */
const LOGOS = Array.from({ length: 27 }, (_, i) => `assets/logos/${String(i + 1).padStart(2, '0')}.webp`);

function LogoMarquee() {
  const rowA = LOGOS.slice(0, 14);
  const rowB = LOGOS.slice(14);
  return (
    <section className="logos-marquee">
      <div className="marquee-row">
        <div className="marquee-track left">
          {[...rowA, ...rowA].map((src, i) => (
            <div className="marquee-item" key={i}><img src={src} alt="" loading="lazy" /></div>
          ))}
        </div>
      </div>
      <div className="marquee-row">
        <div className="marquee-track right">
          {[...rowB, ...rowB].map((src, i) => (
            <div className="marquee-item" key={i}><img src={src} alt="" loading="lazy" /></div>
          ))}
        </div>
      </div>

      <div className="partners-divider">
        <span className="partners-badge">Mais de 200 parceiros espalhados pelo Brasil</span>
      </div>
    </section>
  );
}
const IG_URL = "https://www.instagram.com/stock.armazenagem/";

/* ====================================================================
   FEED AUTOMÁTICO DO INSTAGRAM  (modo seguro, proxy PHP)
   --------------------------------------------------------------------
   O token NÃO fica aqui no front-end. Ele mora no arquivo
   instagram-feed.php, no servidor (Hostinger), que executa server-side
   e nunca é baixado pelo navegador. Este site apenas chama esse PHP,
   que devolve os posts já prontos (sem expor o token).

   >> Para ativar (uma vez): <<
   1. Faça upload do arquivo instagram-feed.php junto do site na Hostinger.
   2. Abra instagram-feed.php e cole o token na linha $IG_TOKEN = '...';
   3. Pronto. O feed passa a puxar os 3 posts mais recentes sozinho.

   Enquanto o PHP não estiver no ar (ex.: preview local), o feed mostra
   as imagens estáticas de fallback (GALLERY), o site nunca quebra.
   ==================================================================== */
const IG_FEED_ENDPOINT = "instagram-feed.php";

const GALLERY = [
  { img: "assets/produtos/porta-pallet.webp", caption: "Estrutura bem planejada é lucro no curto prazo." },
  { img: "assets/produtos/drive-in.webp", caption: "Seu estoque resolve, ou esconde problemas?" },
  { img: "assets/produtos/cantilever.webp", caption: "Organizar é o primeiro passo." },
  { img: "assets/produtos/flow-rack.webp", caption: "Stock 360°: estratégia e conexão." },
  { img: "assets/produtos/mezanino.webp", caption: "Alguns sinais são claros: hora de mudar." },
  { img: "assets/produtos/push-back.webp", caption: "Armazenar não é o suficiente." },
];

function Gallery() {
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    fetch(IG_FEED_ENDPOINT)
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => {
        if (data && data.data && data.data.length) {
          setPosts(data.data.map(p => ({
            img: p.media_type === 'VIDEO' ? (p.thumbnail_url || p.media_url) : p.media_url,
            caption: (p.caption || '').split('\n')[0].slice(0, 90),
            link: p.permalink,
            video: p.media_type === 'VIDEO',
          })));
        }
      })
      .catch(() => {});
  }, []);

  const items = posts || GALLERY.slice(0, 3).map(g => ({ ...g, link: IG_URL, video: false }));

  return (
    <section className="gallery" id="instagram">
      <div className="container">
        <div className="gallery-header reveal">
          <a href={IG_URL} target="_blank" rel="noopener" className="gallery-handle">
            <img src="assets/favicon-stock.svg" alt="" className="gallery-handle-icon" />
            <span>@stock.armazenagem</span>
          </a>
          <a href={IG_URL} target="_blank" rel="noopener" className="btn btn-orange">Segue a gente no Instagram</a>
        </div>
        <div className="gallery-grid">
          {items.map((g, i) => (
            <a key={i} href={g.link || IG_URL} target="_blank" rel="noopener" className={`gallery-item reveal reveal-delay-${(i % 3) + 1}`}>
              <img src={g.img} alt="" />
              {g.video && <span className="gallery-video-badge">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
              </span>}
              <div className="gallery-item-caption">
                <span className="gallery-ig-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                </span>
                {g.caption}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------  NEWS  ---------- */
const NEWS = [
  { date: "20 fev 2026", img: "assets/blog/estantes.webp", title: "Sistema de estantes: principais tipos e como escolher a melhor solução" },
  { date: "20 fev 2026", img: "assets/blog/estoque.webp", title: "A redução de estoque, o inimigo silencioso do armazém" },
  { date: "20 fev 2026", img: "assets/blog/sop.webp", title: "O que é o S&OP e qual seu impacto na logística" },
];

function News() {
  return (
    <section className="news" id="blog">
      <div className="container">
        <div className="news-layout">
          <div className="news-intro reveal">
            <span className="section-eyebrow no-line">Últimas Notícias</span>
            <h2>Fique por Dentro das Novidades em Armazenagem</h2>
            <p>Acesse nossos artigos e mantenha-se atualizado sobre as melhores práticas e inovações do setor.</p>
            <a href="#" className="btn btn-ghost-orange btn-arrow">Ver mais</a>
          </div>
          <div className="news-grid">
            {NEWS.map((n, i) => (
              <article key={i} className={`news-card reveal reveal-delay-${i + 1}`}>
                <div className="news-card-image" style={{ backgroundImage: `url(${n.img})` }}></div>
                <div className="news-card-body">
                  <h3>{n.title}</h3>
                  <a href="#" className="news-readmore">Leia mais »</a>
                  <div className="news-meta">{n.date} · Nenhum comentário</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------  MAP  ---------- */
function MapSection() {
  return (
    <section className="map-section" id="localizacao">
      <iframe
        title="Localização Stock"
        src="https://www.google.com/maps?q=Av.+Assedipe,+15,+Distrito+Industrial,+Abreu+e+Lima+-+PE,+53520-785&output=embed"
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
      ></iframe>
    </section>
  );
}

/* ----------  CTA ORANGE  ---------- */
function CtaOrange() {
  return (
    <section className="cta-orange">
      <div className="container cta-orange-content reveal">
        <h2>Transforme seu galpão em uma<br/><span className="cta-accent">operação de alta performance.</span></h2>
        <p>Do projeto ao fornecimento, soluções estruturais para cada tipo de operação.</p>
        <a href="#contato" className="btn cta-white-btn">Fale com um consultor</a>
      </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="#top">Home</a></li>
              <li><a href="#solucoes">Soluções</a></li>
              <li><a href="Stock - Institucional.html">Sobre nós</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="#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 ON SCROLL 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();
  }, []);
}

/* ----------  APP  ---------- */
function App() {
  useScrollReveal();
  return (
    <>
      <Header />
      <Hero />
      <SolutionsFeature />
      <Clients />
      <LogoMarquee />
      <Excellence />
      <VideoBlock />
      <CtaBlue />
      <Contact />
      <Gallery />
      <News />
      <MapSection />
      <CtaOrange />
      <Footer />
      <WhatsAppFloat />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);