// Mission — dark section, editorial type + photo placeholder
function Mission() {
  return (
    <section data-mf="section" id="about-us" style={{
      background: '#0A0608',
      padding: '120px 44px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div data-mf="mission-inner" style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center',
      }}>
        <div>
          <SectionMark num="01" tone="red">About Master Filmmaker</SectionMark>
          <h2 style={{
            fontFamily: 'Poppins', fontWeight: 800,
            fontSize: 'clamp(40px, 4.8vw, 72px)',
            lineHeight: 1.0, letterSpacing: '-0.025em',
            margin: '24px 0 28px', color: '#fff',
          }}>
            Our mission is <span style={{ color: '#E8123C' }}>simple</span>.
          </h2>
          <p style={{
            fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)',
            fontWeight: 400, margin: '0 0 22px',
          }}>
            To help video &amp; creative agency owners around the world
            <b style={{ color: '#fff' }}> reach more clients, tell more stories,</b> and build the business of their dreams
            doing what they <b style={{ color: '#fff' }}>love</b>.
          </p>
          <p style={{
            fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.62)',
            margin: '0 0 22px',
          }}>
            We know we'll be successful when <b style={{ color: '#fff' }}>every</b> video agency owner
            can <b style={{ color: '#fff' }}>provide abundantly</b> for their family, build a beautiful business
            doing what they love, and consistently deliver life-changing video services to their clients.
          </p>
          <div style={{
            marginTop: 36, padding: '22px 28px',
            borderLeft: '3px solid #E8123C',
            background: 'linear-gradient(90deg, rgba(232,18,60,0.12) 0%, transparent 100%)',
            borderRadius: '4px 20px 20px 4px',
          }}>
            <div style={{
              fontFamily: 'Poppins', fontWeight: 800, fontSize: 24,
              letterSpacing: '-0.015em', color: '#fff',
            }}>
              At the end of the day, it's not about us.
              <span style={{ color: '#E8123C' }}> It's about you.</span>
            </div>
          </div>
        </div>
        {/* Mission photo — real asset from masterfilmmaker.com */}
        <div style={{
          position: 'relative', aspectRatio: '1140/814',
          borderRadius: 28, overflow: 'hidden',
          border: '1px solid rgba(255,255,255,0.08)',
          boxShadow: '0 24px 60px rgba(0,0,0,0.45)',
        }}>
          <img
            src="./assets/mission-photo.webp"
            alt="Master Filmmaker team on set during an agency engagement"
            width={1200} height={857} loading="lazy" decoding="async"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
      </div>
    </section>
  );
}
window.Mission = Mission;