// Casa Site — main app. All sections, animations, FAQ, marquee.
const { useState: useSt, useEffect: useEf, useRef: useRf, useMemo: useMm } = React;

// ============ Smart image loader: tries external, fallback to placeholder ============
function SmartImg({ src, fallbackLabel, fallbackBg, fallbackFg, alt = "", className, style }) {
  const [err, setErr] = useSt(false);
  if (err || !src) {
    return <img src={window.casaPlaceholder(fallbackLabel || "imagem", 1200, 800, fallbackBg, fallbackFg)} alt={alt} className={className} style={style} />;
  }
  return <img src={src} alt={alt} className={className} style={style} onError={() => setErr(true)} />;
}

// ============ Header ============
function CasaHeader({ onNav }) {
  const [scrolled, setScrolled] = useSt(false);
  const [menuOpen, setMenuOpen] = useSt(false);
  useEf(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", fn, { passive: true });
    fn();
    return () => window.removeEventListener("scroll", fn);
  }, []);

  const items = [
    ["Início", "hero"],
    ["Quem somos", "sobre"],
    ["Atividades", "atividades"],
    ["Incentivadores", "incentivadores"],
    ["Como ajudar", "ajuda"],
    ["FAQ", "faq"],
    ["Acervo", "https://catalogo.aptechs.com.br/?projetocasa"],
    ["Contato", "contato"],
  ];

  return (
    <header className={"cs-header " + (scrolled ? "scrolled" : "")}>
      <a className="cs-brand" href="#hero" onClick={(e) => { e.preventDefault(); onNav("hero"); }}>
        <img src="assets/casa-logo.png" alt="Casa" />
        <div className="cs-brand-txt">
          <div className="b1">casa</div>
          <div className="b2">PROJETO COMUNITÁRIO</div>
        </div>
      </a>
      <nav className="cs-nav">
        {items.map(([label, href]) => href.startsWith("http") ? (
          <a key={label} href={href} target="_blank" rel="noreferrer" className="cs-nav-item">{label}</a>
        ) : (
          <a key={label} href={"#" + href} className="cs-nav-item" onClick={(e) => { e.preventDefault(); onNav(href); }}>{label}</a>
        ))}
      </nav>
      <a className="cs-cta" href="#ajuda" onClick={(e) => { e.preventDefault(); onNav("ajuda"); }}>Ajudar →</a>
      <button className="cs-burger" onClick={() => setMenuOpen(!menuOpen)} aria-label="menu">
        <span></span><span></span><span></span>
      </button>
      <div className={"cs-mobile-menu " + (menuOpen ? "open" : "")}>
        {items.map(([label, href]) => href.startsWith("http") ? (
          <a key={label} href={href} target="_blank" rel="noreferrer" onClick={() => setMenuOpen(false)}>{label}</a>
        ) : (
          <a key={label} href={"#" + href} onClick={(e) => { e.preventDefault(); onNav(href); setMenuOpen(false); }}>{label}</a>
        ))}
      </div>
    </header>
  );
}

// ============ Hero ============
function CasaHero() {
  const [mounted, setMounted] = useSt(false);
  useEf(() => { const t = setTimeout(() => setMounted(true), 100); return () => clearTimeout(t); }, []);
  return (
    <section id="hero" className="cs-hero" data-screen-label="01 Hero">
      <div className="cs-hero-bg">
        <div className="cs-blob b1"></div>
        <div className="cs-blob b2"></div>
        <div className="cs-blob b3"></div>
      </div>
      <div className="cs-hero-content">
        <div className={"cs-hero-eyebrow " + (mounted ? "in" : "")}>
          <span className="dot"></span> Vila São João · Desde 2019
        </div>
        <h1 className="cs-hero-title">
          <span className="line"><span className={"w " + (mounted ? "in" : "")} style={{ transitionDelay: "100ms" }}>Vivencie</span></span>
          <span className="line"><span className={"w " + (mounted ? "in" : "")} style={{ transitionDelay: "200ms" }}>a&nbsp;</span><span className={"w hl " + (mounted ? "in" : "")} style={{ transitionDelay: "320ms" }}>transformação</span></span>
          <span className="line"><span className={"w " + (mounted ? "in" : "")} style={{ transitionDelay: "440ms" }}>pela</span><span className={"w it " + (mounted ? "in" : "")} style={{ transitionDelay: "560ms" }}>&nbsp;cultura.</span></span>
        </h1>
        <p className={"cs-hero-sub " + (mounted ? "in" : "")} style={{ transitionDelay: "780ms" }}>
          O CASA é um centro de apoio social e aprendizado movido por voluntários. Biblioteca, oficinas e festivais — tudo gratuito, comunitário, aberto à Vila São João.
        </p>
        <div className={"cs-hero-cta-row " + (mounted ? "in" : "")} style={{ transitionDelay: "900ms" }}>
          <a className="cs-btn primary" href="#sobre">Conheça o projeto</a>
          <a className="cs-btn ghost" href="#ajuda">Quero ajudar</a>
        </div>
        <div className={"cs-hero-marks " + (mounted ? "in" : "")} style={{ transitionDelay: "1100ms" }}>
          <div className="mk"><b>100%</b> voluntário</div>
          <div className="mk"><b>Zero</b> burocracia</div>
          <div className="mk"><b>Aberto</b> a todas as idades</div>
        </div>
      </div>
      <div className="cs-hero-scroll" aria-hidden="true">
        <span>role para descobrir</span>
        <span className="arrow">↓</span>
      </div>
    </section>
  );
}

// ============ Sobre ============
function CasaSobre() {
  const [ref, visible] = window.useScrollReveal({ threshold: 0.2 });
  const n1 = window.useCountUp(2019, visible);
  const n2 = window.useCountUp(1500, visible, 1800);
  const n3 = window.useCountUp(7, visible);

  return (
    <section id="sobre" ref={ref} className={"cs-sobre reveal " + (visible ? "in" : "")} data-screen-label="02 Sobre">
      <div className="cs-sobre-grid">
        <div className="cs-sobre-text">
          <div className="cs-eyebrow">QUEM SOMOS</div>
          <h2 className="cs-h2">A casa de quem<br />acredita em <em>oportunidade</em>.</h2>
          <p className="cs-lead">
            O Centro de Apoio Social e Aprendizado — CASA — é um projeto comunitário sediado na Vila São João, movido inteiramente por voluntários. Desde 2019 transformamos vidas pelo acesso gratuito à cultura, à educação e ao convívio.
          </p>
          <p className="cs-body">
            Oferecemos uma biblioteca aberta, oficinas para todas as idades, internet livre e ações que celebram a comunidade. Faça uma visita e descubra o que está acontecendo agora.
          </p>
          <a className="cs-link" href="#atividades">Ver o que está rolando →</a>
        </div>
        <div className="cs-sobre-img">
          <SmartImg src={window.casaImageURL("foto1.jpg")} fallbackLabel="foto da casa — interior" fallbackBg="#FFD60A" fallbackFg="#1B2D5A" alt="Interior do CASA" className="cs-img-a" />
          <SmartImg src={window.casaImageURL("foto2.jpg")} fallbackLabel="foto da casa — atividade" fallbackBg="#E63946" fallbackFg="#FFF6E5" alt="Atividade no CASA" className="cs-img-b" />
          <div className="cs-img-tag">Vila São João, Minas Gerais</div>
        </div>
      </div>
      <div className="cs-stats-row">
        <div className="cs-stat"><b>{n1}</b><span>fundado em</span></div>
        <div className="cs-stat-divider"></div>
        <div className="cs-stat"><b>{n2.toLocaleString("pt-BR")}+</b><span>livros no acervo</span></div>
        <div className="cs-stat-divider"></div>
        <div className="cs-stat"><b>{n3} dias</b><span>aberto por semana</span></div>
        <div className="cs-stat-divider"></div>
        <div className="cs-stat"><b>100%</b><span>gratuito</span></div>
      </div>
    </section>
  );
}

// ============ Atividades ============
function CasaAtividades() {
  const [ref, visible] = window.useScrollReveal({ threshold: 0.1 });
  return (
    <section id="atividades" ref={ref} className={"cs-atv reveal " + (visible ? "in" : "")} data-screen-label="03 Atividades">
      <div className="cs-atv-head">
        <div className="cs-eyebrow alt">NOSSAS ATIVIDADES</div>
        <h2 className="cs-h2 inv">Três frentes,<br />um mesmo <em>chão</em>.</h2>
      </div>
      <div className="cs-atv-grid">
        {window.CASA_ATIVIDADES.map((a, i) => (
          <article key={a.n} className={"cs-atv-card accent-" + a.accent} style={{ transitionDelay: visible ? (i * 120) + "ms" : "0ms" }}>
            <div className="num">{a.n}</div>
            <div className="content">
              <h3>{a.title}</h3>
              <p>{a.blurb}</p>
              <div className="stat">
                <b>{a.stat}</b>
                <span>{a.statLabel}</span>
              </div>
              {a.href ? (
                <a className="cta" href={a.href} target="_blank" rel="noreferrer">{a.cta}</a>
              ) : (
                <a className="cta" href="#contato">{a.cta}</a>
              )}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ============ Photo break (full-bleed) ============
function CasaPhotoBreak() {
  const [ref, visible] = window.useScrollReveal({ threshold: 0.1 });
  return (
    <section ref={ref} className={"cs-photo-break reveal " + (visible ? "in" : "")} aria-hidden="true">
      <SmartImg src={window.casaImageURL("Foto%203.jfif")} fallbackLabel="foto comunidade — festival cultural" fallbackBg="#1B2D5A" fallbackFg="#FFD60A" alt="" />
      <div className="quote">
        <blockquote>
          <span className="qmark">"</span>
          A biblioteca não é o livro. É quem entra pra pegar emprestado.
        </blockquote>
        <cite>— equipe CASA</cite>
      </div>
    </section>
  );
}

// ============ Incentivadores (marquee) ============
function CasaIncentivadores() {
  const [ref, visible] = window.useScrollReveal();
  const items = [...window.CASA_INCENTIVADORES, ...window.CASA_INCENTIVADORES]; // duplicate for seamless loop
  return (
    <section id="incentivadores" ref={ref} className={"cs-inc reveal " + (visible ? "in" : "")} data-screen-label="04 Incentivadores">
      <div className="cs-inc-head">
        <div className="cs-eyebrow">NOSSOS INCENTIVADORES</div>
        <h2 className="cs-h2 sm">Quem <em>caminha</em> com a gente.</h2>
        <p className="cs-body">Parceiros que apoiam o CASA com produtos, serviços e doações. Sem eles, o espaço não respira.</p>
      </div>
      <div className="cs-marquee">
        <div className="cs-marquee-track">
          {items.map((it, i) => (
            <div key={i} className="cs-inc-logo">
              <SmartImg src={window.casaImageURL("incentivadores/" + it.file)} fallbackLabel={it.name} fallbackBg="#F4E4B8" fallbackFg="#1B2D5A" alt={it.name} />
            </div>
          ))}
        </div>
      </div>
      <div className="cs-marquee reverse">
        <div className="cs-marquee-track">
          {items.slice().reverse().map((it, i) => (
            <div key={i} className="cs-inc-logo">
              <SmartImg src={window.casaImageURL("incentivadores/" + it.file)} fallbackLabel={it.name} fallbackBg="#FFE9A8" fallbackFg="#1B2D5A" alt={it.name} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Como ajudar ============
function CasaAjuda() {
  const [ref, visible] = window.useScrollReveal({ threshold: 0.1 });
  return (
    <section id="ajuda" ref={ref} className={"cs-ajuda reveal " + (visible ? "in" : "")} data-screen-label="05 Como Ajudar">
      <div className="cs-ajuda-head">
        <div className="cs-eyebrow alt">COMO AJUDAR</div>
        <h2 className="cs-h2 inv">Existem várias <em>portas</em><br />pra entrar nessa casa.</h2>
      </div>
      <div className="cs-ajuda-grid">
        {window.CASA_AJUDA.map((a, i) => (
          <div key={i} className="cs-ajuda-card" style={{ transitionDelay: visible ? (i * 120) + "ms" : "0ms" }}>
            <div className="tag">{a.tag}</div>
            <div className="icon">{a.icon}</div>
            <h3>{a.title}</h3>
            <p>{a.body}</p>
            <a className="cta" href="https://wa.me/5533984532909" target="_blank" rel="noreferrer">{a.cta} →</a>
          </div>
        ))}
      </div>
      <div className="cs-ajuda-cta-band">
        <div className="t">Já decidiu como vai ajudar?</div>
        <a className="cs-btn primary big" href="https://wa.me/5533984532909" target="_blank" rel="noreferrer">Falar com a equipe no WhatsApp</a>
      </div>
    </section>
  );
}

// ============ FAQ ============
function FaqItem({ q, a, idx }) {
  const [open, setOpen] = useSt(false);
  return (
    <div className={"cs-faq-item " + (open ? "open" : "")}>
      <button className="cs-faq-q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span className="n">{String(idx + 1).padStart(2, "0")}</span>
        <span className="t">{q}</span>
        <span className="ic">{open ? "−" : "+"}</span>
      </button>
      <div className="cs-faq-a-wrap"><div className="cs-faq-a">{a}</div></div>
    </div>
  );
}
function CasaFaq() {
  const [ref, visible] = window.useScrollReveal({ threshold: 0.1 });
  return (
    <section id="faq" ref={ref} className={"cs-faq reveal " + (visible ? "in" : "")} data-screen-label="06 FAQ">
      <div className="cs-faq-head">
        <div className="cs-eyebrow">PERGUNTAS FREQUENTES</div>
        <h2 className="cs-h2">As dúvidas que mais ouvimos.</h2>
        <p className="cs-body">Se a sua não está aqui, faça uma visita ou chame no WhatsApp — a gente conversa.</p>
      </div>
      <div className="cs-faq-list">
        {window.CASA_FAQ.map((f, i) => <FaqItem key={i} q={f.q} a={f.a} idx={i} />)}
      </div>
    </section>
  );
}

// ============ Contato / Mapa ============
function CasaContato() {
  const [ref, visible] = window.useScrollReveal();
  return (
    <section id="contato" ref={ref} className={"cs-contato reveal " + (visible ? "in" : "")} data-screen-label="07 Contato">
      <div className="cs-contato-grid">
        <div className="cs-contato-text">
          <div className="cs-eyebrow alt">VENHA NOS VISITAR</div>
          <h2 className="cs-h2 inv">A porta tá <em>aberta</em>.</h2>
          <ul className="cs-contato-info">
            <li><b>Endereço</b><span>Rua Fernando Bianco de Almeida, 60<br />Vila São João — Minas Gerais</span></li>
            <li><b>WhatsApp</b><a href="https://wa.me/5533984532909" target="_blank" rel="noreferrer">(33) 98453-2909</a></li>
            <li><b>Instagram</b><a href="https://instagram.com/projeto.casa" target="_blank" rel="noreferrer">@projeto.casa</a></li>
            <li><b>Funcionamento</b><span>Aberto à comunidade — consulte agenda</span></li>
          </ul>
          <div className="cs-contato-cta">
            <a className="cs-btn primary" href="https://wa.me/5533984532909" target="_blank" rel="noreferrer">Mandar mensagem</a>
            <a className="cs-btn ghost light" href="https://instagram.com/projeto.casa" target="_blank" rel="noreferrer">Seguir no Insta</a>
          </div>
        </div>
        <div className="cs-contato-map">
          <iframe
            title="mapa-casa"
            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15188.828901471834!2d-41.4931077!3d-17.8757613!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xb377b9bc08287f%3A0xe9bd2d6b49a99484!2sProjeto%20CASA!5e0!3m2!1spt-BR!2sbr"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen=""
          />
        </div>
      </div>
    </section>
  );
}

// ============ Footer ============
function CasaFooter() {
  return (
    <footer className="cs-footer">
      <div className="cs-footer-top">
        <div>
          <div className="cs-brand-txt">
            <div className="b1">casa</div>
            <div className="b2">PROJETO COMUNITÁRIO</div>
          </div>
        </div>
        <div className="cs-footer-msg">
          Construindo a transformação pelo<br />acesso à cultura e à educação.
        </div>
      </div>
      <div className="cs-footer-bottom">
        <div>© {new Date().getFullYear()} Projeto CASA · Todos os direitos reservados</div>
        <div className="cs-footer-soc">
          <a href="https://instagram.com/projeto.casa" target="_blank" rel="noreferrer">Instagram</a>
          <a href="https://wa.me/5533984532909" target="_blank" rel="noreferrer">WhatsApp</a>
          <a href="https://catalogo.aptechs.com.br/?projetocasa" target="_blank" rel="noreferrer">Acervo</a>
        </div>
      </div>
    </footer>
  );
}

// ============ Main App ============
function CasaSite() {
  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" });
  };
  return (
    <div className="cs-root">
      <CasaHeader onNav={onNav} />
      <CasaHero />
      <CasaSobre />
      <CasaAtividades />
      <CasaPhotoBreak />
      <CasaIncentivadores />
      <CasaAjuda />
      <CasaFaq />
      <CasaContato />
      <CasaFooter />
    </div>
  );
}

window.CasaSite = CasaSite;