// B.A. Yogi — Sales site, mid sections (Pillars, Teachers, Benefits)
const DSm = window.BAYogiDesignSystem_8dba86;
const { Eyebrow: Eb, Card: DSCard, Badge: Bdg, Divider: Div } = DSm;
const ASSET_M = '../../assets';

function Pillars() {
  const sec = { background: 'var(--surface-sand)', padding: '110px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '52px' };
  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.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 grid = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '26px', maxWidth: '1140px', width: '100%', alignItems: 'start' };
  const pillars = [
    { n: 'One', t: 'Ashtanga', img: 'img-ashtanga-class.jpg', lead: 'The body in balance.', lines: [
      'Of every form of yoga, Ashtanga is the most complete: the most rigorous, the most systematic, the best for body and mind.',
      'It is the origin of most other modern forms of yoga.',
      'This yoga practice stretches, tones, aligns, and heals every part of your body.',
      'A healthy and fit body creates a calm peaceful mind.',
      'Master this, and every other style of yoga becomes easy.',
      'We specialize in precise alignment, advanced postures, and pranayama Breathwork.',
    ] },
    { n: 'Two', t: 'Bhakti', img: 'img-bhakti-krishna.jpg', lead: 'The heart immersed in love.', lines: [
      'Bhakti is called the fruit of all the Vedic teachings: spiritual wisdom made livable, where every action, breath, and thought becomes an offering of love.',
      'It gives you a true understanding of the Self, the Divine, and your relationship with all of reality, along with the daily practice to actually realize it.',
      'This is what aligns you with your deepest purpose.',
      'And it keeps you connected in spirit, not only on the mat, but in everyday life.',
    ] },
    { n: 'Three', t: 'Kirtan', img: 'img-kirtan-bw.jpg', lead: 'Love expressed, & tribe in full voice.', lines: [
      'Ashtanga and Bhakti live in your own daily practice. Kirtan music brings the people.',
      'It is the core devotional practice turned into shared, sacred sound: a high spiritual path that is also simply beautiful.',
      'It builds the one thing a solitary practice never can, a real community to grow with, chant by chant.',
      'So you are never again the one who is moved but mute.',
    ] },
  ];
  const cardTitle = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '30px', color: 'var(--text-strong)', margin: '0 0 4px' };
  const cardLead = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '19px', color: 'var(--text-gold)', margin: '0 0 4px' };
  const cardBody = { fontFamily: 'var(--font-body)', fontSize: '16px', lineHeight: 1.55, color: 'var(--text-body)', margin: 0 };
  const closing = { textAlign: 'center', maxWidth: '700px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '14px' };
  const closeLine = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.55, color: 'var(--text-body)', margin: 0 };
  const closeStrong = { fontFamily: 'var(--font-display)', fontSize: '24px', lineHeight: 1.3, color: 'var(--text-strong)', margin: 0 };
  return (
    <section style={sec} id="pillars">
      <div style={head}>
        <Eb ruled align="center">Three pillars, one system</Eb>
        <h2 style={h2}>We go deep on what sits at the top</h2>
        <p style={intro}>The B.A. Yogi System is built from the highest fruit of the entire yogic tradition, the parts that actually change a person, woven into one path you can follow.</p>
        <p style={intro}>We are not going to teach you twenty-seven styles of yoga. We go deep on the three practices at the very top of the ancient Vedic hierarchy.</p>
      </div>
      <div style={grid}>
        {pillars.map((p) => (
          <DSCard key={p.t} image={`${ASSET_M}/${p.img}`} arch padding="26px 24px 30px">
            <Eb>{`Pillar ${p.n}`}</Eb>
            <h3 style={cardTitle}>{p.t}</h3>
            <p style={cardLead}>{p.lead}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              {p.lines.map((line, i) => (
                <p key={i} style={cardBody}>{line}</p>
              ))}
            </div>
          </DSCard>
        ))}
      </div>
      <div style={closing}>
        <p style={closeStrong}>This is the whole system the world never handed you.</p>
        <p style={closeLine}>Ashtanga for the body.</p>
        <p style={closeLine}>Bhakti for the spirit.</p>
        <p style={closeLine}>Kirtan for the tribe and joy.</p>
        <p style={closeLine}>The highest and most beautiful fruit of the tradition, gathered into one system.</p>
        <p style={closeLine}>Not so you can collect another certificate.</p>
        <p style={closeStrong}>So you can finally become an actual yogi.</p>
      </div>
    </section>
  );
}

function Teachers() {
  const sec = { background: 'var(--surface-dark)', padding: '110px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '50px' };
  const head = { textAlign: 'center', maxWidth: '640px', 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(--paper-50)', margin: 0 };
  const intro = { fontFamily: 'var(--font-body)', fontSize: '18px', lineHeight: 1.6, color: 'var(--clay-300)', margin: 0 };
  const grid = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(290px, 1fr))', gap: '28px', maxWidth: '1080px', width: '100%' };
  const card = { background: 'rgba(246,238,222,0.04)', border: '1px solid rgba(238,217,154,0.18)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column' };
  const photoWrap = { position: 'relative', width: '100%', aspectRatio: '4 / 5', overflow: 'hidden', background: 'var(--brown-900)' };
  const photo = { width: '100%', height: '100%', objectFit: 'cover', display: 'block' };
  const photoTint = { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(36,23,13,0) 55%, rgba(36,23,13,0.55) 100%)', pointerEvents: 'none' };
  const body = { padding: '24px 26px 30px', display: 'flex', flexDirection: 'column', gap: '11px' };
  const name = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '28px', color: 'var(--paper-50)', margin: 0, lineHeight: 1.1 };
  const role = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '11px', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gold-400)' };
  const bio = { fontFamily: 'var(--font-body)', fontSize: '15.5px', lineHeight: 1.55, color: 'var(--paper-100)', margin: 0 };
  const people = [
    { name: 'Jay Hari (Jayson)', role: 'Ashtanga Trainer', img: 'teacher-jayson.jpg', pos: 'center 30%', bioLines: ['Over 20 years in Ashtanga.', 'Trained under Tim Miller, the first Westerner certified by Pattabhi Jois.', 'Founder of Ashtanga Yoga Tulum, with students from over 40 countries.', 'He has been instrumental in the certification of over 500 Ashtanga yogis.', 'Former world-champion Brazilian Jiu-Jitsu competitor.'] },
    { name: 'Vishnu Swami', role: 'The Maverick Monk', img: 'teacher-vishnu.jpg', pos: 'center 18%', bioLines: ['A monk for 30 years, after moving into an ashram in India at age eleven.', 'The world\'s youngest Swami (Gaudiya).', 'Author of Eternal Dharma.', 'Has taught in over twenty countries, eighty cities, in four languages.', 'Has spoken to crowds as large as ten thousand.'] },
    { name: 'Vijaya Krishna', role: 'Kirtan Guide', img: 'teacher-vijaya.webp', pos: 'center 30%', bioLines: ['One of the most notable kirtaniyas of our generation and a world-renowned musician.', 'His videos have reached over 12 million views.', 'He has been touring the world as a venerable Kirtan musician for close to two decades.'] },
  ];
  return (
    <section style={sec} id="teachers">
      <div style={head}>
        <Eb ruled align="center" tone="light">Meet the teachers</Eb>
        <h2 style={h2}>You should not take this on faith</h2>
        <p style={intro}>Three teachers at the top of their fields have come together to create something the world does not yet have: a training without equal in depth, standard, or kind.</p>
      </div>
      <div style={grid}>
        {people.map((t) => (
          <div key={t.name} style={card}>
            <div style={photoWrap}>
              <img src={`${ASSET_M}/${t.img}`} alt={t.name} style={{ ...photo, objectPosition: t.pos }} />
              <div style={photoTint} />
            </div>
            <div style={body}>
              <span style={role}>{t.role}</span>
              <h3 style={name}>{t.name}</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                {t.bioLines
                  ? t.bioLines.map((line, i) => <p key={i} style={bio}>{line}</p>)
                  : <p style={bio}>{t.bio}</p>
                }
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '32px', flexWrap: 'wrap', justifyContent: 'center', background: 'var(--paper-50)', border: '1px solid rgba(238,217,154,0.25)', borderRadius: 'var(--radius-lg)', padding: '32px 44px', boxShadow: '0 10px 40px rgba(0,0,0,0.25)' }}>
        <img src={`${ASSET_M}/fvc-lockup.png`} alt="Florida Vedic College" style={{ height: '160px', width: 'auto', display: 'block' }} />
        <span style={{ fontFamily: 'var(--font-body)', fontSize: '16px', lineHeight: 1.6, color: 'var(--text-body)', maxWidth: '360px', textAlign: 'left' }}>All programs certified with the partner institution, Florida Vedic College, which has been teaching Vedic wisdom since 1990.</span>
      </div>
    </section>
  );
}

function Benefits() {
  const sec = { background: 'var(--surface-page)', padding: '110px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '46px' };
  const head = { textAlign: 'center', maxWidth: '640px', 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 grid = { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0 60px', maxWidth: '960px', width: '100%' };
  const colHead = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '10px', letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--gold-700)', margin: '0 0 6px', paddingBottom: '10px', borderBottom: '1px solid var(--line-soft)' };
  const item = { display: 'flex', gap: '14px', alignItems: 'flex-start', padding: '13px 0', borderBottom: '1px solid var(--line-hairline)' };
  const mark = { color: 'var(--gold-600)', fontSize: '15px', lineHeight: 1.5, flex: 'none' };
  const txt = { fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.5, color: 'var(--text-body)', margin: 0 };
  const capstone = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(20px,2.2vw,28px)', color: 'var(--text-strong)', textAlign: 'center', margin: 0 };

  const left = [
    'You know what you\'re doing, and why',
    'A daily practice that\'s finally your own',
    'The authority to teach, adjust, and lead a room',
    'A spiritual life you feel, not just talk about',
    'A sadhana that holds when life gets loud',
    'A Divine that feels personal, not distant',
    'Your voice leading the chant, the room following',
    'The quiet certainty that you belong',
    'A tribe for life',
  ];
  const right = [
    'A lean, strong, vibrant, healthy body',
    'Tall posture',
    'Full body blood & energy flow',
    'Calm in place of anxiety',
    'Steady energy by day, deep sleep by night',
    'Expert at advanced asanas, the deep binds',
    'Breath mastery through pranayama',
    'Pain-free, easy movement',
    'A glow people notice',
  ];
  return (
    <section style={sec}>
      <div style={head}>
        <Eb ruled align="center">With the B.A. Yogi System</Eb>
        <h2 style={h2}>You become the real deal</h2>
      </div>
      <div style={grid}>
        <div>
          <p style={colHead}>Spirit · Confidence · Purpose</p>
          {left.map((b, i) => (
            <div key={i} style={item}><span style={mark}>✦</span><p style={txt}>{b}</p></div>
          ))}
        </div>
        <div>
          <p style={colHead}>Body · Mind · Energy</p>
          {right.map((b, i) => (
            <div key={i} style={item}><span style={mark}>✦</span><p style={txt}>{b}</p></div>
          ))}
        </div>
      </div>
      <p style={capstone}>A confident, embodied presence people feel.</p>
    </section>
  );
}

function TeacherPraise() {
  const sec = { background: 'var(--surface-dark)', padding: '68px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '32px' };

  const groupWrap = { width: '100%', maxWidth: '1080px', display: 'flex', flexDirection: 'column', gap: '16px' };
  const groupName = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '11px', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-400)', margin: 0, paddingBottom: '8px', borderBottom: '1px solid rgba(238,217,154,0.18)' };
  const grid = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(290px, 1fr))', gap: '12px' };
  const card = { background: 'rgba(246,238,222,0.045)', border: '1px solid rgba(238,217,154,0.14)', borderRadius: 'var(--radius-md)', padding: '16px 18px', display: 'flex', gap: '16px', alignItems: 'center' };
  const q = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: '19px', lineHeight: 1.36, color: 'var(--paper-50)', margin: '0 0 8px' };
  const avatar = { width: '72px', height: '72px', borderRadius: '50%', objectFit: 'cover', flex: 'none', border: '1px solid rgba(238,217,154,0.4)', display: 'block' };
  const mono = { ...avatar, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: '18px', color: 'var(--gold-400)', background: 'rgba(238,217,154,0.08)' };
  const who = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '10.5px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gold-400)', lineHeight: 1.3 };
  const role = { fontFamily: 'var(--font-body)', fontSize: '12px', color: 'var(--clay-300)', lineHeight: 1.4 };

  const groups = [
    { teacher: 'Jay Hari (Jayson)', role: 'Ashtanga Trainer', quotes: [
      { q: 'I can\u2019t recommend Jayson enough.', who: 'Mark Maya', img: 'praise-mark-maya.jpg', pos: 'center 18%' },
      { q: 'The most incredible adjustments I\u2019ve ever received.', who: 'Jenna Boyce', img: 'praise-jenna-boyce.jpg' },
      { q: 'Goes beyond the physical practice. He inspires, guides, and helps you grow in every aspect.', who: 'Florencia', img: 'praise-florencia.jpg' },
      { q: 'Wisdom, patience, and presence into every class.', who: 'Adam Mah', img: 'praise-adam-mah.jpg' },
    ] },
    { teacher: 'Vishnu Swami', role: 'The Maverick Monk', quotes: [
      { q: 'The go-to person for the deep points about yoga and life.', who: 'Madhu', role: 'Yoga Teacher', img: 'praise-madhu.jpg' },
      { q: 'He teaches intense subject matter in an easy-to-understand way.', who: 'Jacque Tarlton', role: 'Founder, Focus43', img: 'praise-jacque-tarlton.jpg' },
      { q: 'Vishnu Swami is a gift to all of us.', who: 'Sabriane Brandao', role: 'Fashion Model & Entrepreneur', img: 'praise-sabriane-brandao.jpg' },
      { q: 'Totally authentic.', who: 'Christopher Jones', role: 'Cirque du Soleil Performer', img: 'praise-christopher-jones.jpg', pos: '62% 30%' },
      { q: 'You will walk out wanting to know more.', who: 'Nicole Medina', img: 'praise-nicole-medina.jpg' },
    ] },
  ];

  return (
    <section style={sec}>
      <div style={{ textAlign: 'center' }}>
        <Eb ruled align="center" tone="light">Students’ voices</Eb>
      </div>
      {groups.map((g) => (
        <div key={g.teacher} style={groupWrap}>
          <p style={groupName}>{g.teacher} · {g.role}</p>
          <div style={grid}>
            {g.quotes.map((t, i) => (
              <div key={i} style={card}>
                {t.img
                  ? <img src={`${ASSET_M}/${t.img}`} alt={t.who} style={{ ...avatar, objectPosition: t.pos || 'center 28%' }} />
                  : <div style={mono}>{t.initial}</div>
                }
                <div>
                  <p style={q}>&ldquo;{t.q}&rdquo;</p>
                  <span style={who}>{t.who}</span>
                  {t.role ? <span style={role}>, {t.role}</span> : null}
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </section>
  );
}

Object.assign(window, { Pillars, Teachers, Benefits, TeacherPraise });