/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

// ============================================================
// TWEAKS DEFAULTS
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "heroStyle": "split",
  "showStats": true
}/*EDITMODE-END*/;

// ============================================================
// SHARED COMPONENTS
// ============================================================
function Logo({ size = 28, light = false }) {
  // `size` is the rendered height in px; the wordmark keeps its aspect ratio.
  return (
    <img
      className="uau-logo"
      src={light ? 'assets/logo-light.png' : 'assets/logo.png'}
      alt="UAUBaby"
      style={{ height: size * 1.4, width: 'auto', display: 'block' }}
      draggable="false"
    />
  );
}

function PromoBar() {
  return (
    <div className="promo-bar">
      <div className="container promo-bar-inner">
        <span>✦ Acompanhamento durante toda a jornada gestacional</span>
        <span>1ª caixa com R$ 50 OFF · cupom <strong>OIMAE</strong></span>
        <span>Plano anual: 12x sem juros</span>
      </div>
    </div>
  );
}

function Header({ active = 'inicio' }) {
  const [open, setOpen] = useState(false);

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

  const links = [
    { href: 'index.html', label: 'Início', key: 'inicio' },
    { href: '#assinatura', label: 'Assinatura' },
    { href: '#caixas', label: 'A caixa' },
    { href: 'blog.html', label: 'Diário', key: 'blog' },
    { href: '#sobre', label: 'Sobre nós' },
  ];

  return (
    <header className="site-header">
      <div className="container">
        <button
          className="nav-toggle"
          aria-label={open ? 'Fechar menu' : 'Abrir menu'}
          aria-expanded={open}
          onClick={() => setOpen(v => !v)}
        >
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            {open ? (
              <><path d="M6 6l12 12"/><path d="M18 6l-12 12"/></>
            ) : (
              <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></>
            )}
          </svg>
        </button>
        <nav className="nav-desktop">
          {links.map(l => (
            <a key={l.label} href={l.href} className={l.key && active === l.key ? 'active' : ''}>{l.label}</a>
          ))}
        </nav>
        <a href="index.html" className="brand"><Logo size={28} /></a>
        {/* coluna direita vazia mantém o logo centralizado no grid (login ainda não existe) */}
        <div className="icons" aria-hidden="true"></div>
      </div>
      <div className={`nav-mobile ${open ? 'is-open' : ''}`} onClick={() => setOpen(false)}>
        <div className="nav-mobile-panel" onClick={e => e.stopPropagation()}>
          {links.map(l => (
            <a key={l.label} href={l.href} className={l.key && active === l.key ? 'active' : ''} onClick={() => setOpen(false)}>{l.label}</a>
          ))}
          <a href="quiz.html" className="btn btn-primary btn-lg nav-mobile-cta" onClick={() => setOpen(false)}>
            Começar minha assinatura
          </a>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div style={{marginBottom: 20}}><Logo size={36} light /></div>
            <p style={{fontSize: 14, color: 'rgba(255,255,255,0.7)', maxWidth: 280, lineHeight: 1.55}}>
              Acompanhamento, curadoria e presença para você viver a gravidez com mais leveza.
            </p>
            <div style={{display: 'flex', gap: 12, marginTop: 24}}>
              {['instagram', 'tiktok', 'youtube'].map(s => (
                <a key={s} href="#" style={{
                  width: 36, height: 36, borderRadius: '50%',
                  border: '1px solid rgba(255,255,255,0.2)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  margin: 0
                }} aria-label={s}>
                  <SocialIcon name={s} />
                </a>
              ))}
            </div>
          </div>
          <div>
            <h4>Assinatura</h4>
            <ul>
              <li><a href="#caixas">Como funciona</a></li>
              <li><a href="#caixas">A caixa</a></li>
              <li><a href="#planos">Planos</a></li>
              <li><a href="#faq">Perguntas</a></li>
            </ul>
          </div>
          <div>
            <h4>Conteúdo</h4>
            <ul>
              <li><a href="blog.html">Diário UAUBaby</a></li>
              <li><a href="blog.html">1º trimestre</a></li>
              <li><a href="blog.html">2º trimestre</a></li>
              <li><a href="blog.html">3º trimestre</a></li>
              <li><a href="blog.html">Pós-parto</a></li>
            </ul>
          </div>
          <div>
            <h4>Sobre</h4>
            <ul>
              <li><a href="#sobre">Manifesto</a></li>
              <li><a href="#conselho">Conselho clínico</a></li>
              <li><a href="#">Grupo UAU</a></li>
              <li><a href="#">Imprensa</a></li>
              <li><a href="#">Trabalhe conosco</a></li>
            </ul>
          </div>
          <div>
            <h4>Fale com a gente</h4>
            <ul>
              <li><a href="#">oi@uaubaby.com.br</a></li>
              <li><a href="#">WhatsApp</a></li>
              <li><a href="#">Central de ajuda</a></li>
              <li><a href="#">Trocas e devoluções</a></li>
            </ul>
            <p style={{fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 20, lineHeight: 1.5}}>
              Jundiaí · Campinas · São Paulo<br/>Atendimento seg–sex, 9h–18h
            </p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 UAUBaby · marca do Grupo UAU. Todos os direitos reservados.</span>
          <span><a href="#" style={{color: 'inherit', marginRight: 18}}>Privacidade</a> <a href="#" style={{color: 'inherit'}}>Termos</a></span>
        </div>
      </div>
    </footer>
  );
}

function SocialIcon({ name }) {
  const props = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === 'instagram') return (
    <svg {...props}><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>
  );
  if (name === 'tiktok') return (
    <svg {...props}><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>
  );
  return <svg {...props}><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/></svg>;
}

Object.assign(window, { Logo, PromoBar, Header, Footer, SocialIcon });