// B.A. Yogi — Sales site, top sections (Nav, Hero, Problem)
// Reads primitives from the compiled DS bundle namespace.
const DS = window.BAYogiDesignSystem_8dba86;
const { Button, Eyebrow, Badge, Divider } = DS;

const ASSET = '../../assets';

function Nav({ onEnroll }) {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const bar = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 40px', height: '74px',
    background: solid ? 'rgba(250,244,233,0.86)' : 'transparent',
    backdropFilter: solid ? 'blur(10px)' : 'none',
    borderBottom: solid ? '1px solid var(--line-hairline)' : '1px solid transparent',
    transition: 'background var(--dur-med) var(--ease-soft), border-color var(--dur-med) var(--ease-soft)',
  };
  const ink = solid ? 'var(--brown-900)' : 'var(--paper-50)';
  const gold = solid ? 'var(--gold-700)' : 'var(--gold-400)';
  const mark = { textDecoration: 'none', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '3px' };
  const wordmark = {
    fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '27px',
    lineHeight: 1, letterSpacing: '0.01em', color: ink, whiteSpace: 'nowrap',
    transition: 'color var(--dur-med) var(--ease-soft)',
  };
  const markCap = {
    fontFamily: 'var(--font-label)', fontWeight: 400, fontSize: '8.5px',
    letterSpacing: '0.26em', textTransform: 'uppercase', color: gold,
    whiteSpace: 'nowrap', textIndent: '0.26em',
    transition: 'color var(--dur-med) var(--ease-soft)',
  };
  const links = { display: 'flex', gap: '34px', alignItems: 'center' };
  const link = {
    fontFamily: 'var(--font-label)', fontWeight: 400, fontSize: '12px',
    letterSpacing: '0.16em', textTransform: 'uppercase', color: ink,
    textDecoration: 'none', opacity: 0.85, cursor: 'pointer', whiteSpace: 'nowrap',
  };
  return (
    <nav style={bar}>
      <a href="#top" style={mark} aria-label="B.A. Yogi — Bhakti Ashtanga Yoga Institute">
        <span style={wordmark}>B<span style={{ color: gold }}>.</span>A<span style={{ color: gold }}>.</span> Yogi</span>
        <span style={markCap}>Bhakti · Ashtanga · Yoga · Institute</span>
      </a>
      <div style={links} className="nav-links">
        <a style={link} href="#pillars">The Path</a>
        <a style={link} href="#teachers">Teachers</a>

        <Button variant={solid ? 'primary' : 'onDark'} size="sm" onClick={onEnroll}>See If It's a Fit</Button>
      </div>
    </nav>
  );
}

function Hero({ onEnroll }) {
  // Full-bleed hero. The image carries its own negative space on the LEFT
  // (open Tulum setting / soft wall) where the headline sits. Landscape
  // 3:2 source fills a wide hero with minimal cropping.
  const wrap = {
    position: 'relative', minHeight: '90vh', display: 'flex', alignItems: 'center',
    overflow: 'hidden', background: 'var(--surface-dark)',
  };
  const bg = {
    position: 'absolute', inset: 0,
    backgroundImage: `url(${ASSET}/img-hero.png)`,
    backgroundSize: 'cover', backgroundPosition: 'right center',
  };
  const scrim = {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(90deg, rgba(36,23,13,0.78) 0%, rgba(36,23,13,0.60) 42%, rgba(36,23,13,0.28) 64%, rgba(36,23,13,0) 86%)',
  };
  const scrimV = {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(36,23,13,0.30) 0%, rgba(36,23,13,0) 26%, rgba(36,23,13,0) 70%, rgba(36,23,13,0.45) 100%)',
  };
  const inner = {
    position: 'relative', zIndex: 2, width: '100%', maxWidth: '1240px', margin: '0 auto',
    padding: '132px clamp(28px, 5vw, 72px) 104px',
    display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '24px',
  };
  const h1 = {
    fontFamily: 'var(--font-display)', fontWeight: 400, color: 'var(--paper-50)',
    fontSize: 'clamp(40px, 5vw, 66px)', lineHeight: 1.06, letterSpacing: '-0.01em', margin: 0,
    maxWidth: '740px',
    textShadow: '0 2px 28px rgba(36,23,13,0.45)',
  };
  const sub = {
    fontFamily: 'var(--font-body)', fontSize: 'clamp(17px, 1.6vw, 21px)', lineHeight: 1.55,
    color: 'var(--paper-100)', maxWidth: '480px', margin: 0,
  };
  const badges = { display: 'flex', gap: '10px', flexWrap: 'wrap', marginTop: '4px' };
  const outline = { color: 'var(--gold-300)', borderColor: 'rgba(238,217,154,0.5)' };
  return (
    <header style={wrap} id="top" className="hero-grid">
      <div style={bg} className="hero-bg" />
      <div style={scrim} className="hero-scrim" />
      <div style={scrimV} className="hero-scrimv" />
      <div style={inner} className="hero-left">
        <Eyebrow ruled tone="light">For the conscious soul</Eyebrow>
        <h1 style={h1}>How this B.A. Yogi System turns Spiritual Seekers from Overlooked into <span style={{ fontStyle: 'italic', color: 'var(--gold-400)' }}>Confident Embodied Yogis</span>, who live their Highest Purpose&hellip;<span style={{ display: 'block', marginTop: '0.4em', fontSize: '0.62em', color: 'var(--paper-100)' }}>&hellip;Without Sacrificing Modern Comfort</span></h1>
        <p style={sub}>The world's only college-certified Ashtanga &middot; Bhakti &middot; Yoga Teacher Training.</p>
        <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', marginTop: '6px' }}>
          <Button variant="onDark" size="lg" onClick={onEnroll}>See If It's a Fit</Button>
        </div>
        <div style={badges}>
          <Badge tone="outline" style={outline}>College-Certified</Badge>
          <Badge tone="outline" style={outline}>30 College Credits</Badge>
          <Badge tone="outline" style={outline}>Tulum Immersion</Badge>
        </div>
      </div>
    </header>
  );
}

function Problem() {
  const sec = { background: 'var(--surface-page)', display: 'flex', flexDirection: 'column', alignItems: 'center' };
  const inner = { maxWidth: '720px', width: '100%', padding: '0 24px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '22px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,4.4vw,48px)', lineHeight: 1.1, color: 'var(--text-strong)', margin: 0 };
  const p = { fontFamily: 'var(--font-body)', fontSize: '20px', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 };
  const quiet = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '26px', color: 'var(--text-gold)', margin: '4px 0' };
  return (
    <section style={sec}>
      <div style={{ ...inner, paddingTop: '72px', paddingBottom: '60px', gap: '20px' }}>
        <p style={quiet}>"If only I was a fully Embodied Yogi, I'd never be Overlooked"</p>
        <p style={p}>If I was the complete package, I'd live my fullest life, expressing my highest love in spirit, in relationships, and in community.</p>
        <p style={p}>The real problem isn't our bodies, our age, our discipline or how flexible we are.</p>
        <p style={p}>The modern world is built to keep us down.</p>
        <p style={p}>Our food comes laced with pesticides and seed oils, our water with microplastics, our air with pollution.</p>
        <p style={p}>Our feeds are engineered to distract us.</p>
        <p style={p}>We get knocked off center daily by noise, by conflict, by people running on lower consciousness.</p>
        <p style={p}>Almost everything around us is designed to make us weaker, fatter, sicker, more anxious, and more dependent.</p>
        <p style={p}>Staying centered, healthy, and spiritual in a world like this is genuinely hard.</p>
        <p style={p}>These issues are not new.</p>
        <p style={p}>Humans have struggled with them for thousands of years.</p>
        <p style={p}>Yoga was designed as the solution and has worked for millennia.</p>
      </div>
      <img
        src={`${ASSET}/img-tulum-studio.jpg`}
        alt="Ashtanga yoga practice"
        style={{ width: '100%', height: 'auto', display: 'block' }}
      />
      <div style={{ ...inner, paddingTop: '60px', paddingBottom: '110px', gap: '20px' }}>
        <h2 style={h2}>We were never given the whole Yoga System.</h2>
        <p style={p}>We were handed fragments.</p>
        <p style={p}>A flow here, a Sanskrit word there, a weekend workshop, a tangle of conflicting advice about what's real and what was invented last Tuesday.</p>
        <p style={p}>So we've been guessing.</p>
        <p style={p}>We've plateaued while we're performing, collecting certificates that never quite make us into that person.</p>
        <p style={p}>It's lonelier than we admit.</p>
        <p style={p}>The very things that should be our strength, our spiritual core, our hunger to grow, our wish to live consciously&hellip;</p>
        <p style={p}>&hellip;leave us out of step with a culture set against the life we want.</p>
        <p style={p}>The world doesn't hold up a centered, fit, spiritual &amp; healthy life.</p>
        <p style={p}>Without a real tribe, the practice stalls, the motivation thins, and the deeper connection we're reaching for, along with the person who might share it, stays out of reach.</p>
        <Divider variant="center" />
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Problem });