/* global React */
// ============================================================
// Craque Cidadão — site chrome: Header, Footer, FloatingWhatsApp
// ============================================================
const { Icon, CC_LOGO, WA_LINK, IG_LINK } = window;

const NAV_LINKS = [
  { id: 'home', label: 'Home' },
  { id: 'quem-somos', label: 'Quem Somos' },
  { id: 'projetos', label: 'Projetos' },
  { id: 'parceiros', label: 'Parceiros' },
  { id: 'transparencia', label: 'Transparência' },
  { id: 'galeria', label: 'Galeria' },
  { id: 'contato', label: 'Contato' },
];

function Logo({ onNav, dark = false }) {
  return (
    <a onClick={() => onNav('home')} aria-label="Craque Cidadão — início"
       style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', textDecoration: 'none' }}>
      <img className="cc-logo" src={CC_LOGO} alt="ONG Craque Cidadão" fetchpriority="high" style={{ width: 'auto', display: 'block', borderRadius: 8 }} />
    </a>
  );
}

function Header({ route, onNav }) {
  const { Button } = window.CraqueCidadODesignSystem_6fdc08;
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => { setOpen(false); }, [route]);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const go = (id) => { setOpen(false); onNav(id); };

  return (
    <header className={'cc-header' + (scrolled ? ' is-scrolled' : '') + (open ? ' is-open' : '')} style={{
      position: 'sticky', top: 0, zIndex: 60,
      background: 'rgba(255,255,255,0.9)', backdropFilter: 'saturate(150%) blur(12px)',
      borderBottom: '1px solid var(--border)',
      boxShadow: scrolled ? 'var(--shadow-sm)' : 'none',
      transition: 'box-shadow var(--dur) var(--ease-out)',
    }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto', minHeight: 'var(--header-h)',
        padding: '8px 20px', display: 'flex', transition: 'padding var(--dur-slow) var(--ease-out)', alignItems: 'center', justifyContent: 'space-between', gap: 20,
      }}>
        <Logo onNav={go} />

        {/* desktop nav */}
        <nav className="cc-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          {NAV_LINKS.map((l) => (
            <a key={l.id} href={'#/' + l.id} onClick={(e) => { e.preventDefault(); go(l.id); }} aria-current={route === l.id ? 'page' : undefined} style={{
              padding: '9px 13px', cursor: 'pointer', borderRadius: 'var(--radius-pill)',
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5,
              color: route === l.id ? 'var(--brand)' : 'var(--text-body)',
              background: route === l.id ? 'var(--brand-soft)' : 'transparent',
              textDecoration: 'none', transition: 'background var(--dur), color var(--dur)',
            }}
              onMouseEnter={(e) => { if (route !== l.id) e.currentTarget.style.background = 'var(--paper-2)'; }}
              onMouseLeave={(e) => { if (route !== l.id) e.currentTarget.style.background = 'transparent'; }}
            >{l.label}</a>
          ))}
          <div style={{ marginLeft: 10 }}><window.WAButton size="sm">WhatsApp</window.WAButton></div>
        </nav>

        {/* mobile toggle */}
        <button className="cc-nav-toggle" aria-label={open ? 'Fechar menu' : 'Abrir menu'} aria-expanded={open} onClick={() => setOpen((o) => !o)} style={{
          display: 'none', border: 0, background: 'var(--brand-soft)', color: 'var(--brand)',
          width: 46, height: 46, borderRadius: 12, cursor: 'pointer', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name={open ? 'x' : 'menu'} size={24} />
        </button>
      </div>

      {/* mobile drawer */}
      <div className="cc-nav-mobile" style={{
        display: 'none', overflow: 'hidden',
        maxHeight: open ? 'calc(100svh - 70px)' : 0, overflowY: open ? 'auto' : 'hidden', transition: 'max-height var(--dur-slow) var(--ease-out)',
        borderTop: open ? '1px solid var(--border)' : '1px solid transparent',
        background: '#fff',
      }}>
        <div style={{ padding: '12px 20px 22px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {NAV_LINKS.map((l, i) => (
            <a key={l.id} href={'#/' + l.id} className="cc-drawer-link" onClick={(e) => { e.preventDefault(); go(l.id); }} style={{
              '--i': i, padding: '13px 14px', cursor: 'pointer', borderRadius: 12,
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16,
              color: route === l.id ? 'var(--brand)' : 'var(--text-strong)',
              background: route === l.id ? 'var(--brand-soft)' : 'transparent', textDecoration: 'none',
            }}>{l.label}</a>
          ))}
          <div style={{ marginTop: 8 }}><window.WAButton size="md" full>Fale pelo WhatsApp</window.WAButton></div>
        </div>
      </div>
      <ScrollProgress />
    </header>
  );
}

function ScrollProgress() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    let raf;
    const update = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      if (ref.current) ref.current.style.transform = `scaleX(${h > 0 ? Math.min(1, window.scrollY / h) : 0})`;
    };
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); cancelAnimationFrame(raf); };
  }, []);
  return <div aria-hidden ref={ref} style={{ position: 'absolute', left: 0, right: 0, bottom: -1, height: 3, background: 'linear-gradient(90deg, var(--brand), var(--accent))', transformOrigin: '0 50%', transform: 'scaleX(0)' }} />;
}

function FloatingWhatsApp() {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={WA_LINK} target="_blank" rel="noopener" aria-label="Fale conosco pelo WhatsApp"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'fixed', right: 22, bottom: 22, zIndex: 80,
        display: 'flex', alignItems: 'center', gap: 10,
        background: 'linear-gradient(135deg, #2BD96E 0%, #1EBE5B 100%)', color: '#fff', textDecoration: 'none',
        padding: '14px 19px 14px 16px', borderRadius: 'var(--radius-pill)',
        fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15,
        boxShadow: hover ? '0 16px 34px rgba(30,190,91,0.5)' : '0 10px 26px rgba(30,190,91,0.4)',
        transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)',
      }}>
      <window.WAIcon size={23} color="#fff" />
      <span className="cc-wa-label">Fale conosco</span>
    </a>
  );
}

function Footer({ onNav }) {
  const { Button } = window.CraqueCidadODesignSystem_6fdc08;
  const year = new Date().getFullYear();
  const social = [
    { icon: 'instagram', href: IG_LINK }, { icon: 'message-circle', href: WA_LINK },
    { icon: 'mail', href: 'mailto:ongcraquecidadao@gmail.com' },
  ];
  return (
    <>
      {/* contact CTA band */}
      <section style={{ background: 'var(--surface-navy)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '52px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, margin: 0 }}>Ficou alguma dúvida?</h2>
            <p style={{ color: 'rgba(255,255,255,0.78)', margin: '8px 0 0', fontSize: 17 }}>Fale com a gente agora mesmo pelo WhatsApp.</p>
          </div>
          <window.WAButton size="lg">Fale pelo WhatsApp</window.WAButton>
        </div>
      </section>

      <footer style={{ background: 'var(--navy-950)', color: 'rgba(255,255,255,0.72)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '56px 24px 28px', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1.2fr', gap: 40 }} className="cc-footer-grid">
          <div>
            <div style={{ background: '#fff', borderRadius: 'var(--radius-md)', padding: 12, width: 'fit-content', marginBottom: 16 }}>
              <img src={CC_LOGO} alt="Craque Cidadão" loading="lazy" decoding="async" style={{ height: 60, display: 'block' }} />
            </div>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: '#fff', fontSize: 18, margin: '0 0 8px' }}>Educando pelo esporte.</p>
            <p style={{ maxWidth: 340, lineHeight: 1.6, fontSize: 14, margin: 0 }}>
              Desde 2009, em Duque de Caxias/RJ, usamos o esporte como ferramenta de inclusão, educação e cidadania.
            </p>
          </div>
          <div>
            <h4 style={{ color: '#fff', fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', margin: '0 0 14px' }}>Navegação</h4>
            {NAV_LINKS.map((l) => (
              <div key={l.id} style={{ marginBottom: 9 }}>
                <a href={'#/' + l.id} className="cc-foot-link" onClick={(e) => { e.preventDefault(); onNav(l.id); }} style={{ color: 'rgba(255,255,255,0.72)', fontSize: 14.5, cursor: 'pointer', textDecoration: 'none' }}>{l.label}</a>
              </div>
            ))}
          </div>
          <div>
            <h4 style={{ color: '#fff', fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', margin: '0 0 14px' }}>Contato</h4>
            <a href={WA_LINK} target="_blank" rel="noopener" style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 11, fontSize: 14.5, color: 'rgba(255,255,255,0.8)', textDecoration: 'none' }}><window.WAIcon size={16} color="#2BD96E" /> 21 96637-7153</a>
            <a href="mailto:ongcraquecidadao@gmail.com" style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 11, fontSize: 14.5, color: 'rgba(255,255,255,0.8)', textDecoration: 'none' }}><Icon name="mail" size={16} color="var(--gold-400)" /> ongcraquecidadao@gmail.com</a>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginBottom: 18, fontSize: 14, lineHeight: 1.5 }}><Icon name="map-pin" size={16} color="var(--gold-400)" style={{ flex: 'none', marginTop: 2 }} /> Rua Doutor Furquim Mendes, 621 — Centenário, Duque de Caxias/RJ</div>
            <div style={{ display: 'flex', gap: 10 }}>
              {social.map((s) => (
                <a key={s.icon} href={s.href} target="_blank" rel="noopener" style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                  <Icon name={s.icon} size={18} color="#fff" />
                </a>
              ))}
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', padding: '20px 24px', textAlign: 'center', fontSize: 13 }}>
          © {year} ONG Craque Cidadão · CNPJ 11.808.208/0001-58 · Todos os direitos reservados · <a href="#/privacidade" onClick={(e) => { e.preventDefault(); onNav('privacidade'); }} style={{ color: 'rgba(255,255,255,0.72)', cursor: 'pointer', textDecoration: 'underline' }}>Política de Privacidade</a>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { Header, Footer, FloatingWhatsApp, Logo, NAV_LINKS });