// components.jsx — shared chrome: Nav (mega-menu), Footer, common UI

const { useState, useEffect, useRef } = React;

// ── Route context (read by all components via window.__route) ──
function useRoute() {
  const [route, setRoute] = useState(window.__route || { path: '/', params: {} });
  useEffect(() => {
    const h = (e) => setRoute(e.detail);
    window.addEventListener('route:change', h);
    return () => window.removeEventListener('route:change', h);
  }, []);
  return route;
}

function navigate(path) {
  window.location.hash = path;
}

// ── Smart link ──
function L({ to, className, children, ...rest }) {
  return (
    <a href={'#' + to} className={className} onClick={(e)=>{ /* hash router handles */ }} {...rest}>
      {children}
    </a>
  );
}

// ── i18n context ──
function useT() {
  const [lang, setLang] = useState(window.__lang || 'pt-BR');
  useEffect(() => {
    const h = (e) => setLang(e.detail);
    window.addEventListener('lang:change', h);
    return () => window.removeEventListener('lang:change', h);
  }, []);
  return { t: makeT(lang), lang, setLang: (l) => window.dispatchEvent(new CustomEvent('lang:set', { detail: l })) };
}

// ── Top Nav with mega-menu ──
function Nav() {
  const { t, lang, setLang } = useT();
  const [open, setOpen] = useState(null);   // 'product' | 'solutions' | null
  const [mobile, setMobile] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
  const closeAll = () => { setOpen(null); setLangOpen(false); };
  const route = useRoute();

  useEffect(() => { closeAll(); setMobile(false); }, [route.path]);

  return (
    <>
    <header className="nav">
      <div className="container nav-inner">
        <a href="#/" className="brand" aria-label="Zoee home">
          <ZoeeMark /> <span>Zoee</span>
        </a>

        <nav className="nav-links" onMouseLeave={()=>setOpen(null)}>
          <button className={'nav-link nav-trigger ' + (open==='product'?'open':'')} onMouseEnter={()=>setOpen('product')} onClick={()=>setOpen(open==='product'?null:'product')}>
            {t('nav.product')} <span className="caret-d">▾</span>
          </button>
          <button className={'nav-link nav-trigger ' + (open==='solutions'?'open':'')} onMouseEnter={()=>setOpen('solutions')} onClick={()=>setOpen(open==='solutions'?null:'solutions')}>
            {t('nav.solutions')} <span className="caret-d">▾</span>
          </button>
          <a href="#/precos" className="nav-link" onMouseEnter={()=>setOpen(null)}>{t('nav.pricing')}</a>
          <a href="#/clientes" className="nav-link" onMouseEnter={()=>setOpen(null)}>{t('nav.customers')}</a>
          <a href="#/cowork" className="nav-link" onMouseEnter={()=>setOpen(null)}>{t('nav.cowork')}</a>
          <a href="#/blog" className="nav-link" onMouseEnter={()=>setOpen(null)}>{t('nav.blog')}</a>
          <a href="#/docs" className="nav-link" onMouseEnter={()=>setOpen(null)}>{t('nav.docs')}</a>
          <a href="#/tutores" className="nav-link nav-link-owners" onMouseEnter={()=>setOpen(null)}>{Icons.pawprint(15)} {t('nav.forOwners')}</a>

          {/* Mega menu — Product */}
          {open==='product' && (
            <div className="mega" onMouseEnter={()=>setOpen('product')} onMouseLeave={()=>setOpen(null)}>
              <div className="mega-inner">
                <div className="mega-l">
                  <div className="mega-h">{t('nav.megaProduct') || 'Os 8 módulos da Zoee'}</div>
                  <div className="mega-grid">
                    {MODULES.map(m => (
                      <a key={m.id} href={'#/modulo/'+m.id} className={'mega-card '+m.cls}>
                        <div className="module-icon" style={{ width: 36, height: 36, marginBottom: 0, borderRadius: 10 }}>{Icons[m.icon](18)}</div>
                        <div>
                          <div className="mc-t">{t('mod.'+m.id)}</div>
                          <div className="mc-d">{t('mod.'+m.id+'.short')}</div>
                        </div>
                      </a>
                    ))}
                  </div>
                </div>
                <div className="mega-r">
                  <div className="mega-h">Em destaque</div>
                  <a href="#/cowork" className="mega-feature">
                    <div className="mega-feat-bg"></div>
                    <div className="mega-feat-eyebrow">Diferencial AI-first</div>
                    <div className="mega-feat-t">Cowork — IA conversacional nativa</div>
                    <div className="mega-feat-d">Conheça o espaço que une chat, agentes e ferramentas customizáveis.</div>
                    <span className="mega-feat-cta">Ver Cowork <Icons.arrow /></span>
                  </a>
                  <a href="#/recursos" className="mega-link">Ver todos os recursos <Icons.arrow /></a>
                  <a href="#/changelog" className="mega-link">Novidades · Changelog <Icons.arrow /></a>
                </div>
              </div>
            </div>
          )}

          {/* Mega menu — Solutions */}
          {open==='solutions' && (
            <div className="mega mega-narrow" onMouseEnter={()=>setOpen('solutions')} onMouseLeave={()=>setOpen(null)}>
              <div className="mega-inner mega-personas">
                <div>
                  <div className="mega-h">{t('nav.megaSolutions') || 'Soluções por perfil'}</div>
                  <div className="mega-personas-grid">
                    {SOLUTIONS.map(p => (
                      <a key={p.id} href={'#/solucoes/'+p.id} className={'mega-persona tone-'+p.tone}>
                        <div className="mega-persona-ic">{Icons[p.icon](20)}</div>
                        <div className="mc-t">{p.headline}</div>
                        <div className="mc-d">{p.bullet[0]}</div>
                      </a>
                    ))}
                  </div>
                </div>
                <div>
                  <div className="mega-h">Por caso</div>
                  <a href="#/clientes" className="mega-link">Casos de uso reais <Icons.arrow /></a>
                  <a href="#/blog" className="mega-link">Conteúdo no blog <Icons.arrow /></a>
                  <a href="#/contato" className="mega-link">Falar com vendas <Icons.arrow /></a>
                </div>
              </div>
            </div>
          )}
        </nav>

        <div className="nav-cta">
          <div className="lang-wrap">
            <button className="lang-pill" onClick={()=>setLangOpen(v=>!v)}>
              <span>{LANG_META.find(l=>l.code===lang)?.flag}</span>
              {LANG_META.find(l=>l.code===lang)?.short}
              <span className="caret-d">▾</span>
            </button>
            {langOpen && (
              <div className="lang-dd">
                {LANG_META.map(l => (
                  <button key={l.code} className={'lang-item ' + (l.code===lang?'active':'')} onClick={()=>{setLang(l.code); setLangOpen(false);}}>
                    <span>{l.flag}</span> {l.label}
                  </button>
                ))}
              </div>
            )}
          </div>
          <a href={URLS.login} className="btn btn-ghost">{t('nav.login')}</a>
          <a href={URLS.signup} className="btn btn-primary">{t('nav.signup')}</a>
        </div>

        <button className="nav-burger" onClick={()=>setMobile(v=>!v)} aria-label="Menu">
          <span></span>
        </button>
      </div>
    </header>

    {mobile && (
      <div className="nav-mobile open">
        <a href="#/recursos" onClick={()=>setMobile(false)}>{t('nav.product')}</a>
        <a href="#/solucoes" onClick={()=>setMobile(false)}>{t('nav.solutions')}</a>
        <a href="#/precos" onClick={()=>setMobile(false)}>{t('nav.pricing')}</a>
        <a href="#/clientes" onClick={()=>setMobile(false)}>{t('nav.customers')}</a>
        <a href="#/cowork" onClick={()=>setMobile(false)}>{t('nav.cowork')}</a>
        <a href="#/blog" onClick={()=>setMobile(false)}>{t('nav.blog')}</a>
        <a href="#/docs" onClick={()=>setMobile(false)}>{t('nav.docs')}</a>
        <a href="#/tutores" onClick={()=>setMobile(false)}>{t('nav.forOwners')}</a>
        <a href="#/contato" onClick={()=>setMobile(false)}>{t('nav.contact')}</a>
        <div className="nav-mobile-ctas">
          <a href={URLS.login} className="btn btn-outline btn-block">{t('nav.login')}</a>
          <a href={URLS.signup} className="btn btn-primary btn-block">{t('nav.signup')}</a>
        </div>
      </div>
    )}
    </>
  );
}

// ── Footer ──
function Footer() {
  const { t, lang, setLang } = useT();
  return (
    <footer className="footer">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <a href="#/" className="brand"><ZoeeMark /> <span>Zoee</span></a>
            <h3>Tecnologia que cuida.</h3>
            <p>{t('footer.tag')}</p>
            <div className="foot-socials">
              <a href="#" aria-label="Instagram">IG</a>
              <a href="#" aria-label="LinkedIn">in</a>
              <a href="#" aria-label="YouTube">YT</a>
              <a href="#" aria-label="X">X</a>
            </div>
          </div>
          <div className="foot-col">
            <h5>{t('footer.product')}</h5>
            <ul>
              <li><a href="#/recursos">{t('nav.resources')}</a></li>
              <li><a href="#/cowork">{t('nav.cowork')}</a></li>
              <li><a href="#/precos">{t('nav.pricing')}</a></li>
              <li><a href="#/changelog">{t('nav.changelog')}</a></li>
              <li><a href="#/clientes">{t('nav.customers')}</a></li>
              <li><a href="#/tutores">{t('nav.forOwners')}</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>{t('footer.solutions')}</h5>
            <ul>
              {SOLUTIONS.map(s => <li key={s.id}><a href={'#/solucoes/'+s.id}>{s.headline}</a></li>)}
            </ul>
          </div>
          <div className="foot-col">
            <h5>{t('footer.resources')}</h5>
            <ul>
              <li><a href="#/blog">{t('nav.blog')}</a></li>
              <li><a href="#/docs">{t('nav.docs')}</a></li>
              <li><a href="#/suporte">{t('nav.support')}</a></li>
              <li><a href="#/status">{t('footer.status')}</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>{t('footer.company')}</h5>
            <ul>
              <li><a href="#/sobre">{t('nav.about')}</a></li>
              <li><a href="#/carreiras">{t('nav.careers')}</a></li>
              <li><a href="#/contato">{t('nav.contact')}</a></li>
              <li><a href="#/legal/lgpd">{t('footer.legalLgpd')}</a></li>
              <li><a href="#/legal/termos">{t('footer.legalTerms')}</a></li>
              <li><a href="#/legal/privacidade">{t('footer.legalPrivacy')}</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>{t('footer.copyright')}</div>
          <div className="foot-langs">
            {LANG_META.map(l => (
              <button key={l.code} className={l.code===lang?'active':''} onClick={()=>setLang(l.code)}>{l.short}</button>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

// ── Page header (reused on inner pages) ──
function PageHeader({ eyebrow, title, sub, cta, align='center' }) {
  return (
    <section className="page-header">
      <div className="container" style={{ textAlign: align }}>
        {eyebrow && <div className="eyebrow" style={{ marginBottom: 16 }}>{eyebrow}</div>}
        <h1 className="h-1">{title}</h1>
        {sub && <p className="lede" style={{ margin: align==='center' ? '0 auto' : '0' }}>{sub}</p>}
        {cta}
      </div>
    </section>
  );
}

// ── Module card (reused on home + recursos page) ──
function ModuleCard({ m }) {
  const { t } = useT();
  return (
    <a href={'#/modulo/'+m.id} className={'module-card ' + m.cls}>
      <span className={'module-tag '+m.tag}>{m.tag}</span>
      <div className="module-icon">{Icons[m.icon](24)}</div>
      <h3>{t('mod.'+m.id)}</h3>
      <p>{t('mod.'+m.id+'.short')}</p>
      <span className="more">Saiba mais</span>
    </a>
  );
}

// ── Pricing toggle + cards block (reused on home + pricing page) ──
function PricingBlock() {
  const { t } = useT();
  const [yearly, setYearly] = useState(false);
  return (
    <>
      <div className="toggle-wrap">
        <div className="pricing-toggle">
          <button className={!yearly?'active':''} onClick={()=>setYearly(false)}>{t('pricing.monthly')}</button>
          <button className={yearly?'active':''} onClick={()=>setYearly(true)}>{t('pricing.yearly')} <span className="save">-20%</span></button>
        </div>
      </div>
      <div className="pricing-grid">
        {PLANS.map(p => (
          <div key={p.id} className={'price-card ' + (p.popular?'popular':'')}>
            {p.popular && <span className="popular-tag">{t('pricing.popular')}</span>}
            <div className="tier">{p.tier}</div>
            <h3>{p.name}</h3>
            <p className="desc">{p.desc}</p>
            <div className="price">
              <span className="currency">R$</span>
              <span className="amount">{yearly ? p.priceYear : p.priceMonth}</span>
            </div>
            <div className="per">{p.id==='free' ? 'para sempre' : (yearly?'/mês (cobrado anualmente)':'/mês')}</div>
            <ul className="feats">
              {p.feats.map((f,i)=><li key={i}>{f}</li>)}
            </ul>
            <a href={p.id==='premium' ? URLS.sales : URLS.signup} className={'btn '+(p.popular?'btn-coral':'btn-outline')+' btn-block'}>{p.cta}</a>
          </div>
        ))}
      </div>
      <div className="compare-link"><a href="#/precos">{t('pricing.compare')}</a></div>
    </>
  );
}

// ── FAQ accordion ──
function FAQBlock({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq-wrap">
      {items.map((item, i) => (
        <div key={i} className={'faq-item '+(open===i?'open':'')}>
          <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
            <span>{item.q}</span>
            <span className="ic">+</span>
          </button>
          <div className="faq-a">{item.a}</div>
        </div>
      ))}
    </div>
  );
}

// ── Final CTA banner ──
function FinalCta() {
  const { t } = useT();
  return (
    <section style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="cta-banner">
          <h2>{t('finalCta.title')}</h2>
          <p>{t('finalCta.sub')}</p>
          <a href={URLS.signup} className="btn btn-coral btn-lg">{t('finalCta.btn')}</a>
        </div>
      </div>
    </section>
  );
}

// ── Floating WhatsApp button ──
function WhatsAppFab() {
  const { lang } = useT();
  const label = lang === 'en' ? 'Chat on WhatsApp' : lang === 'es' ? 'Hablar por WhatsApp' : 'Falar no WhatsApp';
  return (
    <a className="wa-fab" href={URLS.whatsapp} target="_blank" rel="noopener" aria-label={label}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.28-.47-2.44-1.5-.9-.8-1.5-1.8-1.68-2.1-.17-.3-.02-.46.13-.61.14-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.38-.03-.53-.07-.15-.66-1.6-.9-2.18-.24-.57-.48-.5-.66-.5h-.56c-.2 0-.5.07-.77.37-.26.3-1 .97-1 2.37 0 1.4 1.02 2.75 1.17 2.95.15.2 2.03 3.24 4.93 4.42 2.9 1.18 3.02.87 3.57.82.55-.05 1.76-.72 2.01-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35Z"/><path d="M12 2a10 10 0 0 0-8.5 15.28L2 22l4.83-1.46A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.36-1.26l-.31-.19-3.2.97.98-3.13-.2-.32A8.2 8.2 0 1 1 12 20.2Z"/></svg>
      <span>{label}</span>
    </a>
  );
}

Object.assign(window, {
  useRoute, navigate, L, useT, Nav, Footer, PageHeader, WhatsAppFab,
  ModuleCard, PricingBlock, FAQBlock, FinalCta
});