// components.jsx — shared UI building blocks

// ── Brand mark — small sun symbol (used as accent only) ────
function BrandMark({ size = 28, className = '' }) {
  return (
    <svg className={'brand-mark ' + className} width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M3 22 H29" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
      <circle cx="16" cy="22" r="7" stroke="currentColor" strokeWidth="1.4" fill="none" />
      <g stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
        <line x1="11" y1="22" x2="11" y2="29" />
        <line x1="13.5" y1="22" x2="13.5" y2="29" />
        <line x1="16" y1="22" x2="16" y2="29" />
        <line x1="18.5" y1="22" x2="18.5" y2="29" />
        <line x1="21" y1="22" x2="21" y2="29" />
      </g>
    </svg>
  );
}

// ── Full logo (img with filter to recolor white→ink/light) ─
function HumanareLogo({ width = 168 }) {
  const h = (width / 264) * 54;
  return (
    <img
      src="assets/logo-humanare.png"
      alt="Humanāre por Adriana Schneider"
      className="brand-logo-img"
      style={{ width: width + 'px', height: h + 'px', display: 'inline-block' }}
    />
  );
}

// Compatibility alias (legacy callers)
function HumanareLockup({ size = 'md', tagline = true }) {
  const w = size === 'lg' ? 280 : size === 'sm' ? 140 : 200;
  return <HumanareLogo width={w} />;
}

// ── Nav ────────────────────────────────────────────────────
function Nav({ route, setRoute }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const go = (e, r) => {
    e.preventDefault();
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const items = [
    ['home', 'Início'],
    ['sobre', 'Sobre'],
    ['palestras', 'Palestras'],
    ['conteudo', 'Conteúdo'],
    ['contato', 'Contato'],
  ];

  return (
    <nav className={'nav ' + (scrolled ? 'scrolled' : '')}>
      <a href="#" onClick={(e) => go(e, 'home')} className="nav-brand" style={{ textDecoration: 'none' }}>
        <HumanareLogo width={180} />
      </a>
      <div className="nav-links">
        {items.map(([k, l]) => (
          <a key={k} href={'#' + k} onClick={(e) => go(e, k)} className={route === k ? 'active' : ''}>{l}</a>
        ))}
      </div>
      <a href="#contato" onClick={(e) => go(e, 'contato')} className="nav-cta" data-magnetic="0.25">
        Convidar para palestra
      </a>
      <button className="nav-mobile-toggle" aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
    </nav>
  );
}

// ── Marquee — empresas ─────────────────────────────────────
function EmpresasMarquee() {
  const items = [...EMPRESAS, ...EMPRESAS]; // duplicate for seamless loop
  return (
    <div className="marquee">
      <div className="marquee-track">
        {items.map((e, i) => (
          <span key={i} className="marquee-item">{e}</span>
        ))}
      </div>
    </div>
  );
}

// ── Section header ─────────────────────────────────────────
function SecHead({ eyebrow, titleA, titleEm, titleB, sub, action }) {
  return (
    <div className="container">
      <div className="sec-head">
        <div>
          {eyebrow && <div className="eyebrow" style={{ marginBottom: 24 }}>{eyebrow}</div>}
          <h2 data-reveal="words">
            {titleA}<em>{titleEm}</em>{titleB}
          </h2>
        </div>
        <div>
          {sub && <p className="sub">{sub}</p>}
          {action && <div style={{ marginTop: 24 }}>{action}</div>}
        </div>
      </div>
    </div>
  );
}

// ── Intermission marquee — bold horizontal scroll ──────────
function Intermission({
  text = "Se não nós, quem?  ·  Se não agora, quando?",
  variant = 'dark',
}) {
  // duplicate enough copies for seamless loop
  const copies = Array.from({ length: 4 }, (_, i) => i);
  return (
    <section className={'intermission ' + (variant === 'light' ? 'light' : '')}>
      <div className="intermission-track">
        {copies.map(i => <span key={i}>{text}</span>)}
      </div>
    </section>
  );
}

// ── Manifesto strip ────────────────────────────────────────
function ManifestoStrip() {
  return (
    <section className="manifesto-strip">
      <div className="container">
        <div className="eyebrow center" style={{ justifyContent: 'center', display: 'flex' }}>Manifesto</div>
        <blockquote>
          Acredito que <em>empresas boas para o mundo</em> são, também, os melhores negócios do nosso tempo.
        </blockquote>
        <div className="src">Adriana Schneider</div>
      </div>
    </section>
  );
}

// ── Palestras grid ─────────────────────────────────────────
function PalestrasGrid({ list = PALESTRAS, columns = 2 }) {
  return (
    <div className="container">
      <div className="palestras-grid" style={columns === 3 ? { gridTemplateColumns: 'repeat(3, 1fr)' } : null}>
        {list.map((p) => (
          <article key={p.n} className="palestra">
            <div className="num">{p.n} / {String(list.length).padStart(2, '0')}</div>
            <h3>
              {p.titulo.plain}<em>{p.titulo.em}</em>{p.titulo.plain2 || ''}
            </h3>
            <p>{p.desc}</p>
            <div className="arrow-wrap">
              <span className="tag">{p.tag}</span>
              <span className="go">
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 12 L12 2 M5 2 H12 V9" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" /></svg>
              </span>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

// ── Livro slice (legacy — mantido para compatibilidade) ──
function LivroSlice() {
  return (
    <section className="livro">
      <div className="container">
        <div className="livro-cover">
          <div className="top">
            <small>Editora Lacre · 2025</small>
          </div>
          <div className="ttl">
            O Caminho do<br/><em>Protagonista</em>
          </div>
          <div className="auth">Adriana Schneider</div>
          <div className="sun" />
        </div>
        <div className="livro-info">
          <div className="eyebrow">O Livro</div>
          <h2>
            Janela, bússola e <em>vento</em>.
          </h2>
          <p>
            Uma jornada de autotransformação que integra psicologia positiva,
            neurociência e mindfulness. Para líderes, profissionais e qualquer pessoa
            que se recuse a deixar a própria vida acontecer no piloto automático.
          </p>
          <blockquote className="quote">
            "Abrir a janela é escolher ver com mais nitidez. O resto é coragem
            de seguir o que a clareza pede."
          </blockquote>
          <div className="meta">
            <div>Páginas <strong>248</strong></div>
            <div>Edição <strong>Lacre · 2025</strong></div>
            <div>Lançado em <strong>RJ · SP · Lisboa</strong></div>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#" className="btn terracotta">Comprar livro <span className="arrow">→</span></a>
            <a href="#" className="btn ghost">Ler trecho</a>
          </div>
          <p style={{ marginTop: 24, fontSize: '0.82rem', color: 'var(--ink-mute)', maxWidth: 480 }}>
            ✦ 100% dos lucros revertidos a programas de aceleração de carreira feminina.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── Caminho do Protagonista — book + 3 pillars (signature section) ──
function CaminhoSlice() {
  return (
    <section className="caminho">
      <div className="container">
        <div className="caminho-head">
          <div>
            <div className="eyebrow">Metodologia · Livro</div>
            <h2>
              O Caminho do <em>Protagonista</em>.
            </h2>
          </div>
          <div>
            <p>
              Uma jornada em três movimentos, sustentada pela autocompaixão. É o método
              que conduz palestras, mentorias e o livro lançado em 2025 por Rio,
              São Paulo e Lisboa.
            </p>
            <div className="eyebrow" style={{ color: 'var(--terracotta-soft)', marginTop: 6 }}>
              Janela · Bússola · Vento
            </div>
          </div>
        </div>
        <div className="caminho-grid">
          <div className="caminho-book">
            <div className="caminho-book-top">Editora Lacre · 2025</div>
            <div className="caminho-book-title">
              O Caminho do<br/><em>Protagonista</em>
              <small>janela, bússola e vento</small>
            </div>
            <div className="caminho-book-author">Adriana Schneider</div>
            <div className="caminho-book-glyph" />
          </div>
          <div className="caminho-pilares">
            {PILARES.map(p => (
              <article key={p.n} className="pilar reveal">
                <div className="pilar-n">{p.n}</div>
                <div>
                  <div className="pilar-nome">{p.nome}</div>
                  <div className="pilar-sub">{p.sub}</div>
                  <p className="pilar-desc">{p.desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
        <div className="caminho-foot">
          <small>✦ Lucros do livro vão para programas de aceleração de carreira feminina.</small>
          <a href="#" className="btn lime">Comprar o livro <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ── Humanāre · soluções para empresas ───────────────────────
function HumanareSolucoes({ setRoute }) {
  return (
    <section className="humanare-section dark-section">
      <SecHead
        eyebrow="Humanāre · Para empresas"
        titleA="Soluções de "
        titleEm="desenvolvimento"
        titleB=" humano e organizacional."
        sub="A consultoria que fundei em 2016. Atendemos lideranças, times e cultura com método, escuta e a coragem de propor o que precisa ser dito."
        action={
          <a href="#" onClick={(e) => { e.preventDefault(); if (setRoute) setRoute('contato'); window.scrollTo({top:0,behavior:'instant'}); }} className="link-arrow">
            Falar com a Humanāre →
          </a>
        }
      />
      <div className="container">
        <div className="humanare-grid">
          {HUMANARE_SOLUCOES.map(s => (
            <article key={s.n} className="humanare-card reveal">
              <div className="num">Solução {s.n}</div>
              <h3>{s.titulo.plain}<em>{s.titulo.em}</em></h3>
              <p>{s.desc}</p>
              <div className="tag"><span>{s.tag}</span></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Impacto · números reais publicados pela Humanāre ─────
function ImpactoStrip() {
  return (
    <section className="impacto">
      <div className="container">
        <div className="impacto-grid">
          <div className="impacto-lead">
            Quase uma década <em>inspirando</em> pessoas e empresas <em>boas para o mundo</em>.
          </div>
          {IMPACTO.map((i, k) => (
            <div key={k} className="impacto-item reveal">
              <span className="v">{i.v}</span>
              <span className="k">{i.k}</span>
              <span className="d">{i.d}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Curadorias (Rio Innovation Week + outros) ──────────────
function CuradoriasGrid() {
  return (
    <section className="section dark-section">
      <SecHead
        eyebrow="Curadoria"
        titleA="Os palcos que "
        titleEm="ajudo a desenhar"
        titleB=" pelo país."
        sub="Curadora desde 2019 do Rio Innovation Week e de outros encontros que precisam de gente que conecte temas, pessoas e propósito."
      />
      <div className="container">
        <div className="curadorias">
          {CURADORIAS.map((c, i) => (
            <article key={i} className="curadoria reveal">
              <div className="sigla">{c.sigla}</div>
              <div className="nome">{c.nome}</div>
              <div className="loc">{c.loc}</div>
              <div className="desc">{c.desc}</div>
              <div className="desde">desde {c.desde}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Depoimentos ────────────────────────────────────────────
function Depoimentos() {
  return (
    <section className="section dark-section">
      <div className="container">
        <div className="tst-wrap">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Depoimentos</div>
            <h2 className="display" style={{ fontSize: 'clamp(2rem, 4vw, 3.4rem)', letterSpacing: '-0.025em', marginBottom: 20 }}>
              O que dizem sobre <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>os encontros</em>.
            </h2>
            <p style={{ color: 'var(--ink-soft)', maxWidth: 360 }}>
              Líderes que viveram uma palestra, uma mentoria ou uma curadoria,
              e levaram algo para o trabalho da segunda-feira.
            </p>
          </div>
          <div className="tst-list">
            {DEPOIMENTOS.map((d, i) => (
              <article key={i} className="tst">
                <p className="q">"{d.q}"</p>
                <div className="author">
                  <div className="av">{d.autor.split(' ').map(n => n[0]).slice(0, 2).join('')}</div>
                  <div className="info">
                    <strong>{d.autor}</strong>
                    <span>{d.cargo}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Eventos / agenda ───────────────────────────────────────
function Eventos({ limit }) {
  const list = limit ? EVENTOS.slice(0, limit) : EVENTOS;
  return (
    <section className="section" style={{ background: 'var(--paper)' }}>
      <SecHead
        eyebrow="Agenda"
        titleA="Próximos "
        titleEm="encontros"
        sub="Palestras abertas, curadorias e mentorias coletivas. Para convidar para um encontro fechado, fale comigo."
        action={<a href="#" className="link-arrow">Ver agenda completa →</a>}
      />
      <div className="container">
        <div className="evt-list">
          {list.map((e, i) => (
            <article key={i} className={'evt' + (e.passado ? ' passed' : '')}>
              <div className="date">
                {e.dia}<small>{e.mes} {e.ano}</small>
              </div>
              <h4>{e.titulo.plain}<em>{e.titulo.em}</em></h4>
              <div className="loc">{e.loc}</div>
              <span className="go-mini">
                <svg width="12" height="12" viewBox="0 0 14 14"><path d="M2 12 L12 2 M5 2 H12 V9" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" /></svg>
              </span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── RIW slice ──────────────────────────────────────────────
function RIWSlice() {
  return (
    <section className="section" style={{ padding: 0 }}>
      <div className="container">
        <div className="riw">
          <div className="content">
            <div className="eyebrow">Curadoria</div>
            <h2>Rio <em>Innovation</em> Week. Onde a inovação encontra <em>o humano</em>.</h2>
            <p>
              Curadora desde 2019 do maior festival de inovação da América Latina.
              Mais de 60 mil pessoas, 300 palcos e uma convicção: tecnologia sem
              propósito é só barulho.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#" className="btn lime">Conhecer o RIW <span className="arrow">→</span></a>
              <a href="#" className="btn ghost" style={{ color: 'var(--bg)', borderColor: 'var(--bg)' }}>Bastidores</a>
            </div>
            <div style={{ display: 'flex', gap: 36, marginTop: 48, fontFamily: 'var(--font-mono)', fontSize: '0.65rem', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'color-mix(in srgb, var(--bg) 50%, transparent)' }}>
              <div><span className="stat-counter" data-count="60000" data-prefix="+" style={{ color: 'var(--bg)', display: 'block', fontSize: '1.6rem', marginBottom: 4 }}>+0</span>pessoas</div>
              <div><span className="stat-counter" data-count="300" data-suffix="+" style={{ color: 'var(--bg)', display: 'block', fontSize: '1.6rem', marginBottom: 4 }}>0+</span>palcos curados</div>
              <div><span className="stat-counter" data-count="6" style={{ color: 'var(--bg)', display: 'block', fontSize: '1.6rem', marginBottom: 4 }}>0</span>edições</div>
            </div>
          </div>
          <div className="riw-img" style={{ backgroundImage: `url(${PHOTOS.riw})` }} />
        </div>
      </div>
    </section>
  );
}

// ── Newsletter ─────────────────────────────────────────────
function Newsletter() {
  return (
    <section className="newsletter">
      <div className="container">
        <div className="newsletter-grid">
          <div>
            <div className="eyebrow">Newsletter Semanal</div>
            <h2 style={{ marginTop: 20 }}>
              Domingos com <em>Adriana</em>.
            </h2>
            <p>
              Toda semana, uma carta curta sobre liderança, cultura e a coragem
              de fazer escolhas em tempos confusos. Sem listinhas, sem hacks.
            </p>
          </div>
          <div>
            <form className="subscribe-form" onSubmit={(e) => { e.preventDefault(); alert('Quase lá ✦ verifique seu email.'); }}>
              <input type="email" placeholder="seu@email.com" required />
              <button type="submit">Assinar →</button>
            </form>
            <div className="stats-mini">
              <div>
                <strong><span className="stat-counter" data-count="28" data-prefix="+">+0</span> mil</strong>
                inscritos
              </div>
              <div>
                <strong><span className="stat-counter" data-count="4">0</span> anos</strong>
                semanais
              </div>
              <div>
                <strong>0 spam</strong>
                garantido
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────
function Footer({ setRoute }) {
  const go = (e, r) => { e.preventDefault(); setRoute(r); window.scrollTo({top:0,behavior:'instant'}); };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <HumanareLogo width={240} />
            <p style={{ marginTop: 24 }}>
              Desenvolvimento humano e organizacional. Inspirando pessoas e empresas
              boas para o mundo desde 2016. Hoje em Rio, São Paulo e Lisboa.
            </p>
            <div style={{ marginTop: 28, fontFamily: 'var(--font-mono)', fontSize: '0.7rem', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
              Rio · São Paulo · Lisboa
            </div>
          </div>
          <div className="footer-col">
            <h5>Navegar</h5>
            <ul>
              <li><a href="#sobre" onClick={(e) => go(e, 'sobre')}>Sobre Adriana</a></li>
              <li><a href="#palestras" onClick={(e) => go(e, 'palestras')}>Palestras</a></li>
              <li><a href="#conteudo" onClick={(e) => go(e, 'conteudo')}>Conteúdo</a></li>
              <li><a href="#contato" onClick={(e) => go(e, 'contato')}>Contato</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Projetos</h5>
            <ul>
              <li><a href="#">Rio Innovation Week</a></li>
              <li><a href="#">Livro · O Caminho do Protagonista</a></li>
              <li><a href="#">Mentoria coletiva</a></li>
              <li><a href="#">Humanāre · empresas</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Redes</h5>
            <ul>
              <li><a href={CONTATO.linkedin} target="_blank" rel="noopener">LinkedIn ↗</a></li>
              <li><a href={CONTATO.instagram} target="_blank" rel="noopener">Instagram ↗</a></li>
              <li><a href={CONTATO.facebook} target="_blank" rel="noopener">Facebook ↗</a></li>
              <li><a href={CONTATO.whatsapp} target="_blank" rel="noopener">WhatsApp ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="fb-left">© 2026 Humanāre · Adriana Schneider</div>
          <div className="fb-center">
            Site desenvolvido por <a href="https://gangoorra.com" target="_blank" rel="noopener">@Gangoorra</a>
          </div>
          <div className="fb-right">Inspirando pessoas e empresas boas para o mundo</div>
        </div>
      </div>
    </footer>
  );
}

// ── Reveal-on-scroll ───────────────────────────────────────
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.1 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

Object.assign(window, {
  BrandMark, HumanareLockup, HumanareLogo, Nav, EmpresasMarquee, SecHead,
  Intermission,
  ManifestoStrip, PalestrasGrid, LivroSlice, CaminhoSlice,
  HumanareSolucoes, ImpactoStrip, CuradoriasGrid,
  Depoimentos,
  Eventos, RIWSlice, Newsletter, Footer, useReveal,
});
