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

function Testimonials() {
  const items = [
  {
    initial: "G",
    text: "As a bodyworker, I know how important it is to connect body, mind, and soul on a deeper level to reach your true potential. Every time I see Mitzi, I leave feeling aligned and energized. I recommend her to anyone seeking truth and effectiveness.",
    name: "Gregg Guillemette",
    meta: "Bodyworker"
  },
  {
    initial: "M",
    text: "During my sessions with Mitzi, I started seeing my challenges and my life from a different perspective. I was deeply moved by her work and professionalism, and I've recommended her to family and friends. I simply loved this work and this professional.",
    name: "Mariah Barbosa",
    meta: "Client"
  },
  {
    initial: "L",
    text: "Since 2013 I have taken part in many sessions with Mitzi — crystal healing, Reiki, Angel Tarot readings, Radionic Table, Numerology, and Natal Astrology. Mitzi has been deeply important and impactful on my journey.",
    name: "Liliane Davis",
    meta: "Client since 2013"
  }];


  return (
    <section className="testimonials" data-screen-label="06 Testimonials">
      <div className="wrap">
        <div className="testimonials-head">
          <div className="eyebrow" style={{ color: 'var(--gold-deep)', display: 'inline-flex' }}>Testimonials</div>
          <h2>
            Stories from those who <em>awakened their light</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: "What is a holistic guidance session?",
    a: "It is a space of listening and reflection that weaves together intuitive perception, energy practices, and spiritual counsel. The focus is to expand your awareness of what you are living, identify patterns, and open paths of transformation — always at your own pace."
  },
  {
    q: "Who can benefit from these sessions?",
    a: "People seeking emotional, mental, and spiritual balance; those navigating moments of transition (career, relationships, purpose); or anyone interested in self-development, integrative therapies, and energy practices. I work with adults of any age, with most clients between 30 and 60."
  },
  {
    q: "How does the online experience work?",
    a: "After scheduling, you will receive a link to a secure video platform. All you need is a quiet space, a steady connection, and a few minutes before the session to center yourself. The quality and care are the same as in-person — and it works across any time zone."
  },
  {
    q: "How long does a session last?",
    a: "Length varies by practice: intuitive sessions and readings usually last 50 to 60 minutes."
  },
  {
    q: "What is the difference between energy balancing and spiritual alignment?",
    a: "Energy balancing focuses on rebalancing your subtle fields and the environment around you — ideal when you feel overwhelmed, scattered, or unclear. Spiritual alignment is a broader process, oriented toward reconnection with purpose, intuition, and meaning. The two complement each other."
  },
  {
    q: "Do I need to hold a specific belief to be a client?",
    a: "No. The work is welcoming and respects your worldview. What is asked of you is openness — curiosity to listen to what arises, and the courage to look honestly at your own path."
  }];


  return (
    <section className="faq" data-screen-label="07 FAQ">
      <div className="wrap faq-grid">
        <div className="faq-head">
          <div className="section-num">/ 03 — CLARITY</div>
          <h2>
            Frequently asked <em>questions</em>.
          </h2>
          <p>
            Answers to the most common questions before your first session.
            For anything else, simply reach out on 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="contact" data-screen-label="08 Contact">
      <div className="contact-star"><SunOrnament size={520} opacity={1} /></div>
      <div className="wrap contact-inner">
        <div className="eyebrow" style={{ display: 'inline-flex' }}>Let’s talk</div>
        <h2>
          Take the first <em>step</em> toward your balance.
        </h2>
        <p className="contact-sub">
          Choose the channel you prefer. I personally reply to every message —
          and the first conversation is with no obligation.
        </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">Send a message</div>
            <div className="contact-method-help">Reach out with questions or to book your session.</div>
          </a>
          <a
            href="mailto:mitzilessaofficial@gmail.com"
            className="contact-method">
            
            <div className="contact-method-label">✉ Email</div>
            <div className="contact-method-value">mitzilessaofficial@gmail.com</div>
            <div className="contact-method-help">Reply within 48 business hours.</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="#about">About</a>
          <a href="#practices">Practices</a>
          <a href="#contact">Contact</a>
        </div>
        <div>© MMXXVI · All rights reserved</div>
      </div>
      <div className="wrap">
        <p className="foot-disclaimer">The services and practices offered on this website are spiritual, holistic, energy-based, and personal development services intended to support self-exploration, personal insight, and well-being.


These services are not medical, psychological, psychiatric, psychotherapeutic, counseling, or healthcare services, and are not intended to diagnose, treat, cure, prevent, or manage any physical, mental, or emotional condition.


Information provided during sessions is offered for personal and spiritual reflection only. All personal, medical, psychological, legal, financial, and professional decisions remain solely the responsibility of the client.


If you have a medical or mental health concern, please consult a licensed healthcare professional.</p>
      </div>
    </footer>);}Object.assign(window, { Testimonials, FAQ, Contact, Footer });