/* global React, ServiceIcon, ModalityIcon, MoonDivider, SunOrnament */

function Bio() {
  return (
    <section className="bio" id="sobre" data-screen-label="03 Bio">
      <div className="wrap bio-grid">
        <div className="bio-portrait">
          <span className="portrait-corner tl"></span>
          <span className="portrait-corner tr"></span>
          <span className="portrait-corner bl"></span>
          <span className="portrait-corner br"></span>
          <div className="portrait-img">
            <img src={window.__resources && window.__resources.bioPhoto || "assets/mitzi-bio.jpeg"} alt="Mitzi Lessa" className="portrait-photo" />
          </div>
          <div className="portrait-tag">Mitzi Lessa</div>
        </div>

        <div className="bio-text">
          <div className="eyebrow" style={{ color: 'var(--gold-deep)' }}>
            <span style={{ background: 'var(--gold-deep)', opacity: 0.6 }}></span>
            Quem é Mitzi Lessa
          </div>
          <h2>
            Facilitadora de processos de <em>autoconhecimento</em> e expansão da consciência.
          </h2>
          <p className="bio-lead">“Cada ser humano carrega dentro de si a chave para sua própria transformação. Meu papel é acender essa luz e guiar você a reencontrar o seu próprio equilíbrio.”


          </p>
          <div className="bio-body">
            <p>Sou holística, sensitiva e intuitiva, dons que me acompanham desde muito cedo. Desde a infância, percebi uma sensibilidade elevada para os campos sutis, energias e fenômenos espirituais, o que naturalmente me conduziu a um caminho de autodesenvolvimento e expansão da consciência.




            </p>
            <p>
              Hoje, dedico minha vida a atuar com harmonização energética e alinhamento
              espiritual, unindo métodos práticos e ensinamentos que me foram revelados
              ao longo da jornada — integrando sabedoria ancestral a abordagens energéticas
              contemporâneas.
            </p>
            <p>Meu trabalho tem como essência o autoconhecimento e a reconexão com o propósito de vida. Acredito que cada pessoa pode reencontrar, em si mesma, clareza e harmonia para caminhar.



            </p>
          </div>
          <dl className="bio-cred">
            <div>
              <dt>Atuação</dt>
              <dd>Mundo todo</dd>
            </div>
            <div>
              <dt>Idiomas</dt>
              <dd>PT · EN</dd>
            </div>
            <div>
              <dt>Espaço</dt>
              <dd>EUA</dd>
            </div>
          </dl>
        </div>
      </div>
    </section>);

}

function Services() {
  const items = [
  {
    icon: "eye",
    title: "Consultas Psíquicas & Intuitivas",
    desc: "Leituras profundas que unem percepção extra-sensorial e aconselhamento espiritual, trazendo clareza, orientação e direcionamento para sua vida.",
    meta: ["Online · Presencial"]
  },
  {
    icon: "angel",
    title: "Leitura de Cartas dos Anjos",
    desc: "Mensagens canalizadas através da simbologia angelical, revelando insights e respostas que promovem fé, proteção e renovação da esperança.",
    meta: ["Online · Presencial"]
  },
  {
    icon: "number",
    title: "Numerologia",
    desc: "Análise das influências numéricas em sua vida pessoal, ajudando a compreender padrões, talentos, desafios e ciclos de transformação.",
    meta: ["Online · Presencial"]
  },
  {
    icon: "astro",
    title: "Mapas Astrológicos Natais & Previsões",
    desc: "Interpretação personalizada dos posicionamentos planetários: missão de vida, desafios e caminhos para superação. Um guia de autoconhecimento para decisões conscientes.",
    meta: ["Online · Presencial"]
  },
  {
    icon: "radio",
    title: "Mesa Radiônica",
    desc: "Ferramenta vibracional para harmonização energética. Aplicada em indivíduos, residências, ambientes de trabalho, empresas e negócios — promovendo equilíbrio e prosperidade.",
    meta: ["Online · Presencial"]
  },
  {
    icon: "infinity",
    title: "Orientação para Relacionamentos",
    desc: "Sessões com abordagem holística e intuitiva para melhoraria das conexões, seja no trabalho ou na vida pessoal.",
    meta: ["Online · Presencial"]
  },
  {
    icon: "eye",
    title: "Sessão com Cristais",
    desc: "Aplicação de sessão com cristais para desbloqueio e alinhamento energético, trabalhando corpo físico e campos sutis em conjunto.",
    meta: ["Espaço Físico · EUA"]
  },
  {
    icon: "radio",
    title: "Reiki",
    desc: "Canalização de energia vital universal para restauração, relaxamento profundo e recondução do fluxo energético.",
    meta: ["Espaço Físico · EUA"]
  }];


  return (
    <section className="services" id="servicos" data-screen-label="04 Serviços">
      <div className="wrap">
        <div className="services-head">
          <div>
            <div className="section-num">/ 02 — PRÁTICAS</div>
            <h2 style={{ marginTop: 24 }}>
              Como posso <em>te acompanhar</em>.
            </h2>
          </div>
          <p>
            Um caminho multidisciplinar no campo espiritual — não restrito a uma única
            linha. Escolha a prática que mais ressoa com o seu momento.
          </p>
        </div>

        <div className="services-list">
          {items.map((s, i) =>
          <div className="service-row" key={i}>
              <div className="service-idx">
                {String(i + 1).padStart(2, "0")}.
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 10 }}>
                  <ServiceIcon kind={s.icon} />
                </div>
                <div className="service-title">{s.title}</div>
              </div>
              <div className="service-desc">{s.desc}</div>
              <div className="service-meta">
                {s.meta.map((m, j) => <div key={j}>{m}</div>)}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Modalities() {
  return (
    <section className="modalities" id="atendimento" data-screen-label="05 Atendimento">
      <div className="wrap">
        <div className="modalities-head">
          <div className="eyebrow" style={{ display: 'inline-flex' }}>Formas de Atendimento</div>
          <h2>
            Onde for mais <em>confortável</em> para você.
          </h2>
        </div>

        <div className="modalities-grid">
          <div className="modality-card">
            <div className="modality-icon"><ModalityIcon kind="in-person" /></div>
            <div className="modality-kicker">I. Presencial</div>
            <div className="modality-title">Espaço Holístico <em>nos EUA</em></div>
            <p className="modality-desc">Atendimento no meu Espaço Físico Holístico com todo conforto, privacidade e segurança que você merece. Ambiente preparado para sessões com cristais, Reiki e práticas presenciais.



            </p>
            <ul className="modality-list">
              <li>Sessão com Cristais & Reiki</li>
              <li>Sessões individuais</li>
              <li>Ambiente reservado e acolhedor</li>
            </ul>
            <a href="https://wa.me/+16035028749" className="btn" target="_blank" rel="noreferrer">
              Reservar Sessão Presencial
            </a>
          </div>

          <div className="modality-card">
            <div className="modality-icon"><ModalityIcon kind="online" /></div>
            <div className="modality-kicker">II. Online</div>
            <div className="modality-title">Do conforto da <em>sua casa</em></div>
            <p className="modality-desc">
              Sessões em plataformas virtuais seguras, com o mesmo nível de
              qualidade e comprometimento com o seu bem-estar. Para pessoas
              no mundo todo — em português ou inglês.
            </p>
            <ul className="modality-list">
              <li>Atendimento em PT e EN (em breve em todas as línguas pelo Google Meet)</li>
              <li>No seu fuso horário em horários pré-agendados</li>
              <li>Todas as práticas online disponíveis</li>
            </ul>
            <a href="https://wa.me/+16035028749" className="btn" target="_blank" rel="noreferrer">
              Agendar Sessão Online
            </a>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Bio, Services, Modalities });