// B.A. Yogi — Sales site, program sections
// (One Year Includes, Why It Sits At The Top, Bigger Picture ladder, Value Breakdown)
const DSp = window.BAYogiDesignSystem_8dba86;
const { Eyebrow: Ep, Card: CardP, Badge: BadgeP, Divider: DivP, Button: BtnP } = DSp;
const ASSET_P = '../../assets';

// ─────────────────────────────────────────────────────────────
// 1 · One transformational year — the three things included
// ─────────────────────────────────────────────────────────────
function ProgramIncludes() {
  const sec = { background: 'var(--surface-page)', padding: '110px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '48px' };
  const titleHead = { textAlign: 'center', maxWidth: '780px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' };
  const h1 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(34px,5vw,56px)', lineHeight: 1.06, color: 'var(--text-strong)', margin: 0 };
  const subhead = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.55, color: 'var(--text-muted)', margin: 0 };
  const sectionHeading = { fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic', fontSize: 'clamp(26px,3.4vw,38px)', lineHeight: 1.1, color: 'var(--text-strong)', margin: 0, textAlign: 'center' };

  const grid = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '26px', maxWidth: '1140px', width: '100%', alignItems: 'start' };
  const cardTitle = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '27px', color: 'var(--text-strong)', margin: '0 0 12px', lineHeight: 1.14 };
  const cardBody = { fontFamily: 'var(--font-body)', fontSize: '16.5px', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 };
  const note = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '17px', lineHeight: 1.5, color: 'var(--text-gold)', margin: '12px 0 0' };

  const includes = [
    { t: 'Home Study - College Courses - Online', body: 'The complete intellectual and practical framework for Ashtanga, Bhakti, & Kirtan with recorded courses. Study it on your own schedule, around your life and your work.' },
    { t: 'One Year of Online Mentorship', body: 'Bi-monthly calls with special classes, personal guidance, plus special guests, so the practice, the community, and the accountability never go cold between sessions.' },
    { t: '21-Day Tulum Immersion', body: 'Daily Ashtanga Yoga with hands-on adjustments. Experience what it\u2019s like living in a traditional Vedic ashram but with the comforts of a classy Tulum retreat. Beautiful kirtan every evening. Three weeks in the jungle with your tribe, near cenotes (swimming springs), the beach, and going on fun vacation-like excursions.', note: 'This Tulum immersion alone qualifies as a 200-hour Yoga Alliance certification.' },
  ];

  const credItem = { display: 'flex', gap: '13px', alignItems: 'flex-start' };
  const credMark = { color: 'var(--gold-400)', fontSize: '14px', lineHeight: 1.5, flex: 'none' };
  const credText = { fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.5, color: 'var(--paper-100)', margin: 0 };
  const credentials = [
    'You can now officially teach Ashtanga Yoga with the blessings from the Bhakti Ashtanga Yoga Institute (B.A. Yogi) and its teachers.',
    'You become a reputable B.A. Yogi, Certified Yoga Teacher (Sādhaka Level).',
    '30 certified Florida Vedic College credits.',
    'Over 1,400 hours of training. Yoga Alliance 500 hour (500 RYT) eligible.',
    'Counts as one year of college (half an associate\u2019s degree) towards a bachelor\u2019s degree in yoga studies.',
  ];

  const closer = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.55, color: 'var(--text-body)', textAlign: 'center', maxWidth: '720px', margin: 0 };

  return (
    <section style={sec} id="includes">
      <div style={titleHead}>
        <Ep ruled align="center">Introducing</Ep>
        <h2 style={h1}>B.A. Yogi, Certified Yoga Teacher <span style={{ fontStyle: 'italic', color: 'var(--text-gold)' }}>(Sādhaka Level)</span></h2>
        <p style={subhead}>by Bhakti Ashtanga Yoga Institute (B.A. Yogi) in partnership with Florida Vedic College.</p>
      </div>

      <h3 style={sectionHeading}>One transformational year includes</h3>

      <div style={grid}>
        {includes.map((c) => (
          <CardP key={c.t} surface="card" inset padding="30px 30px 34px">
            <h3 style={cardTitle}>{c.t}</h3>
            <p style={cardBody}>{c.body}</p>
            {c.note ? <p style={note}>{c.note}</p> : null}
          </CardP>
        ))}
      </div>

      {/* Your credential */}
      <div style={{ width: '100%', maxWidth: '880px', background: 'var(--surface-dark)', borderRadius: 'var(--radius-lg)', padding: 'clamp(34px,4vw,48px)', display: 'flex', flexDirection: 'column', gap: '22px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px', textAlign: 'center', paddingBottom: '4px' }}>
          <p style={{ fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '11px', letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--gold-400)', margin: 0 }}>One certificate, two institutions</p>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'clamp(22px,5vw,56px)', flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', minWidth: '190px' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(34px,4.4vw,46px)', lineHeight: 1, letterSpacing: '0.01em', color: 'var(--paper-50)', whiteSpace: 'nowrap' }}>B<span style={{ color: 'var(--gold-400)' }}>.</span>A<span style={{ color: 'var(--gold-400)' }}>.</span> Yogi</span>
              <span style={{ fontFamily: 'var(--font-label)', fontWeight: 400, fontSize: '9.5px', letterSpacing: '0.26em', textTransform: 'uppercase', color: 'var(--gold-400)', textIndent: '0.26em' }}>Bhakti · Ashtanga · Yoga · Institute</span>
            </div>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: '30px', color: 'var(--gold-400)', flex: 'none', opacity: 0.8 }}>&#10010;</span>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', minWidth: '190px' }}>
              <img src={`${ASSET_P}/fvc-crest.png`} alt="Florida Vedic College crest" style={{ width: '110px', height: 'auto', display: 'block', filter: 'drop-shadow(0 6px 18px rgba(0,0,0,0.35))' }} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(18px,2.2vw,22px)', lineHeight: 1.1, color: 'var(--paper-50)' }}>Florida Vedic College</span>
            </div>
          </div>
        </div>
        <DivP variant="plain" tone="hairline" />
        <Ep tone="light">Your credential</Ep>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
          {credentials.map((c, i) => (
            <div key={i} style={credItem}><span style={credMark}>✦</span><p style={credText}>{c}</p></div>
          ))}
        </div>
        <DivP variant="plain" tone="hairline" />
        <p style={credText}><span style={{ color: 'var(--gold-400)', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '18px' }}>Daily practice credit.</span> You earn credit for your logged daily practice, this helps integrate your practice as part of your life instead of competing with it.</p>
      </div>

      <p style={closer}>This program is built to be done part-time, alongside a normal life and a job.</p>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 2 · Why this sits at the top of the hierarchy
// ─────────────────────────────────────────────────────────────
function WhyTop() {
  const sec = { background: 'var(--surface-sand)', padding: '108px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '36px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(34px,5vw,56px)', lineHeight: 1.06, color: 'var(--text-strong)', margin: 0, textAlign: 'center', maxWidth: '780px' };

  const body = { maxWidth: '720px', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'center' };
  const p = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.62, color: 'var(--text-body)', margin: 0 };
  const quiet = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.62, color: 'var(--text-muted)', margin: 0 };
  const gold = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(21px,2.4vw,28px)', lineHeight: 1.35, color: 'var(--text-gold)', margin: 0 };

  return (
    <section style={sec}>
      <h2 style={h2}>Why this sits at the top</h2>
      <div style={body}>
        <p style={p}>Most teachers are 200 or 500 hours, with no college standing.</p>
        <p style={quiet}>Unfortunately, many teachers certified at these levels have poor practice, poor understanding, and poor teaching abilities.</p>
        <p style={p}>B.A. Yogi, Certified Yoga Teacher (Sādhaka Level) is over 1,400 hours, backed by certified college credits, and it makes you eligible for Yoga Alliance’s highest training certification, RYT 500.</p>
      </div>

      <div style={{ width: '100%', maxWidth: '780px', background: 'var(--surface-dark)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--line-gold)', boxShadow: 'var(--shadow-md)', padding: 'clamp(34px,4.5vw,52px)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px', textAlign: 'center' }}>
        <span style={{ fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '12px', letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>The top of the hierarchy</span>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(26px,3.4vw,38px)', lineHeight: 1.22, color: 'var(--paper-50)', margin: 0 }}>The very first level, B.A. Yogi, Certified Yoga Teacher <span style={{ fontStyle: 'italic', color: 'var(--gold-400)' }}>(Sādhaka Level)</span>, already puts you at the <span style={{ fontStyle: 'italic', color: 'var(--gold-400)' }}>top of the hierarchy of yoga teachers</span> &mdash; a standard most teacher trainings simply cannot reach.</p>
      </div>

      <div style={body}>
        <p style={p}>It is what it takes to teach with real authority, and with our blessings.</p>
        <p style={p}>By the end, you are not &ldquo;a person who took a workshop.&rdquo;</p>
        <p style={p}>You are a certified yoga teacher who has an authentic practice, knows the philosophy, and can lead basic Kirtan.</p>
        <p style={gold}>This is the only college-certified, bachelor’s-track Ashtanga-Bhakti teacher training in the world.</p>
      </div>
    </section>
  );
}

// Honest side-by-side: B.A. Yogi (Sādhaka Level) vs. standard yoga teacher trainings
function Compare() {
  const rows = [
    { label: 'Certified college certification', us: '30 Florida Vedic College credits', them: 'No college standing' },
    { label: 'Total training hours', us: 'Over 1,400 hours', them: '200–500 hours' },
    { label: 'Yoga Alliance level', us: 'RYT 500 eligible', them: 'Typically RYT 200' },
    { label: 'A full year of live mentorship', us: 'Bi-monthly calls, guidance & guests, all year', them: 'Ends when the course ends' },
    { label: 'Taught by teachers at the top of their field', us: 'Certified-lineage Ashtanga trainer, a 30-year monk & author, a world-touring kirtaniya', them: 'A single recent graduate' },
    { label: 'Depth of philosophy', us: 'Sūtras, Gītā, Sanskrit & Bhakti, at the source', them: 'A weekend of theory' },
    { label: 'Kirtan & devotional music', us: 'Learn to chant and lead', them: 'Not taught' },
    { label: 'An intentional community of high-level practitioners', us: 'A lifelong tribe to grow with', them: 'A group that scatters after graduation' },
    { label: 'Study at your own pace, alongside a job', us: 'Easy study-as-you-go program', them: 'Fixed, all-at-once schedule' },
    { label: 'A 21-day immersion in Tulum', us: 'Daily Ashtanga, ashram life & kirtan', them: 'Rarely offered' },
    { label: 'Part of a bachelor’s degree path', us: 'Year One of four toward a B.A. in Yoga Studies', them: 'A standalone certificate' },
  ];

  const wrap = { width: '100%', maxWidth: '980px', background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--line-hairline)', boxShadow: 'var(--shadow-md)', overflow: 'hidden' };
  const headRow = { display: 'grid', gridTemplateColumns: '1.15fr 1fr 1fr', alignItems: 'stretch', borderBottom: '1px solid var(--line-hairline)' };
  const corner = { padding: '20px 24px' };
  const usHead = { padding: '20px 24px', background: 'var(--surface-dark)', display: 'flex', flexDirection: 'column', gap: '4px' };
  const themHead = { padding: '20px 24px', background: 'var(--surface-sand)', display: 'flex', flexDirection: 'column', gap: '4px' };
  const usHeadName = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '19px', color: 'var(--paper-50)', margin: 0, lineHeight: 1.15 };
  const usHeadSub = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '14px', color: 'var(--gold-400)', margin: 0 };
  const themHeadName = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '19px', color: 'var(--text-strong)', margin: 0, lineHeight: 1.15 };
  const themHeadSub = { fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-muted)', margin: 0 };
  const dataRow = (i) => ({ display: 'grid', gridTemplateColumns: '1.15fr 1fr 1fr', alignItems: 'stretch', borderTop: i === 0 ? 'none' : '1px solid var(--line-hairline)' });
  const labelCell = { padding: '16px 24px', fontFamily: 'var(--font-body)', fontSize: '15.5px', lineHeight: 1.4, color: 'var(--text-strong)', display: 'flex', alignItems: 'center' };
  const usCell = { padding: '16px 24px', background: 'rgba(36,23,13,0.035)', borderLeft: '1px solid var(--line-gold)', display: 'flex', alignItems: 'flex-start', gap: '10px' };
  const themCell = { padding: '16px 24px', display: 'flex', alignItems: 'flex-start', gap: '10px' };
  const usText = { fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.45, color: 'var(--text-strong)', margin: 0 };
  const themText = { fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.45, color: 'var(--text-muted)', margin: 0 };
  const check = { color: 'var(--gold-700)', flex: 'none', fontSize: '15px', lineHeight: 1.45 };
  const dash = { color: 'var(--text-muted)', flex: 'none', fontSize: '15px', lineHeight: 1.45 };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px', width: '100%' }}>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic', fontSize: 'clamp(24px,3vw,34px)', color: 'var(--text-strong)', margin: 0, textAlign: 'center' }}>An honest comparison</h3>
      <div style={wrap} className="compare-table">
        <div style={headRow}>
          <div style={corner} />
          <div style={usHead}>
            <p style={usHeadName}>B.A. Yogi</p>
            <p style={usHeadSub}>Certified Yoga Teacher · Sādhaka Level</p>
          </div>
          <div style={themHead}>
            <p style={themHeadName}>Standard yoga</p>
            <p style={themHeadSub}>teacher trainings</p>
          </div>
        </div>
        {rows.map((r, i) => (
          <div key={r.label} style={dataRow(i)}>
            <div style={labelCell}>{r.label}</div>
            <div style={usCell}><span style={check}>✓</span><p style={usText}>{r.us}</p></div>
            <div style={themCell}><span style={dash}>—</span><p style={themText}>{r.them}</p></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 3 · How it fits the bigger picture — the four-year ladder
// ─────────────────────────────────────────────────────────────
function BiggerPicture() {
  const sec = { background: 'var(--surface-forest)', padding: '110px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '48px' };
  const head = { textAlign: 'center', maxWidth: '700px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '18px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,4.4vw,48px)', lineHeight: 1.1, color: 'var(--paper-50)', margin: 0 };
  const intro = { fontFamily: 'var(--font-body)', fontSize: '18.5px', lineHeight: 1.6, color: 'var(--sage-200)', margin: 0 };

  const ladder = { display: 'flex', flexDirection: 'column', gap: '14px', width: '100%', maxWidth: '880px' };
  const row = (active) => ({
    display: 'grid', gridTemplateColumns: '140px 1fr auto', gap: '24px', alignItems: 'center',
    padding: '24px 30px', borderRadius: 'var(--radius-lg)',
    background: active ? 'rgba(238,217,154,0.10)' : 'rgba(246,238,222,0.04)',
    border: active ? '1px solid rgba(238,217,154,0.45)' : '1px solid rgba(238,217,154,0.14)',
  });
  const yearTag = (active) => ({ fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '11px', letterSpacing: '0.2em', textTransform: 'uppercase', color: active ? 'var(--gold-400)' : 'var(--sage-200)', margin: 0 });
  const levelName = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '23px', color: 'var(--paper-50)', margin: '4px 0 0', lineHeight: 1.15 };
  const sanskrit = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '17px', color: 'var(--gold-400)', margin: 0 };
  const credits = { fontFamily: 'var(--font-label)', fontWeight: 400, fontSize: '12px', letterSpacing: '0.08em', color: 'var(--sage-200)', whiteSpace: 'nowrap' };

  const years = [
    { y: 'Year One', name: 'B.A. Yogi, Certified Yoga Teacher', level: 'Sādhaka Level', active: true, note: 'Already a higher-level yogi than most all other teacher trainings.' },
    { y: 'Year Two', name: 'B.A. Yogi, Associate of Yoga Studies', level: 'Sevaka Level', milestone: 'Associate’s degree' },
    { y: 'Year Three', name: 'B.A. Yogi, Advanced Yoga Teacher', level: 'Sātvika Level' },
    { y: 'Year Four', name: 'B.A. Yogi, Bachelor of Yoga Studies', level: 'Śāstrika Level', milestone: 'Bachelor of Arts degree' },
  ];

  return (
    <section style={sec}>
      <div style={head}>
        <Ep ruled align="center" tone="light">How it fits the bigger picture</Ep>
        <h2 style={h2}>One of the only Bachelor of Yoga Studies in the world</h2>
        <p style={intro}>It is designed to stand alone as a complete teacher training of the highest caliber.</p>
      </div>

      <div style={ladder}>
        {years.map((yr) => (
          <div key={yr.y} className="bp-row" style={row(yr.active)}>
            <div>
              <p style={yearTag(yr.active)}>{yr.y}</p>
              {yr.active ? <BadgeP tone="gold" style={{ marginTop: '8px' }}>You are here</BadgeP> : null}
            </div>
            <div>
              <h3 style={levelName}>{yr.name}</h3>
              <p style={sanskrit}>{yr.level}</p>
              {yr.note ? <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.45, color: 'var(--paper-100)', margin: '8px 0 0' }}>{yr.note}</p> : null}
            </div>
            <div className="bp-meta" style={{ textAlign: 'right' }}>
              <span style={credits}>30 credits</span>
              {yr.milestone ? <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '15px', color: 'var(--gold-400)', margin: '4px 0 0' }}>= {yr.milestone}</p> : null}
            </div>
          </div>
        ))}
      </div>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: '17px', color: 'var(--sage-200)', margin: 0, textAlign: 'center' }}>Four years is the full degree, the only one of its kind in the world.</p>

    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 4 · Here's what you get — the itemized value breakdown
// ─────────────────────────────────────────────────────────────
function ValueBreakdown({ onEnroll }) {
  const sec = { background: 'var(--surface-sand)', padding: '110px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '44px' };
  const head = { textAlign: 'center', maxWidth: '700px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,4.4vw,48px)', lineHeight: 1.1, color: 'var(--text-strong)', margin: 0 };
  const intro = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 };

  const sheet = { width: '100%', maxWidth: '880px', background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--line-hairline)', boxShadow: 'var(--shadow-md)', overflow: 'hidden' };
  const groupHead = { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '16px', padding: '22px 30px 12px', borderTop: '1px solid var(--line-hairline)' };
  const groupTitle = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '12px', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-gold)', margin: 0 };
  const subHead = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '18px', color: 'var(--text-strong)', margin: 0, padding: '12px 30px 2px' };
  const line = { display: 'grid', gridTemplateColumns: '1fr auto', gap: '20px', alignItems: 'baseline', padding: '11px 30px', borderBottom: '1px solid var(--line-hairline)' };
  const lineName = { fontFamily: 'var(--font-body)', fontSize: '16.5px', color: 'var(--text-strong)', lineHeight: 1.35, margin: 0 };
  const lineDesc = { fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-muted)', lineHeight: 1.4, margin: '2px 0 0' };
  const linePrice = { fontFamily: 'var(--font-body)', fontSize: '16px', fontWeight: 600, color: 'var(--text-body)', whiteSpace: 'nowrap' };
  const subtotal = { display: 'grid', gridTemplateColumns: '1fr auto', gap: '20px', alignItems: 'baseline', padding: '14px 30px', background: 'var(--surface-sand)' };
  const subtotalLabel = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '12px', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-strong)' };
  const subtotalVal = { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '20px', color: 'var(--text-strong)', whiteSpace: 'nowrap' };

  const Item = ({ name, desc, price }) => (
    <div style={line}>
      <div>
        <p style={lineName}>{name}</p>
        {desc ? <p style={lineDesc}>{desc}</p> : null}
      </div>
      <span style={linePrice}>{price}</span>
    </div>
  );

  return (
    <section style={sec} id="value">
      <div style={head}>
        <Ep ruled align="center">Here&rsquo;s what you get with</Ep>
        <h2 style={h2}>B.A. Yogi, Certified Yoga Teacher <span style={{ fontStyle: 'italic', color: 'var(--text-gold)' }}>(Sādhaka Level)</span></h2>
      </div>

      <div style={sheet}>
        {/* HOME STUDY */}
        <div style={groupHead}><p style={groupTitle}>Home Study - College Courses - Online</p><span style={{ ...groupTitle, color: 'var(--text-muted)' }}>Price on college site</span></div>

        <p style={subHead}>Bhakti &amp; Veda Yoga Philosophy</p>
        <Item name="Vedic Context: Vedas, Yoga &amp; Hinduism" desc="Where yoga and spirituality actually come from" price="$1,000" />
        <Item name="Sādhana, Japa, Kīrtana &amp; Meditation" desc="How to actually practice bhakti, every day" price="$1,000" />
        <Item name="Yoga Sūtras of Patañjali" desc="The eight limbs of Ashtanga, at the source" price="$699" />
        <Item name="Ultimate Gītā Course" desc="The Bhagavad Gita, core classic spiritual book of yoga" price="$997" />
        <Item name="Elemental Reality System: Eternal Dharma" desc="Dharma, purpose, and the Vedic view of reality" price="$497" />
        <Item name="The Guna Map: Three Qualities of Existence" desc="Read the three energies shaping every moment" price="$997" />
        <Item name="Sanskrit for Yoga" desc="Pronounce the sacred terms with confidence" price="$297" />

        <p style={subHead}>Ashtanga Yoga</p>
        <Item name="Āsana Details: Sun Salutations &amp; Primary Series" desc="Every posture of the Primary Series, understood" price="$2,500" />
        <Item name="Counting &amp; Verbal Cues" desc="Cue a class clearly, in Sanskrit" price="$297" />
        <Item name="Bandha &amp; Drishti" desc="The inner locks and gaze that make it work" price="$499" />
        <Item name="Āsana Names, Stories &amp; Mythology" desc="The meaning behind every posture" price="$697" />

        <p style={subHead}>Kirtan Music Classes</p>
        <Item name="Kirtan Course, Level One" desc="Chant, and begin to lead" price="$1,000" />

        <div style={subtotal}><span style={subtotalLabel}>Total value, online college courses</span><span style={subtotalVal}>$7,683</span></div>

        {/* MENTORSHIP */}
        <div style={groupHead}><p style={groupTitle}>One Year Online Mentorship</p><span /></div>
        <Item name="Live bi-monthly classes &amp; Q&amp;A with teachers and guests" desc="Personal guidance, and a tribe that keeps you consistent" price="$2,400" />
        <Item name="Guided daily practice — Āsana &amp; Bhakti Sādhana" desc="Your practice becomes your life, and counts toward your credential" price="$599" />
        <div style={subtotal}><span style={subtotalLabel}>Total value, online mentorship</span><span style={subtotalVal}>$2,999</span></div>

        {/* TULUM */}
        <div style={groupHead}><p style={groupTitle}>21-Day Tulum Immersion</p><span /></div>
        <Item name="21-day Tulum ashram immersion &amp; Ashtanga mentorship" desc="Hands-on adjustments, the ashram experience, kirtan every evening" price="$4,000" />
        <Item name="Lodging in Tulum, three weeks" desc="A beautiful place to stay in the jungle" price="$3,000" />
        <Item name="Food in Tulum, three weeks" desc="Nourishing, conscious meals throughout" price="$1,000" />
        <Item name="Community &amp; fun in paradise" price="Priceless" />
        <div style={subtotal}><span style={subtotalLabel}>Total value, 21 days in Tulum</span><span style={subtotalVal}>$8,000</span></div>

        {/* TOTAL VALUE — sum of the three */}
        <div style={{ ...subtotal, background: 'var(--surface-clay)', borderTop: '2px solid var(--line-gold)', padding: '18px 30px' }}><span style={{ ...subtotalLabel, fontSize: '13px' }}>Total value</span><span style={{ ...subtotalVal, fontSize: '26px' }}>$18,682</span></div>

        {/* GRAND TOTAL + OFFER */}
        <div style={{ background: 'var(--surface-dark)', padding: 'clamp(36px,4.5vw,52px) 30px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px', textAlign: 'center' }}>
          <span style={{ fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '12px', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--clay-300)' }}>Total value</span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(44px,6vw,64px)', color: 'var(--paper-100)', textDecoration: 'line-through', textDecorationColor: 'var(--gold-400)', textDecorationThickness: '2px' }}>$18,682</span>

          <span style={{ fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '13px', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--gold-400)', marginTop: '26px' }}>Founding Cohort Price</span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(66px,9.5vw,108px)', lineHeight: 1, color: 'var(--paper-50)', letterSpacing: '-0.01em' }}>$5,497</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: '16px', color: 'var(--clay-300)', marginTop: '4px' }}>$13,185 discount (70% off)</span>

          <div style={{ marginTop: '24px', display: 'inline-flex', alignItems: 'center', gap: '12px', background: 'rgba(238,217,154,0.12)', border: '1px solid rgba(238,217,154,0.42)', borderRadius: 'var(--radius-pill)', padding: '11px 24px', flexWrap: 'wrap', justifyContent: 'center' }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: '16px', color: 'var(--paper-100)' }}>Earlybird, paid in full this month</span>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '28px', color: 'var(--gold-400)', lineHeight: 1 }}>$4,997</span>
          </div>
        </div>
      </div>

      <BtnP variant="onDark" size="lg" onClick={onEnroll} style={{ fontSize: '16px', padding: '26px 72px', letterSpacing: '0.18em' }}>See If It's a Fit</BtnP>

      {/* Payment options */}
      <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', justifyContent: 'center' }}>
        <div style={{ background: 'var(--surface-card)', border: '1px solid var(--line-gold)', borderRadius: 'var(--radius-md)', padding: '16px 28px', textAlign: 'center' }}>
          <p style={{ fontFamily: 'var(--font-label)', fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '0 0 4px' }}>3 payments of</p>
          <p style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '28px', color: 'var(--text-strong)', margin: 0 }}>$1,888</p>
        </div>
        <div style={{ background: 'var(--surface-card)', border: '1px solid var(--line-gold)', borderRadius: 'var(--radius-md)', padding: '16px 28px', textAlign: 'center' }}>
          <p style={{ fontFamily: 'var(--font-label)', fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '0 0 4px' }}>6 payments of</p>
          <p style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '28px', color: 'var(--text-strong)', margin: 0 }}>$1,008</p>
        </div>
      </div>
      <p style={{ fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: '15px', color: 'var(--text-muted)', margin: 0, textAlign: 'center', maxWidth: '560px' }}>Not included: flights, airport and local transportation, books, excursions, and personal expenses.</p>
    </section>
  );
}

Object.assign(window, { ProgramIncludes, WhyTop, BiggerPicture, ValueBreakdown });