/* ============ CHER — UI components ============ */
const { useState, useEffect:uiEffect, useRef:uiRef } = React;

const WHATS = "https://wa.me/5543996111669";

/* ---- icons ---- */
const Icon = ({d,paths,vb="0 0 24 24"}) => React.createElement('svg',{viewBox:vb},
  paths ? paths.map((p,i)=>React.createElement('path',{key:i,d:p})) : React.createElement('path',{d}));
const icons = {
  home: ["M3 11l9-7 9 7","M5 9.5V20h14V9.5","M10 20v-5h4v5"],
  app: ["M8 3h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z","M11 18h2"],
  mail: ["M3 6h18v12H3z","M3 7l9 6 9-6"],
  spark:["M12 3v4M12 17v4M3 12h4M17 12h4","M7 7l2.5 2.5M14.5 14.5L17 17M17 7l-2.5 2.5M9.5 14.5L7 17"],
  crown:["M4 8l4 4 4-6 4 6 4-4-1.5 10h-13z"],
  user:["M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z","M4 21c0-4 3.6-6 8-6s8 2 8 6"]
};

/* ================= ANIMATED CTA BUTTON ================= */
function AButton({children, href, onClick, className="", target, rel}){
  const inner = React.createElement(React.Fragment, null,
    React.createElement('span',{className:'b-glow','aria-hidden':true}, React.createElement('i'), React.createElement('i')),
    React.createElement('span',{className:'b-stars','aria-hidden':true}),
    React.createElement('span',{className:'lbl'}, children)
  );
  const props = { className:`btn btn-gold ${className}`, onClick };
  return href ? React.createElement('a',{...props,href,target,rel: rel||(target==='_blank'?'noopener':undefined)}, inner)
              : React.createElement('button',{...props,type:'button'}, inner);
}
function GhostButton({children, href, className=""}){
  return React.createElement('a',{href,className:`btn btn-ghost ${className}`}, children);
}

/* ================= GRADIENT NAV ================= */
function GradientNav({active="inicio"}){
  const [scrolled,setScrolled] = useState(false);
  const [open,setOpen] = useState(false);
  uiEffect(()=>{
    const onScroll = ()=>setScrolled(window.scrollY>40);
    onScroll(); window.addEventListener('scroll',onScroll,{passive:true});
    return ()=>window.removeEventListener('scroll',onScroll);
  },[]);
  uiEffect(()=>{ document.body.style.overflow = open ? 'hidden':''; },[open]);

  const links = [
    {id:'inicio', label:'Início', href:'index.html', ic:icons.home},
    {id:'app', label:'Sobre o aplicativo', href:'aplicativo.html', ic:icons.app},
    {id:'contato', label:'Contato', href:'contato.html', ic:icons.mail},
  ];
  return React.createElement('header',{className:`site-header ${scrolled?'scrolled':''}`},
    React.createElement('a',{href:'index.html','aria-label':'CHER — início'},
      React.createElement('img',{className:'brand-logo',src:'assets/logo-cher.png',alt:'CHER Consultoria de Imagem Corporativa'})),
    React.createElement('button',{className:'menu-toggle','aria-label':'Menu','aria-expanded':open,onClick:()=>setOpen(o=>!o)},
      React.createElement('span'),React.createElement('span'),React.createElement('span')),
    React.createElement('nav',{className:`nav ${open?'open':''}`,'aria-label':'Navegação principal'},
      React.createElement('ul',{className:'gmenu'},
        links.map(l=>React.createElement('li',{key:l.id},
          React.createElement('a',{href:l.href,className:active===l.id?'active':'',onClick:()=>setOpen(false)},
            React.createElement('span',{className:'glow','aria-hidden':true}),
            React.createElement('span',{className:'blur','aria-hidden':true}),
            React.createElement('span',{className:'gm-ic'}, React.createElement(Icon,{paths:l.ic})),
            React.createElement('span',null,l.label)
          )))
      ),
      React.createElement(AButton,{href:WHATS,target:'_blank'},'Agendar conversa')
    )
  );
}

/* ================= LOGOLOOP (clothing brands) ================= */
function LogoLoop({items, speed=55}){
  const trackRef = uiRef(null);
  const offset = uiRef(0);
  uiEffect(()=>{
    const track = trackRef.current; if(!track) return;
    if(prefersReduced()) return;
    let raf, last;
    const seqW = track.scrollWidth/2;
    const step = (t)=>{
      if(last==null) last=t;
      const dt=(t-last)/1000; last=t;
      offset.current=(offset.current + speed*dt) % seqW;
      track.style.transform=`translate3d(${-offset.current}px,0,0)`;
      raf=requestAnimationFrame(step);
    };
    raf=requestAnimationFrame(step);
    return ()=>cancelAnimationFrame(raf);
  },[items,speed]);
  const all=[...items,...items];
  return React.createElement('div',{className:'logoloop',role:'marquee','aria-label':'Marcas de referência'},
    React.createElement('div',{className:'logoloop__track',ref:trackRef},
      all.map((b,i)=>React.createElement('div',{className:'logoloop__item',key:i,'aria-hidden':i>=items.length},
        React.createElement('span',null,b)))));
}

/* ================= PALETTE STACK (ScrollStack-style) ================= */
function PaletteStack({colors}){
  const wrapRef = uiRef(null);
  const baseTop = 120, gap = 18;
  uiEffect(()=>{
    const wrap = wrapRef.current; if(!wrap) return;
    const cards = [...wrap.querySelectorAll('.ps-card')];
    let raf;
    const update = ()=>{
      let topIndex = 0;
      cards.forEach((c,i)=>{ const pin = baseTop + i*gap; if(c.getBoundingClientRect().top <= pin+1) topIndex = i; });
      cards.forEach((c,i)=>{
        const depth = Math.max(0, topIndex - i);
        const scale = Math.max(0.82, 1 - depth*0.045);
        c.style.transform = `scale(${scale})`;
        c.style.filter = depth>0 ? `brightness(${Math.max(0.6,1-depth*0.07)})` : 'none';
      });
      raf=null;
    };
    const onScroll = ()=>{ if(!raf) raf=requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll',onScroll,{passive:true});
    window.addEventListener('resize',onScroll);
    return ()=>{ window.removeEventListener('scroll',onScroll); window.removeEventListener('resize',onScroll); };
  },[colors]);
  return React.createElement('div',{className:'palette-stack',ref:wrapRef},
    colors.map((c,i)=>React.createElement('div',{
        key:c.hex,className:'ps-card',
        style:{ top:`${baseTop+i*gap}px`, background:c.hex, color:c.fg, marginBottom: i<colors.length-1 ? '42px':'0' }
      },
      React.createElement('div',{className:'ps-meta'},
        React.createElement('div',null,
          React.createElement('div',{className:'ps-name'}, c.name),
          React.createElement('div',{className:'ps-sub'}, c.note)),
        React.createElement('div',{style:{textAlign:'right'}},
          React.createElement('div',{className:'ps-hex'}, c.hex),
          React.createElement('div',{className:'ps-idx'}, String(i+1).padStart(2,'0')+' / '+String(colors.length).padStart(2,'0')))
      )
    ))
  );
}

/* ================= FEATURE 108 (serviços) ================= */
function Feature108({tabs}){
  const [active,setActive] = useState(tabs[0].value);
  const cur = tabs.find(t=>t.value===active) || tabs[0];
  return React.createElement('div',{className:'feature'},
    React.createElement('div',{className:'feat-tablist',role:'tablist'},
      tabs.map(t=>React.createElement('button',{
          key:t.value, role:'tab','aria-selected':active===t.value, className:'feat-tab',
          onClick:()=>setActive(t.value)
        },
        React.createElement(Icon,{paths:t.icon}),
        React.createElement('span',null,t.label)))
    ),
    React.createElement('div',{className:'feat-panel',role:'tabpanel',key:cur.value},
      React.createElement('div',{className:'feat-copy reveal in'},
        React.createElement('span',{className:'badge'}, cur.content.badge),
        React.createElement('h3',null, cur.content.title),
        React.createElement('p',null, cur.content.description),
        cur.content.items && React.createElement('ul',null, cur.content.items.map((it,i)=>React.createElement('li',{key:i},it))),
        React.createElement(GhostButton,{href:cur.content.href||'contato.html'}, cur.content.buttonText)
      ),
      React.createElement('div',{className:'feat-visual'},
        React.createElement('img',{src:cur.content.imageSrc,alt:cur.content.imageAlt||cur.content.title,loading:'lazy'}))
    )
  );
}

/* ================= FOOTER ================= */
function Footer(){
  return React.createElement('footer',{className:'footer','data-screen-label':'Rodapé'},
    React.createElement('div',{className:'wrap'},
      React.createElement('div',{className:'footer-top'},
        React.createElement('div',null,
          React.createElement('img',{className:'flogo',src:'assets/logo-cher.png',alt:'CHER'}),
          React.createElement('p',null,'Consultoria de imagem corporativa. Posicionamento, presença e autoridade construídos com estratégia.')),
        React.createElement('div',null,
          React.createElement('h4',null,'Navegação'),
          React.createElement('ul',null,
            React.createElement('li',null,React.createElement('a',{href:'index.html'},'Início')),
            React.createElement('li',null,React.createElement('a',{href:'aplicativo.html'},'Sobre o aplicativo')),
            React.createElement('li',null,React.createElement('a',{href:'contato.html'},'Contato')))),
        React.createElement('div',null,
          React.createElement('h4',null,'Contato'),
          React.createElement('ul',null,
            React.createElement('li',null,React.createElement('a',{href:'contato.html'},'Agendar conversa')),
            React.createElement('li',null,React.createElement('a',{href:WHATS,target:'_blank',rel:'noopener'},'WhatsApp · (43) 99611-1669')),
            React.createElement('li',null,React.createElement('a',{href:'https://instagram.com/',target:'_blank',rel:'noopener'},'Instagram'))))
      ),
      React.createElement('div',{className:'footer-bottom'},
        React.createElement('span',{className:'kw'},'Posicionamento · Presença · Autoridade · Coerência · Resultados'),
        React.createElement('div',{className:'foot-legal'},
          React.createElement('a',{href:'privacidade.html'},'Política de Privacidade'),
          React.createElement('span',{className:'sep'},'·'),
          React.createElement('a',{href:'termos.html'},'Termos de Uso')),
        React.createElement('span',null,'© ',React.createElement('span',{'data-year':true},'2026'),' CHER Consultoria de Imagem Corporativa'))
    )
  );
}

Object.assign(window,{ AButton, GhostButton, GradientNav, LogoLoop, PaletteStack, Feature108, Footer, WHATS, icons, Icon });