const { useState, useEffect, useRef, useMemo } = React;

// ——— Tweaks defaults ————————————————————————————————————————
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#009030",
  "theme": "light",
  "displayFont": "Space Grotesk",
  "density": "comfortable",
  "heroVariant": "split"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--accent', t.accent);
  const hex = t.accent.replace('#','');
  const r = parseInt(hex.substr(0,2),16), g = parseInt(hex.substr(2,2),16), b = parseInt(hex.substr(4,2),16);
  root.style.setProperty('--accent-soft', `rgba(${r},${g},${b},0.10)`);
  // darker variant
  const dk = (v) => Math.max(0, Math.round(v * 0.75));
  root.style.setProperty('--accent-dark', `rgb(${dk(r)},${dk(g)},${dk(b)})`);
  root.classList.toggle('dark', t.theme === 'dark');
  root.classList.toggle('dense', t.density === 'dense');
  root.style.setProperty('--display', `"${t.displayFont}", system-ui, sans-serif`);
}

function useReveal() {
  useEffect(() => {
    // Assign stagger delays to reveal elements that share a grid parent
    const grids = document.querySelectorAll('.svc-grid, .prod-grid, .sectors, .mach-services, .cat-grid');
    grids.forEach(grid => {
      const children = grid.querySelectorAll('.reveal');
      children.forEach((el, i) => { el.dataset.delay = String(Math.min(i + 1, 8)); });
    });

    // Observe all reveal variants
    const selectors = '.reveal, .reveal-left, .reveal-right, .reveal-scale';
    const els = document.querySelectorAll(selectors);
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.10 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// ——— Icons ————————————————————————————————————————————————
const ArrowRight = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="square"/></svg>);
const Arrow = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M7 17 17 7M9 7h8v8" strokeLinecap="square"/></svg>);
const SearchIcon = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>);
const WaIcon = (p) => (<svg viewBox="0 0 32 32" fill="currentColor" {...p}><path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.5L3 29l6.7-1.7C11.7 28.4 13.8 29 16 29c7.2 0 13-5.8 13-13S23.2 3 16 3zm7.4 18.4c-.3.9-1.5 1.6-2.4 1.8-.6.1-1.4.2-4.2-.9-3.5-1.4-5.8-5-6-5.2-.2-.2-1.4-1.9-1.4-3.6 0-1.7.9-2.5 1.2-2.9.3-.3.6-.4.8-.4h.6c.2 0 .5 0 .7.5l1 2.4c.1.2.1.4 0 .6-.1.2-.2.3-.4.5l-.5.6c-.2.2-.3.4-.1.7.2.3.9 1.5 1.9 2.4 1.3 1.1 2.4 1.5 2.7 1.6.3.1.5.1.7-.1l.9-1.1c.2-.3.5-.3.7-.2l2.3 1.1c.3.1.5.2.5.3.1.2.1 1-.2 1.9z"/></svg>);
const PhoneIcon = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.5 2L7.9 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2-.5c.9.3 1.9.5 2.9.6A2 2 0 0 1 22 16.9z"/></svg>);
const MailIcon = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>);
const MapIcon = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>);
const ClockIcon = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>);

// Service icons
const IconProject = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M3 7h7l2 2h9v11H3z"/><path d="M8 14h8M8 17h5"/></svg>);
const IconParts = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><circle cx="12" cy="12" r="3.5"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1"/></svg>);
const IconAdjust = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M4 6h12M4 12h8M4 18h14"/><circle cx="18" cy="6" r="2"/><circle cx="14" cy="12" r="2"/><circle cx="20" cy="18" r="2"/></svg>);
const IconEquip = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><rect x="3" y="8" width="18" height="11" rx="1"/><path d="M7 8V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3M10 12h4"/></svg>);
const IconLathe = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M3 12h18M5 9v6M8 9v6M11 9v6M14 9v6M17 9v6M20 9v6"/></svg>);
const IconMill = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M12 3v8M9 11h6l-1 4h-4z M8 17h8M6 21h12"/></svg>);
const IconMachining = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/></svg>);

// Sector icons (simple geometric)
const SecFactory = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M3 20V10l5 3V10l5 3V8l5 3v9H3z"/><path d="M7 17h2M11 17h2M15 17h2"/></svg>);
const SecBottle = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M10 2h4v3l2 3v12a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V8l2-3z"/><path d="M8 12h8"/></svg>);
const SecPlant = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 20V8M8 12a4 4 0 0 1 4-4 4 4 0 0 1 4 4M5 15a7 7 0 0 1 7-7 7 7 0 0 1 7 7"/></svg>);
const SecCotton = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="9" cy="11" r="3"/><circle cx="15" cy="11" r="3"/><circle cx="12" cy="14" r="3"/><path d="M12 17v3M9 13v3M15 13v3"/></svg>);
const SecMeat = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M5 19V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v11"/><path d="M5 12h14M9 5v14"/></svg>);
const SecHosp = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="4" y="4" width="16" height="16" rx="1"/><path d="M12 8v8M8 12h8"/></svg>);
const SecPlastic = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M6 4h12l-2 4-3-2-3 2-2 4 3 2 3-2 3 2-2 4H6z"/></svg>);
const SecOil = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 3c-3 5-5 8-5 11a5 5 0 0 0 10 0c0-3-2-6-5-11z"/></svg>);
const SecMetal = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="m4 18 4-12 4 12 4-12 4 12"/><path d="M3 21h18"/></svg>);
const SecPower = (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="m13 3-9 12h7l-1 6 9-12h-7z"/></svg>);

// ——— Top bar ————————————————————————————————————————————
function TopBar() {
  return (
    <div className="topbar">
      <div className="topbar-inner">
        <div className="topbar-left">
          <span><ClockIcon style={{width:13,height:13,display:'inline',verticalAlign:'-2px'}}/> Seg–Sex 8h–18h</span>
          <span className="topbar-sep">·</span>
          <span>+22 anos de mercado</span>
        </div>
        <div className="topbar-right">
          <a href="tel:+556536820104"><PhoneIcon style={{width:13,height:13,display:'inline',verticalAlign:'-2px'}}/> <strong>(65) 3682-0104</strong></a>
          <span className="topbar-sep">·</span>
          <a href="https://wa.me/5565984032125" target="_blank" rel="noreferrer">WhatsApp (65) 98403-2125</a>
        </div>
      </div>
    </div>
  );
}

// ——— Nav ————————————————————————————————————————————————
function Nav() {
  return (
    <nav className="nav">
      <a href="#top" className="logo">
        <img src="assets/logo-mecatronica.png" alt="Mecatrônica MT" className="logo-img"/>
        <span className="logo-stack">
          <span>Mecatrônica MT</span>
          <span className="logo-sub">Pneumática · Hidráulica · Automação</span>
        </span>
      </a>
      <div className="nav-links">
        <a href="#servicos">Serviços</a>
        <a href="#usinagem">Usinagem</a>
        <a href="Catalogo.html">Catálogo</a>
        <a href="#mercados">Mercados</a>
        <a href="#sobre">Sobre</a>
        <a href="#contato">Contato</a>
      </div>
      <a href="#contato" className="nav-cta">
        Solicitar orçamento <ArrowRight style={{width:12,height:12}}/>
      </a>
    </nav>
  );
}

// ——— Hero ————————————————————————————————————————————————
function Hero({ variant }) {
  const title = variant === 'bold' ? (
    <>SOLUÇÕES<br/>QUE FAZEM<br/><span className="em">SUA LINHA RODAR.</span></>
  ) : variant === 'centered' ? (
    <>Sistemas de <span className="em">mecatrônica</span>, pneumática e hidráulica para sua indústria.</>
  ) : (
    <>Mecatrônica,<br/>pneumática e <span className="hl">hidráulica</span><br/>sob medida.</>
  );
  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow mono">
            <span className="pulse-dot"></span>
            <span>Atendendo indústrias em todo o Brasil</span>
          </div>
          <h1 className="display">{title}</h1>
          <p className="hero-sub">
            Mais de 22 anos desenvolvendo projetos, fornecendo peças e equipamentos e modernizando processos industriais. Da usina de açúcar ao hospital — entregamos confiança, qualidade e suporte técnico de quem entende.
          </p>
          <div className="hero-cta-row">
            <a href="#contato" className="btn-primary">Fale com um especialista <ArrowRight /></a>
            <a href="https://wa.me/5565984032125" target="_blank" rel="noreferrer" className="btn-wa"><WaIcon style={{width:16,height:16}}/> WhatsApp</a>
          </div>
          <div className="hero-trust">
            <div><strong>+22</strong><span>anos de mercado</span></div>
            <div><strong>+10</strong><span>setores atendidos</span></div>
            <div><strong>100%</strong><span>peças originais</span></div>
            <div><strong>24h</strong><span>resposta orçamento</span></div>
          </div>
        </div>

        <div className="hero-visual">
          <div className="hero-badge">⚡ Atendimento técnico especializado</div>
          <img src="assets/homem-capa.png" alt="Engenheiro em automação industrial" className="hero-img"/>
          <div className="hero-card">
            <div className="mono">LINHA INDUSTRIAL</div>
            <h4>Equipamentos, peças e projetos</h4>
            <p>Trabalhamos com as principais marcas do mercado — soluções completas para sua indústria.</p>
          </div>
        </div>
      </div>

      <div className="hero-strip" style={{margin:'0 calc(var(--pad-x) * -1)'}}>
        <div className="hero-strip-track">
          {['Atuadores rotativos','Válvulas pneumáticas','Cilindros pneumáticos','Sensores PT100','Tubos PU / Nylon','Manômetros','Termômetros analógicos','Borboleta / Esfera','Unidade FR+L','Estações de válvulas','Componentes de vácuo','Tornearia','Fresagem','Usinagem'].concat(['Atuadores rotativos','Válvulas pneumáticas','Cilindros pneumáticos','Sensores PT100','Tubos PU / Nylon','Manômetros','Termômetros analógicos','Borboleta / Esfera','Unidade FR+L','Estações de válvulas','Componentes de vácuo','Tornearia','Fresagem','Usinagem']).map((b,i) => (
            <span key={i}>{b}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ——— Services ——————————————————————————————————————————————
const SERVICES = [
  { n:'01', icon: <IconProject/>, t:'Desenvolvimento de projetos', d:'Projetos completos de sistemas pneumáticos, hidráulicos e de automação industrial sob medida.' },
  { n:'02', icon: <IconParts/>,   t:'Comércio de peças',           d:'Peças originais e de reposição das principais marcas do mercado, com nota fiscal e garantia.' },
  { n:'03', icon: <IconAdjust/>,  t:'Adequação de projetos',       d:'Modernização e adequação de linhas existentes para atender normas e ganhar produtividade.' },
  { n:'04', icon: <IconEquip/>,   t:'Comércio de equipamentos',    d:'Fornecimento de equipamentos industriais completos para indústrias de todos os portes.' },
  { n:'05', icon: <IconLathe/>,   t:'Tornearia',                   d:'Serviços de tornearia para peças sob medida, reposição e protótipos com precisão.' },
  { n:'06', icon: <IconMill/>,    t:'Fresagem',                    d:'Fresagem CNC e convencional para componentes mecânicos com acabamento técnico.' },
  { n:'07', icon: <IconMachining/>, t:'Usinagem',                  d:'Usinagem geral de peças industriais — recuperação e fabricação a partir de projeto.' },
  { n:'08', icon: <IconProject/>, t:'Manutenção industrial',       d:'Suporte técnico, manutenção preventiva e corretiva para minimizar paradas de linha.' },
];
function Services() {
  return (
    <section className="section" id="servicos">
      <div className="section-head">
        <div>
          <div className="section-kicker"><span className="section-num">— 01 / O que fazemos</span></div>
          <h2 className="section-title">Soluções completas para sua operação industrial.</h2>
        </div>
        <a href="#contato" className="btn-ghost">Solicitar orçamento <ArrowRight /></a>
      </div>
      <div className="svc-grid">
        {SERVICES.map(s => (
          <a href="#contato" className="svc reveal" key={s.n}>
            <div>
              <div className="svc-icon">{s.icon}</div>
              <div className="svc-num">{s.n}</div>
              <h3 className="svc-title">{s.t}</h3>
              <p className="svc-desc">{s.d}</p>
            </div>
            <div className="svc-foot">
              <span className="mono">Saiba mais</span>
              <Arrow className="svc-arrow" />
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ——— Catalog ————————————————————————————————————————————————
const CATEGORIES = ['Todos', 'Pneumática', 'Hidráulica', 'Sensores', 'Válvulas', 'Atuadores', 'Tubos & Conexões', 'Instrumentos'];
const CATALOG = [
  { cat:'Atuadores',         t:'Atuadores rotativos',           d:'Para movimentação angular precisa em automações.', label:'[ ATUADOR ROTATIVO ]' },
  { cat:'Válvulas',          t:'Válvulas borboleta / esfera',   d:'Bloqueio e controle de fluxo em linhas hidráulicas.', label:'[ VÁLVULA BORBOLETA ]' },
  { cat:'Instrumentos',      t:'Termômetros analógicos',        d:'Medição de temperatura em processos industriais.', label:'[ TERMÔMETRO ]' },
  { cat:'Sensores',          t:'Sensor PT100',                  d:'Sensor de temperatura de alta precisão.', label:'[ SENSOR PT100 ]' },
  { cat:'Tubos & Conexões',  t:'Tubos PU / Nylon',              d:'Linha completa para ar comprimido e fluidos.', label:'[ TUBOS PU/NYLON ]' },
  { cat:'Instrumentos',      t:'Manômetros',                    d:'Medição de pressão em diversas faixas.', label:'[ MANÔMETRO ]' },
  { cat:'Pneumática',        t:'Cilindros pneumáticos',         d:'Para acionamentos lineares de máquinas e linhas.', label:'[ CILINDRO PNEUMÁTICO ]' },
  { cat:'Pneumática',        t:'Unidade FR+L',                  d:'Tratamento de ar: filtro, regulador e lubrificador.', label:'[ UNIDADE FR+L ]' },
  { cat:'Válvulas',          t:'Válvulas pneumáticas',          d:'Direcionais, de bloqueio, reguladoras de fluxo.', label:'[ VÁLVULA PNEUMÁTICA ]' },
  { cat:'Válvulas',          t:'Estações de válvulas',          d:'Manifolds e blocos com comunicação industrial.', label:'[ ESTAÇÃO DE VÁLVULAS ]' },
  { cat:'Pneumática',        t:'Componentes de vácuo',          d:'Ventosas, geradores e acessórios para vácuo industrial.', label:'[ COMPONENTES VÁCUO ]' },
  { cat:'Hidráulica',        t:'Linha hidráulica TN6 / TN10',   d:'Tubos e conexões para sistemas hidráulicos.', label:'[ TUBOS HIDRÁULICOS ]' },
];

function CatalogItem({ p }) {
  return (
    <article className="cat-item reveal">
      <div className="cat-img" data-label={p.label}></div>
      <div className="cat-body">
        <div className="cat-cat mono">{p.cat}</div>
        <h3 className="cat-title">{p.t}</h3>
        <p className="cat-desc">{p.d}</p>
        <a href="#contato" className="cat-cta">
          Solicitar orçamento <ArrowRight style={{width:12,height:12}}/>
        </a>
      </div>
    </article>
  );
}

function Catalog() {
  const [cat, setCat] = useState('Todos');
  const [q, setQ] = useState('');
  const filtered = useMemo(() => {
    return CATALOG.filter(p => {
      if (cat !== 'Todos' && p.cat !== cat) return false;
      if (q && !(p.t + ' ' + p.d).toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
  }, [cat, q]);

  return (
    <section className="section alt" id="catalogo">
      <div className="section-head">
        <div>
          <div className="section-kicker"><span className="section-num">— 02 / Catálogo</span></div>
          <h2 className="section-title">Linha completa de produtos. Consulte valores e disponibilidade.</h2>
        </div>
        <p style={{maxWidth:380, color:'var(--fg-dim)', fontSize:15}}>
          Trabalhamos sob consulta — cada projeto tem suas particularidades. Solicite um orçamento e nossa equipe responde em até 24h úteis.
        </p>
      </div>

      <div className="cat-toolbar">
        <div className="cat-search">
          <SearchIcon style={{width:16,height:16,color:'var(--fg-mute)'}}/>
          <input
            placeholder="Buscar produto..."
            value={q}
            onChange={e=>setQ(e.target.value)}
          />
        </div>
        <div className="cat-chips">
          {CATEGORIES.map(c => (
            <button key={c} className={`cat-chip${cat===c?' on':''}`} onClick={()=>setCat(c)}>{c}</button>
          ))}
        </div>
      </div>

      <div className="cat-grid">
        {filtered.map((p, i) => <CatalogItem key={i} p={p} />)}
      </div>

      {filtered.length === 0 && (
        <div style={{textAlign:'center', padding:'60px 20px', color:'var(--fg-dim)'}}>
          Nenhum item encontrado. <a href="#contato" style={{color:'var(--accent)', fontWeight:600}}>Solicite uma consulta personalizada</a>.
        </div>
      )}

      <div className="cat-bottom-cta">
        <div>
          <div className="mono" style={{marginBottom:8}}>NÃO ENCONTROU O PRODUTO?</div>
          <h3 style={{fontFamily:'var(--display)', fontSize:'clamp(22px, 2.5vw, 32px)', fontWeight:600, letterSpacing:'-0.02em', margin:0}}>
            Trabalhamos com as principais marcas do mercado — fale com a gente.
          </h3>
        </div>
        <a href="#contato" className="btn-primary">Solicitar consulta <ArrowRight /></a>
      </div>
    </section>
  );
}

// ——— Torno & Fresa ——————————————————————————————————————
const MACHINING_SERVICES = [
  { t: 'Tornearia',     d: 'Fabricação de peças cilíndricas, eixos, buchas, polias e roscas com alta precisão.',  badge: 'CNC + Convencional', img: 'assets/usinagem/tornearia.jpg' },
  { t: 'Fresagem',      d: 'Usinagem de superfícies planas, rasgos, engrenagens e peças complexas em diversos materiais.', badge: 'CNC 3 eixos', img: 'assets/usinagem/fresagem.jpg' },
  { t: 'Usinagem geral',d: 'Recuperação de peças, fabricação sob desenho, retífica e ajustes mecânicos.', badge: 'Sob medida', img: 'assets/usinagem/usinagem-geral.jpg' },
];
function Machining() {
  const waMsg = encodeURIComponent('Olá! Gostaria de um orçamento para tornearia/fresagem.');
  return (
    <section className="section" id="usinagem">
      <div className="section-head">
        <div>
          <div className="section-kicker"><span className="section-num">— 02 / Usinagem</span></div>
          <h2 className="section-title">Tornearia, fresagem e usinagem sob medida.</h2>
        </div>
        <p style={{maxWidth:380, color:'var(--fg-dim)', fontSize:15}}>
          Fabricamos e recuperamos peças industriais com precisão técnica. Do desenho ao acabamento — entregamos no prazo, com a tolerância exigida pelo seu projeto.
        </p>
      </div>

      <div className="mach-grid">
        <div className="mach-feature">
          <div className="mach-photo mach-photo-lg">
            <img src="assets/usinagem/torno-oficina.jpg" alt="Torno CNC — oficina própria" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
            <div className="mach-badge">Oficina própria</div>
          </div>
          <div className="mach-feature-body">
            <h3>Mais de 22 anos fabricando peças que a indústria não pode esperar.</h3>
            <p>Atendemos urgências de manutenção, fabricação seriada e protótipos. Trabalhamos com aço carbono, inox, alumínio, latão, bronze e polímeros técnicos.</p>
            <ul className="mach-list">
              <li><strong>Precisão</strong> · Tolerâncias conforme desenho técnico</li>
              <li><strong>Materiais</strong> · Aço, inox, alumínio, latão, polímeros</li>
              <li><strong>Capacidade</strong> · Peças unitárias e séries pequenas</li>
              <li><strong>Prazo</strong> · Urgências de manutenção atendidas</li>
            </ul>
            <a className="btn-wa" href={`https://wa.me/5565984032125?text=${waMsg}`} target="_blank" rel="noreferrer">
              <WaIcon style={{width:16,height:16}}/> Enviar desenho pelo WhatsApp
            </a>
          </div>
        </div>

        <div className="mach-services">
          {MACHINING_SERVICES.map((s, i) => (
            <div className="mach-card reveal" key={i}>
              <div className="mach-photo">
                <img src={s.img} alt={s.t} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
                <div className="mach-badge sm">{s.badge}</div>
              </div>
              <div className="mach-card-body">
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ——— Products gallery ——————————————————————————————————————
const PRODUCTS_VISUAL = [
  { img: 'assets/produtos/atuadores.png',         t: 'Válvulas e atuadores',         d: 'Borboleta, esfera, pneumáticas e hidráulicas.' },
  { img: 'assets/produtos/hidraulica-bloco.png',  t: 'Linha hidráulica',             d: 'Blocos, válvulas e componentes para sistemas hidráulicos.' },
  { img: 'assets/produtos/tubo-ppr.png',          t: 'Tubos e conexões PPR',         d: 'Rede de ar comprimido em PPR e linhas TN6 / TN10.' },
  { img: 'assets/produtos/conexoes.png',          t: 'Conexões inox',                d: 'Conexões pneumáticas em aço inox 316 — alta durabilidade.' },
  { img: 'assets/produtos/manometro.png',         t: 'Manômetros',                   d: 'Medição precisa de pressão em diversas faixas.' },
  { img: 'assets/produtos/termometro.png',        t: 'Termômetros analógicos',       d: 'Indicação de temperatura para processos industriais.' },
  { img: 'assets/produtos/pt100.png',             t: 'Sensores PT100',               d: 'Sensores de temperatura de alta precisão.' },
  { img: 'assets/produtos/novus-n1100.png',       t: 'Controladores Novus N1100',    d: 'Controladores de processo digitais.' },
  { img: 'assets/produtos/novus-n1200.png',       t: 'Controladores Novus N1200',    d: 'Controlador universal com display duplo.' },
  { img: 'assets/produtos/novus-n322.png',        t: 'Indicadores Novus N322',       d: 'Indicadores digitais para sala de controle.' },
  { img: 'assets/produtos/novus-n400.png',        t: 'Totalizadores Novus NC400',    d: 'Totalizadores e cronômetros industriais.' },
  { img: 'assets/produtos/hidraulica-valvula.png',t: 'Válvulas direcionais',         d: 'Direcionais para sistemas hidráulicos industriais.' },
  { img: 'assets/produtos/hidraulica-02.png',     t: 'Válvulas solenoide',           d: 'Acionamento elétrico para hidráulica e pneumática.' },
  { img: 'assets/produtos/hidraulica-07.png',     t: 'Válvulas cartucho',            d: 'Cartuchos hidráulicos de alta pressão.' },
  { img: 'assets/produtos/hidraulica-08.png',     t: 'Válvulas modulares',           d: 'Blocos sanduíche para circuitos hidráulicos.' },
  { img: 'assets/produtos/tubos-rolo.png',        t: 'Tubos PU / Nylon',             d: 'Para ar comprimido e fluidos em pneumática.' },
  { img: 'assets/produtos/conexao-03.png',        t: 'Conexões PPR fêmea',           d: 'Adaptadores roscáveis para rede PPR.' },
  { img: 'assets/produtos/conexao-06.png',        t: 'Joelhos PPR',                  d: 'Curvas e joelhos para mudança de direção.' },
  { img: 'assets/produtos/conexao-07.png',        t: 'Tês PPR',                      d: 'Tês para derivação em rede de ar comprimido.' },
  { img: 'assets/produtos/conexao-09.png',        t: 'Luvas PPR',                    d: 'Luvas de emenda para tubos PPR.' },
  { img: 'assets/produtos/conexao-azul.png',      t: 'Conexões mistas',              d: 'Conexões de adaptação rosca-encaixe.' },
  { img: 'assets/produtos/ensacadeira-lince.jpg', t: 'Ensacadeiras',                 d: 'Equipamentos para pesagem e ensacamento de 5 a 60 kg.' },
  { img: 'assets/produtos/compressor-kaeser.jpg', t: 'Compressores',                 d: 'Compressores industriais de alta performance.' },
  { img: 'assets/produtos/sensor-temperatura.png',t: 'Termorresistências',           d: 'Sensores tipo PT100 com cabeçote para indústria.' },
];
function ProductsGallery() {
  const waMsg = encodeURIComponent('Olá! Gostaria de mais informações sobre os produtos.');
  // Show only 8 products as a preview on the home page — full catalog is on Catalogo.html
  const preview = PRODUCTS_VISUAL.slice(0, 8);
  return (
    <section className="section alt" id="produtos">
      <div className="section-head">
        <div>
          <div className="section-kicker"><span className="section-num">— 03 / Produtos</span></div>
          <h2 className="section-title">Linha completa para sua indústria.</h2>
        </div>
        <p style={{maxWidth:380, color:'var(--fg-dim)', fontSize:15}}>
          Pneumática, hidráulica, instrumentação e equipamentos das melhores marcas. Veja alguns destaques abaixo — o catálogo completo está em outra página.
        </p>
      </div>
      <div className="prod-grid">
        {preview.map((p, i) => (
          <a key={i} href={`https://wa.me/5565984032125?text=${waMsg}`} target="_blank" rel="noreferrer" className="prod-card reveal">
            <div className="prod-img-wrap">
              <img src={p.img} alt={p.t} loading="lazy"/>
            </div>
            <div className="prod-body">
              <div className="prod-title">{p.t}</div>
              <div className="prod-desc">{p.d}</div>
              <div className="prod-cta">
                <WaIcon style={{width:14,height:14}}/> Consultar no WhatsApp
              </div>
            </div>
          </a>
        ))}
      </div>
      <div className="cat-bottom-cta" style={{marginTop:48}}>
        <div>
          <div className="mono" style={{marginBottom:8}}>CATÁLOGO COMPLETO</div>
          <h3 style={{fontFamily:'var(--display)', fontSize:'clamp(22px, 2.5vw, 32px)', fontWeight:600, letterSpacing:'-0.02em', margin:0}}>
            Veja todos os produtos com busca e filtro por categoria.
          </h3>
        </div>
        <a href="Catalogo.html" className="btn-primary">Ver catálogo completo <ArrowRight /></a>
      </div>
    </section>
  );
}

// ——— Supplier Brands ————————————————————————————————————————
const SUPPLIERS = [
  { src: 'assets/logos/perfor.png',     name: 'Perfor' },
  { src: 'assets/logos/kaeser.svg',     name: 'Kaeser Compressores' },
  { src: 'assets/logos/topfusion.png',  name: 'TopFusion Tubos e Conexões' },
  { src: 'assets/logos/balluff.webp',   name: 'Balluff' },
  { src: 'assets/logos/novus.svg',      name: 'Novus Automation' },
  { src: 'assets/logos/anysort.svg',    name: 'Anysort' },
];
function SupplierBrands() {
  return (
    <section style={{
      background: 'var(--accent)',
      padding: '72px var(--pad-x)',
    }}>
      <div style={{maxWidth: 'var(--max-w)', margin: '0 auto'}}>
        <p style={{
          textAlign: 'center',
          color: 'rgba(255,255,255,0.45)',
          fontSize: 11,
          fontWeight: 600,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          marginBottom: 16,
        }}>Marcas parceiras</p>
        <h2 style={{
          textAlign: 'center',
          color: '#fff',
          fontFamily: 'var(--display)',
          fontSize: 'clamp(22px, 3vw, 36px)',
          fontWeight: 700,
          letterSpacing: '-0.02em',
          margin: '0 auto 52px',
          maxWidth: 560,
          lineHeight: 1.25,
        }}>As principais marcas do mercado estão aqui!</h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: '32px 48px',
          alignItems: 'center',
          justifyItems: 'center',
          maxWidth: 860,
          margin: '0 auto',
        }}>
          {SUPPLIERS.map(s => (
            <div key={s.name} style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '20px 28px',
              width: '100%',
              borderRadius: 10,
              border: '1px solid rgba(255,255,255,0.07)',
              transition: 'border-color .2s, background .2s',
            }}
            onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,0.2)';e.currentTarget.style.background='rgba(255,255,255,0.04)';}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,0.07)';e.currentTarget.style.background='transparent';}}
            >
              <img
                src={s.src}
                alt={s.name}
                loading="lazy"
                style={{
                  maxWidth: 180,
                  maxHeight: 68,
                  width: '100%',
                  objectFit: 'contain',
                  filter: 'brightness(0) invert(1)',
                  opacity: 0.85,
                  transition: 'opacity .2s',
                }}
                onMouseEnter={e=>e.currentTarget.style.opacity='1'}
                onMouseLeave={e=>e.currentTarget.style.opacity='0.85'}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ——— Sectors / Markets ——————————————————————————————————————
const SECTORS = [
  { icon: <SecBottle/>, t:'Usinas de Açúcar e Álcool' },
  { icon: <SecPower/>,  t:'Usinas Hidroelétricas' },
  { icon: <SecBottle/>, t:'Indústria de Bebidas' },
  { icon: <SecCotton/>, t:'Algodoeiras' },
  { icon: <SecMeat/>,   t:'Frigoríficos' },
  { icon: <SecFactory/>,t:'Indústria de Transformação' },
  { icon: <SecHosp/>,   t:'Hospitais' },
  { icon: <SecPlastic/>,t:'Indústria Plástica' },
  { icon: <SecOil/>,    t:'Biodiesel' },
  { icon: <SecMetal/>,  t:'Metalúrgicas' },
];
function Sectors() {
  return (
    <section className="section" id="mercados">
      <div className="section-head">
        <div>
          <div className="section-kicker"><span className="section-num">— 04 / Mercado de atuação</span></div>
          <h2 className="section-title">Atendemos indústrias que movem a economia.</h2>
        </div>
        <p style={{maxWidth:380, color:'var(--fg-dim)', fontSize:15}}>
          De pequenas operações a gigantes do setor — nossa expertise se adapta à realidade de cada planta industrial.
        </p>
      </div>
      <div className="sectors">
        {SECTORS.map((s, i) => (
          <div className="sector reveal" key={i}>
            <div className="sector-icon">{s.icon}</div>
            <div className="sector-name">{s.t}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ——— Differentials / About ——————————————————————————————————
function About() {
  return (
    <section className="section alt" id="sobre">
      <div className="diff-grid">
        <div>
          <div className="section-kicker"><span className="section-num">— 05 / Quem somos</span></div>
          <h2 className="section-title">Mais de 22 anos entregando confiança e qualidade.</h2>
          <p style={{marginTop:24, color:'var(--fg-dim)', fontSize:16, maxWidth:560}}>
            Somos especialistas em soluções para automação e processos industriais. Atendemos empresas líderes no mercado, oferecendo produtos e equipamentos de alta performance e suporte técnico diferenciado.
          </p>
          <ul className="diff-list">
            <li>
              <span className="diff-num">01</span>
              <div>
                <h3 className="diff-t">Experiência comprovada</h3>
                <p className="diff-d">Mais de duas décadas projetando e mantendo sistemas em diferentes setores industriais.</p>
              </div>
            </li>
            <li>
              <span className="diff-num">02</span>
              <div>
                <h3 className="diff-t">Atendimento técnico humano</h3>
                <p className="diff-d">Equipe própria com técnicos que entendem o seu processo.</p>
              </div>
            </li>
            <li>
              <span className="diff-num">03</span>
              <div>
                <h3 className="diff-t">Produtos originais com garantia</h3>
                <p className="diff-d">Trabalhamos só com marcas líderes. Nota fiscal e garantia de fábrica em tudo.</p>
              </div>
            </li>
            <li>
              <span className="diff-num">04</span>
              <div>
                <h3 className="diff-t">Soluções sob medida</h3>
                <p className="diff-d">Projeto, adequação e fabricação de peças específicas para o seu equipamento.</p>
              </div>
            </li>
          </ul>
        </div>

        <div>
          <div className="about-video">
            <iframe
              src="https://www.youtube.com/embed/mhxfPV1nu-E?rel=0"
              title="Mecatrônica MT — Apresentação"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          </div>
          <div style={{marginTop:24}}>
            <div className="about-stat"><strong>+22</strong><span>Anos de operação</span></div>
            <div className="about-stat"><strong>+10</strong><span>Setores atendidos</span></div>
            <div className="about-stat"><strong>+1.000</strong><span>Clientes atendidos</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ——— Clients (logos) ————————————————————————————
const CLIENTS = [
  { src: 'assets/clientes/coca-cola.png',     name: 'Coca-Cola' },
  { src: 'assets/clientes/ambev.png',         name: 'Ambev' },
  { src: 'assets/clientes/maggi.png',         name: 'Maggi' },
  { src: 'assets/clientes/votorantim.png',    name: 'Votorantim Cimentos' },
  { src: 'assets/clientes/bom-jesus.png',     name: 'Bom Jesus Sementes' },
  { src: 'assets/clientes/petrovina.webp',    name: 'Petrovina Sementes' },
  { src: 'assets/clientes/boa-esperanca.png', name: 'Boa Esperança Agropecuária' },
  { src: 'assets/clientes/tio-lino.png',      name: 'Tio Lino' },
];
function Brands() {
  return (
    <section className="section" style={{paddingBottom:0}}>
      <div className="section-head">
        <div>
          <div className="section-kicker"><span className="section-num">— 06 / Quem confia em nós</span></div>
          <h2 className="section-title">Lideramos o mercado atendendo empresas que movem a economia.</h2>
        </div>
        <p style={{maxWidth:380, color:'var(--fg-dim)', fontSize:15}}>
          De indústrias de pequeno porte a gigantes do mercado, nossos produtos e serviços impulsionam operações em todo o Brasil.
        </p>
      </div>
      <div className="clients" style={{marginTop:0}}>
        {CLIENTS.map(c => (
          <div className="client" key={c.name} title={c.name}>
            <img src={c.src} alt={c.name} loading="lazy"/>
          </div>
        ))}
      </div>
    </section>
  );
}

// ——— CTA / Contact ————————————————————————————————————
function CTA() {
  const waMsg = encodeURIComponent('Olá! Gostaria de conversar sobre uma solução para minha indústria.');
  const waLink = `https://wa.me/5565984032125?text=${waMsg}`;
  return (
    <section className="cta" id="contato">
      <div className="cta-inner">
        <div>
          <span className="cta-eyebrow">— 07 / Fale com a gente</span>
          <h2>
            Conversa rápida, resposta <span className="hl">na hora</span>.
          </h2>
          <p style={{marginTop:24, fontSize:17, maxWidth:560, opacity:0.92}}>
            Mande sua dúvida, peça um orçamento ou tire qualquer informação técnica direto no nosso WhatsApp. Nossa equipe responde de segunda a sexta, das 8h às 18h.
          </p>
          <div className="cta-meta">
            <div className="row">
              <WaIcon style={{width:18,height:18}}/>
              <div><div style={{opacity:0.7,fontSize:12}}>WhatsApp comercial</div><strong>(65) 98403-2125</strong></div>
            </div>
            <div className="row">
              <PhoneIcon style={{width:18,height:18,opacity:0.85}}/>
              <div><div style={{opacity:0.7,fontSize:12}}>Telefone</div><strong>(65) 3682-0104</strong></div>
            </div>
            <div className="row">
              <ClockIcon style={{width:18,height:18,opacity:0.85}}/>
              <div><div style={{opacity:0.7,fontSize:12}}>Horário</div><strong>Seg–Sex · 8h–18h</strong></div>
            </div>
            <div className="row">
              <MapIcon style={{width:18,height:18,opacity:0.85}}/>
              <div><div style={{opacity:0.7,fontSize:12}}>Atendimento</div><strong>Cuiabá · MT · Brasil</strong></div>
            </div>
          </div>
        </div>

        <div className="cta-form-card wa-card">
          <div className="wa-card-head">
            <div className="wa-avatar"><WaIcon style={{width:28,height:28}}/></div>
            <div>
              <div className="wa-name">Mecatrônica MT</div>
              <div className="wa-status"><span className="pulse-dot" style={{background:'#25D366', boxShadow:'0 0 0 0 #25D366'}}></span> Online agora · responde em minutos</div>
            </div>
          </div>
          <div className="wa-bubble">
            Olá! 👋 Como podemos ajudar hoje?<br/><br/>
            <strong>Aperte abaixo</strong> e fale direto com um especialista — sem formulário, sem espera.
          </div>
          <a href={waLink} target="_blank" rel="noreferrer" className="cta-wa-btn big">
            <WaIcon style={{width:20,height:20}}/> Iniciar conversa no WhatsApp
          </a>
          <div style={{textAlign:'center', fontSize:12, color:'var(--fg-mute)', marginTop:14}}>
            Atendimento humano · Sem compromisso · Resposta em até 1h útil
          </div>
        </div>
      </div>
    </section>
  );
}

// ——— Footer ——————————————————————————————————————————————
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-col footer-brand">
          <a href="#top" className="logo">
            <img src="assets/logo-mecatronica.png" alt="Mecatrônica MT" className="logo-img"/>
            <span className="logo-stack">
              <span>Mecatrônica MT</span>
              <span className="logo-sub">Pneumática · Hidráulica · Automação</span>
            </span>
          </a>
          <p>Soluções industriais em mecatrônica, pneumática e hidráulica. Mais de 22 anos transformando processos industriais.</p>
          <a href="#contato" className="btn-primary" style={{padding:'12px 18px'}}>Fale com especialista <ArrowRight/></a>
        </div>
        <div className="footer-col">
          <h4>Serviços</h4>
          <a href="#servicos">Desenvolvimento de projetos</a>
          <a href="#servicos">Comércio de peças</a>
          <a href="#servicos">Adequação de projetos</a>
          <a href="#servicos">Tornearia / Fresagem / Usinagem</a>
          <a href="#servicos">Manutenção industrial</a>
        </div>
        <div className="footer-col">
          <h4>Empresa</h4>
          <a href="#sobre">Quem somos</a>
          <a href="#mercados">Mercado de atuação</a>
          <a href="#">Política de privacidade</a>
          <a href="#">Termos de uso</a>
        </div>
        <div className="footer-col">
          <h4>Contato</h4>
          <a href="tel:+556536820104">(65) 3682-0104</a>
          <a href="https://wa.me/5565984032125">WhatsApp (65) 98403-2125</a>
          <a href="#">contato@mecatronicamt.com.br</a>
          <a href="#">Cuiabá · MT · Brasil</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Mecatrônica MT · CNPJ 62.888.522/0001-29</span>
        <span>Todos os direitos reservados</span>
      </div>
    </footer>
  );
}

// ——— Tweaks ————————————————————————————————————————————————
function MyTweaks({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Tema">
        <TweakRadio label="Modo" value={t.theme}
          options={[{value:'light', label:'Claro'},{value:'dark', label:'Escuro'}]}
          onChange={(v)=>setTweak('theme', v)}/>
      </TweakSection>
      <TweakSection label="Cor da marca">
        <TweakColor label="Verde" value={t.accent}
          options={['#009030','#00731F','#0E7A2E','#1F8A5B','#0066CC','#C8102E','#FF6B1F']}
          onChange={(v)=>setTweak('accent', v)}/>
      </TweakSection>
      <TweakSection label="Tipografia">
        <TweakSelect label="Fonte display" value={t.displayFont}
          options={['Space Grotesk','Inter','Manrope','Archivo']}
          onChange={(v)=>setTweak('displayFont', v)}/>
      </TweakSection>
      <TweakSection label="Layout">
        <TweakRadio label="Densidade" value={t.density}
          options={[{value:'comfortable', label:'Espaçoso'},{value:'dense', label:'Compacto'}]}
          onChange={(v)=>setTweak('density', v)}/>
        <TweakSelect label="Hero" value={t.heroVariant}
          options={[
            {value:'split', label:'Padrão (com visual)'},
            {value:'bold', label:'Tipográfico forte'},
            {value:'centered', label:'Centralizado'},
          ]}
          onChange={(v)=>setTweak('heroVariant', v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

// ——— App ————————————————————————————————————————————————
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(t); }, [t]);
  useReveal();

  return (
    <>
      <TopBar />
      <Nav />
      <Hero variant={t.heroVariant} />
      <Services />
      <Machining />
      <ProductsGallery />
      <SupplierBrands />
      <Sectors />
      <About />
      <Brands />
      <CTA />
      <Footer />
      <MyTweaks t={t} setTweak={setTweak} />
    </>
  );
}

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