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

/* ----------------------------- ícones ----------------------------- */
const Icon = {
  whats: (p) =>
  <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M.06 24l1.68-6.13A11.86 11.86 0 0 1 .16 11.9C.16 5.34 5.5 0 12.06 0a11.82 11.82 0 0 1 8.42 3.49 11.82 11.82 0 0 1 3.48 8.42c0 6.56-5.34 11.9-11.9 11.9a11.9 11.9 0 0 1-5.69-1.45L.06 24zM6.6 20.13l.36.21a9.86 9.86 0 0 0 5.02 1.38h.01c5.45 0 9.89-4.43 9.89-9.88a9.83 9.83 0 0 0-2.9-6.99 9.82 9.82 0 0 0-6.98-2.9c-5.46 0-9.9 4.43-9.9 9.88 0 1.86.52 3.68 1.51 5.25l.24.38-1 3.63 3.75-.97zm11.39-5.55c-.07-.12-.27-.2-.57-.35-.3-.15-1.76-.87-2.03-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.48 0 1.46 1.06 2.87 1.21 3.07.15.2 2.09 3.2 5.07 4.48.71.31 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.17-1.42z" /></svg>,

  insta: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="2.5" y="2.5" width="19" height="19" rx="5.5" /><circle cx="12" cy="12" r="4.2" /><circle cx="17.6" cy="6.4" r="1.1" fill="currentColor" stroke="none" /></svg>,

  mail: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="2.5" y="4.5" width="19" height="15" rx="2.5" /><path d="M3 6.5l9 6 9-6" /></svg>,

  arrow: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>,

  plus: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14" /></svg>,

  play: (p) =>
  <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M8 5.14v13.72a1 1 0 0 0 1.5.87l11-6.86a1 1 0 0 0 0-1.72l-11-6.86A1 1 0 0 0 8 5.14z" /></svg>,

  menu: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...p}><path d="M4 7h16M4 12h16M4 17h16" /></svg>

};

const WA = "https://wa.me/5521979367321?text=" + encodeURIComponent("Olá, eu gostaria de agendar uma consulta.");
const LOGO = ((typeof window !== 'undefined' && window.__resources) || {}).logo || "assets/logo-3d.png";
const WORDMARK = ((typeof window !== 'undefined' && window.__resources) || {}).wordmark || "assets/logo-wordmark.png";

/* ----------------------------- placeholder ----------------------------- */
function Ph({ label, style }) {
  return <div className="ph" style={style}><span>{label}</span></div>;
}

/* ----------------------------- hook: reveal ----------------------------- */
function useReveal() {
  useEffect(() => {
    const root = document.documentElement;
    const els = Array.from(document.querySelectorAll('.reveal'));
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce || !('IntersectionObserver' in window)) return; // leave everything visible
    // arm the hidden state, then reveal — guarantees a clean 0 -> 1 transition
    root.classList.add('js-anim');
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}});
    }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
    requestAnimationFrame(() => requestAnimationFrame(() => {
      const vh = window.innerHeight;
      els.forEach((el) => {
        // already visible on load -> leave static (no flash); only animate items scrolled into view
        if (el.getBoundingClientRect().top >= vh * 0.9) io.observe(el);
      });
    }));
    return () => {io.disconnect();};
  }, []);
}

/* ============================== NAV ============================== */
const NAV_LINKS = [
{ href: "#sobre", label: "Sobre" },
{ href: "#servicos", label: "Atendimento" },
{ href: "#depoimentos", label: "Depoimentos" },
{ href: "#duvidas", label: "Dúvidas" }];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    if (!menuOpen) return;
    document.documentElement.style.overflow = 'hidden';
    return () => { document.documentElement.style.overflow = ''; };
  }, [menuOpen]);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "") + (menuOpen ? " menu-open" : "")}>
      <div className="wrap nav-inner">
        <a href="#topo" className="brandmark" onClick={() => setMenuOpen(false)}>
          <img className="logo-img" src={LOGO} alt="Sayonara Sobrinho" />
          <img className="logo-wordmark" src={WORDMARK} alt="Sayonara Sobrinho · Terapeuta Emocional" />
        </a>
        <nav className="nav-links">
          {NAV_LINKS.map((l) => <a className="link" key={l.href} href={l.href}>{l.label}</a>)}
          <a className="btn nav-cta" href={WA} target="_blank" rel="noreferrer">Agendar sessão</a>
        </nav>
        <button className="nav-burger" onClick={() => setMenuOpen((v) => !v)} aria-label={menuOpen ? "Fechar menu" : "Abrir menu"} aria-expanded={menuOpen}>
          {menuOpen ? <Icon.plus className="ico" style={{ transform: 'rotate(45deg)' }} /> : <Icon.menu className="ico" />}
        </button>
      </div>
      <div className="nav-mobile">
        {NAV_LINKS.map((l) => <a className="nav-mobile-link" key={l.href} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>)}
        <a className="btn nav-mobile-cta" href={WA} target="_blank" rel="noreferrer" onClick={() => setMenuOpen(false)}>
          <Icon.whats className="ico" /> Agendar sessão
        </a>
      </div>
    </header>);

}

/* ============================== HERO ============================== */
function Hero({ photo }) {
  return (
    <section id="topo" className="hero">
      <div className="wrap hero-inner">
        <div className="hero-copy reveal">
          <p className="eyebrow">Terapeuta Emocional Registro CITRG 10808</p>
          <h1 className="h-xl hero-title">Toda emoção<br />tem lógica.</h1>
          <p className="lead hero-lead">
            Ajudo pessoas a romper padrões emocionais que geram sofrimento e prejuízos.
          </p>
          <div className="hero-actions">
            <a className="btn" href={WA} target="_blank" rel="noreferrer">
              <Icon.whats className="ico" /> Agendar pelo WhatsApp
            </a>
          </div>
          <ul className="hero-trust">
            <li><strong>25+</strong> anos de experiência</li>
            <li><strong>Registro</strong> CITRG 10808</li>
            <li><strong>Presencial</strong> e online</li>
          </ul>
        </div>
        <div className="hero-media reveal">
          <div className="hero-photo">
            {photo ?
            <img src={photo} alt="Sayonara Sobrinho, terapeuta emocional" /> :
            <Ph label="foto · Sayonara" style={{ aspectRatio: '3/4' }} />}
          </div>
          <div className="hero-quote">
            <span>“</span>
            <p>Chega de ser um reflexo das dores do passado.</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================== SOBRE ============================== */
function Sobre({ photo }) {
  return (
    <section id="sobre" className="section sobre">
      <div className="wrap grid sobre-grid">
        <div className="sobre-media reveal">
          {photo ?
          <img src={photo} alt="Sayonara Sobrinho" className="sobre-img" /> :
          <Ph label="foto · retrato" style={{ aspectRatio: '4/5', borderRadius: 'var(--radius-lg)' }} />}
          <div className="sobre-badge">
            <strong>25</strong>
            <span>anos tratando<br />emoções pela raiz</span>
          </div>
        </div>
        <div className="sobre-copy reveal">
          <p className="eyebrow">Sobre mim</p>
          <h2 className="h-lg" style={{ fontSize: "clamp(30px, 7vw, 47px)", letterSpacing: "0px", maxWidth: "510px", width: "100%", fontFamily: "\"Quiche Sans\"" }}>Cuidado, propósito e<br />compromisso com<br />cada história.</h2>
          <div className="sobre-text">
            <p>Sou <strong>Sayonara Sobrinho</strong>, terapeuta emocional TRG.</p>
            <p>Especialista em transtornos emocionais graves.</p>
            <p>Mais de 25 anos de experiência dedicados ao desenvolvimento emocional, atuando como terapeuta, professora e diretora universitária.</p>
            <p>Pacientes em mais de 6 países.</p>
            <p>Pastora, mãe e avó.</p>
          </div>
          <p className="signature">Sayonara Sobrinho</p>
        </div>
      </div>
    </section>);

}

/* ============================== COMO POSSO TE AJUDAR ============================== */
const CONDITIONS = [
{ t: "Ansiedade" },
{ t: "Depressão" },
{ t: "Baixa autoestima" },
{ t: "Relacionamentos" },
{ t: "Autossabotagem" }];

function Servicos() {
  return (
    <section id="servicos" className="section servicos">
      <div className="wrap">
        <div className="sec-head reveal">
          <p className="eyebrow">Como posso te ajudar</p>
          <h2 className="h-lg">Sou especialista em<br />transtornos emocionais.</h2>
          <p className="lead" style={{ marginTop: 20 }}>
            Tratamos a raiz do problema, não apenas os sintomas.
          </p>
        </div>
        <div className="cond-grid">
          {CONDITIONS.map((s, i) =>
          <article className="cond reveal" key={s.t} style={{ transitionDelay: `${i * 50}ms` }}>
              <span className="svc-dot" />
              <h3 className="cond-t">{s.t}</h3>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ============================== DEPOIMENTOS ============================== */
const TESTIMONIALS = [
{ t: "Depoimento da Sarah Abreu", video: "assets/videos/depoimento-sara.mp4" },
{ t: "Depoimento da mãe do Noah", video: "assets/videos/depoimento-mae.mp4" },
{ t: "Depoimento do Artur", video: "assets/videos/depoimento-artur.mp4" }];

function VideoModal({ item, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  if (!item) return null;
  return (
    <div className="video-modal" onClick={onClose}>
      <div className="video-modal-inner" onClick={(e) => e.stopPropagation()}>
        <button className="video-modal-close" onClick={onClose} aria-label="Fechar"><Icon.plus className="ico" /></button>
        <video src={item.video} controls autoPlay playsInline title={item.t} />
      </div>
    </div>);

}

function Depoimentos() {
  const [open, setOpen] = useState(null);
  return (
    <section id="depoimentos" className="section depo-lean">
      <div className="wrap">
        <div className="sec-head reveal" style={{ textAlign: 'center' }}>
          <p className="eyebrow center">Depoimentos</p>
          <h2 className="h-lg" style={{ textAlign: 'center' }}>Histórias de quem<br />já passou por aqui.</h2>
        </div>
        <div className="testi-grid">
          {TESTIMONIALS.map((t, i) =>
          <button className="testi reveal" key={t.t} style={{ transitionDelay: `${i * 60}ms` }} onClick={() => setOpen(t)} aria-label={`Assistir: ${t.t}`}>
              <span className="testi-thumb">
                <video src={t.video + '#t=0.5'} muted playsInline preload="metadata" />
                <span className="testi-play"><Icon.play className="ico" /></span>
              </span>
              <p className="testi-t">{t.t}</p>
            </button>
          )}
        </div>
      </div>
      <VideoModal item={open} onClose={() => setOpen(null)} />
    </section>);

}

/* ============================== FAQ ============================== */
const FAQS = [
{ q: "Quanto tempo dura cada sessão?", a: "50 minutos." },
{ q: "Qual é o preço da sessão?", a: "Trabalhamos com sessão avulsa e pacotes de acompanhamento. Para conhecer as opções e formas de pagamento, fale comigo pelo WhatsApp." },
{ q: "Você atende por plano de saúde?", a: "Os atendimentos são particulares, mas forneço o recibo para que você possa solicitar o reembolso diretamente com o seu convênio." },
{ q: "O atendimento é online ou presencial?", a: "Os dois, com o mesmo cuidado e profundidade. Você escolhe a modalidade que melhor se encaixa na sua rotina." }];

function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section id="duvidas" className="section faq">
      <div className="wrap faq-inner">
        <div className="faq-aside reveal">
          <p className="eyebrow">Dúvidas</p>
          <h2 className="h-lg">Fale comigo<br />diretamente.</h2>
          <a className="btn btn-ghost" style={{ marginTop: 18 }} href={WA} target="_blank" rel="noreferrer"><Icon.whats className="ico" /> Conversar no WhatsApp</a>
        </div>
        <div className="faq-list reveal">
          {FAQS.map((f, i) =>
          <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <Icon.plus className="faq-ico" />
              </button>
              <div className="faq-a"><div className="faq-a-inner"><p className="muted">{f.a}</p></div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================== CONTATO ============================== */
function Contato() {
  return (
    <section id="contato" className="section contato">
      <div className="wrap contato-card reveal">
        <p className="eyebrow center">Busque ajuda!</p>
        <h2 className="h-xl contato-title">Quem tem dor<br />tem pressa.</h2>
        <p className="lead" style={{ margin: '0 auto', textAlign: 'center' }}>
          Envie uma mensagem e dê o primeiro passo para compreender e tratar a origem dos padrões que ainda impactam a sua vida.
        </p>
        <a className="btn contato-btn" href={WA} target="_blank" rel="noreferrer">
          <Icon.whats className="ico" /> Agendar pelo WhatsApp
        </a>
        <div className="contato-links">
          <a href={WA} target="_blank" rel="noreferrer"><Icon.whats className="ico" /> (21) 97936-7321</a>
          <a href="https://instagram.com/sayonara_sobrinho" target="_blank" rel="noreferrer"><Icon.insta className="ico" /> @sayonara_sobrinho</a>
          <a href="mailto:sayonaralsobrinho@gmail.com"><Icon.mail className="ico" /> sayonaralsobrinho@gmail.com</a>
        </div>
      </div>
    </section>);

}

/* ============================== FOOTER ============================== */
const TRUST = ["Horários flexíveis", "Sigilo garantido", "Ambiente acolhedor", "Livre de julgamentos"];
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <ul className="footer-trust">
          {TRUST.map((t) => <li key={t}><span className="svc-dot" />{t}</li>)}
        </ul>
        <div className="footer-inner">
          <a href="#topo" className="brandmark">
            <img className="logo-img" src={LOGO} alt="Sayonara Sobrinho" />
            <img className="logo-wordmark" src={WORDMARK} alt="Sayonara Sobrinho · Terapeuta Emocional" />
          </a>
          <p className="footer-tag">“Toda emoção tem lógica.”</p>
          <p className="footer-meta muted">Atendimento online e presencial · Registro CITRG 10808</p>
        </div>
        <p className="footer-copy muted">© 2026 Sayonara Sobrinho · Todos os direitos reservados</p>
      </div>
    </footer>);

}

/* ============================== FLOAT WA ============================== */
function FloatWA() {
  return (
    <a className="float-wa" href={WA} target="_blank" rel="noreferrer" aria-label="Agendar no WhatsApp">
      <Icon.whats style={{ width: 26, height: 26 }} />
    </a>);

}

Object.assign(window, {
  Icon, Ph, useReveal, Nav, Hero, Sobre, Servicos, Depoimentos, Faq, Contato, Footer, FloatWA, WA
});