// SOULPATH. celestial blue/indigo with twinkling star field.

function SoulPathStars() {
  const stars = useMemo(() => {
    return Array.from({ length: 100 }, () => ({
      left: Math.random() * 100,
      top: Math.random() * 100,
      size: 1 + Math.random() * 3,
      opacity: 0.4 + Math.random() * 0.5,
      duration: 3 + Math.random() * 4,
      delay: Math.random() * 6,
    }));
  }, []);
  return (
    <div className="soulpath__stars">
      {stars.map((s, i) => (
        <span key={i} style={{
          position: 'absolute',
          left: `${s.left}%`,
          top: `${s.top}%`,
          width: s.size, height: s.size,
          borderRadius: '999px',
          background: '#FFE9B0',
          boxShadow: `0 0 ${s.size * 3}px rgba(255,233,176,0.9)`,
          opacity: s.opacity,
          animation: `twinkle ${s.duration}s ease-in-out ${s.delay}s infinite`,
        }}/>
      ))}
      <style>{`
        @keyframes twinkle {
          0%,100% { opacity: var(--twinkle-min, 0.4); transform: scale(1); }
          50%     { opacity: 1; transform: scale(1.4); }
        }
      `}</style>
    </div>
  );
}

const SOUL_OFFERINGS = [
  { t: 'Spiritual Development',           s: 'Practices, teachings, devotional learning.' },
  { t: 'Conscious Community',             s: 'Held space among people walking the same path.' },
  { t: 'Healing Experiences',             s: 'Sessions, ceremonies, breath, and sound.' },
  { t: 'Retreats & Gatherings',           s: 'Time away from the noise. Time with country.' },
  { t: 'Transformational Teachings',      s: 'Frameworks for living in remembrance, not reaction.' },
  { t: 'Energy & Frequency Work',         s: 'Tuning, clearing, alignment, integration.' },
  { t: 'Emotional & Spiritual Support',   s: 'Witness, mentorship, hand-on-shoulder steadiness.' },
];

function SoulPath({ onJoin }) {
  return (
    <section className="section soulpath" id="soulpath">
      <SoulPathStars/>
      <div className="container">
        <div className="soulpath__grid">
          <div>
            <Reveal as="div"><Eyebrow tone="gold">SoulPath Collective</Eyebrow></Reveal>
            <Reveal as="h2" className="h-section" delay={100}>
              You Are Not Alone<br/>On This Journey.
            </Reveal>
            <Reveal as="p" className="lede" delay={200} style={{ marginTop: 24 }}>
              SoulPath is a loving circle of seekers, teachers, and
              quiet rememberers walking the inner road together. I am also a
              healing facilitator with SoulPath. Within it: spiritual development,
              frequency work, ceremony, mentorship, and the steady warmth of
              people who recognise the fire in you.
            </Reveal>
            <Reveal as="p" className="lede" delay={300} style={{ marginTop: 16, opacity: 0.7 }}>
              Built for those who have outgrown the surface and are ready to do the
              real work slowly, sacredly, with witnesses.
            </Reveal>
          </div>

          <Reveal as="ul" className="offering-list" stagger threshold={0.2}>
            {SOUL_OFFERINGS.map((o) => (
              <li key={o.t}>
                {o.t}
                <span>{o.s}</span>
              </li>
            ))}
          </Reveal>
        </div>

        <Reveal as="div" className="soulpath__cta" delay={120}>
          <p>Are you ready for your next breathwork session? Join the collective today.</p>
          <Button variant="ghost-gold" onClick={onJoin}>Join the Collective</Button>
        </Reveal>
      </div>
    </section>
  );
}

window.SoulPath = SoulPath;