import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Calendar, MapPin, Clock, ArrowLeft, Sparkles, Heart, Flame, Sun, Music, Wind } from "lucide-react";
import { Link } from "react-router-dom";
import { PageMeta } from "@/components/page-meta";

const details = {
  title: "New Moon Blue Lotus + Light Language Activation",
  subtitle: "",
  facilitator: "Radia",
  date: "Sunday, October 11, 2026",
  time: "2:30 PM – 5:00 PM",
  location: "Holistic BodyworkX Mississauga",
  address: "4259 Sherwoodtowne Blvd #1, Mississauga, ON L4Z 1Y5",
  image:
    "https://static1.squarespace.com/static/657751467d44be036e7f43ee/6663574967adf613a4054749/66637548d815860c6d4db16e/1786126585706/Blue+Lotus+-+a+portal+to+divine+alchemy%2C+manifestation%2C+and+profound+healing+%28Square+Pillow%29+%282%29.jpg?format=1500w",
  registrationHref: "https://activatewithradia.as.me/?appointmentType=97748279",
  youtubeHref: "https://youtu.be/mbaf0oUE77g?si=J-AmTQUtUHAV3mhA",
  video: {
    src: "https://www.youtube.com/embed/mbaf0oUE77g?feature=oembed",
    title: "Light Body Expansion™ An Initiatory School for Embodiment, Energy Healing & Nervous System Mastery",
  },
};

const agenda = [
  "Introduction & Intention Setting",
  "Blue Lotus Tea Ceremony",
  "Vocal Somatics — sound and somatic release (held in a hot sauna room — come wearing comfortable clothes to sweat)",
  "Integration & Sharing",
];

const aboutBlueLotus = [
  "Blue Lotus is a gentle aid to help you relax your body and quiet your mind, making it easier to enter a focused, receptive state for your practice.",
  "It is non-psychedelic and only mildly psychoactive, meaning it won't cause intense altered states, but may support a soft sense of openness and flow that some people find helpful.",
  "While it won't create the activation itself, it can act as a supportive ritual element that helps you settle in and deepen your personal experience.",
];

const aboutVocalSomatics = [
  "Vocal Somatic Healing is a body-led practice that uses breath, sound, movement, and spontaneous vocal expression to release held tension from the body and create greater freedom in the voice.",
  "Your voice carries the frequency of your inner state. When the nervous system is dysregulated, the voice tightens, shrinks, or disappears. When it is free, the voice becomes a powerful channel for self-expression, healing, and connection.",
  "In this work you will be guided through somatic vocal practices that allow your body to express what words alone cannot. You may hum, tone, sigh, release, or simply allow sound to move through you — there is no performance, only presence.",
];

const activationDescription = [
  "This transmission of life force energy is safe and allows you to awaken the pure life force energy that is within you and the cosmos.",
  'Dr Joe Dispenza, a neuroscience researcher says, "Our life begins to change when we change our energy, and we begin to take our power back."',
  "Change your energy through an activation of your kundalini energy that awakens your dormant power within you. As a facilitator, I will be holding space for you. During the transmission of raw life force energy your own kundalini will gradually awaken — allowing the intelligent energy within you to bring your systems back into coherence.",
  "As you feel the energy move into your body, that's your systems recalibrating back into order — allowing opportunity for transformation.",
];

const whatIsLifeForce = [
  "Kundalini Life Force Activation is the awakening of your body of light through kundalini initiation or a transmission of pure life force energy. This life force energy — often known as qi or prana — exists within the cosmos and is deeply rooted within us.",
  "This practice activates two nervous systems — the sympathetic nervous system and parasympathetic nervous system — to access a superconscious state. The co-activation awakens and expands your light body allowing you to uncover a deeper part of yourself.",
];

const whatIsLightLanguage = [
  "Light Language is the language of the light that speaks to your consciousness. They are codes that your consciousness understands and responds to. When your body starts moving in certain ways, or you start to have sensory or astral experiences, that is your consciousness responding to the light energy codes.",
  "You may start moving your hands & fingers in certain ways and have vocal releases, start singing, humming, speaking incomprehensible words.",
  "Light Language awakens the body's innate ability to heal itself, or communicate with itself.",
  "It opens the vocal centres for effective communication, singing, or speaking.",
];

const classExpectation = [
  "You will be lying down as the facilitator works with your energy centres, whether through somatic releases or receiving the transmission.",
  "Simply surrender to the present moment, listen to the music, and allow whatever arises to pass through.",
  "During the vocal somatics portion you may be guided to use sound, breath, and movement as tools for release and expression.",
  "There is no right or wrong experience — only yours.",
];

const experiences = [
  { label: "Physical", text: "Your body may move in certain ways." },
  { label: "Emotional", text: "You might want to laugh, cry, scream, and release other emotions." },
  { label: "Visual", text: "You might see images or go through an astral journey." },
  { label: "Sensational", text: "You might feel different sensations in your body such as hot, cold, and electricity." },
  { label: "Internal Bliss States", text: "You might experience high bliss states such as joy and ecstasy." },
  { label: "Vocal Releases or Light Language", text: "Your vocal centres might activate. You might hum, sing, or speak words, or move your hands and fingers in a certain way." },
];

const benefits = [
  "Healing through somatic releases.",
  "Shift in relationship dynamics — releasing what no longer aligns or deepening existing connections.",
  "Workplace changes and better opportunities.",
  "Alignment with true purpose and bolder decisions.",
  "Courage and confidence as energy guides you in the right direction.",
  "Consciousness expansion and awareness of thoughts, actions, and behaviours.",
  "Manifestation through kundalini energy and emotional clarity.",
  "Neurological transformation and rewiring of the brain and central nervous system.",
  "Emotional release, reducing stress and anxiety.",
  "Limiting belief release and resilience building.",
  "A voice that feels open, authentic, and fully your own.",
  "Greater vocal confidence and freedom of expression.",
  "Holistic growth: compassion, empathy, mental clarity, creativity, and spiritual connectivity.",
];

const preparation = [
  "Avoid alcohol and drugs on the day of the class.",
  "Juice or eat fruits 1–2 hours before the class. You may do water fasting.",
  "Avoid all other food.",
  "Meditate or do simple breathwork before the class.",
  "Wear comfortable clothing.",
  "Bring a yoga mat, blanket, and water bottle.",
];

const whatItIsNot = [
  "This is not about movement alone.",
  "It is about allowing the changes in your life that happen after the session and embracing the energetic shifts.",
  "It is about allowing the universe to guide your current period of 'stuckness' to a path of alignment, fulfilment, higher purpose, richer relationships, and greater abundance.",
];

const aboutRadia = [
  "Helped over 350+ students in Toronto. Hosted 95+ classes in Toronto, Costa Rica, Barbados and Tulum. 13+ years of spiritual journey with an in-depth understanding on neuroscience and quantum physics as well as Eastern Energetic Practices. Founder of Light Body Expansion (LBE) Energy School.",
];

function RegisterButton({ size = "lg", fullWidth = false }: { size?: "default" | "lg" | "sm"; fullWidth?: boolean }) {
  return (
    <Button size={size} className={fullWidth ? "w-full" : ""} asChild>
      <a
        href={details.registrationHref}
        target="_blank"
        rel="noopener noreferrer"
        className="inline-flex items-center justify-center gap-2"
      >
        <Flame className="h-4 w-4" />
        Register
      </a>
    </Button>
  );
}

export function BlueLotusVocalSomaticsPage() {
  return (
    <>
      <PageMeta
        title="New Moon Blue Lotus + Light Language Activation | Light Body Expansion"
        url="https://www.lightbodyexpansion.com/events/blue-lotus-vocal-somatics"
        description="New Moon Blue Lotus Tea Ceremony combined with Life Force Activation and Vocal Somatic Healing in Mississauga. Sunday October 11, 2:30–5pm. Experience somatic voice work and energy healing with Radia."
        keywords="new moon blue lotus, vocal somatic healing, life force activation, somatic healing, energy healing Mississauga, light language activation, kundalini activation, voice work"
      />
      <main className="relative z-10 min-h-screen pt-24 pb-24">
        <div className="container mx-auto px-6">
          <div>
            <Button variant="ghost" className="mb-6 -ml-3" asChild>
              <Link to="/" className="inline-flex items-center gap-2 text-foreground/70 hover:text-primary">
                <ArrowLeft className="h-4 w-4" />
                Back to Home
              </Link>
            </Button>
          </div>

          <div className="grid gap-12 lg:grid-cols-2 lg:items-start">
            {/* Left column */}
            <div className="space-y-8">
              <div className="space-y-4">
                <p className="text-sm font-body uppercase tracking-[0.25em] text-muted-foreground">
                  Upcoming Event
                </p>
                <h1 className="font-heading text-4xl md:text-5xl font-light leading-tight text-balance text-foreground">
                  {details.title}
                </h1>
                <p className="text-base font-body font-light leading-relaxed text-pretty text-foreground/70">
                  Facilitated by {details.facilitator}
                </p>
                <p className="text-base md:text-lg font-body font-light leading-relaxed text-pretty text-foreground/80">
                  A ceremonial afternoon blending the gentle opening of Blue Lotus with the deep
                  release of Life Force Activation and the healing of Vocal Somatic practice.
                </p>
              </div>

              <div className="rounded-2xl border border-primary/10 bg-primary/5 p-6">
                <p className="text-base font-body font-light leading-relaxed text-pretty text-foreground/90">
                  This is a space for softening, sounding, and expanding. Spaces are limited.
                  Come as you are. Leave opened.
                </p>
              </div>

              <div className="overflow-hidden rounded-3xl border border-border/50 shadow-xl shadow-primary/5">
                <img
                  src={details.image}
                  alt="Blue Lotus + Vocal Somatics"
                  className="w-full object-cover"
                />
              </div>

              <Card>
                <CardContent className="pt-6 space-y-4">
                  <div className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                      <Calendar className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <p className="text-sm font-body font-medium text-foreground">Date</p>
                      <p className="text-sm font-body font-light text-foreground/70">{details.date}</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                      <Clock className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <p className="text-sm font-body font-medium text-foreground">Time</p>
                      <p className="text-sm font-body font-light text-foreground/70">{details.time}</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                      <MapPin className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <p className="text-sm font-body font-medium text-foreground">Location</p>
                      <p className="text-sm font-body font-light text-foreground/70">
                        {details.location}
                        <br />
                        {details.address}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <div className="flex flex-col gap-4 sm:flex-row">
                <RegisterButton />
              </div>
            </div>

            {/* Right column */}
            <div className="space-y-8">
              <Card>
                <CardContent className="pt-6 space-y-6">
                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Sun className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">Agenda</h3>
                    </div>
                    <ul className="space-y-2 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {agenda.map((item) => (
                        <li key={item} className="flex items-start gap-3">
                          <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Sparkles className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">About Blue Lotus</h3>
                    </div>
                    <ul className="space-y-3 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {aboutBlueLotus.map((item) => (
                        <li key={item} className="flex items-start gap-3">
                          <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Music className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">About Vocal Somatic Healing</h3>
                    </div>
                    <ul className="space-y-3 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {aboutVocalSomatics.map((item) => (
                        <li key={item} className="flex items-start gap-3">
                          <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Flame className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">The Activation</h3>
                    </div>
                    <div className="space-y-3 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {activationDescription.map((item, index) => (
                        <p key={index}>{item}</p>
                      ))}
                    </div>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Sun className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">What is Life Force Activation?</h3>
                    </div>
                    <div className="space-y-3 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {whatIsLifeForce.map((item, index) => (
                        <p key={index}>{item}</p>
                      ))}
                    </div>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Music className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">What is Light Language Activation?</h3>
                    </div>
                    <div className="space-y-3 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {whatIsLightLanguage.map((item, index) => (
                        <p key={index}>{item}</p>
                      ))}
                    </div>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Wind className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">Class Expectation</h3>
                    </div>
                    <ul className="space-y-3 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {classExpectation.map((item) => (
                        <li key={item} className="flex items-start gap-3">
                          <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Sparkles className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">Experiences</h3>
                    </div>
                    <ul className="space-y-3 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {experiences.map((item) => (
                        <li key={item.label} className="flex items-start gap-3">
                          <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                          <span>
                            <strong className="font-medium text-foreground">{item.label}</strong> — {item.text}
                          </span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Heart className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">Benefits</h3>
                    </div>
                    <ul className="space-y-2 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {benefits.map((item) => (
                        <li key={item} className="flex items-start gap-3">
                          <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Wind className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">Preparation</h3>
                    </div>
                    <ul className="space-y-2 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {preparation.map((item) => (
                        <li key={item} className="flex items-start gap-3">
                          <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                    <p className="mt-4 text-sm font-body font-light text-foreground/70">
                      An integration tips email will be sent after the class.
                    </p>
                  </div>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Sparkles className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">What It Is Not</h3>
                    </div>
                    <ul className="space-y-2 text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {whatItIsNot.map((item) => (
                        <li key={item} className="flex items-start gap-3">
                          <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div className="rounded-xl border border-border/50 bg-muted/30 p-4">
                    <p className="text-sm font-body font-medium text-foreground">Please note</p>
                    <p className="mt-2 text-sm font-body font-light leading-relaxed text-foreground/70">
                      This class is open to all except people with psychosis or mania, teenagers
                      below 18 years, or pregnant women in their third trimester.
                    </p>
                  </div>

                  <p className="text-sm font-body font-light text-foreground/70">
                    Please read the{" "}
                    <a
                      href="https://www.activatingkundalini.com/prerequisite"
                      className="text-primary hover:underline"
                    >
                      prerequisite information
                    </a>{" "}
                    here.
                  </p>

                  <Separator />

                  <div>
                    <div className="mb-3 flex items-center gap-2">
                      <Sun className="h-5 w-5 text-primary" />
                      <h3 className="font-heading text-xl font-light text-foreground">About your facilitator, Radia</h3>
                    </div>
                    <p className="text-sm font-body font-light leading-relaxed text-pretty text-foreground/80">
                      {aboutRadia[0]}
                    </p>
                  </div>

                  <div className="overflow-hidden rounded-xl">
                    <div className="aspect-video w-full" style={{ backgroundImage: "url('https://img.youtube.com/vi/mbaf0oUE77g/hqdefault.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}>
                      <iframe
                        src={details.video.src}
                        title={details.video.title}
                        className="h-full w-full border-0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowFullScreen
                      />
                    </div>
                  </div>

                  <RegisterButton fullWidth />

                  <Button variant="outline" className="w-full" asChild>
                    <Link
                      to="/"
                      className="inline-flex items-center justify-center gap-2"
                    >
                      <ArrowLeft className="h-4 w-4" />
                      Back to Home
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </main>
    </>
  );
}

export default BlueLotusVocalSomaticsPage;