// Additional page components for VFM website
const GlowCard = window.GlowCard;
const FlowArt = window.FlowArt;
const FlowSection = window.FlowSection;

// About Page
function AboutPage() {
  return (
    <FlowArt ariaLabel="About VFM">
      <FlowSection style={{background: '#0d0d0d'}}>
      <section className="section" style={{paddingTop: '9rem'}}>
        <div className="parallax-bg">
          <div className="floating-shape"></div>
          <div className="floating-shape"></div>
        </div>
        <h1 className="section-title fade-in">Our Story</h1>
        <p className="section-subtitle fade-in">
          From a simple dream to inspiring filmmakers across Vancouver
        </p>

        <div className="story-grid" style={{maxWidth: '2200px', margin: '0 auto', alignItems: 'center'}}>
          <div className="fade-in" style={{fontSize: '1.75rem', lineHeight: '1.8', color: 'var(--text-secondary)'}}>
            <p style={{marginBottom: '2rem'}}>
              Our story began in Vancouver with a big dream and a simple job. As an international student working at McDonald's,
              I always had a deep love for filmmaking. One day, I asked myself: <strong style={{color: '#C8102E'}}>Why not follow my dream?</strong>
            </p>
            <p style={{marginBottom: '2rem'}}>
              That question changed everything. At the time, I only had <strong style={{color: 'var(--text-primary)'}}>$2,000 left</strong>,
              and my tuition was due in two months. Instead of paying off my tuition, I made a bold decision—I bought my first camera.
            </p>
            <p style={{marginBottom: '2rem'}}>
              I started calling studios and individuals, searching for work. Every time, they would ask,
              <em style={{color: 'var(--text-primary)'}}>"Do you even have a camera?"</em> That one purchase opened doors, and it became the start of VFM.
            </p>
          </div>

          <div className="fade-in" style={{background: 'rgba(200,16,46, 0.05)', border: '2px solid #C8102E', borderRadius: 'var(--radius-xl)', padding: '4rem'}}>
            <div style={{fontSize: '6rem', color: '#C8102E', marginBottom: '2rem', textAlign: 'center'}}>🎬</div>
            <h3 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem', textAlign: 'center'}}>The Journey</h3>
            <div style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.8'}}>
              <p style={{marginBottom: '1.5rem'}}>• Started with a single camera and a dream</p>
              <p style={{marginBottom: '1.5rem'}}>• Worked with local studios and notable people</p>
              <p style={{marginBottom: '1.5rem'}}>• Built VFM over 3 years of dedication</p>
              <p style={{marginBottom: '1.5rem'}}>• Now inspiring international students</p>
            </div>
          </div>
        </div>

        <div style={{maxWidth: '2200px', margin: '6rem auto 0', padding: '4rem', background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)'}}>
          <p className="fade-in" style={{fontSize: '1.75rem', lineHeight: '1.8', color: 'var(--text-secondary)', marginBottom: '2rem'}}>
            The journey wasn't easy. I hustled, learned quickly, and put my heart into every project. I worked with local studios and notable people;
            each experience fueled my passion even more.
          </p>
          <p className="fade-in" style={{fontSize: '1.75rem', lineHeight: '1.8', color: 'var(--text-secondary)', marginBottom: '2rem'}}>
            Three years later, <strong style={{color: '#C8102E'}}>Vancouver Filmmaker has grown beyond what I imagined</strong>.
            It's a reminder that even the biggest dreams can come true with hard work and determination.
          </p>
          <p className="fade-in" style={{fontSize: '2rem', lineHeight: '1.8', color: 'var(--text-primary)', fontWeight: '600', textAlign: 'center'}}>
            At VFM, we don't just make films; we create stories of courage, growth, and success.
          </p>
        </div>
      </section>
      </FlowSection>

      <FlowSection style={{background: 'var(--bg-secondary)'}}>
      <section className="section">
        <h2 className="section-title fade-in">Our Mission</h2>
        <div style={{maxWidth: '1800px', margin: '0 auto'}}>
          <p className="fade-in" style={{fontSize: '2rem', lineHeight: '1.8', color: 'var(--text-secondary)', textAlign: 'center', marginBottom: '4rem'}}>
            Our mission at VFM is more significant than just filmmaking. We want to inspire others, especially international students, to follow their passions.
            Many of us settle into ordinary jobs, not knowing what's possible if we take a chance on our dreams.
          </p>
          <div className="features-grid">
            <GlowCard className="feature-card fade-in" glowColor="red" customSize>
              <div className="feature-icon">💪</div>
              <h3 className="feature-title">Empowerment</h3>
              <p className="feature-description">
                We empower students to believe in themselves and take that crucial first step toward their dreams.
              </p>
            </GlowCard>
            <GlowCard className="feature-card fade-in" glowColor="red" customSize>
              <div className="feature-icon">🌟</div>
              <h3 className="feature-title">Inspiration</h3>
              <p className="feature-description">
                Every success story at VFM proves that anything is possible when you follow your heart.
              </p>
            </GlowCard>
            <GlowCard className="feature-card fade-in" glowColor="red" customSize>
              <div className="feature-icon">🎓</div>
              <h3 className="feature-title">Excellence</h3>
              <p className="feature-description">
                We provide world-class training that prepares students for real-world filmmaking careers.
              </p>
            </GlowCard>
          </div>
        </div>
      </section>
      </FlowSection>
    </FlowArt>
  );
}

// Courses Overview Page
function CoursesPage({ onPageChange }) {
  return (
    <FlowArt ariaLabel="VFM Courses">
      <FlowSection style={{background: '#0d0d0d'}}>
      <section className="section" style={{paddingTop: '9rem'}}>
        <h1 className="section-title fade-in">Film Production Courses</h1>
        <p className="section-subtitle fade-in">
          Comprehensive curriculum from beginner fundamentals to professional-level production
        </p>

        <div className="courses-grid">
          <GlowCard className="course-card fade-in" glowColor="red" customSize>
            <div className="course-image">
              <div style={{fontSize: '8rem'}}>📱</div>
            </div>
            <div className="course-content">
              <span className="course-badge">Stage 1 - Beginner</span>
              <h3 className="course-title">Filmmaking Fundamentals</h3>
              <p className="course-description">
                Master the essentials of filmmaking. Learn device settings, framing, composition, and lighting basics to create visually impactful scenes.
              </p>
              <div style={{marginBottom: '2rem'}}>
                <div style={{fontSize: '1.5rem', color: 'var(--text-secondary)', marginBottom: '1rem'}}>
                  <strong style={{color: 'var(--text-primary)'}}>What You'll Learn:</strong>
                </div>
                <ul style={{fontSize: '1.25rem', color: 'var(--text-secondary)', lineHeight: '2', paddingLeft: '2rem'}}>
                  <li>Understanding filming, device settings, and basic functions</li>
                  <li>Fundamental concepts like framing and composition</li>
                  <li>Basic lighting techniques</li>
                  <li>Shooting and editing simple scenes</li>
                </ul>
              </div>
              <div className="course-details">
                <div className="course-detail"><strong>Duration:</strong> 8 weeks</div>
                <div className="course-detail"><strong>Format:</strong> Live + Recorded</div>
              </div>
              <button className="btn btn-primary" style={{width: '100%'}} onClick={() => onPageChange('courses-beginner')}>View Full Details</button>
            </div>
          </GlowCard>

          <GlowCard className="course-card fade-in" glowColor="red" customSize>
            <div className="course-image">
              <div style={{fontSize: '8rem'}}>🎬</div>
            </div>
            <div className="course-content">
              <span className="course-badge">Stage 2 - Intermediate</span>
              <h3 className="course-title">Advanced Techniques</h3>
              <p className="course-description">
                Take your skills to the next level with advanced camera movement, lighting techniques, and cinematic storytelling.
              </p>
              <div style={{marginBottom: '2rem'}}>
                <div style={{fontSize: '1.5rem', color: 'var(--text-secondary)', marginBottom: '1rem'}}>
                  <strong style={{color: 'var(--text-primary)'}}>What You'll Learn:</strong>
                </div>
                <ul style={{fontSize: '1.25rem', color: 'var(--text-secondary)', lineHeight: '2', paddingLeft: '2rem'}}>
                  <li>Advanced camera movement and stabilization</li>
                  <li>Using lighting to create mood and depth</li>
                  <li>Cinematic color grading and post-production</li>
                  <li>Professional storytelling techniques</li>
                </ul>
              </div>
              <div className="course-details">
                <div className="course-detail"><strong>Duration:</strong> 12 weeks</div>
                <div className="course-detail"><strong>Format:</strong> Live + Recorded</div>
              </div>
              <button className="btn btn-primary" style={{width: '100%'}} onClick={() => onPageChange('courses-intermediate')}>View Full Details</button>
            </div>
          </GlowCard>

          <GlowCard className="course-card fade-in" glowColor="red" customSize>
            <div className="course-image">
              <div style={{fontSize: '8rem'}}>🎯</div>
            </div>
            <div className="course-content">
              <span className="course-badge">Stage 3 - Professional</span>
              <h3 className="course-title">Industry-Level Production</h3>
              <p className="course-description">
                Master professional filmmaking with industry-grade equipment, large-scale productions, and portfolio development.
              </p>
              <div style={{marginBottom: '2rem'}}>
                <div style={{fontSize: '1.5rem', color: 'var(--text-secondary)', marginBottom: '1rem'}}>
                  <strong style={{color: 'var(--text-primary)'}}>What You'll Learn:</strong>
                </div>
                <ul style={{fontSize: '1.25rem', color: 'var(--text-secondary)', lineHeight: '2', paddingLeft: '2rem'}}>
                  <li>Crafting visually stunning scenes with complex setups</li>
                  <li>Collaborating with directors and crews</li>
                  <li>Using professional-grade equipment and software</li>
                  <li>Building a professional portfolio</li>
                </ul>
              </div>
              <div className="course-details">
                <div className="course-detail"><strong>Duration:</strong> 16 weeks</div>
                <div className="course-detail"><strong>Format:</strong> Live + Recorded</div>
              </div>
              <button className="btn btn-primary" style={{width: '100%'}} onClick={() => onPageChange('courses-professional')}>View Full Details</button>
            </div>
          </GlowCard>
        </div>
      </section>
      </FlowSection>

      <FlowSection style={{background: 'var(--bg-secondary)'}}>
      <section className="section">
        <h2 className="section-title fade-in">Course Benefits</h2>
        <div className="features-grid">
          <GlowCard className="feature-card fade-in" glowColor="red" customSize>
            <div className="feature-icon">📹</div>
            <h3 className="feature-title">Weekly Live Sessions</h3>
            <p className="feature-description">
              Get direct access to experienced filmmakers through interactive weekly live sessions. Ask questions and gain insider knowledge.
            </p>
          </GlowCard>
          <GlowCard className="feature-card fade-in" glowColor="red" customSize>
            <div className="feature-icon">📚</div>
            <h3 className="feature-title">On-Demand Access</h3>
            <p className="feature-description">
              Every session is recorded and available on demand, so you can learn at your convenience and rewatch key lessons anytime.
            </p>
          </GlowCard>
          <GlowCard className="feature-card fade-in" glowColor="red" customSize>
            <div className="feature-icon">💰</div>
            <h3 className="feature-title">Affordable Pricing</h3>
            <p className="feature-description">
              Learn everything from cinematography and storytelling to editing and directing—all at an affordable price.
            </p>
          </GlowCard>
          <GlowCard className="feature-card fade-in" glowColor="red" customSize>
            <div className="feature-icon">🎓</div>
            <h3 className="feature-title">Industry Trends</h3>
            <p className="feature-description">
              Stay updated with the latest industry trends and techniques from professionals working in the field today.
            </p>
          </GlowCard>
          <GlowCard className="feature-card fade-in" glowColor="red" customSize>
            <div className="feature-icon">🤝</div>
            <h3 className="feature-title">Hands-On Learning</h3>
            <p className="feature-description">
              Practice what you learn with real projects and assignments that build your skills and confidence.
            </p>
          </GlowCard>
          <GlowCard className="feature-card fade-in" glowColor="red" customSize>
            <div className="feature-icon">🏆</div>
            <h3 className="feature-title">Portfolio Building</h3>
            <p className="feature-description">
              Create a professional portfolio that showcases your work and opens doors to filmmaking opportunities.
            </p>
          </GlowCard>
        </div>
      </section>
      </FlowSection>
    </FlowArt>
  );
}

// Beginner Course Detail Page
function BeginnerCoursePage() {
  return (
    <FlowArt ariaLabel="Beginner Course">
      <FlowSection style={{background: '#0d0d0d'}}>
      <section className="section" style={{paddingTop: '9rem'}}>
        <div style={{maxWidth: '2400px', margin: '0 auto'}}>
          <span className="course-badge fade-in" style={{display: 'inline-block', marginBottom: '2rem', fontSize: '1.5rem', padding: '1rem 2rem'}}>
            Stage 1 - Beginner
          </span>
          <h1 className="section-title fade-in" style={{textAlign: 'left', marginBottom: '1rem'}}>
            Filmmaking Fundamentals
          </h1>
          <p className="fade-in" style={{fontSize: '2.5rem', color: 'var(--text-secondary)', marginBottom: '4rem', lineHeight: '1.6'}}>
            Begin your filmmaking journey by mastering the essentials
          </p>

          <div className="course-detail-grid" style={{marginBottom: '6rem'}}>
            <div className="fade-in">
              <div style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '4rem', marginBottom: '3rem'}}>
                <h2 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Course Overview</h2>
                <p style={{fontSize: '1.75rem', color: 'var(--text-secondary)', lineHeight: '1.8', marginBottom: '2rem'}}>
                  This foundational course is perfect for beginners who want to enter the world of filmmaking.
                  You'll learn the essential techniques and concepts that form the backbone of professional video production.
                </p>
                <p style={{fontSize: '1.75rem', color: 'var(--text-secondary)', lineHeight: '1.8'}}>
                  By the end of this stage, you'll have a strong foundation to build upon as you progress to more advanced techniques.
                </p>
              </div>

              <div style={{background: 'rgba(200,16,46, 0.05)', border: '2px solid #C8102E', borderRadius: 'var(--radius-xl)', padding: '4rem'}}>
                <h2 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>What You'll Learn</h2>
                <div style={{display: 'grid', gap: '2rem'}}>
                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>📱</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Device Settings & Functions</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Understand your camera or smartphone's filming capabilities, settings, and how to optimize them for different scenarios.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>🎨</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Framing & Composition</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Master the rule of thirds, leading lines, symmetry, and other compositional techniques that make shots visually appealing.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>💡</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Basic Lighting</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Learn fundamental lighting concepts including natural light, three-point lighting, and how to shape light for mood.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>✂️</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Shooting & Editing</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Shoot simple yet impactful scenes and learn basic editing techniques to bring your vision to life.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="fade-in">
              <div style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '3rem', position: 'sticky', top: '180px'}}>
                <h3 style={{fontSize: '2.5rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Course Details</h3>
                <div style={{display: 'grid', gap: '2rem', marginBottom: '3rem'}}>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Duration</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>8 Weeks</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Level</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>Beginner</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Format</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>Live + On-Demand</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Prerequisites</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>None</div>
                  </div>
                </div>
                <button className="btn btn-primary" style={{width: '100%', marginBottom: '1rem'}}>Enroll Now</button>
                <button className="btn btn-secondary" style={{width: '100%'}}>Download Syllabus</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{background: 'var(--bg-secondary)'}}>
        <h2 className="section-title fade-in">Course Curriculum</h2>
        <div style={{maxWidth: '2200px', margin: '0 auto', display: 'grid', gap: '2rem'}}>
          {[
            {week: 1, title: 'Introduction to Filmmaking', topics: ['Understanding cameras and equipment', 'Basic camera settings and controls', 'Introduction to shot types']},
            {week: 2, title: 'Composition Fundamentals', topics: ['Rule of thirds', 'Leading lines and symmetry', 'Depth and foreground interest']},
            {week: 3, title: 'Lighting Basics', topics: ['Natural light techniques', 'Three-point lighting setup', 'Light quality and direction']},
            {week: 4, title: 'Camera Movement', topics: ['Handheld techniques', 'Basic stabilization', 'Pan and tilt movements']},
            {week: 5, title: 'Audio Essentials', topics: ['Recording clean audio', 'Microphone types and placement', 'Audio levels and monitoring']},
            {week: 6, title: 'Introduction to Editing', topics: ['Editing software basics', 'Timeline and cuts', 'Continuity and pacing']},
            {week: 7, title: 'Color and Exposure', topics: ['Understanding exposure triangle', 'White balance', 'Basic color correction']},
            {week: 8, title: 'Final Project', topics: ['Planning your short film', 'Shooting and editing', 'Presenting your work']},
          ].map((item, idx) => (
            <div key={idx} className="fade-in" style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '3rem', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => {e.currentTarget.style.borderColor = '#C8102E'; e.currentTarget.style.transform = 'translateX(10px)';}} onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.transform = 'translateX(0)';}}>
              <div style={{display: 'flex', gap: '3rem', alignItems: 'center'}}>
                <div style={{fontSize: '4rem', fontWeight: '900', color: '#C8102E', fontFamily: 'Urbanist', minWidth: '120px'}}>
                  Week {item.week}
                </div>
                <div style={{flex: 1}}>
                  <h3 style={{fontSize: '2.5rem', color: 'var(--text-primary)', marginBottom: '1rem'}}>{item.title}</h3>
                  <ul style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '2', paddingLeft: '2rem'}}>
                    {item.topics.map((topic, i) => (
                      <li key={i}>{topic}</li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
      </FlowSection>
    </FlowArt>
  );
}

// Intermediate Course Page
function IntermediateCoursePage() {
  return (
    <FlowArt ariaLabel="Intermediate Course">
      <FlowSection style={{background: '#0d0d0d'}}>
      <section className="section" style={{paddingTop: '9rem'}}>
        <div style={{maxWidth: '2400px', margin: '0 auto'}}>
          <span className="course-badge fade-in" style={{display: 'inline-block', marginBottom: '2rem', fontSize: '1.5rem', padding: '1rem 2rem'}}>
            Stage 2 - Intermediate
          </span>
          <h1 className="section-title fade-in" style={{textAlign: 'left', marginBottom: '1rem'}}>
            Advanced Techniques
          </h1>
          <p className="fade-in" style={{fontSize: '2.5rem', color: 'var(--text-secondary)', marginBottom: '4rem', lineHeight: '1.6'}}>
            Take your skills to the next level with professional techniques
          </p>

          <div className="course-detail-grid" style={{marginBottom: '6rem'}}>
            <div className="fade-in">
              <div style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '4rem', marginBottom: '3rem'}}>
                <h2 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Course Overview</h2>
                <p style={{fontSize: '1.75rem', color: 'var(--text-secondary)', lineHeight: '1.8', marginBottom: '2rem'}}>
                  Build on your foundational knowledge and dive deeper into the technical and creative aspects of filmmaking.
                  This course focuses on advanced camera techniques, sophisticated lighting setups, and cinematic storytelling.
                </p>
                <p style={{fontSize: '1.75rem', color: 'var(--text-secondary)', lineHeight: '1.8'}}>
                  You'll work on more complex projects and learn to create visually stunning content that stands out in professional environments.
                </p>
              </div>

              <div style={{background: 'rgba(200,16,46, 0.05)', border: '2px solid #C8102E', borderRadius: 'var(--radius-xl)', padding: '4rem'}}>
                <h2 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>What You'll Master</h2>
                <div style={{display: 'grid', gap: '2rem'}}>
                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>🎬</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Advanced Camera Movement</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Master gimbal work, slider shots, and complex camera movements that add production value to your projects.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>💡</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Cinematic Lighting</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Use lighting to create mood, depth, and cinematic effects that elevate your storytelling.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>🎨</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Color Grading</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Learn professional color grading techniques to achieve cinematic looks and consistent visual styles.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>📖</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Visual Storytelling</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Develop your storytelling skills and learn to convey emotion and narrative through visual means.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="fade-in">
              <div style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '3rem', position: 'sticky', top: '180px'}}>
                <h3 style={{fontSize: '2.5rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Course Details</h3>
                <div style={{display: 'grid', gap: '2rem', marginBottom: '3rem'}}>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Duration</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>12 Weeks</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Level</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>Intermediate</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Format</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>Live + On-Demand</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Prerequisites</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>Stage 1 or Equivalent</div>
                  </div>
                </div>
                <button className="btn btn-primary" style={{width: '100%', marginBottom: '1rem'}}>Enroll Now</button>
                <button className="btn btn-secondary" style={{width: '100%'}}>Download Syllabus</button>
              </div>
            </div>
          </div>
        </div>
      </section>
      </FlowSection>
    </FlowArt>
  );
}

// Professional Course Page
function ProfessionalCoursePage() {
  return (
    <FlowArt ariaLabel="Professional Course">
      <FlowSection style={{background: '#0d0d0d'}}>
      <section className="section" style={{paddingTop: '9rem'}}>
        <div style={{maxWidth: '2400px', margin: '0 auto'}}>
          <span className="course-badge fade-in" style={{display: 'inline-block', marginBottom: '2rem', fontSize: '1.5rem', padding: '1rem 2rem'}}>
            Stage 3 - Professional
          </span>
          <h1 className="section-title fade-in" style={{textAlign: 'left', marginBottom: '1rem'}}>
            Industry-Level Production
          </h1>
          <p className="fade-in" style={{fontSize: '2.5rem', color: 'var(--text-secondary)', marginBottom: '4rem', lineHeight: '1.6'}}>
            Master professional filmmaking and build your industry portfolio
          </p>

          <div className="course-detail-grid" style={{marginBottom: '6rem'}}>
            <div className="fade-in">
              <div style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '4rem', marginBottom: '3rem'}}>
                <h2 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Course Overview</h2>
                <p style={{fontSize: '1.75rem', color: 'var(--text-secondary)', lineHeight: '1.8', marginBottom: '2rem'}}>
                  This advanced course prepares you for professional work in the film industry. You'll work with industry-grade equipment,
                  collaborate with directors and crews, and develop a portfolio that showcases your capabilities.
                </p>
                <p style={{fontSize: '1.75rem', color: 'var(--text-secondary)', lineHeight: '1.8'}}>
                  By the end of this stage, you'll be equipped to tackle high-end projects confidently and creatively, ready to work in professional production environments.
                </p>
              </div>

              <div style={{background: 'rgba(200,16,46, 0.05)', border: '2px solid #C8102E', borderRadius: 'var(--radius-xl)', padding: '4rem'}}>
                <h2 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Professional Skills</h2>
                <div style={{display: 'grid', gap: '2rem'}}>
                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>🎯</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Complex Lighting & Filming Setups</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Craft visually stunning scenes with sophisticated lighting and camera setups used in major productions.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>👥</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Large-Scale Productions</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Collaborate with directors and crews on larger-scale productions, learning professional set protocols.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>⚙️</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Professional Equipment</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Master professional-grade cameras, lighting equipment, and post-production software to achieve industry-level results.
                      </p>
                    </div>
                  </div>

                  <div style={{display: 'flex', gap: '2rem', alignItems: 'flex-start'}}>
                    <div style={{fontSize: '3rem', minWidth: '60px'}}>📁</div>
                    <div>
                      <h3 style={{fontSize: '2rem', color: 'var(--text-primary)', marginBottom: '0.5rem'}}>Portfolio Development</h3>
                      <p style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '1.6'}}>
                        Build a professional showreel that demonstrates your skills and opens doors to career opportunities.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="fade-in">
              <div style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '3rem', position: 'sticky', top: '180px'}}>
                <h3 style={{fontSize: '2.5rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Course Details</h3>
                <div style={{display: 'grid', gap: '2rem', marginBottom: '3rem'}}>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Duration</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>16 Weeks</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Level</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>Advanced</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Format</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>Live + On-Demand</div>
                  </div>
                  <div>
                    <div style={{fontSize: '1.25rem', color: 'var(--text-tertiary)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.1em'}}>Prerequisites</div>
                    <div style={{fontSize: '2rem', color: 'var(--text-primary)', fontWeight: '600'}}>Stage 2 or Equivalent</div>
                  </div>
                </div>
                <button className="btn btn-primary" style={{width: '100%', marginBottom: '1rem'}}>Enroll Now</button>
                <button className="btn btn-secondary" style={{width: '100%'}}>Download Syllabus</button>
              </div>
            </div>
          </div>
        </div>
      </section>
      </FlowSection>
    </FlowArt>
  );
}

// Contact Page
function ContactPage() {
  return (
    <FlowArt ariaLabel="Contact VFM">
      <FlowSection style={{background: '#0d0d0d'}}>
      <section className="section" style={{paddingTop: '9rem'}}>
        <h1 className="section-title fade-in">Get In Touch</h1>
        <p className="section-subtitle fade-in">
          Interested in working together or have a question? Fill out the form and we'll get back to you shortly.
        </p>

        <div className="contact-grid" style={{maxWidth: '1800px', margin: '0 auto'}}>
          <div className="fade-in">
            <form style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '4rem'}}>
              <div style={{marginBottom: '2.5rem'}}>
                <label style={{display: 'block', fontSize: '1.5rem', color: 'var(--text-primary)', marginBottom: '1rem', fontWeight: '600'}}>Full Name *</label>
                <input type="text" style={{width: '100%', padding: '1.5rem', fontSize: '1.5rem', background: 'rgba(255, 255, 255, 0.05)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', color: 'var(--text-primary)', transition: 'all 0.3s ease'}} onFocus={(e) => e.target.style.borderColor = '#C8102E'} onBlur={(e) => e.target.style.borderColor = 'var(--border-subtle)'} />
              </div>

              <div style={{marginBottom: '2.5rem'}}>
                <label style={{display: 'block', fontSize: '1.5rem', color: 'var(--text-primary)', marginBottom: '1rem', fontWeight: '600'}}>Email *</label>
                <input type="email" style={{width: '100%', padding: '1.5rem', fontSize: '1.5rem', background: 'rgba(255, 255, 255, 0.05)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', color: 'var(--text-primary)', transition: 'all 0.3s ease'}} onFocus={(e) => e.target.style.borderColor = '#C8102E'} onBlur={(e) => e.target.style.borderColor = 'var(--border-subtle)'} />
              </div>

              <div style={{marginBottom: '2.5rem'}}>
                <label style={{display: 'block', fontSize: '1.5rem', color: 'var(--text-primary)', marginBottom: '1rem', fontWeight: '600'}}>Course Interest</label>
                <select style={{width: '100%', padding: '1.5rem', fontSize: '1.5rem', background: 'rgba(255, 255, 255, 0.05)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', color: 'var(--text-primary)', transition: 'all 0.3s ease'}} onFocus={(e) => e.target.style.borderColor = '#C8102E'} onBlur={(e) => e.target.style.borderColor = 'var(--border-subtle)'}>
                  <option>Stage 1 - Beginner Fundamentals</option>
                  <option>Stage 2 - Intermediate Techniques</option>
                  <option>Stage 3 - Professional Production</option>
                  <option>Not sure yet</option>
                </select>
              </div>

              <div style={{marginBottom: '2.5rem'}}>
                <label style={{display: 'block', fontSize: '1.5rem', color: 'var(--text-primary)', marginBottom: '1rem', fontWeight: '600'}}>Message *</label>
                <textarea rows="6" style={{width: '100%', padding: '1.5rem', fontSize: '1.5rem', background: 'rgba(255, 255, 255, 0.05)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', color: 'var(--text-primary)', resize: 'vertical', fontFamily: 'inherit', transition: 'all 0.3s ease'}} onFocus={(e) => e.target.style.borderColor = '#C8102E'} onBlur={(e) => e.target.style.borderColor = 'var(--border-subtle)'}></textarea>
              </div>

              <button type="submit" className="btn btn-primary" style={{width: '100%'}}>Send Message</button>
            </form>
          </div>

          <div className="fade-in">
            <div style={{background: 'rgba(200,16,46, 0.05)', border: '2px solid #C8102E', borderRadius: 'var(--radius-xl)', padding: '4rem', marginBottom: '3rem'}}>
              <h3 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Why Choose VFM?</h3>
              <ul style={{fontSize: '1.5rem', color: 'var(--text-secondary)', lineHeight: '2.2', paddingLeft: '2rem'}}>
                <li style={{marginBottom: '1rem'}}>Learn from experienced industry professionals</li>
                <li style={{marginBottom: '1rem'}}>Affordable, accessible online courses</li>
                <li style={{marginBottom: '1rem'}}>Weekly live sessions with on-demand recordings</li>
                <li style={{marginBottom: '1rem'}}>Hands-on projects and portfolio building</li>
                <li style={{marginBottom: '1rem'}}>Structured curriculum from beginner to pro</li>
              </ul>
            </div>

            <div style={{background: 'rgba(13, 13, 13, 0.8)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '4rem'}}>
              <h3 style={{fontSize: '3rem', color: 'var(--text-primary)', marginBottom: '2rem'}}>Quick Links</h3>
              <div style={{display: 'grid', gap: '1.5rem'}}>
                <a href="#" style={{fontSize: '1.75rem', color: '#C8102E', textDecoration: 'none', transition: 'all 0.3s ease', display: 'flex', alignItems: 'center', gap: '1rem'}} onMouseEnter={(e) => e.target.style.paddingLeft = '1rem'} onMouseLeave={(e) => e.target.style.paddingLeft = '0'}>→ View All Courses</a>
                <a href="#" style={{fontSize: '1.75rem', color: '#C8102E', textDecoration: 'none', transition: 'all 0.3s ease', display: 'flex', alignItems: 'center', gap: '1rem'}} onMouseEnter={(e) => e.target.style.paddingLeft = '1rem'} onMouseLeave={(e) => e.target.style.paddingLeft = '0'}>→ Read Our Story</a>
                <a href="#" style={{fontSize: '1.75rem', color: '#C8102E', textDecoration: 'none', transition: 'all 0.3s ease', display: 'flex', alignItems: 'center', gap: '1rem'}} onMouseEnter={(e) => e.target.style.paddingLeft = '1rem'} onMouseLeave={(e) => e.target.style.paddingLeft = '0'}>→ View Portfolio</a>
                <a href="#" style={{fontSize: '1.75rem', color: '#C8102E', textDecoration: 'none', transition: 'all 0.3s ease', display: 'flex', alignItems: 'center', gap: '1rem'}} onMouseEnter={(e) => e.target.style.paddingLeft = '1rem'} onMouseLeave={(e) => e.target.style.paddingLeft = '0'}>→ FAQ</a>
              </div>
            </div>
          </div>
        </div>
      </section>
      </FlowSection>
    </FlowArt>
  );
}

// Portfolio Page
function PortfolioPage() {
  return (
    <FlowArt ariaLabel="VFM Portfolio">
      <FlowSection style={{background: '#0d0d0d'}}>
      <section className="section" style={{paddingTop: '9rem'}}>
        <h1 className="section-title fade-in">Our Work</h1>
        <p className="section-subtitle fade-in">
          Explore projects created by VFM students and instructors
        </p>

        <div className="portfolio-grid">
          {[1, 2, 3, 4, 5, 6].map((item) => (
            <GlowCard key={item} className="fade-in" glowColor="red" customSize style={{cursor: 'pointer', transition: 'transform 0.4s ease'}} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-10px)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}>
              <div style={{width: '100%', height: '300px', background: 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', borderBottom: '1px solid var(--border-subtle)', margin: '-2px -2px 0', width: 'calc(100% + 4px)'}}>
                <div style={{fontSize: '5rem', color: '#C8102E'}}>🎬</div>
              </div>
              <div style={{padding: '2rem'}}>
                <div style={{display: 'inline-block', padding: '0.5rem 1rem', background: 'rgba(200,16,46, 0.1)', color: '#C8102E', borderRadius: 'var(--radius-full)', fontSize: '0.85rem', fontWeight: '600', marginBottom: '1rem'}}>SHORT FILM</div>
                <h3 style={{fontSize: '1.5rem', color: 'var(--text-primary)', marginBottom: '0.75rem'}}>Project Title {item}</h3>
                <p style={{fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: '1.6', marginBottom: '1.5rem'}}>
                  A compelling story exploring themes of identity and belonging, shot entirely in Vancouver.
                </p>
                <div style={{display: 'flex', gap: '1rem', fontSize: '0.85rem', color: 'var(--text-tertiary)'}}>
                  <span>2024</span>
                  <span>•</span>
                  <span>5:30 min</span>
                  <span>•</span>
                  <span>Drama</span>
                </div>
              </div>
            </GlowCard>
          ))}
        </div>
      </section>
      </FlowSection>
    </FlowArt>
  );
}

// Shop Page
function ShopPage() {
  const products = [
    {
      id: 'cine-rig-01',
      name: 'VFM Cinema Camera Rig',
      category: 'Cinema Gear',
      price: 2499,
      stock: 8,
      icon: '🎥',
      description: 'A modular production rig with cage, top handle, monitor mount, rods, and shoulder support for short films and commercial shoots.',
      specs: ['Full cage system', '15mm rail support', 'Monitor mount ready'],
    },
    {
      id: 'lens-kit-24-70',
      name: '24-70mm Creator Lens Kit',
      category: 'Photography Gear',
      price: 1299,
      stock: 12,
      icon: '📷',
      description: 'Fast everyday zoom lens package for portraits, event coverage, and documentary stills.',
      specs: ['f/2.8 constant aperture', 'UV and ND filters', 'Hard travel case'],
    },
    {
      id: 'light-panel-pro',
      name: 'Bi-Color LED Panel Pro',
      category: 'Cinema Gear',
      price: 649,
      stock: 16,
      icon: '💡',
      description: 'Portable high-output lighting panel for interviews, product shoots, and studio scenes.',
      specs: ['2700K-6500K', 'Battery or AC power', 'Soft diffusion included'],
    },
    {
      id: 'audio-field-kit',
      name: 'Field Audio Capture Kit',
      category: 'Cinema Gear',
      price: 899,
      stock: 7,
      icon: '🎙️',
      description: 'Boom mic, wireless lav pair, recorder, headphones, and accessories for clean production sound.',
      specs: ['Dual wireless lavs', 'Shotgun microphone', '32-bit float recorder'],
    },
    {
      id: 'tripod-fluid-head',
      name: 'Carbon Tripod + Fluid Head',
      category: 'Photography Gear',
      price: 779,
      stock: 10,
      icon: '📐',
      description: 'Stable carbon legs with a smooth pan and tilt head for cinematic motion and long exposure work.',
      specs: ['18 lb payload', 'Quick release plate', '75mm bowl adapter'],
    },
    {
      id: 'creator-backpack',
      name: 'Creator Gear Backpack',
      category: 'Photography Gear',
      price: 289,
      stock: 24,
      icon: '🎒',
      description: 'Weather-resistant camera backpack with configurable dividers for camera, drone, lenses, and laptop.',
      specs: ['16 inch laptop sleeve', 'Rain cover', 'Side tripod carry'],
    },
  ];

  const [cart, setCart] = React.useState([]);
  const [category, setCategory] = React.useState('All');
  const visibleProducts = category === 'All' ? products : products.filter((product) => product.category === category);
  const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const tax = Math.round(subtotal * 0.12);
  const total = subtotal + tax;

  const addToCart = (product) => {
    setCart((items) => {
      const existing = items.find((item) => item.id === product.id);
      if (existing) {
        return items.map((item) => item.id === product.id ? {...item, quantity: item.quantity + 1} : item);
      }
      return [...items, {...product, quantity: 1}];
    });
  };

  const updateQuantity = (id, delta) => {
    setCart((items) => items
      .map((item) => item.id === id ? {...item, quantity: Math.max(0, item.quantity + delta)} : item)
      .filter((item) => item.quantity > 0)
    );
  };

  const money = (value) => `$${value.toLocaleString('en-CA')}`;

  return (
    <FlowArt ariaLabel="VFM Shop">
      <FlowSection style={{background: '#0d0d0d'}}>
      <section className="section" style={{paddingTop: '9rem'}}>
        <h1 className="section-title fade-in">VFM Gear Shop</h1>
        <p className="section-subtitle fade-in">
          Cinema and photography gear selected for students, creators, and working production teams.
        </p>

        <div className="fade-in" style={{maxWidth: '1700px', margin: '0 auto 2rem', display: 'flex', gap: '0.75rem', flexWrap: 'wrap'}}>
          {['All', 'Cinema Gear', 'Photography Gear'].map((item) => (
            <button
              key={item}
              className={category === item ? 'btn btn-primary' : 'btn btn-secondary'}
              onClick={() => setCategory(item)}
              style={{padding: '0.85rem 1.25rem'}}
            >
              {item}
            </button>
          ))}
        </div>

        <div className="shop-layout">
          <div className="shop-grid">
            {visibleProducts.map((product) => (
              <article key={product.id} className="shop-card fade-in">
                <div className="shop-product-visual">{product.icon}</div>
                <div className="shop-card-body">
                  <div className="shop-meta">
                    <span>{product.category}</span>
                    <span>{product.stock} in stock</span>
                  </div>
                  <h2 style={{fontSize: '1.45rem', color: 'var(--text-primary)'}}>{product.name}</h2>
                  <p style={{color: 'var(--text-secondary)', lineHeight: 1.65}}>{product.description}</p>
                  <ul style={{color: 'var(--text-tertiary)', lineHeight: 1.8, paddingLeft: '1.2rem'}}>
                    {product.specs.map((spec) => <li key={spec}>{spec}</li>)}
                  </ul>
                  <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem'}}>
                    <strong style={{fontSize: '1.35rem', color: 'var(--text-primary)'}}>{money(product.price)}</strong>
                    <button className="btn btn-primary" onClick={() => addToCart(product)} style={{padding: '0.8rem 1rem'}}>Add to Cart</button>
                  </div>
                </div>
              </article>
            ))}
          </div>

          <aside className="cart-panel fade-in" aria-label="Cart and checkout">
            <h2 style={{fontSize: '1.8rem', color: 'var(--text-primary)', marginBottom: '1rem'}}>Cart</h2>
            {cart.length === 0 ? (
              <p style={{color: 'var(--text-secondary)', lineHeight: 1.6}}>Add gear to prepare a checkout-ready order.</p>
            ) : (
              <div style={{display: 'grid', gap: '1rem'}}>
                {cart.map((item) => (
                  <div key={item.id} style={{display: 'grid', gap: '0.65rem', paddingBottom: '1rem', borderBottom: '1px solid var(--border-subtle)'}}>
                    <div style={{display: 'flex', justifyContent: 'space-between', gap: '1rem'}}>
                      <strong style={{color: 'var(--text-primary)'}}>{item.name}</strong>
                      <span style={{color: 'var(--text-secondary)'}}>{money(item.price * item.quantity)}</span>
                    </div>
                    <div style={{display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
                      <button className="btn btn-secondary" onClick={() => updateQuantity(item.id, -1)} style={{padding: '0.45rem 0.7rem'}}>-</button>
                      <span style={{color: 'var(--text-primary)', minWidth: '2rem', textAlign: 'center'}}>{item.quantity}</span>
                      <button className="btn btn-secondary" onClick={() => updateQuantity(item.id, 1)} style={{padding: '0.45rem 0.7rem'}}>+</button>
                    </div>
                  </div>
                ))}
              </div>
            )}

            <div style={{display: 'grid', gap: '0.7rem', marginTop: '1.5rem', color: 'var(--text-secondary)'}}>
              <div style={{display: 'flex', justifyContent: 'space-between'}}><span>Subtotal</span><span>{money(subtotal)}</span></div>
              <div style={{display: 'flex', justifyContent: 'space-between'}}><span>Estimated tax</span><span>{money(tax)}</span></div>
              <div style={{display: 'flex', justifyContent: 'space-between', color: 'var(--text-primary)', fontSize: '1.35rem', fontWeight: 800}}><span>Total</span><span>{money(total)}</span></div>
            </div>

            <form style={{display: 'grid', gap: '0.85rem', marginTop: '1.5rem'}}>
              <input placeholder="Email" type="email" style={{padding: '0.9rem', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', background: 'rgba(255,255,255,0.05)', color: 'var(--text-primary)'}} />
              <input placeholder="Shipping postal code" style={{padding: '0.9rem', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', background: 'rgba(255,255,255,0.05)', color: 'var(--text-primary)'}} />
              <button type="button" className="btn btn-primary" disabled={cart.length === 0} style={{opacity: cart.length === 0 ? 0.55 : 1}}>
                Continue to Checkout
              </button>
            </form>
          </aside>
        </div>
      </section>
      </FlowSection>
    </FlowArt>
  );
}

// Export all components
window.AboutPage = AboutPage;
window.CoursesPage = CoursesPage;
window.BeginnerCoursePage = BeginnerCoursePage;
window.IntermediateCoursePage = IntermediateCoursePage;
window.ProfessionalCoursePage = ProfessionalCoursePage;
window.ContactPage = ContactPage;
window.PortfolioPage = PortfolioPage;
window.ShopPage = ShopPage;