/* global React, IOSDevice, MobileHome, MobileNowPlaying, MobileSearch */

const MobilePage = () => {
  return (
    <div className="mobile-page" data-screen-label="07 Mobile">
      <div style={{ maxWidth: 1300, margin: "0 auto" }}>
        <div className="section-title" style={{ marginBottom: 8 }}>
          <h2>Mobile · iOS Companion</h2>
          <span className="see-all">Edge-to-edge, glass nav, native motion</span>
        </div>
        <p style={{ color: "var(--ink-2)", fontSize: 14, maxWidth: 640, margin: 0 }}>
          The Viral Tension mobile experience. Cinematic edge-to-edge artwork, a frosted bottom navigation bar,
          and a now-playing screen that pulls you onto the stage.
        </p>
      </div>
      <div className="frames-grid">
        <div>
          <IOSDevice dark width={360} height={760}>
            <MobileHome />
          </IOSDevice>
          <div className="frame-label">Home</div>
        </div>
        <div>
          <IOSDevice dark width={360} height={760}>
            <MobileNowPlaying />
          </IOSDevice>
          <div className="frame-label">Now Playing</div>
        </div>
        <div>
          <IOSDevice dark width={360} height={760}>
            <MobileSearch />
          </IOSDevice>
          <div className="frame-label">Search</div>
        </div>
      </div>
    </div>
  );
};

window.MobilePage = MobilePage;