// SERVICES. dark oxblood. Identity > THE WORK > SANCTUARY > BONUS > COMPREHENSIVE > INVITATION.
// Includes image placeholders for future photography.

const SANCTUARY_SERVICES = [
  'Psychic Readings',
  'Transmissions',
  'Light Language',
  'Messages From Above',
  'Energy Clearing',
  'House, Business or Property Clearing',
  'Protection Shield',
  'Sound Healing',
  'Energy Healing',
  'Cosmic Surgery',
  'Chakra Recalibration',
  'Clearing Energy Blockages',
  'Removal of Negative Implants',
  'Removal of Negative Technologies',
];

const RR_REMOVE = [
  'Fear', 'Limitations', 'Old Beliefs', 'Karmic Imprints',
  'Soul Contracts', 'Lower Timelines', 'Energetic Implants', '3D Matrix Programs',
];

const RR_RESTORE = [
  'Love', 'Empowerment', 'Soul Truth', 'Divine Blueprint',
  'Higher Timelines', 'Light Language Codes', 'High Frequency DNA', 'Sacred Sovereignty',
];

const PILLS = [
  'Arcturian Codes',
  'Sacred Geometry',
  'Dragon Soul Alliance',
  'Angelic Realm',
  'Higher Timeline',
  'Multidimensional Techniques',
  'Light Language',
];

function ServicePhoto({ variant = 'lead', label, ariaLabel }) {
  return (
    <div className={`s-photo s-photo--${variant}`} aria-label={ariaLabel || label}>
      <div className="s-photo__orb" aria-hidden="true"/>
      <div className="s-photo__label">{label}</div>
    </div>
  );
}

function ServiceRule() {
  return <hr className="services__rule" aria-hidden="true"/>;
}

function ChapterLabel({ children }) {
  return <p className="services__chapter-label">{children}</p>;
}

function Services({ onBook }) {
  return (
    <section className="section services scales" id="services">
      <div className="services__streaks"/>
      <div className="container">
        <Reveal as="div" className="services__head">
          <Eyebrow>My Healing Services</Eyebrow>
          <h2 className="h-section h-section--gold" style={{ marginBottom: 24 }}>
            I Walk Into The Parts Of You That Were Buried Alive.
          </h2>
          <p className="sub-italic" style={{ color: '#E07B2A' }}>
            It's my mission to raise the frequency of earth to restore the
            original blueprint and to awaken its children back into remembrance.
          </p>
        </Reveal>

        <Reveal as="div" className="services__identity" delay={100}>
          <div className="services__identity-portrait">
            <img className="services__identity-portrait-img" src="assets/jacob-services.jpeg" alt="Jacob Tapp"/>
          </div>
          <div className="services__identity-body">
            <h3 className="services__identity-name">JACOB</h3>
            <p className="services__identity-titles">
              Arcturian Healer<span className="sep">·</span>Dragon Soul Ally<span className="sep">·</span>Angelic Connector
            </p>
            <div className="services__identity-blurb">
              <p>Holds Codes of Purity, Power and Advanced Energy Healing</p>
              <p>Works with Angels, Dragon Souls and the Arcturian Council</p>
              <p>Bridging Star Systems to Accelerate Your Divine Evolution</p>
            </div>
          </div>
        </Reveal>

        <ServiceRule/>

        <Reveal as="div" className="services__rr" delay={100}>
          <div className="services__rr-grid">
            <div className="services__rr-col">
              <h4>Release and Remove</h4>
              <ul className="services__rr-list">
                {RR_REMOVE.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </div>
            <div className="services__rr-col">
              <h4>Restore and Upgrade</h4>
              <ul className="services__rr-list">
                {RR_RESTORE.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </div>
          </div>
          <p className="services__rr-statement">
            Restore Balance to the DNA Blueprint of Your Hologram
          </p>
          <p className="services__rr-tagline">
            Precise. Advanced. Intelligent. Pure Conscious Technology.
          </p>
        </Reveal>

        <ServiceRule/>

        <Reveal as="div" className="services__numbered" stagger>
          {SANCTUARY_SERVICES.map((title, i) => (
            <article key={title} className="n-card">
              <p className="n-card__num">{String(i + 1).padStart(2, '0')}</p>
              <h3 className="n-card__title">{title}</h3>
            </article>
          ))}
        </Reveal>

        <Reveal as="div" className="services__highlight" delay={120}>
          <p className="services__highlight-title">
            Removal of Black Magic, Witchcraft, Evil Spirits and Demons
          </p>
          <p className="services__highlight-sub">Comes free with all other services</p>
        </Reveal>

        <Reveal as="div" className="services__feature-photo" delay={120} threshold={0.12}>
          <ServicePhoto variant="feature" label="GRIDWORK · STARGATES · SACRED LAND" />
        </Reveal>

        <ServiceRule/>
        <Reveal as="div" className="services__guide" delay={60}>
          <h3 className="services__guide-title">How I Guide Your Transformation</h3>
          <p className="services__guide-body">
            Through intuitive healing, energy clearing, frequency activations,
            and soul-level restoration, each session is designed to help release
            old patterns, restore inner harmony, awaken deeper clarity, and
            reconnect you with the path your soul was always meant to walk.
          </p>
        </Reveal>

        <ServiceRule/>
        <Reveal as="div" className="services__connect" delay={60}>
          <h3 className="services__connect-title">What I Connect To During a Healing</h3>
          <div className="services__pills">
            {PILLS.map((p) => <span key={p} className="s-pill">{p}</span>)}
          </div>
        </Reveal>

        <ServiceRule/>

        <Reveal as="div" className="services__closing" delay={120}>
          <p className="services__closing-eyebrow">
            <span>Your Transformation Is My Mission</span>
            <span>Your Evolution Is My Joy</span>
          </p>
          <p className="services__closing-statement">
            You are not here by accident. You are here to remember who you truly are.
          </p>
          <p className="services__closing-note">
            We are here to walk with you every step of the way.
          </p>
        </Reveal>

        <Reveal as="div" className="services__cta" delay={120}>
          <Button size="lg" onClick={onBook}>Book a Session</Button>
          <p className="services__cta-note">
            or email <a href="mailto:333thecosmichealer@gmail.com">333thecosmichealer@gmail.com</a>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.Services = Services;