// B.A. Yogi — Sales site, Tulum 21-day immersion schedule
const DSs = window.BAYogiDesignSystem_8dba86;
const { Eyebrow: Es, Card: CardS, Divider: DivS } = DSs;
const ASSET_S = '../../assets';

function TulumSchedule() {
  const sec = { background: 'var(--surface-page)', padding: '110px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '54px' };
  const head = { textAlign: 'center', maxWidth: '720px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,4.4vw,48px)', lineHeight: 1.08, color: 'var(--text-strong)', margin: 0 };
  const intro = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 };
  const subHead = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(22px,2.8vw,30px)', color: 'var(--text-strong)', margin: 0, textAlign: 'center', lineHeight: 1.15 };

  // ── 21-day arc ──
  const days = [
    { d: 'Day 1', date: 'April 1', label: 'Arrival, Meet & Greet, Orientation', note: 'Light evening kirtan', kind: 'milestone' },
    { d: 'Days 2–3', date: 'April 2–3', label: 'Yoga', kind: 'yoga' },
    { d: 'Day 4', date: 'April 4', label: 'Outing I · Temascal', kind: 'outing' },
    { d: 'Days 5–7', date: 'April 5–7', label: 'Yoga', kind: 'yoga' },
    { d: 'Day 8', date: 'April 8', label: 'Outing II', kind: 'outing' },
    { d: 'Days 9–11', date: 'April 9–11', label: 'Yoga', kind: 'yoga' },
    { d: 'Day 12', date: 'April 12', label: 'Outing III', kind: 'outing' },
    { d: 'Days 13–15', date: 'April 13–15', label: 'Yoga', kind: 'yoga' },
    { d: 'Day 16', date: 'April 16', label: 'Outing IV', kind: 'outing' },
    { d: 'Days 17–19', date: 'April 17–19', label: 'Yoga', kind: 'yoga' },
    { d: 'Day 20', date: 'April 20', label: 'Graduation · Fire Yajña Ceremony', kind: 'milestone' },
    { d: 'Day 21', date: 'April 21', label: 'Departure', note: 'After morning program', kind: 'milestone' },
  ];

  const arcWrap = { width: '100%', maxWidth: '760px', display: 'flex', flexDirection: 'column' };
  const accentFor = (k) => k === 'outing' ? 'var(--gold-600)' : k === 'milestone' ? 'var(--text-gold)' : 'var(--line-soft)';
  const rowStyle = (i) => ({ display: 'grid', gridTemplateColumns: '96px 80px 16px 1fr', gap: '16px', alignItems: 'center', padding: '15px 0', borderTop: i === 0 ? '1px solid var(--line-hairline)' : 'none', borderBottom: '1px solid var(--line-hairline)' });
  const dayCol = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '12px', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)', whiteSpace: 'nowrap' };
  const dateCol = { fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-faint)', whiteSpace: 'nowrap' };
  const dot = (k) => ({ width: '11px', height: '11px', borderRadius: '50%', background: k === 'yoga' ? 'transparent' : accentFor(k), border: k === 'yoga' ? '1.5px solid var(--line-soft)' : 'none', justifySelf: 'center' });
  const labelMain = (k) => ({ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: k === 'yoga' ? '19px' : '21px', color: k === 'outing' || k === 'milestone' ? 'var(--text-strong)' : 'var(--text-body)', margin: 0, lineHeight: 1.2 });
  const labelNote = { fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: '15px', color: 'var(--text-muted)', margin: '2px 0 0' };

  // ── A day in the immersion ──
  const phases = [
    { time: 'Morning', items: ['Maṅgala Ārati', 'Japa Meditation', 'Prāṇāyāma Practice', 'Ashtanga Yoga Practice'], anchor: 'Breakfast' },
    { time: 'Midday', items: ['Ashtanga Teacher Training Course', 'Mid-day Meditation'], anchor: 'Lunch' },
    { time: 'Afternoon', items: ['Free time & personal practice', 'Bhakti Classes'], anchor: 'Dinner' },
    { time: 'Evening', items: ['Sitting Kirtan', 'Sandhyā / Gaura Ārati / Meditation', 'Relaxing Kirtan'], anchor: null },
  ];
  const dayGrid = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(248px, 1fr))', gap: '22px', maxWidth: '1080px', width: '100%', alignItems: 'start' };
  const phaseTime = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '12px', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--text-gold)', margin: '0 0 14px' };
  const phaseItem = { display: 'flex', gap: '11px', alignItems: 'flex-start', padding: '7px 0' };
  const phaseMark = { color: 'var(--gold-600)', fontSize: '12px', lineHeight: 1.5, flex: 'none' };
  const phaseText = { fontFamily: 'var(--font-body)', fontSize: '16px', lineHeight: 1.45, color: 'var(--text-body)', margin: 0 };
  const anchorChip = { marginTop: '14px', paddingTop: '14px', borderTop: '1px dashed var(--line-soft)', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '16px', color: 'var(--text-muted)' };

  return (
    <section style={sec} id="tulum-schedule">
      <div style={head}>
        <Es ruled align="center">21 days in Tulum</Es>
        <h2 style={h2}>What your immersion looks like</h2>
        <p style={intro}>Three weeks in the jungle: a steady rhythm of daily Ashtanga and Bhakti, opened by arrival and closed by your graduation ceremony, with four excursions woven through.</p>
      </div>

      {/* 21-day arc */}
      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '26px' }}>
        <h3 style={subHead}>The 21-day arc</h3>
        <div style={arcWrap}>
          {days.map((row, i) => (
            <div key={i} style={rowStyle(i)}>
              <span style={dayCol}>{row.d}</span>
              <span style={dateCol}>{row.date}</span>
              <span style={dot(row.kind)}></span>
              <div>
                <p style={labelMain(row.kind)}>{row.label}</p>
                {row.note ? <p style={labelNote}>{row.note}</p> : null}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', justifyContent: 'center', fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-muted)' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><span style={{ width: '10px', height: '10px', borderRadius: '50%', border: '1.5px solid var(--line-soft)' }}></span>Daily yoga</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><span style={{ width: '10px', height: '10px', borderRadius: '50%', background: 'var(--gold-600)' }}></span>Excursion</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><span style={{ width: '10px', height: '10px', borderRadius: '50%', background: 'var(--text-gold)' }}></span>Milestone</span>
        </div>
      </div>

      <DivS variant="ornament" />

      {/* A day in the immersion */}
      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '26px' }}>
        <h3 style={subHead}>A day in the immersion</h3>
        <div style={dayGrid}>
          {phases.map((ph) => (
            <CardS key={ph.time} surface="card" inset padding="26px 26px 28px">
              <p style={phaseTime}>{ph.time}</p>
              {ph.items.map((it) => (
                <div key={it} style={phaseItem}><span style={phaseMark}>✦</span><p style={phaseText}>{it}</p></div>
              ))}
              {ph.anchor ? <div style={anchorChip}>{ph.anchor}</div> : null}
            </CardS>
          ))}
        </div>
        <p style={{ fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: '15px', color: 'var(--text-muted)', margin: 0, textAlign: 'center' }}>Personal time and optional wellness are held between blocks each day.</p>
      </div>

      <div style={{ background: 'var(--surface-sand)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--line-gold)', padding: 'clamp(24px,3vw,36px) clamp(24px,4vw,44px)', maxWidth: '720px', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(19px,2.4vw,24px)', color: 'var(--text-strong)', lineHeight: 1.3, margin: 0 }}>You can come for as little as one week and use the rest of your time next year.</p>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: '16.5px', color: 'var(--text-body)', lineHeight: 1.55, margin: 0 }}>The three weeks can be split however suits your life — one week this year, another the next. You go at your own pace here too.</p>
      </div>

    </section>
  );
}

Object.assign(window, { TulumSchedule });