// Plenitude — site sections (after the kinetic hero)
const { useEffect: useEff2, useState: useS } = React;

const SANITY_PROJECT = 'f6r34f57';
const SANITY_DATASET = 'production';
const SANITY_API = `https://${SANITY_PROJECT}.api.sanity.io/v2024-01-01/data/query/${SANITY_DATASET}`;

function sanityFetch(groq) {
  const cacheKey = 'sanity_' + groq;
  const cached = sessionStorage.getItem(cacheKey);
  if (cached) return Promise.resolve(JSON.parse(cached));
  return fetch(`${SANITY_API}?query=${encodeURIComponent(groq)}`)
    .then(r => r.json())
    .then(r => {
      try { sessionStorage.setItem(cacheKey, JSON.stringify(r.result)); } catch(_) {}
      return r.result;
    });
}

/* ---------- Registration Modal ---------- */
function RegistrationModal({ interest, onClose }) {
  const [form, setForm] = useS({ name: '', phone: '', email: '' });
  const [status, setStatus] = useS('idle'); // idle | sending | success | error

  const update = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = e => {
    e.preventDefault();
    setStatus('sending');
    fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...form, interest })
    })
      .then(r => setStatus(r.ok ? 'success' : 'error'))
      .catch(() => setStatus('error'));
  };

  return (
    <div className="reg-overlay" onClick={onClose}>
      <div className="reg-modal" onClick={e => e.stopPropagation()}>
        <button className="reg-close" onClick={onClose} aria-label="Fechar">×</button>
        <div className="reg-eyebrow">Registrar interesse</div>
        {interest && <div className="reg-interest">{interest}</div>}
        <div className="reg-divider" />
        {status === 'success' ? (
          <div className="reg-success">
            <div className="reg-success-icon">✓</div>
            <p className="reg-success-msg">Recebemos seu interesse!</p>
            <p className="reg-success-sub">Entraremos em contato em breve.</p>
          </div>
        ) : (
          <form className="reg-form" onSubmit={submit}>
            <div className="reg-field">
              <label className="reg-label">Nome *</label>
              <input className="reg-input" type="text" required
                value={form.name} onChange={update('name')}
                placeholder="Seu nome completo" />
            </div>
            <div className="reg-field">
              <label className="reg-label">Celular *</label>
              <input className="reg-input" type="tel" required
                value={form.phone} onChange={update('phone')}
                placeholder="+55 (00) 00000-0000" />
            </div>
            <div className="reg-field">
              <label className="reg-label">E-mail *</label>
              <input className="reg-input" type="email" required
                value={form.email} onChange={update('email')}
                placeholder="seu@email.com" />
            </div>
            {status === 'error' && (
              <div className="reg-error">Algo deu errado. Tente novamente.</div>
            )}
            <button className="reg-submit" type="submit" disabled={status === 'sending'}>
              {status === 'sending' ? 'Enviando…' : 'Enviar interesse'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}

/* ---------- Manifesto / Quem somos ---------- */
function Manifesto() {
  return (
    <section id="about" className="section" data-screen-label="02 Quem somos">
      <div className="section-inner">
        <div className="reveal" style={{maxWidth: 720, marginBottom: 96}}>
          <div className="eyebrow-label">Quem somos</div>
          <h2 className="section-title">Um espaço<br/><span className="italic">para</span> voltar a você</h2>
        </div>

        <div className="manifesto">
          <div className="manifesto-numblock reveal">
            <div className="manifesto-num">01</div>
            <div className="manifesto-num-label">Bem-estar emocional</div>
          </div>
          <div className="reveal" data-stagger="2">
            <p className="manifesto-quote">
              Plenitude é uma plataforma dedicada ao bem-estar emocional e ao
              desenvolvimento pessoal — onde <span className="pull">terapias, cursos e espaços
              motivacionais</span> se encontram para acompanhar quem busca se conhecer melhor.
            </p>
            <p className="manifesto-body">
              Acreditamos que cada pessoa carrega dentro de si um movimento próprio.
              O trabalho da terapia não é acelerar esse movimento — é caminhar ao lado,
              em silêncio quando preciso, com palavra quando convocado.
            </p>
            <p className="manifesto-body">
              Nossas práticas integram abordagens individuais e grupais, presenciais e
              online, com profissionais escolhidos pessoalmente — pela formação, pela
              supervisão contínua e pela afinidade com o que defendemos.
            </p>
            <div className="signature">
              Germana Magalhães Carsten
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Marquee — Autodescobrimento ribbon ---------- */
function Marquee() {
  const phrase = (
    <span className="marquee-item">
      <span>Autodescobrimento</span>
      <span className="dot-sep" />
      <span className="ghost">Plenitude</span>
      <span className="dot-sep" />
      <span>Escuta</span>
      <span className="dot-sep" />
      <span className="ghost">Tempo</span>
      <span className="dot-sep" />
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {phrase}{phrase}{phrase}{phrase}
      </div>
    </div>
  );
}

/* ---------- Therapies ---------- */
function Therapies() {
  const [regModal, setRegModal] = useS(null);
  const items = [
    {
      cat: 'Atendimento individual',
      title: 'Terapia individual — SPOT',
      body: 'Sessões dirigidas, com foco em uma questão por encontro. Indicado para quem busca movimento prático em momentos de transição.',
      modes: ['Online', 'Presencial', '50 min']
    },
    {
      cat: 'Atendimento em grupo',
      title: 'Terapia de grupo',
      body: 'Encontros semanais em pequenos grupos (4 a 6 pessoas) que partilham um momento de vida. Conduzidos por dois terapeutas.',
      modes: ['Presencial', 'Semanal', '90 min']
    },
    {
      cat: 'Constelação familiar',
      title: 'Constelações abertas',
      body: 'Encontros mensais e abertos para quem quer experimentar a abordagem sistêmica. Inscrição prévia, sem compromisso de continuidade.',
      modes: ['Presencial', 'Mensal', '3 horas']
    },
  ];
  return (
    <>
      {regModal && <RegistrationModal interest={regModal} onClose={() => setRegModal(null)} />}
      <section id="therapies" className="section alt" data-screen-label="03 Terapias">
      <div className="section-inner">
        <div className="reveal" style={{maxWidth: 760}}>
          <div className="eyebrow-label">Terapias</div>
          <h2 className="section-title">Três<br/>caminhos</h2>
          <p className="section-lead">
            Sinta-se à vontade pra escolher o caminho que preferir. Para uma conversa individual escolha o SPOT.
          </p>
        </div>
        <div className="services">
          {items.map((it, i) => (
            <div key={it.title} className="svc-card reveal" data-stagger={i+1}>
              <div className="svc-glyph" />
              <div className="svc-cat">{it.cat}</div>
              <h3 className="svc-title">{it.title}</h3>
              <p className="svc-body">{it.body}</p>
              <div className="svc-modes">
                {it.modes.map(m => <span key={m} className="svc-mode">{m}</span>)}
              </div>
              <button className="svc-reg-btn" onClick={() => setRegModal(it.title)}>
                Registrar interesse
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
    </>
  );
}

/* ---------- Schedule (Cronograma) ---------- */
function Schedule() {
  const [months, setMonths] = useS([
    { m: 'Janeiro', y: '2026', events: [
      { d: '14', t: 'Constelação aberta — abertura do ano', meta: 'Sábado · 9h' },
      { d: '21', t: 'Início da turma de Labirinto I', meta: '12 encontros' },
      { d: '28', t: 'Roda de fala — Mulheres em transição', meta: 'Quarta · 19h30' },
    ]},
    { m: 'Fevereiro', y: '2026', events: [
      { d: '04', t: 'Imersão de carnaval — Ser Integral', meta: 'Sex–Dom · imersivo' },
      { d: '15', t: 'Início — O Casal: Noivos / Cônjuges / Pais', meta: '8 encontros' },
      { d: '22', t: 'Constelação aberta — Vínculos', meta: 'Sábado · 9h' },
    ]},
    { m: 'Março', y: '2026', events: [
      { d: '08', t: 'Encontro especial — Dia Internacional da Mulher', meta: 'Aberto · 19h' },
      { d: '14', t: 'Início — Labirinto II', meta: '12 encontros' },
      { d: '28', t: 'Workshop — Escrita biográfica', meta: 'Sábado · 4h' },
    ]},
  ]);

  useEff2(() => {
    sanityFetch(`*[_type == "scheduleEvent" && active == true] | order(date asc) {
      date, title, meta, registrationUrl
    }`).then(events => {
      if (!events || !events.length) return;
      const groups = {};
      events.forEach(ev => {
        const d = new Date(ev.date + 'T12:00:00');
        const key = `${d.getFullYear()}-${d.getMonth()}`;
        if (!groups[key]) groups[key] = {
          m: d.toLocaleString('pt-BR', { month: 'long' }).replace(/^\w/, c => c.toUpperCase()),
          y: String(d.getFullYear()),
          events: []
        };
        groups[key].events.push({
          d: String(d.getDate()).padStart(2, '0'),
          t: ev.title,
          meta: ev.meta,
          url: ev.registrationUrl
        });
      });
      setMonths(Object.values(groups));
    }).catch(() => {});
  }, []);

  return (
    <section id="schedule" className="section" data-screen-label="04 Cronograma">
      <div className="section-inner">
        <div className="reveal" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap: 32, marginBottom: 48}}>
          <div style={{maxWidth: 720}}>
            <div className="eyebrow-label">Cronograma</div>
            <h2 className="section-title">Próximos<br/>Eventos</h2>
          </div>
          <p className="section-lead" style={{maxWidth: 420}}>
            Datas abertas para os próximos três meses. Inscrições prévias garantem
            vaga e nos ajudam a preparar o encontro.
          </p>
        </div>

        <div>
          {months.map((mo, i) => (
            <div key={mo.m} className="schedule-row reveal" data-stagger={Math.min(i+1,5)}>
              <div className="schedule-month">{mo.m}<span className="yr">{mo.y}</span></div>
              <div className="schedule-events">
                {mo.events.map(ev => (
                  <div key={ev.d + ev.t} className="schedule-event">
                    <span className="schedule-date">{ev.d}</span>
                    <span className="schedule-event-title">
                      {ev.t}<span className="meta">{ev.meta}</span>
                    </span>
                  </div>
                ))}
              </div>

            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Therapists ---------- */
function Therapists() {
  const list = [
    {
      img: 'assets/terapeutas/germana.jpeg',
      cat: 'Fundadora · Psicanalista Sistêmica',
      name: 'Germana Magalhães Carsten',
      bio: 'Psicanalista Sistêmica\nConsteladora Familiar Pós-Graduada pela Hellinger Schule FAMILIENSTELLEN\nDesde 2002 a serviço do Campo das Constelações Familiares\nTerapeuta de Casal na abordagem da Inteligência Erótica de Barbara Ahlert e Terapeuta PNL - Programação Neurolinguista\nAssociada do Instituto Brasileiro de Consteladores Familiares IBCF e da Associação Brasileira de Consteladores Sistêmicos ABC SISTEMAS',
      meta: ''
    },
    {
      img: 'assets/terapeutas/caio.jpg',
      cat: 'Psicanálise & Sexualidade',
      name: 'Caio',
      bio: 'Psicanalista\nTerapeuta especializado em Relacionamentos e Sexualidade\nTerapeuta Sexual formado na Inteligência Erótica\nHipnólogo Ericksoniano pelo IBC',
      meta: ''
    }
  ];
  return (
    <section id="therapists" className="section alt" data-screen-label="05 Terapeutas">
      <div className="section-inner">
        <div className="reveal" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap: 24}}>
          <div style={{maxWidth: 720}}>
            <div className="eyebrow-label">Nossos terapeutas</div>
            <h2 className="section-title">Quem caminha<br/>com você</h2>
          </div>
        </div>

        <div className="therapists">
          {list.map((t, i) => (
            <div key={t.name} className="therapist reveal" data-stagger={i+1}>
              <div className="therapist-photo">
                {t.img
                  ? <img src={t.img} alt={t.name} style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center 20%'}} />
                  : <div className="ph-glyph">{t.initials}</div>
                }
              </div>
              <div className="therapist-cat">{t.cat}</div>
              <h3 className="therapist-name">{t.name}</h3>
              <p className="therapist-bio" style={{whiteSpace:'pre-line'}}>{t.bio}</p>
              {t.meta && <div className="therapist-meta">{t.meta}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Pattern band ---------- */
function PatternBand() {
  return <div className="pattern-band" aria-hidden="true" data-screen-label="06 Padrão" />;
}

/* ---------- Courses ---------- */
function Courses() {
  const [regModal, setRegModal] = useS(null);
  const [items, setItems] = useS([
    { n: '01', name: 'Ser Integral — O Grupo',   desc: 'Programa anual de formação pessoal em pequenos grupos. Encontros quinzenais, com leituras e supervisão.', tags: ['Anual · presencial', 'Inscrições abertas'] },
    { n: '02', name: 'O Casal',                  desc: 'Para noivos, cônjuges e pais. Oito encontros que olham para vínculo, escuta e o que se transmite entre gerações.', tags: ['8 encontros', 'Online ou presencial'] },
    { n: '03', name: 'Labirinto I',              desc: 'Primeiro módulo: introdução à abordagem biográfica. Para quem está começando o trabalho.', tags: ['12 encontros', 'Início em Janeiro'] },
    { n: '04', name: 'Labirinto II',             desc: 'Segundo módulo: aprofundamento em arquétipos e narrativa do eu. Pré-requisito: Labirinto I.', tags: ['12 encontros', 'Início em Março'] },
    { n: '05', name: 'Labirinto III',            desc: 'Módulo final: integração e produção da Biografia do Eu — síntese individual com supervisão.', tags: ['16 encontros', 'Início em Junho'] },
  ]);

  useEff2(() => {
    sanityFetch(`*[_type == "course" && active == true] | order(order asc) {
      order, name, description, primaryTag, statusTag
    }`).then(data => {
      if (!data || !data.length) return;
      setItems(data.map(c => ({
        n: String(c.order).padStart(2, '0'),
        name: c.name,
        desc: c.description,
        tags: [c.primaryTag, c.statusTag].filter(Boolean)
      })));
    }).catch(() => {});
  }, []);

  return (
    <>
      {regModal && <RegistrationModal interest={regModal} onClose={() => setRegModal(null)} />}
      <section id="courses" className="section" data-screen-label="07 Cursos">
      <div className="section-inner">
        <div className="reveal" style={{maxWidth: 760}}>
          <div className="eyebrow-label">Cursos</div>
          <h2 className="section-title">Programas<br/><span className="italic">de</span>Terapias</h2>
          <p className="section-lead">
            Trabalhos de longa duração para quem deseja continuar o que começou na terapia,
            ou para profissionais que buscam aprofundamento em abordagens biográficas.
          </p>
        </div>

        <div className="courses-list">
          {items.map((it, i) => (
            <div key={it.n} className="course-row reveal" data-stagger={Math.min(i+1, 5)}
              onClick={() => setRegModal(it.name)}>
              <div className="course-num">{it.n}</div>
              <div>
                <h3 className="course-name">{it.name}</h3>
                <p className="course-desc">{it.desc}</p>
              </div>
              <div className="course-tags">
                {it.tags.map((t, j) => (
                  <div key={t} className={`course-tag ${j === 1 ? 'bright' : ''}`}>{t}</div>
                ))}
              </div>
              <div className="course-arrow">↗</div>
            </div>
          ))}
        </div>
      </div>
    </section>
    </>
  );
}

/* ---------- Espaço Motivacional ---------- */
function Motivacional() {
  const [articles, setArticles] = useS([
    { cat: 'Ensaio',   title: 'Sobre o tempo que não se apressa', personName: 'Khalil Carsten', readTime: '7 min de leitura', modalText: '' },
    { cat: 'Carta',    title: 'Para quem está em transição',      personName: 'Paula Martins',  readTime: '4 min',            modalText: '' },
    { cat: 'Reflexão', title: 'A escuta como forma de cuidado',   personName: 'Khalil Carsten', readTime: '9 min',            modalText: '' },
    { cat: 'Diário',   title: 'Manhãs lentas (uma defesa)',       personName: 'Khalil Carsten', readTime: '5 min',            modalText: '' },
  ]);
  const [modal, setModal] = useS(null);

  useEff2(() => {
    sanityFetch(`*[_type == "motivacionalPost" && active == true] | order(order asc) {
      cat, title, personName, readTime, modalText
    }`).then(data => {
      if (data && data.length) setArticles(data);
    });
  }, []);

  const closeModal = () => setModal(null);

  return (
    <>
      {modal && (
        <div className="moti-modal-overlay" onClick={closeModal}>
          <div className="moti-modal" onClick={e => e.stopPropagation()}>
            <button className="moti-modal-close" onClick={closeModal} aria-label="Fechar">×</button>
            <div className="moti-modal-cat">{modal.cat}</div>
            <h2 className="moti-modal-title">{modal.title}</h2>
            <div className="moti-modal-meta">{modal.personName}{modal.readTime ? ' · ' + modal.readTime : ''}</div>
            <p className="moti-modal-body">{modal.modalText || 'Conteúdo em breve.'}</p>
          </div>
        </div>
      )}
      <section className="section dark" data-screen-label="08 Espaço motivacional">
        <div className="section-inner">
          <div className="motivacional">
            <div>
              <div className="eyebrow-label reveal">Espaço motivacional</div>
              <p className="moti-quote reveal" data-stagger="1">
                Voltar para si não é um destino — é uma direção.
                É a paciência de escutar, de novo, o que já se sabia há muito tempo.
              </p>
              <div className="moti-attr reveal" data-stagger="2">Germana Magalhães</div>
              <div className="moti-attr-sub reveal" data-stagger="2">Curadora do espaço motivacional, escritora</div>
            </div>
            <div className="moti-articles">
              {articles.map((a, i) => (
                <div
                  key={a.title}
                  className="moti-article reveal"
                  data-stagger={Math.min(i+2,5)}
                  onClick={() => setModal(a)}
                  style={{cursor:'pointer'}}
                >
                  <div className="moti-article-cat">{a.cat}</div>
                  <h3 className="moti-article-title">{a.title}</h3>
                  <div className="moti-article-meta">{a.personName}{a.readTime ? ' · ' + a.readTime : ''}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ---------- Gallery ---------- */
function Gallery() {
  const [tiles, setTiles] = useS([
    { cls: 'gt-1', label: 'Roda de fala — abertura 2025', num: '01 / 08', imageUrl: null },
    { cls: 'gt-2', label: 'Imersão Ser Integral · Sítio',  num: '02 / 08', imageUrl: null },
    { cls: 'gt-3', label: 'Labirinto II',                  num: '03 / 08', imageUrl: null },
    { cls: 'gt-4', label: 'Constelação aberta',            num: '04 / 08', imageUrl: null },
    { cls: 'gt-5', label: 'Detalhe',                       num: '05 / 08', imageUrl: null },
    { cls: 'gt-6', label: 'Espaço — São Paulo',            num: '06 / 08', imageUrl: null },
    { cls: 'gt-7', label: 'Equipe · 2024',                 num: '07 / 08', imageUrl: null },
    { cls: 'gt-8', label: 'Workshop biográfico',           num: '08 / 08', imageUrl: null },
  ]);

  useEff2(() => {
    sanityFetch(`*[_type == "galleryTile" && active == true] | order(order asc) {
      order, label, "imageUrl": image.asset->url
    }`).then(data => {
      if (!data || !data.length) return;
      const total = data.length;
      setTiles(data.map((t, i) => ({
        cls: `gt-${i + 1}`,
        label: t.label,
        num: `${String(i + 1).padStart(2, '0')} / ${String(total).padStart(2, '0')}`,
        imageUrl: t.imageUrl
      })));
    }).catch(() => {});
  }, []);

  return (
    <section className="section alt" data-screen-label="09 Galeria">
      <div className="section-inner">
        <div className="reveal" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap: 32}}>
          <div style={{maxWidth: 720}}>
            <div className="eyebrow-label">Galeria</div>
            <h2 className="section-title">Encontros<br/><span className="italic">e</span> espaços</h2>
          </div>
          <p className="section-lead" style={{maxWidth: 380}}>
            Imagens de eventos, oficinas e do nosso espaço. Atualizada a cada novo ciclo.
          </p>
        </div>
        <div className="gallery reveal">
          {tiles.map(t => (
            <div
              key={t.cls}
              className={`gallery-tile ${t.cls}`}
              style={t.imageUrl ? {
                backgroundImage: `url(${t.imageUrl}?w=900&fit=crop&auto=format)`,
                backgroundSize: 'cover',
                backgroundPosition: 'center'
              } : {}}
            >
              {!t.imageUrl && <div className="ghost-mandala" />}
              <div className="num">{t.num}</div>
              <div className="label">{t.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA Band ---------- */
function CtaBand() {
  return (
    <section id="contact" className="cta-band" data-screen-label="10 CTA">
      <div className="cta-band-pattern" />
      <div className="cta-band-mandala left" />
      <div className="cta-band-mandala" />
      <div className="cta-band-inner">
        <h2 className="cta-band-title reveal">Comece quando<br/><span className="italic">fizer</span> sentido</h2>
        <p className="cta-band-lead reveal" data-stagger="1">
          Sinta-se à vontade pra escolher o caminho que preferir. Para uma conversa individual escolha o SPOT.
        </p>
        <a className="btn-cta-light reveal" data-stagger="2"
          href="https://wa.me/5561984222929" target="_blank" rel="noopener noreferrer">Agendar conversa</a>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer" data-screen-label="11 Footer">
      <div className="footer-inner">
        <div>
          <div className="footer-logo"><img src="assets/logo-vertical-white.png" alt="Plenitude"/></div>
          <p className="footer-tagline">
            Plenitude — Autodescobrimento. Bem-estar emocional e desenvolvimento pessoal,
            com escuta, com tempo.
          </p>
        </div>
        <div>
          <h4 className="footer-col-title">Navegar</h4>
          <span className="footer-link">Quem somos</span>
          <span className="footer-link">Cronograma</span>
          <span className="footer-link">Terapias</span>
          <span className="footer-link">Cursos</span>
          <span className="footer-link">Galeria</span>
        </div>
        <div>
          <h4 className="footer-col-title">Conteúdo</h4>
          <span className="footer-link">Espaço motivacional</span>
          <a className="footer-link" href="https://www.plenitudeblog.com/" target="_blank" rel="noopener noreferrer">Blog</a>
        </div>
        <div>
          <h4 className="footer-col-title">Contato</h4>
          <span className="footer-link">plenitude.autodescobrimento@gmail.com</span>
          <span className="footer-link">+55 61 9 84222929</span>
          <span className="footer-link">Instagram</span>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Plenitude. Todos os direitos reservados.</span>
        <span>Política de privacidade · Termos · LGPD</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Manifesto, Marquee, Therapies, Schedule, Therapists,
  PatternBand, Courses, Motivacional, Gallery, CtaBand, Footer,
  RegistrationModal
});