/* global React, SunOrnament, TreeMark, MoonDivider */
const { useState } = React;

function Testimonials() {
  const items = [
  {
    initial: "G",
    text: "Como bodyworker sei a importância de se conectar corpo, mente e alma a um nível mais profundo, a fim de alcançar o seu verdadeiro potencial. Cada vez que vejo a Mitzi, saio me sentindo alinhado e energizado. Eu a recomendo para quem busca verdade e eficiência.",
    name: "Gregg Guillemette",
    meta: "Bodyworker"
  },
  {
    initial: "M",
    text: "Durante minhas sessões com Mitzi, comecei a ver meus desafios e minha vida de uma perspectiva diferente. Fiquei encantada com seu trabalho e profissionalismo e recomendei a familiares e amigos. Simplesmente amei esse trabalho e essa profissional.",
    name: "Mariah Barbosa",
    meta: "Cliente"
  },
  {
    initial: "L",
    text: "Desde 2013 participo de várias sessões com a Mitzi. Desde sessões com utilização de cristais e Reiki, Cartas de Tarot dos Anjos, Mesa Radiônica, Numerologia e Mapa Astrológico Natal. Mitzi tem sido muito importante e impactante em minha jornada.",
    name: "Liliane Davis",
    meta: "Cliente desde 2013"
  }];


  return (
    <section className="testimonials" data-screen-label="06 Depoimentos">
      <div className="wrap">
        <div className="testimonials-head">
          <div className="eyebrow" style={{ color: 'var(--gold-deep)', display: 'inline-flex' }}>Depoimentos</div>
          <h2>
            Histórias de quem <em>acendeu sua luz</em>.
          </h2>
        </div>
        <div className="testimonials-grid">
          {items.map((t, i) =>
          <div className="testimonial-card" key={i}>
              <div className="testimonial-quote-mark">“</div>
              <p className="testimonial-text">{t.text}</p>
              <div className="testimonial-who">
                <div className="testimonial-avatar">{t.initial}</div>
                <div>
                  <div className="testimonial-name">{t.name}</div>
                  <div className="testimonial-meta">{t.meta}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
  {
    q: "O que é uma sessão de orientação holística?",
    a: "É um espaço de escuta e reflexão que une percepção intuitiva, práticas energéticas e aconselhamento espiritual. O foco é ampliar a consciência sobre o que você está vivendo, identificar padrões e abrir caminhos para transformação — sempre respeitando o seu tempo e a sua trajetória."
  },
  {
    q: "Quem pode se beneficiar das sessões?",
    a: "Pessoas em busca de equilíbrio emocional, mental e espiritual; quem está em momentos de transição (carreira, relacionamentos, propósito); ou quem tem interesse em autodesenvolvimento, terapias integrativas e práticas energéticas. Atendo adultos de qualquer idade, com maioria entre 30 e 60 anos."
  },
  {
    q: "Como funciona o atendimento online?",
    a: "Após o agendamento, você recebe o link de uma plataforma virtual segura. Basta estar em um ambiente tranquilo, com boa conexão e alguns minutos antes do horário para se centrar. A qualidade e o comprometimento são os mesmos do atendimento presencial — e funciona para qualquer fuso horário."
  },
  {
    q: "Quanto tempo dura uma sessão de orientação holística?",
    a: "A duração varia conforme a prática escolhida: sessões intuitivas e leituras costumam durar entre 50 a 60 minutos."
  },
  {
    q: "Qual a diferença entre harmonização energética e alinhamento espiritual?",
    a: "A harmonização energética foca no reequilíbrio dos seus campos sutis e do ambiente ao seu redor — ideal para quem se sente sobrecarregado, disperso ou sem clareza. O alinhamento espiritual é um processo mais amplo, voltado à reconexão com propósito, intuição e sentido de vida. Os dois se complementam."
  },
  {
    q: "Preciso ter alguma crença específica para ser atendida?",
    a: "Não. O trabalho é acolhedor e respeita a sua visão de mundo. O que se pede é abertura — curiosidade para escutar o que surgir e coragem para olhar com honestidade para a própria trajetória."
  }];


  return (
    <section className="faq" data-screen-label="07 FAQ">
      <div className="wrap faq-grid">
        <div className="faq-head">
          <div className="section-num">/ 03 — ESCLARECIMENTOS</div>
          <h2>
            Dúvidas <em>frequentes</em>.
          </h2>
          <p>
            Respostas para as perguntas mais comuns antes da sua primeira sessão.
            Se ficar com qualquer outra dúvida, é só me chamar no WhatsApp.
          </p>
        </div>

        <div className="faq-list">
          {items.map((it, i) =>
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle">+</span>
              </button>
              <div className="faq-a">
                <p style={{ margin: 0, paddingRight: 40 }}>{it.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Contact() {
  return (
    <section className="contact" id="contato" data-screen-label="08 Contato">
      <div className="contact-star"><SunOrnament size={520} opacity={1} /></div>
      <div className="wrap contact-inner">
        <div className="eyebrow" style={{ display: 'inline-flex' }}>Vamos conversar</div>
        <h2>
          Dê o primeiro <em>passo</em> em direção ao seu equilíbrio.
        </h2>
        <p className="contact-sub">
          Escolha o canal que preferir. Respondo pessoalmente a cada mensagem —
          a primeira escuta é sem compromisso.
        </p>

        <div className="contact-methods">
          <a
            href="https://wa.me/+16035028749"
            target="_blank" rel="noreferrer"
            className="contact-method">
            
            <div className="contact-method-label">☎︎ WhatsApp</div>
            <div className="contact-method-value">Envie uma mensagem</div>
            <div className="contact-method-help">Clique aqui para tirar suas dúvidas ou agendar.</div>
          </a>
          <a
            href="mailto:mitzilessaofficial@gmail.com"
            className="contact-method">
            
            <div className="contact-method-label">✉ E-mail</div>
            <div className="contact-method-value">mitzilessaofficial@gmail.com</div>
            <div className="contact-method-help">Resposta em até 48 horas úteis.</div>
          </a>
        </div>

        <div style={{ marginTop: 80 }}>
          <MoonDivider />
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap foot-inner">
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src={window.__resources && window.__resources.logo || "assets/logo.png"} alt="Mitzi Lessa" className="foot-logo" />
          <span className="foot-brand">Mitzi Lessa</span>
        </div>
        <div className="foot-links">
          <a href="#sobre">Sobre</a>
          <a href="#servicos">Serviços</a>
          <a href="#contato">Contato</a>
        </div>
        <div>© MMXXVI · Todos os direitos reservados</div>
      </div>
      <div className="wrap">
        <p className="foot-disclaimer">As práticas oferecidas possuem caráter exclusivamente complementar, espiritual, energético e de desenvolvimento pessoal. Os atendimentos não constituem ato médico, psicológico, psicoterapêutico ou de qualquer outra profissão regulamentada da área da saúde. Todas as decisões pessoais, profissionais, financeiras, jurídicas e relacionadas à saúde permanecem sob responsabilidade exclusiva do cliente.




        </p>
      </div>
    </footer>);

}

Object.assign(window, { Testimonials, FAQ, Contact, Footer });