// courses.jsx — Online courses & programs

const COURSES = [
  {
    num: "I.",
    label: "Foundational Course · 7 Modules",
    title: "The Nervous System Returns Home",
    desc: "A guided journey through Himalayan breathing, Ayurvedic gut work, and Japanese morning ritual. Seven modules. Lifetime access.",
    price: "$49",
  },
  {
    num: "II.",
    label: "Living Practice · 30 Lessons",
    title: "Thirty Mornings, Thirty Quiets",
    desc: "A morning ritual a day. Audio guidance, written reflections, and the small acts that re-pattern a tired body across one full month.",
    price: "$79",
  },
  {
    num: "III.",
    label: "Master Program · 12 Weeks",
    title: "The Complete Path",
    desc: "All four traditions, taught slowly across twelve weeks. Includes 7 Nights, 30 Days, and the complete library of audio practices.",
    price: "$149",
  },
];

const CourseRow = ({ c, onOpen }) => (
  <div className="course" onClick={() => onOpen && onOpen(c)} role="button" tabIndex={0}>
    <div className="course__num">{c.num}</div>
    <div className="course__copy">
      <span className="label" style={{ color: "var(--gold-deep)" }}>{c.label}</span>
      <h3 className="course__title">{c.title}</h3>
      <p className="course__desc">{c.desc}</p>
    </div>
    <div className="course__meta">
      <span className="label">From</span>
      <span className="course__meta-price">{c.price}</span>
      <span className="course__arrow">→</span>
    </div>
  </div>
);

const Courses = ({ onOpen }) => (
  <section className="section section--dark" id="courses">
    <div className="section__head">
      <span className="label" style={{ color: "var(--gold-deep)" }}>Spiritual Programs</span>
      <Divider width={100} />
      <h2 className="section__title">Featured Courses</h2>
      <p className="section__lead">
        For the reader who wants to walk further.
        Each course is taught slowly. Do not rush.
      </p>
    </div>

    <Reveal>
      <div className="courses__list">
        {COURSES.map((c, i) => <CourseRow key={i} c={c} onOpen={onOpen}/>)}
      </div>
    </Reveal>
  </section>
);

Object.assign(window, { Courses, CourseRow, COURSES });