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

function Bio() {
  return (
    <section className="bio" id="about" 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>
            About Mitzi Lessa
          </div>
          <h2>
            Guiding journeys of <em>self-knowledge</em> and expanded consciousness.
          </h2>
          <p className="bio-lead">“Each human being carries within the key to their own transformation. My role is to awaken that light and support you in reconnecting with your own inner balance.”


          </p>
          <div className="bio-body">
            <p>I am a holistic practicioner, sensitive and intuitive — gifts that have walked with me since early childhood. From a young age I noticed a heightened sensitivity to subtle realms, energies, and spiritual phenomena, which naturally led me onto a path of self-development and expanded awareness.




            </p>
            <p>Today I dedicate my life to energy balancing and spiritual alignment, weaving together practical methods and teachings revealed throughout my journey — integrating ancient wisdom with contemporary energy practices.



            </p>
            <p>My work is rooted in self-knowledge, transformation, and reconnection with life’s purpose. I believe every person can rediscover, within themselves, the clarity and harmony needed to move forward.



            </p>
          </div>
          <dl className="bio-cred">
            <div>
              <dt>Reach</dt>
              <dd>Worldwide</dd>
            </div>
            <div>
              <dt>Languages</dt>
              <dd>EN · PT</dd>
            </div>
            <div>
              <dt>Studio</dt>
              <dd>New Hampshire, USA</dd>
            </div>
          </dl>
        </div>
      </div>
    </section>);

}

function Services() {
  const items = [
  {
    icon: "eye",
    title: "Psychic & Intuitive Readings",
    desc: "Deep readings that combine extra-sensory perception with spiritual counsel — bringing clarity, guidance, and direction for your life.",
    meta: ["Online · In-Person"]
  },
  {
    icon: "angel",
    title: "Angel Card Readings",
    desc: "Channeled messages through angelic symbolism, revealing insights and answers that nurture faith, protection, and renewed hope.",
    meta: ["Online · In-Person"]
  },
  {
    icon: "number",
    title: "Numerology",
    desc: "An analysis of the numerical influences in your personal life — helping you understand patterns, gifts, challenges, and cycles of transformation.",
    meta: ["Online · In-Person"]
  },
  {
    icon: "astro",
    title: "Natal Astrology Charts & Forecasts",
    desc: "Personalized interpretation of planetary placements: your life’s mission, challenges, and pathways forward. A guide for self-knowledge and conscious decisions.",
    meta: ["Online · In-Person"]
  },
  {
    icon: "radio",
    title: "Radionic Energy Work",
    desc: "A vibrational tool for energy harmonization. Applied to individuals, homes, workspaces, businesses, and ventures — fostering balance and intentional living.",
    meta: ["Online · In-Person"]
  },
  {
    icon: "infinity",
    title: "Relationship Guidance",
    desc: "Holistic and intuitive sessions designed to explore relationship dynamics and personal growth.",
    meta: ["Online · In-Person"]
  },
  {
    icon: "eye",
    title: "Crystal Session",
    desc: "A crystal-based energy session focused on relaxation, energetic awareness, and personal well-being.",
    meta: ["Studio · USA"]
  },
  {
    icon: "radio",
    title: "Reiki",
    desc: "Channeling universal life-force energy for relaxation and energetic well-being.",
    meta: ["Studio · USA"]
  }];


  return (
    <section className="services" id="practices" data-screen-label="04 Practices">
      <div className="wrap">
        <div className="services-head">
          <div>
            <div className="section-num">/ 02 — PRACTICES</div>
            <h2 style={{ marginTop: 24 }}>
              How I can <em>walk with you</em>.
            </h2>
          </div>
          <p>
            A multidisciplinary spiritual path — not bound to a single lineage.
            Choose the practice that resonates most with your moment.
          </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="sessions" data-screen-label="05 Sessions">
      <div className="wrap">
        <div className="modalities-head">
          <div className="eyebrow" style={{ display: 'inline-flex' }}>Session Formats</div>
          <h2>
            Wherever you feel most <em>at home</em>.
          </h2>
        </div>

        <div className="modalities-grid">
          <div className="modality-card">
            <div className="modality-icon"><ModalityIcon kind="in-person" /></div>
            <div className="modality-kicker">I. In-Person</div>
            <div className="modality-title">Healing Studio <em>in New Hampshire</em></div>
            <p className="modality-desc">Sessions at my private holystic studio, with all the comfort, privacy, and safety you deserve. A space prepared for crystal healing, Reiki, and other in-person practices.



            </p>
            <ul className="modality-list">
              <li>Crystal healing & Reiki</li>
              <li>Individual sessions</li>
              <li>A private, welcoming environment</li>
            </ul>
            <a href="https://wa.me/+16035028749" className="btn" target="_blank" rel="noreferrer">
              Book In-Person Session
            </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">From the comfort of <em>your home</em></div>
            <p className="modality-desc">
              Sessions on secure video platforms, with the same level of
              quality and care for your well-being. Available worldwide —
              in English or Portuguese.
            </p>
            <ul className="modality-list">
              <li>Sessions in EN and PT</li>
              <li>Any time zone</li>
              <li>All practices available online</li>
            </ul>
            <a href="https://wa.me/+16035028749" className="btn" target="_blank" rel="noreferrer">
              Book Online Session
            </a>
          </div>
        </div>
      </div>
    </section>);

}

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